import type { Trade } from '../types';

interface TradeLogProps {
  trades: Trade[];
}

export function TradeLog({ trades }: TradeLogProps) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(value);
  };

  const formatTime = (timestamp: string) => {
    return new Date(timestamp).toLocaleString('en-US', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  // Show latest trades first
  const sortedTrades = [...trades].reverse();

  return (
    <div className="overflow-x-auto max-h-96">
      <table className="w-full text-sm">
        <thead className="sticky top-0 bg-surface-secondary">
          <tr className="border-b border-border">
            <th className="text-left py-2 px-2 font-medium text-text-secondary">Time</th>
            <th className="text-left py-2 px-2 font-medium text-text-secondary">Symbol</th>
            <th className="text-center py-2 px-2 font-medium text-text-secondary">Side</th>
            <th className="text-right py-2 px-2 font-medium text-text-secondary">Quantity</th>
            <th className="text-right py-2 px-2 font-medium text-text-secondary">Price</th>
            <th className="text-right py-2 px-2 font-medium text-text-secondary">Value</th>
            <th className="text-right py-2 px-2 font-medium text-text-secondary">Comm.</th>
            {trades.some(t => t.pnl !== undefined) && (
              <th className="text-right py-2 px-2 font-medium text-text-secondary">P&L</th>
            )}
          </tr>
        </thead>
        <tbody>
          {sortedTrades.map((trade) => {
            const tradeValue = trade.quantity * trade.price;
            return (
              <tr key={trade.id} className="border-b border-border hover:bg-surface-tertiary">
                <td className="py-2 px-2 text-text-muted text-xs">
                  {formatTime(trade.timestamp)}
                </td>
                <td className="py-2 px-2 font-medium text-text-primary">{trade.symbol}</td>
                <td className="text-center py-2 px-2">
                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded ${
                    trade.side === 'buy' 
                      ? 'bg-success/10 text-success' 
                      : 'bg-error/10 text-error'
                  }`}>
                    {trade.side.toUpperCase()}
                  </span>
                </td>
                <td className="text-right py-2 px-2 text-text-primary">
                  {trade.quantity.toLocaleString()}
                </td>
                <td className="text-right py-2 px-2 text-text-primary">
                  {formatCurrency(trade.price)}
                </td>
                <td className="text-right py-2 px-2 text-text-primary">
                  {formatCurrency(tradeValue)}
                </td>
                <td className="text-right py-2 px-2 text-text-muted">
                  {formatCurrency(trade.commission)}
                </td>
                {trade.pnl !== undefined && (
                  <td className={`text-right py-2 px-2 font-medium ${
                    trade.pnl >= 0 ? 'text-success' : 'text-error'
                  }`}>
                    {trade.pnl >= 0 ? '+' : ''}{formatCurrency(trade.pnl)}
                  </td>
                )}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}