import React from 'react';
import { Portfolio } from '../../types/financial';

interface PortfolioPanelProps {
  portfolio: Portfolio;
}

export const PortfolioPanel: React.FC<PortfolioPanelProps> = ({ portfolio }) => {
  const formatCurrency = (value: number) => {
    return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  };

  const totalGainPositive = portfolio.totalGain >= 0;
  const dayChangePositive = portfolio.dayChange >= 0;

  return (
    <div className="bg-[#111111] border border-[#2a2a2a] rounded-lg overflow-hidden my-4">
      {/* Header */}
      <div className="bg-[#1a1a1a] px-4 py-3 border-b border-[#2a2a2a]">
        <h3 className="text-lg font-mono font-bold text-[#e0e0e0]">Portfolio Summary</h3>
      </div>

      {/* Summary Stats */}
      <div className="p-4 space-y-4">
        {/* Total Value */}
        <div className="bg-[#1a1a1a] rounded-lg p-4">
          <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">Total Value</div>
          <div className="text-3xl font-mono font-bold text-[#e0e0e0]">
            {formatCurrency(portfolio.totalValue)}
          </div>
        </div>

        {/* Day Change */}
        <div className="bg-[#1a1a1a] rounded-lg p-4">
          <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">Today's Change</div>
          <div className={`text-2xl font-mono font-bold ${dayChangePositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
            {dayChangePositive ? '+' : ''}{formatCurrency(portfolio.dayChange)} ({dayChangePositive ? '+' : ''}{portfolio.dayChangePercent.toFixed(2)}%)
          </div>
        </div>

        {/* Total Gain */}
        <div className="bg-[#1a1a1a] rounded-lg p-4">
          <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">Total Gain/Loss</div>
          <div className={`text-2xl font-mono font-bold ${totalGainPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
            {totalGainPositive ? '+' : ''}{formatCurrency(portfolio.totalGain)} ({totalGainPositive ? '+' : ''}{portfolio.totalGainPercent.toFixed(2)}%)
          </div>
        </div>
      </div>

      {/* Holdings Table */}
      <div className="border-t border-[#2a2a2a]">
        <div className="px-4 py-3 bg-[#0a0a0a]">
          <h4 className="text-sm font-mono font-semibold text-[#e0e0e0]">Holdings ({portfolio.holdings.length})</h4>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm font-mono">
            <thead className="bg-[#1a1a1a] text-[10px] text-[#888888] uppercase tracking-wider">
              <tr>
                <th className="px-4 py-2 text-left">Symbol</th>
                <th className="px-4 py-2 text-right">Qty</th>
                <th className="px-4 py-2 text-right">Avg Cost</th>
                <th className="px-4 py-2 text-right">Current</th>
                <th className="px-4 py-2 text-right">Value</th>
                <th className="px-4 py-2 text-right">Gain/Loss</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#2a2a2a]">
              {portfolio.holdings.map((holding) => {
                const gainPositive = holding.gainLoss >= 0;
                return (
                  <tr key={holding.symbol} className="hover:bg-[#1a1a1a]">
                    <td className="px-4 py-3">
                      <div className="font-semibold text-[#e0e0e0]">{holding.symbol}</div>
                      <div className="text-[10px] text-[#888888]">{holding.name}</div>
                    </td>
                    <td className="px-4 py-3 text-right text-[#e0e0e0]">{holding.quantity}</td>
                    <td className="px-4 py-3 text-right text-[#e0e0e0]">{formatCurrency(holding.avgCost)}</td>
                    <td className="px-4 py-3 text-right text-[#e0e0e0]">{formatCurrency(holding.currentPrice)}</td>
                    <td className="px-4 py-3 text-right text-[#e0e0e0]">{formatCurrency(holding.currentValue)}</td>
                    <td className={`px-4 py-3 text-right font-semibold ${gainPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
                      {gainPositive ? '+' : ''}{formatCurrency(holding.gainLoss)}
                      <div className="text-[10px]">
                        ({gainPositive ? '+' : ''}{holding.gainLossPercent.toFixed(2)}%)
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};
