import type { Trade } from '../../lib/api'

interface Props {
  trades: Trade[]
}

export default function PnLSummary({ trades }: Props) {
  const closed = trades.filter((t) => t.status === 'closed' && t.pnl !== null)
  const totalPnl = closed.reduce((acc, t) => acc + (t.pnl ?? 0), 0)
  const winners = closed.filter((t) => (t.pnl ?? 0) > 0)
  const winRate = closed.length > 0 ? (winners.length / closed.length) * 100 : 0

  const stats = [
    {
      label: 'PnL Total',
      value: `${totalPnl >= 0 ? '+' : ''}${totalPnl.toFixed(2)}`,
      color: totalPnl >= 0 ? 'text-[#26a69a]' : 'text-[#ef5350]',
    },
    {
      label: 'Win Rate',
      value: `${winRate.toFixed(1)}%`,
      color: winRate >= 50 ? 'text-[#26a69a]' : 'text-[#ef5350]',
    },
    {
      label: 'Trades',
      value: closed.length.toString(),
      color: 'text-white',
    },
    {
      label: 'Ouverts',
      value: trades.filter((t) => t.status === 'open').length.toString(),
      color: 'text-[#6366f1]',
    },
  ]

  return (
    <div className="grid grid-cols-2 gap-3">
      {stats.map((s) => (
        <div key={s.label} className="bg-[#1a1d27] border border-[#2a2d3e] rounded-xl p-4">
          <div className="text-xs text-[#64748b] mb-1">{s.label}</div>
          <div className={`text-xl font-bold ${s.color}`}>{s.value}</div>
        </div>
      ))}
    </div>
  )
}