import { memo } from 'react';
import { ChevronDown, ChevronUp, TrendingUp, TrendingDown } from 'lucide-react';
interface TradeGroupHeaderProps {
symbol: string;
accountName: string;
isSold: boolean;
isExpanded: boolean;
netQuantity: number;
totalBuyQuantity: number;
totalSellQuantity: number;
totalBuyValue: number;
totalSellValue: number;
currentPrice: number;
realizedPnL: number;
realizedPnLPercent: number;
unrealizedPnL: number;
unrealizedPnLPercent: number;
xirr: number | null;
firstTradeDate: string;
lastTradeDate: string;
tradesCount: number;
onToggle: () => void;
formatDate: (date: string) => string;
formatCurrency: (amount: number) => string;
// For sold positions only
currentValueIfHeld?: number;
opportunityCost?: number;
opportunityCostPercent?: number;
}
// Memoized TradeGroupHeader component
export const TradeGroupHeader = memo(function TradeGroupHeader({
symbol,
accountName,
isSold,
isExpanded,
netQuantity,
totalBuyQuantity,
totalSellQuantity,
totalBuyValue,
totalSellValue,
currentPrice,
realizedPnL,
realizedPnLPercent,
unrealizedPnL,
unrealizedPnLPercent,
xirr,
firstTradeDate,
lastTradeDate,
tradesCount,
onToggle,
formatDate,
formatCurrency,
currentValueIfHeld,
opportunityCost,
opportunityCostPercent,
}: TradeGroupHeaderProps) {
return (
<div
onClick={onToggle}
className={`p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
isSold ? 'bg-gray-100' : ''
}`}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
{/* Symbol & Status */}
<div className="flex items-center gap-2 min-w-[180px]">
{isExpanded ? (
<ChevronUp className="h-5 w-5 text-gray-600" />
) : (
<ChevronDown className="h-5 w-5 text-gray-600" />
)}
<span className={`font-bold text-lg ${isSold ? 'text-gray-600' : 'text-gray-900'}`}>
{symbol}
</span>
{isSold && (
<span className="px-2 py-1 bg-gray-200 text-gray-800 text-xs rounded">
SOLD
</span>
)}
{!isSold && (
<span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">
ACTIVE
</span>
)}
</div>
{/* Account Name */}
<div className="text-sm text-gray-700 min-w-[120px]">
{accountName}
</div>
</div>
{/* Stats - Reorganized for better readability */}
<div className="flex items-center gap-6 text-sm">
{/* Current Price (Most Important) */}
<div className="text-right min-w-[100px]">
<div className="text-xs text-gray-700">Live Price</div>
<div className="font-bold text-lg text-gray-900">
{currentPrice > 0 ? formatCurrency(currentPrice) : 'N/A'}
</div>
{currentPrice > 0 && (
<span className="text-xs text-green-600">🔴 Live</span>
)}
</div>
{/* Net Quantity (for Active) / Sold Quantity (for Sold) */}
<div className="text-right min-w-[90px]">
<div className="text-xs text-gray-700">{isSold ? 'Sold Qty' : 'Net Qty'}</div>
<div className={`font-bold text-lg ${isSold ? 'text-gray-600' : 'text-blue-600'}`}>
{isSold ? totalSellQuantity.toFixed(2) : netQuantity.toFixed(2)}
</div>
</div>
{/* Current Value / Current Value If Held (Most Important Metric) */}
{!isSold && (
<div className="text-right min-w-[130px]">
<div className="text-xs text-gray-700">Current Value</div>
<div className="font-bold text-xl text-purple-600">
{formatCurrency(netQuantity * currentPrice)}
</div>
<div className="text-xs text-gray-700">
Invested: {formatCurrency(totalBuyValue)}
</div>
</div>
)}
{isSold && currentValueIfHeld !== undefined && currentPrice > 0 && (
<div className="text-right min-w-[130px]">
<div className="text-xs text-gray-700">Value If Held</div>
<div className="font-bold text-xl text-purple-600">
{formatCurrency(currentValueIfHeld)}
</div>
<div className="text-xs text-gray-700">
Sold At: {formatCurrency(totalSellValue)}
</div>
</div>
)}
{/* Realized P&L */}
<div className="text-right min-w-[120px]">
<div className="text-xs text-gray-700">Realized P&L</div>
<div className={`font-bold text-lg flex items-center justify-end gap-1 ${
realizedPnL >= 0 ? 'text-green-600' : 'text-red-600'
}`}>
{realizedPnL >= 0 ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
{formatCurrency(Math.abs(realizedPnL))}
</div>
{realizedPnLPercent !== 0 && (
<div className={`text-xs font-semibold ${
realizedPnL >= 0 ? 'text-green-600' : 'text-red-600'
}`}>
({realizedPnLPercent >= 0 ? '+' : ''}{realizedPnLPercent.toFixed(1)}%)
</div>
)}
</div>
{/* Unrealized P&L */}
{!isSold && (
<div className="text-right min-w-[120px]">
<div className="text-xs text-gray-700">Unrealized P&L</div>
<div className={`font-bold text-lg flex items-center justify-end gap-1 ${
unrealizedPnL >= 0 ? 'text-green-600' : 'text-red-600'
}`}>
{unrealizedPnL >= 0 ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
{formatCurrency(Math.abs(unrealizedPnL))}
</div>
{unrealizedPnLPercent !== 0 && (
<div className={`text-xs font-semibold ${
unrealizedPnL >= 0 ? 'text-green-600' : 'text-red-600'
}`}>
({unrealizedPnLPercent >= 0 ? '+' : ''}{unrealizedPnLPercent.toFixed(1)}%)
</div>
)}
</div>
)}
{/* XIRR */}
<div className="text-right min-w-[80px]">
<div className="text-xs text-gray-700">XIRR</div>
<div className={`font-bold text-lg ${
xirr !== null && xirr >= 0 ? 'text-green-600' : xirr !== null ? 'text-red-600' : 'text-gray-900'
}`}>
{xirr !== null ? `${xirr.toFixed(1)}%` : 'N/A'}
</div>
</div>
{/* Opportunity Cost (for sold positions only) */}
{isSold && opportunityCost !== undefined && opportunityCostPercent !== undefined && currentPrice > 0 && (
<div className="text-right min-w-[120px]">
<div className="text-xs text-gray-700">Opportunity</div>
<div className={`font-bold text-lg ${
opportunityCost >= 0 ? 'text-green-600' : 'text-orange-600'
}`}>
{opportunityCost >= 0 ? '+' : ''}{formatCurrency(opportunityCost)}
</div>
<div className={`text-xs font-semibold ${
opportunityCost >= 0 ? 'text-green-600' : 'text-orange-600'
}`}>
({opportunityCost >= 0 ? '+' : ''}{opportunityCostPercent.toFixed(1)}%)
</div>
</div>
)}
</div>
</div>
{/* Date Range & Trade Count */}
<div className="mt-3 text-xs text-gray-700 flex items-center gap-4">
<span>
📅 {formatDate(firstTradeDate)} → {formatDate(lastTradeDate)}
</span>
<span>
📊 {tradesCount} trade{tradesCount !== 1 ? 's' : ''}
</span>
</div>
</div>
);
});
