"use client"

import { useState } from "react"
import styles from "./recent-trade.module.scss"
import { FaLongArrowAltUp, FaLongArrowAltDown } from "react-icons/fa"
import TradeDetails from "@/components/dashboard/Modals/trade_details"

interface Trade {
  id?: string | number
  pair: string
  leverage: string | number
  type: "Buy" | "Sell" | string
  duration: string
  returnPercentage: number
  win: boolean
  amount: number
  status: "Expired" | "Recent" | "Ongoing" | string
  createdAt?: string
}

interface AdminRecentTradeProps {
  trade: Trade
}

const AdminRecentTrade: React.FC<AdminRecentTradeProps> = ({ trade }) => {
  const {
    pair,
    leverage,
    type,
    duration,
    returnPercentage,
    win,
    amount,
    status,
    createdAt,
  } = trade

  const [showTradeModal, setShowTradeModal] = useState(false)

  const toggleTradeModal = () => setShowTradeModal((prev) => !prev)

  const formattedAmount = `₦${Number(amount || 0).toLocaleString("en-NG", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`

  const formattedDate = createdAt
    ? new Date(createdAt).toLocaleDateString("en-GB", {
        day: "numeric",
        month: "short",
        year: "numeric",
      })
    : "17th October, 2024"

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

      <div
        onClick={toggleTradeModal}
        className={styles["recent__trade"]}
        role="button"
        tabIndex={0}
      >
        {/* Trade Pair + Leverage */}
        <div className={styles["recent__trade--details"]}>
          <h2>
            {win ? (
              <FaLongArrowAltUp color="#2EAB5B" />
            ) : (
              <FaLongArrowAltDown color="#721C23" />
            )}
            {pair}
          </h2>
          <h3>Leverage: {leverage}</h3>
          <h3>{duration} Trade</h3>
        </div>

        {/* Amount + Type */}
        <div className={styles["recent__trade--amount"]}>
          <h2>{formattedAmount}</h2>
          <span
            className={
              type.toLowerCase() === "buy"
                ? styles["recent__trade--amount--buy"]
                : styles["recent__trade--amount--sell"]
            }
          >
            {type} Trade
          </span>
        </div>

        {/* Status Section */}
        <div className={styles["recent__trade--status"]}>
          <div className={styles["recent__trade--status--status"]}>
            <div
              className={
                status.toLowerCase() === "expired"
                  ? styles["recent__trade--status--status--expired"]
                  : status.toLowerCase() === "recent"
                  ? styles["recent__trade--status--status--recent"]
                  : styles["recent__trade--status--status--ongoing"]
              }
            >
              {status}
            </div>

            <div
              className={
                win
                  ? styles["recent__trade--status--status--win"]
                  : styles["recent__trade--status--status--loss"]
              }
            >
              {win ? "Win" : "Loss"}
            </div>

            <div
              className={
                win
                  ? styles["recent__trade--status--status--win"]
                  : styles["recent__trade--status--status--loss"]
              }
            >
              {win
                ? `+${returnPercentage.toFixed(2)}%`
                : `-${returnPercentage.toFixed(2)}%`}
            </div>
          </div>
          <small>Date: {formattedDate}</small>
        </div>
      </div>
    </>
  )
}

export default AdminRecentTrade