interface Position {
  symbol: string;
  quantity: number;
  averagePrice?: number;
  avgPrice?: number;
  currentPrice?: number;
  lastPrice?: number;
  realizedPnl?: number;
  unrealizedPnl?: number;
}

interface PositionsSummaryProps {
  openPositions: Position[];
  closedPositions: Position[];
  onExpand?: () => void;
}

export function PositionsSummary({ openPositions, closedPositions, onExpand }: PositionsSummaryProps) {
  const totalRealizedPnL = closedPositions.reduce((sum, p) => sum + (p.realizedPnl || 0), 0);
  const totalUnrealizedPnL = openPositions.reduce((sum, p) => {
    const quantity = p.quantity || 0;
    const avgPrice = p.averagePrice || p.avgPrice || 0;
    const currentPrice = p.currentPrice || p.lastPrice || avgPrice;
    return sum + ((currentPrice - avgPrice) * quantity);
  }, 0);
  const totalPnL = totalRealizedPnL + totalUnrealizedPnL;

  return (
    <div className="bg-surface-secondary rounded-lg border border-border p-4 h-full flex flex-col">
      <h3 className="text-sm font-medium text-text-primary mb-3">Positions Summary</h3>

      <div className="flex-1">
        {openPositions.length > 0 && (
        <div className="mb-3">
          <h4 className="text-xs font-medium text-text-secondary mb-2">Open Positions ({openPositions.length})</h4>
          <div className="space-y-1">
            {openPositions.slice(0, 3).map((position, index) => {
              const quantity = position.quantity || 0;
              const avgPrice = position.averagePrice || position.avgPrice || 0;
              const currentPrice = position.currentPrice || position.lastPrice || avgPrice;
              const side = quantity > 0 ? 'long' : 'short';
              const absQuantity = Math.abs(quantity);
              const pnl = (currentPrice - avgPrice) * quantity;
              const pnlPercent = avgPrice > 0 ? (pnl / (avgPrice * absQuantity)) * 100 : 0;

              return (
                <div key={index} className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-surface-tertiary transition-colors">
                  <div className="flex items-center space-x-2">
                    <span className="text-sm font-medium text-text-primary">{position.symbol}</span>
                    <span className={`text-xs px-1.5 py-0.5 rounded ${
                      side === 'long' ? 'bg-success/20 text-success' : 'bg-error/20 text-error'
                    }`}>
                      {side.toUpperCase()}
                    </span>
                    <span className="text-xs text-text-secondary">
                      {absQuantity} @ ${avgPrice.toFixed(2)}
                    </span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <span className="text-xs text-text-secondary">
                      ${currentPrice.toFixed(2)}
                    </span>
                    <span className={`text-xs font-medium ${pnl >= 0 ? 'text-success' : 'text-error'}`}>
                      {pnlPercent >= 0 ? '+' : ''}{pnlPercent.toFixed(1)}%
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {closedPositions.length > 0 && openPositions.length === 0 && (
        <div className="mb-3">
          <h4 className="text-xs font-medium text-text-secondary mb-2">
            Closed Positions ({closedPositions.length})
          </h4>
          <div className="space-y-1">
            {closedPositions.slice(0, 3).map((position, index) => (
              <div key={index} className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-surface-tertiary transition-colors">
                <span className="text-sm font-medium text-text-primary">{position.symbol}</span>
                <span className={`text-sm font-medium ${position.realizedPnl >= 0 ? 'text-success' : 'text-error'}`}>
                  ${position.realizedPnl.toFixed(2)}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

        {openPositions.length === 0 && closedPositions.length === 0 && (
          <p className="text-sm text-text-secondary text-center">No positions to display</p>
        )}
      </div>

      {/* Summary metrics at bottom - similar to performance metrics */}
      <div className="mt-3 pt-3 border-t border-border">
        <div className="grid grid-cols-3 gap-2 text-xs">
          <div className="text-center">
            <span className="text-text-secondary">Unrealized</span>
            <div className={`font-medium ${totalUnrealizedPnL >= 0 ? 'text-success' : 'text-error'}`}>
              ${totalUnrealizedPnL.toFixed(2)}
            </div>
          </div>
          
          <div className="text-center">
            <span className="text-text-secondary">Realized</span>
            <div className={`font-medium ${totalRealizedPnL >= 0 ? 'text-success' : 'text-error'}`}>
              ${totalRealizedPnL.toFixed(2)}
            </div>
          </div>
          
          <div className="text-center">
            <span className="text-text-secondary">Total P&L</span>
            <div className={`font-medium ${totalPnL >= 0 ? 'text-success' : 'text-error'}`}>
              ${totalPnL.toFixed(2)}
            </div>
          </div>
        </div>
        
        {((openPositions.length > 3) || 
          (closedPositions.length > 3 && openPositions.length === 0)) && onExpand && (
          <button
            onClick={onExpand}
            className="w-full text-xs text-primary-500 hover:text-primary-600 text-center pt-2 font-medium"
          >
            View all {openPositions.length + closedPositions.length} positions
          </button>
        )}
      </div>
    </div>
  );
}