/**
 * TradesHistory Component
 * Displays history of closed paper trading positions
 */

interface Trade {
  id: string;
  symbol: string;
  direction: 'long' | 'short';
  lotSize: number;
  entryPrice: number;
  exitPrice: number;
  realizedPnl: number;
  realizedPnlPercent: number;
  closedAt: Date;
  closeReason?: string;
}

interface TradesHistoryProps {
  trades: Trade[];
  isLoading: boolean;
}

export default function TradesHistory({
  trades,
  isLoading,
}: TradesHistoryProps) {
  if (isLoading) {
    return (
      <div className="p-4 text-center">
        <div className="inline-block animate-spin rounded-full h-6 w-6 border-2 border-gray-600 border-t-blue-500"></div>
        <p className="text-sm text-gray-400 mt-2">Loading trades...</p>
      </div>
    );
  }

  if (trades.length === 0) {
    return (
      <div className="p-4 text-center">
        <p className="text-sm text-gray-400">No trade history</p>
      </div>
    );
  }

  return (
    <div className="divide-y divide-gray-700 max-h-[400px] overflow-y-auto">
      {trades.map((trade) => {
        const isProfitable = trade.realizedPnl >= 0;
        const closedDate = new Date(trade.closedAt);
        const formattedDate = closedDate.toLocaleDateString(undefined, {
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
        });

        return (
          <div key={trade.id} className="p-3 hover:bg-gray-800/50 transition-colors">
            {/* Header: Symbol and Direction */}
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <span className="text-white font-medium">{trade.symbol}</span>
                <span
                  className={`text-xs px-2 py-0.5 rounded ${
                    trade.direction === 'long'
                      ? 'bg-green-900/30 text-green-400'
                      : 'bg-red-900/30 text-red-400'
                  }`}
                >
                  {trade.direction.toUpperCase()}
                </span>
              </div>
              <span className="text-xs text-gray-500">{formattedDate}</span>
            </div>

            {/* Trade Details */}
            <div className="grid grid-cols-2 gap-2 text-xs mb-2">
              {/* Entry Price */}
              <div>
                <span className="text-gray-500">Entry:</span>
                <span className="ml-1 text-gray-300 font-mono">
                  ${trade.entryPrice.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 8,
                  })}
                </span>
              </div>

              {/* Exit Price */}
              <div>
                <span className="text-gray-500">Exit:</span>
                <span className="ml-1 text-gray-300 font-mono">
                  ${trade.exitPrice.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 8,
                  })}
                </span>
              </div>

              {/* Quantity */}
              <div>
                <span className="text-gray-500">Quantity:</span>
                <span className="ml-1 text-gray-300 font-mono">{trade.lotSize}</span>
              </div>

              {/* P&L */}
              <div>
                <span className="text-gray-500">P&L:</span>
                <span className={`ml-1 font-mono font-medium ${isProfitable ? 'text-green-400' : 'text-red-400'}`}>
                  {isProfitable ? '+' : ''}${trade.realizedPnl.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })}
                  <span className="ml-0.5">
                    ({isProfitable ? '+' : ''}{trade.realizedPnlPercent.toFixed(2)}%)
                  </span>
                </span>
              </div>
            </div>

            {/* Close Reason */}
            {trade.closeReason && (
              <div className="text-xs text-gray-500 mt-1">
                Reason: {trade.closeReason}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
