/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import styles from './active-trades.module.scss'
import ActiveTrade from './ActiveTrade'
import { Link } from '@inertiajs/react'
import PageIntro from '../PageIntro'
import { useState } from 'react'
import NoResults from '../NoResults'

export interface Trade {
  id: number
  pair: string
  leverage: string
  type: string
  amount: number
  status: 'Active' | 'Expired'
  win: boolean
  duration: string
  returnPercentage: number
}

const ActiveTrades: React.FC = () => {
  const trades: Trade[] = [
    {
      id: 1,
      pair: 'USD/JPY',
      leverage: '1:40',
      type: 'Buy',
      amount: 1250,
      status: 'Expired',
      win: true,
      duration: '30 minutes',
      returnPercentage: 40,
    },
    {
      id: 2,
      pair: 'BTC/USD',
      leverage: '1:60',
      type: 'Sell',
      amount: 1750,
      status: 'Active',
      win: false,
      duration: '1 Hour',
      returnPercentage: 37,
    },
    {
      id: 3,
      pair: 'TSLA',
      leverage: '1:100',
      type: 'Buy',
      amount: 3500,
      status: 'Expired',
      win: true,
      duration: '24 Hours',
      returnPercentage: 26,
    },
  ]

  const [toggleActive, setToggleActive] = useState<number>(1)

  const toggleActiveState = (key: number) => {
    setToggleActive(key)
  }

  const activeTrades = trades.filter((t) => t.status === 'Active')
  const expiredTrades = trades.filter((t) => t.status === 'Expired')

  const tradesToDisplay = toggleActive === 1 ? activeTrades : expiredTrades

  return (
    <div className={styles['active__trades']}>
      {/* Header */}
      <div className={styles['active__trades__header']}>
        <PageIntro
          title="Recent Trading Activities"
          description="Gain insights into your recently performed trading activities"
        />

        {/* Tabs */}
        <div className={styles['active__trades__tab']}>
          <div
            onClick={() => toggleActiveState(1)}
            className={
              toggleActive === 1
                ? styles['active__trades__tab--item--active']
                : styles['active__trades__tab--item']
            }
          >
            Open Trades
          </div>

          <div
            onClick={() => toggleActiveState(2)}
            className={
              toggleActive === 2
                ? styles['active__trades__tab--item--active']
                : styles['active__trades__tab--item']
            }
          >
            Closed Trades
          </div>
        </div>
      </div>

      {/* Table Header */}
      <div className={styles['active__trades__table']}>
        <span>Details</span>
        <span>Amount</span>
        <span>Status</span>
      </div>

      {/* Trades */}
      <div className={styles['active__trades__children']}>
        {tradesToDisplay.length === 0 ? (
          <div style={{ marginBottom: '1rem' }}>
            <NoResults
              title="No Trade History"
              description="Oops! It seems you are yet to make any trade"
            />
          </div>
        ) : (
          tradesToDisplay.map((trade: any) => (
            <ActiveTrade key={trade.id} trade={trade} />
          ))
        )}
      </div>

      {/* See All */}
      {trades.length > 0 && (
        <div
          style={{
            display: 'inline-block',
            marginTop: '.5rem',
            marginBottom: '.3rem',
          }}
        >
          <Link href="/dashboard/trade?page=latest-trades">See all trades</Link>
        </div>
      )}
    </div>
  )
}

export default ActiveTrades