import { Position } from '../types';
import { cn } from '../lib/utils';

interface PositionsTableProps {
  positions: Position[];
  priceFlash: { [key: string]: 'up' | 'down' | null };
  className?: string;
}

export const PositionsTable = ({ positions, priceFlash, className }: PositionsTableProps) => {
  return (
    <div className={cn('glassmorphism rounded-xl p-6', className)}>
      <h3 className="text-lg font-semibold text-foreground mb-4">Active Positions</h3>
      
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Symbol</th>
              <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Type</th>
              <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Leverage</th>
              <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Entry Price</th>
              <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Mark Price</th>
              <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">P&L ($)</th>
              <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">P&L (%)</th>
              <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Size</th>
            </tr>
          </thead>
          <tbody>
            {positions.map((position) => {
              const isPositive = position.pnlDollars >= 0;
              const flashClass = priceFlash[position.id] === 'up' ? 'animate-flash-green' : 
                                 priceFlash[position.id] === 'down' ? 'animate-flash-red' : '';
              
              return (
                <tr 
                  key={position.id}
                  className={cn(
                    'border-b border-border/50 hover:bg-accent/30 transition-colors',
                    flashClass
                  )}
                >
                  <td className="py-3 px-4">
                    <span className="font-medium text-foreground">{position.symbol}</span>
                  </td>
                  <td className="py-3 px-4">
                    <span className={cn(
                      'px-2 py-1 rounded text-xs font-bold',
                      position.type === 'LONG' 
                        ? 'bg-green-500/20 text-green-500' 
                        : 'bg-red-500/20 text-red-500'
                    )}>
                      {position.type}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-muted-foreground">{position.leverage}</td>
                  <td className="py-3 px-4 text-right font-mono text-foreground">
                    ${position.entryPrice.toLocaleString()}
                  </td>
                  <td className={cn(
                    'py-3 px-4 text-right font-mono',
                    priceFlash[position.id] === 'up' ? 'text-green-500' : 
                    priceFlash[position.id] === 'down' ? 'text-red-500' : 'text-foreground'
                  )}>
                    ${position.markPrice.toLocaleString()}
                  </td>
                  <td className={cn(
                    'py-3 px-4 text-right font-mono font-medium',
                    isPositive ? 'text-green-500' : 'text-red-500'
                  )}>
                    {isPositive ? '+' : ''}${position.pnlDollars.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </td>
                  <td className={cn(
                    'py-3 px-4 text-right font-mono font-medium',
                    isPositive ? 'text-green-500' : 'text-red-500'
                  )}>
                    {isPositive ? '+' : ''}{position.pnlPercent.toFixed(2)}%
                  </td>
                  <td className="py-3 px-4 text-right text-muted-foreground">{position.size}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};