'use client'

import { useTranslations } from 'next-intl'
import type { BotTrade } from '@/types'
import Badge from '@/components/ui/Badge'
import { formatPrice, formatHold } from '@/lib/utils'

const MOCK_TRADES: BotTrade[] = [
  {
    id: 1,
    asset: 'BTC',
    side: 'long',
    entry_price: 92800,
    exit_price: 95100,
    pnl_usd: 2300,
    hold_seconds: 52 * 60,
    trigger_post_id: 1,
    opened_at: new Date(Date.now() - 1000 * 60 * 80).toISOString(),
    closed_at: new Date(Date.now() - 1000 * 60 * 28).toISOString(),
  },
  {
    id: 2,
    asset: 'ETH',
    side: 'short',
    entry_price: 1920,
    exit_price: 1847,
    pnl_usd: 1460,
    hold_seconds: 34 * 60,
    trigger_post_id: 2,
    opened_at: new Date(Date.now() - 1000 * 60 * 120).toISOString(),
    closed_at: new Date(Date.now() - 1000 * 60 * 86).toISOString(),
  },
  {
    id: 3,
    asset: 'BTC',
    side: 'long',
    entry_price: 91500,
    exit_price: 90200,
    pnl_usd: -1300,
    hold_seconds: 22 * 60,
    trigger_post_id: 4,
    opened_at: new Date(Date.now() - 1000 * 60 * 240).toISOString(),
    closed_at: new Date(Date.now() - 1000 * 60 * 218).toISOString(),
  },
  {
    id: 4,
    asset: 'ETH',
    side: 'long',
    entry_price: 1780,
    exit_price: 1840,
    pnl_usd: 900,
    hold_seconds: 8 * 60,
    trigger_post_id: 1,
    opened_at: new Date(Date.now() - 1000 * 60 * 360).toISOString(),
    closed_at: new Date(Date.now() - 1000 * 60 * 352).toISOString(),
  },
  {
    id: 5,
    asset: 'BTC',
    side: 'short',
    entry_price: 93400,
    exit_price: 91800,
    pnl_usd: 3200,
    hold_seconds: 18 * 60,
    trigger_post_id: 2,
    opened_at: new Date(Date.now() - 1000 * 60 * 500).toISOString(),
    closed_at: new Date(Date.now() - 1000 * 60 * 482).toISOString(),
  },
]

interface TradesTableProps {
  trades?: BotTrade[]
}

export default function TradesTable({ trades = MOCK_TRADES }: TradesTableProps) {
  const t = useTranslations('trades')

  return (
    <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] overflow-hidden">
      <div className="px-5 py-4 border-b border-[#141414]">
        <p className="text-[13px] font-medium text-white">{t('title')}</p>
      </div>
      <table className="w-full">
        <thead>
          <tr className="bg-[#050505]">
            {[
              t('asset'),
              t('side'),
              t('entry'),
              t('exit'),
              t('pnl'),
              t('hold'),
              t('trigger'),
            ].map((col) => (
              <th
                key={col}
                className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-[#555555] font-medium"
              >
                {col}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {trades.map((trade) => (
            <tr
              key={trade.id}
              className="border-b border-[#141414] hover:bg-[#0d0d0d] transition-colors"
            >
              <td className="px-5 py-3.5">
                <span className="text-[13px] font-medium text-white">{trade.asset}</span>
              </td>
              <td className="px-5 py-3.5">
                <Badge variant={trade.side} />
              </td>
              <td className="px-5 py-3.5">
                <span className="text-[13px] text-[#e2e8f0]">{formatPrice(trade.entry_price)}</span>
              </td>
              <td className="px-5 py-3.5">
                <span className="text-[13px] text-[#e2e8f0]">{formatPrice(trade.exit_price)}</span>
              </td>
              <td className="px-5 py-3.5">
                <span
                  className={`text-[13px] font-medium ${
                    trade.pnl_usd >= 0 ? 'text-[#4ade80]' : 'text-[#ef4444]'
                  }`}
                >
                  {trade.pnl_usd >= 0 ? '+' : ''}${trade.pnl_usd.toLocaleString()}
                </span>
              </td>
              <td className="px-5 py-3.5">
                <span className="text-[13px] text-[#555555]">{formatHold(trade.hold_seconds)}</span>
              </td>
              <td className="px-5 py-3.5">
                <span className="text-[12px] text-[#818cf8] hover:text-[#a5b4fc] cursor-pointer">
                  #{trade.trigger_post_id}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export { MOCK_TRADES }