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

import styles from './active-trade.module.scss'
import { FaLongArrowAltUp, FaLongArrowAltDown } from 'react-icons/fa'
import TradeDetails from '../../Modals/trade_details'
import { useState, useEffect } from 'react'
import { usePage } from '@inertiajs/react'
import { MdDeleteForever, MdModeEdit } from 'react-icons/md'
import DeleteConfirmationModal from '@/components/admin/Modals/DeleteConfirmationModal'

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

const ActiveTrade = ({ trade }: any) => {
  const { id, pair, leverage, type, duration, returnPercentage, win, amount, status } = trade

  const [tradeModal, setTradeModal] = useState(false)
  const [deleteModal, setDeleteModal] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)

  const { url } = usePage()

  useEffect(() => {
    const isUserAdmin = url.startsWith('/admin/users/')
    setIsAdmin(isUserAdmin)
  }, [url])

  const toggleTradeModal = () => setTradeModal((prev) => !prev)
  const toggleDeleteModal = () => setDeleteModal((prev) => !prev)

  return (
    <>
      {tradeModal && (
        <TradeDetails handleModalClose={toggleTradeModal} trade={trade} />
      )}

      {deleteModal && (
        <DeleteConfirmationModal
          closeModal={toggleDeleteModal}
          handleDelete={toggleDeleteModal}
          title="Delete User Trade"
          description={`You are about to delete a user trade with id ${id}. It will no longer be available to the user. Be sure before confirming.`} id={undefined}        />
      )}

      <div
        onClick={!isAdmin ? toggleTradeModal : undefined}
        className={styles['active__trade']}
      >
        <div className={styles['active__trade--details']}>
          <h2>
            {win ? (
              <FaLongArrowAltUp color="#2EAB5B" />
            ) : (
              <FaLongArrowAltDown color="#721C23" />
            )}
            {pair}
          </h2>
          <h3>Leverage: {leverage}</h3>
          <h3>{duration} Trade</h3>
        </div>

        <div className={styles['active__trade--amount']}>
          <h2>${amount.toLocaleString('en-US')}</h2>
          <span
            className={
              type === 'Buy'
                ? styles['active__trade--amount--buy']
                : styles['active__trade--amount--sell']
            }
          >
            {type} Trade
          </span>
        </div>

        <div className={styles['active__trade--status']}>
          {status === 'Expired' && <h3>${amount.toLocaleString('en-US')}</h3>}
          <div className={styles['active__trade--status--status']}>
            <div
              className={
                status === 'Expired'
                  ? styles['active__trade--status--status--expired']
                  : status === 'Active'
                  ? styles['active__trade--status--status--active']
                  : styles['active__trade--status--status--ongoing']
              }
            >
              {status}
            </div>

            {status === 'Expired' && (
              <>
                <div
                  className={
                    win
                      ? styles['active__trade--status--status--win']
                      : styles['active__trade--status--status--loss']
                  }
                >
                  {win ? 'Win' : 'Loss'}
                </div>

                <div
                  className={
                    win
                      ? styles['active__trade--status--status--win']
                      : styles['active__trade--status--status--loss']
                  }
                >
                  {win ? `+${returnPercentage}%` : `-${returnPercentage}%`}
                </div>
                <small>Date: 17th October, 2024</small>
              </>
            )}
          </div>
        </div>

        {isAdmin && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
            <span onClick={() => alert('Clicked Edit Trade')}>
              <MdModeEdit size="1.3rem" cursor="pointer" color="#2EAB5B" />
            </span>
            <span onClick={toggleDeleteModal}>
              <MdDeleteForever size="1.3rem" cursor="pointer" color="#F9D7DA" />
            </span>
          </div>
        )}
      </div>
    </>
  )
}

export default ActiveTrade