// ===================================================================
// ACCOUNT DETAIL VIEW - Detailed view for individual accounts
// ===================================================================
const { useState, useEffect, useRef } = React;

function AccountDetailView({ account, trades, onAddTrade, onDeleteTrade, onBack, onEdit, onDelete }) {
    const metrics = calculateMetrics(account);
    const size = parseFloat(account.accountSize);
    const balance = parseFloat(account.accountBalance);
    const profitLoss = parseFloat(metrics.overallProfit);
    const profitLossPercent = ((profitLoss / size) * 100).toFixed(1);
    const buffer = parseFloat(metrics.remainingLossAllowed);

    const [activeTab, setActiveTab] = useState('overview');
    const [showTradeForm, setShowTradeForm] = useState(false);
    const [tradeForm, setTradeForm] = useState({
        date: new Date().toISOString().split('T')[0],
        pnl: '',
        mood: 'Neutral',
        result: 'Win'
    });

    const chartRef = useRef(null);
    const chartInstanceRef = useRef(null);

    const handleTradeSubmit = (e) => {
        e.preventDefault();
        const pnlValue = parseFloat(tradeForm.pnl);
        const newTrade = {
            id: Date.now(),
            ...tradeForm,
            pnl: pnlValue,
            result: pnlValue >= 0 ? 'Win' : 'Loss'
        };
        onAddTrade(newTrade);
        setTradeForm({
            date: new Date().toISOString().split('T')[0],
            pnl: '',
            mood: 'Neutral',
            result: 'Win'
        });
        setShowTradeForm(false);
        window.toast.success('Trade logged successfully!');
    };

    const last30Days = new Date();
    last30Days.setDate(last30Days.getDate() - 30);

    const recentTrades = trades.filter(t => new Date(t.date) >= last30Days);
    const totalPnL = recentTrades.reduce((sum, t) => sum + t.pnl, 0);
    const wins = recentTrades.filter(t => t.result === 'Win').length;
    const winRate = recentTrades.length > 0 ? ((wins / recentTrades.length) * 100).toFixed(1) : 0;

    const formatCurrency = (value) => {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(Math.abs(value));
    };

    const formatCurrencyWithDecimals = (value) => {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(Math.abs(value));
    };

    // Chart creation effect
    useEffect(() => {
        if (activeTab === 'journal' && chartRef.current && trades.length > 0) {
            // Destroy existing chart
            if (chartInstanceRef.current) {
                chartInstanceRef.current.destroy();
            }

            // Sort trades by date (filter out invalid dates)
            const sortedTrades = [...trades]
                .filter(trade => trade && trade.date && !isNaN(new Date(trade.date).getTime()))
                .sort((a, b) => new Date(a.date) - new Date(b.date));

            // Skip chart if no valid trades
            if (sortedTrades.length === 0) {
                return;
            }

            // Calculate cumulative balance over time
            let cumulativeBalance = size;
            const startDate = account.challengeStartDate || sortedTrades[0].date;
            const chartData = [
                { date: startDate, balance: size, pnl: 0 }
            ];

            sortedTrades.forEach(trade => {
                const tradePnl = parseFloat(trade.pnl) || 0;
                cumulativeBalance += tradePnl;
                chartData.push({
                    date: trade.date,
                    balance: cumulativeBalance,
                    pnl: tradePnl
                });
            });

            // Need at least 2 data points for chart
            if (chartData.length < 2) {
                return;
            }

            // Create gradient for profit/loss zones
            const ctx = chartRef.current.getContext('2d');

            // Find min and max balance for gradient calculation
            const balances = chartData.map(d => d.balance);
            const minBalance = Math.min(...balances);
            const maxBalance = Math.max(...balances);

            // Calculate gradient based on account size position
            const gradient = ctx.createLinearGradient(0, 0, 0, 400);

            // If all values are above starting size, use green
            if (minBalance >= size) {
                gradient.addColorStop(0, 'rgba(16, 185, 129, 0.3)');
                gradient.addColorStop(1, 'rgba(16, 185, 129, 0.05)');
            }
            // If all values are below starting size, use red
            else if (maxBalance <= size) {
                gradient.addColorStop(0, 'rgba(239, 68, 68, 0.3)');
                gradient.addColorStop(1, 'rgba(239, 68, 68, 0.05)');
            }
            // Mixed: calculate where the break-even line is
            else {
                const range = maxBalance - minBalance;
                const breakEvenPosition = (maxBalance - size) / range;

                // Clamp helper to keep values in valid 0-1 range
                const clamp = (val) => Math.max(0, Math.min(1, val));

                // Green zone (profit)
                gradient.addColorStop(0, 'rgba(16, 185, 129, 0.3)');
                gradient.addColorStop(clamp(breakEvenPosition - 0.05), 'rgba(16, 185, 129, 0.1)');

                // Transition
                gradient.addColorStop(clamp(breakEvenPosition), 'rgba(100, 100, 100, 0.05)');

                // Red zone (loss)
                gradient.addColorStop(clamp(breakEvenPosition + 0.05), 'rgba(239, 68, 68, 0.1)');
                gradient.addColorStop(1, 'rgba(239, 68, 68, 0.3)');
            }

            // Determine border color based on current balance
            const currentBalance = chartData[chartData.length - 1].balance;
            const borderColor = currentBalance >= size ? '#10b981' : '#ef4444';
            const pointColor = currentBalance >= size ? '#10b981' : '#ef4444';

            chartInstanceRef.current = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: chartData.map(d => {
                        const dateObj = new Date(d.date);
                        return !isNaN(dateObj.getTime())
                            ? dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
                            : 'Invalid Date';
                    }),
                    datasets: [{
                        label: 'Account Balance',
                        data: chartData.map(d => d.balance),
                        borderColor: borderColor,
                        backgroundColor: gradient,
                        borderWidth: 2,
                        fill: true,
                        tension: 0.3,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        pointBackgroundColor: pointColor,
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        segment: {
                            borderColor: (ctx) => {
                                // Change line color based on position relative to starting size
                                const current = ctx.p1.parsed.y;
                                return current >= size ? '#10b981' : '#ef4444';
                            }
                        }
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                font: { size: 12, weight: '600' },
                                color: '#475569',
                                padding: 15
                            }
                        },
                        annotation: {
                            annotations: {
                                breakEvenLine: {
                                    type: 'line',
                                    yMin: size,
                                    yMax: size,
                                    borderColor: '#94a3b8',
                                    borderWidth: 2,
                                    borderDash: [6, 6],
                                    label: {
                                        display: true,
                                        content: 'Break Even',
                                        position: 'end',
                                        backgroundColor: '#94a3b8',
                                        color: '#fff',
                                        font: { size: 10, weight: 'bold' },
                                        padding: 4
                                    }
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: '#1e293b',
                            padding: 12,
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            borderColor: '#334155',
                            borderWidth: 1,
                            displayColors: false,
                            callbacks: {
                                label: function(context) {
                                    return `Balance: $${formatCurrency(context.parsed.y)}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: '#e2e8f0',
                                drawBorder: false
                            },
                            ticks: {
                                callback: function(value) {
                                    return '$' + formatCurrency(value);
                                },
                                color: '#64748b',
                                font: { size: 11 }
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                color: '#64748b',
                                font: { size: 11 },
                                maxRotation: 45,
                                minRotation: 0
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        }

        // Cleanup
        return () => {
            if (chartInstanceRef.current) {
                chartInstanceRef.current.destroy();
            }
        };
    }, [activeTab, trades, size, account.challengeStartDate]);

    return (
        <div className="min-h-screen p-4 bg-slate-50 dark:bg-slate-900">
            {/* Back Button */}
            <div className="modern-card p-4 mb-4">
                <button onClick={onBack} className="flex items-center gap-2 text-slate-700 dark:text-slate-300 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-100 dark:text-slate-100 transition-colors font-medium">
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
                    </svg>
                    Back to Accounts
                </button>
            </div>

            {/* Account Header */}
            <div className="modern-card p-4 sm:p-6 mb-4">
                <div className="flex justify-between items-start mb-3 gap-2">
                    <div className="flex-1 min-w-0">
                        <h1 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-slate-100 leading-tight break-words line-clamp-2">
                            {account.accountName || `${(size/1000).toFixed(0)}k Challenge`}
                        </h1>
                        <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-400 truncate">{account.propFirmName}</p>
                    </div>
                    <div className="flex gap-1 flex-shrink-0">
                        <button
                            onClick={() => onEdit(account)}
                            className="tooltip p-1.5 text-slate-400 dark:text-slate-500 dark:text-slate-400 hover:text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-lg transition-colors"
                            data-tooltip="Edit"
                        >
                            <Icons.Pencil />
                        </button>
                        <button
                            onClick={() => onDelete(account.id)}
                            className="tooltip p-1.5 text-slate-400 dark:text-slate-500 dark:text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
                            data-tooltip="Delete"
                        >
                            <Icons.Trash />
                        </button>
                    </div>
                </div>

                {/* Primary Metrics */}
                <div className="grid grid-cols-2 gap-3">
                    <div className="metric-card p-4 text-center">
                        <p className="text-sm text-slate-600 dark:text-slate-400 mb-1">Current P&L</p>
                        <p className={`text-2xl font-bold ${profitLoss >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                            {profitLoss >= 0 ? '+' : '-'}${formatCurrency(profitLoss)}
                        </p>
                        <p className={`text-sm ${profitLoss >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                            {profitLossPercent}%
                        </p>
                    </div>
                    <div className="metric-card p-4 text-center">
                        <p className="text-sm text-slate-600 dark:text-slate-400 mb-1">Balance</p>
                        <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                            ${formatCurrency(balance)}
                        </p>
                        <p className="text-sm text-slate-600 dark:text-slate-400">
                            / ${formatCurrency(size)}
                        </p>
                    </div>
                </div>
            </div>

            {/* Key Metrics Cards */}
            <div className="grid grid-cols-2 gap-3 mb-4">
                <div className="modern-card p-4 border-l-4 border-emerald-500">
                    <div className="flex items-center gap-2 mb-2">
                        <Icons.TrendUp className="w-5 h-5 text-emerald-600" />
                        <span className="text-sm font-medium text-emerald-700">Daily Target</span>
                    </div>
                    <p className="text-2xl font-bold text-emerald-700">
                        ${formatCurrencyWithDecimals(metrics.dailyProfitNeeded)}
                    </p>
                    <p className="text-sm text-emerald-600 mt-1">
                        {metrics.daysRemaining} days remaining
                    </p>
                </div>

                <div className="modern-card p-4 border-l-4 border-slate-500">
                    <div className="flex items-center gap-2 mb-2">
                        <Icons.Shield className="w-5 h-5 text-slate-600 dark:text-slate-400" />
                        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">Trades Left</span>
                    </div>
                    <p className={`text-2xl font-bold ${
                        metrics.totalTradesBeforeBlowout <= 5 ? 'text-red-600' :
                        metrics.totalTradesBeforeBlowout <= 10 ? 'text-amber-600' :
                        'text-emerald-600'
                    }`}>
                        {metrics.totalTradesBeforeBlowout}
                    </p>
                    <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">
                        ${formatCurrency(buffer)} buffer
                    </p>
                </div>
            </div>

            {/* Tabs */}
            <div className="modern-card overflow-hidden">
                <div className="flex border-b border-slate-200 dark:border-slate-700">
                    <button
                        onClick={() => setActiveTab('overview')}
                        className={`flex-1 py-3 px-2 sm:px-4 font-semibold text-xs sm:text-sm flex items-center justify-center gap-1 sm:gap-2 transition-all ${
                            activeTab === 'overview' ? 'tab-active' : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700'
                        }`}
                    >
                        <Icons.ChartBar /> <span className="whitespace-nowrap">Overview</span>
                    </button>
                    <button
                        onClick={() => setActiveTab('risk')}
                        className={`flex-1 py-3 px-2 sm:px-4 font-semibold text-xs sm:text-sm flex items-center justify-center gap-1 sm:gap-2 transition-all ${
                            activeTab === 'risk' ? 'tab-active' : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700'
                        }`}
                    >
                        <Icons.Warning /> <span className="whitespace-nowrap">Risk</span>
                    </button>
                    <button
                        onClick={() => setActiveTab('journal')}
                        className={`flex-1 py-3 px-2 sm:px-4 font-semibold text-xs sm:text-sm flex items-center justify-center gap-1 sm:gap-2 transition-all ${
                            activeTab === 'journal' ? 'tab-active' : 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700'
                        }`}
                    >
                        <Icons.Clipboard /> <span className="whitespace-nowrap">Journal</span>
                    </button>
                </div>

                <div className="p-6">
                    {/* Overview Tab */}
                    {activeTab === 'overview' && (
                        <div className="space-y-4">
                            <h2 className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-4">Account Overview</h2>

                            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <div className="metric-card p-4 text-center">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Balance</p>
                                    <p className="text-xl font-bold text-slate-800 dark:text-slate-100">
                                        ${formatCurrency(balance)}
                                    </p>
                                    <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                        / ${formatCurrency(size)}
                                    </p>
                                </div>

                                <div className="metric-card p-4 text-center">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">P/L</p>
                                    <p className={`text-xl font-bold ${profitLoss >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                                        {profitLossPercent}%
                                    </p>
                                    <p className={`text-xs ${profitLoss >= 0 ? 'text-emerald-600' : 'text-red-600'} mt-1`}>
                                        {profitLoss >= 0 ? '+' : '-'}${formatCurrency(profitLoss)}
                                    </p>
                                </div>

                                <div className="metric-card p-4 text-center">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Target</p>
                                    <p className="text-xl font-bold text-slate-800 dark:text-slate-100">
                                        ${formatCurrency(metrics.neededToPass)}
                                    </p>
                                    <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                        left to pass
                                    </p>
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-3">
                                <div className="metric-card p-4">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Days Elapsed</p>
                                    <p className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                                        {metrics.daysElapsed}
                                    </p>
                                    <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">days passed</p>
                                </div>

                                <div className="metric-card p-4">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Days Left</p>
                                    <p className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                                        {metrics.daysRemaining}
                                    </p>
                                    <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">to complete</p>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Risk Tab */}
                    {activeTab === 'risk' && (
                        <div className="space-y-4">
                            <h2 className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-4">Risk Management</h2>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div className="metric-card p-4">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Risk Per Trade</p>
                                    <p className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                                        ${formatCurrencyWithDecimals(metrics.riskPerTradeAmount)}
                                    </p>
                                    <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
                                        {account.riskPerTrade}% of balance
                                    </p>
                                </div>

                                <div className="metric-card p-4">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Daily Need</p>
                                    <p className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                                        ${formatCurrencyWithDecimals(metrics.dailyProfitNeeded)}
                                    </p>
                                    <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">per day</p>
                                </div>

                                <div className="metric-card p-4">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Max Drawdown</p>
                                    <p className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                                        {account.maxDrawdownLevel}%
                                    </p>
                                    <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 capitalize">
                                        {account.maxDrawdownType}
                                    </p>
                                    <p className="text-xs text-slate-500 dark:text-slate-400">
                                        ${formatCurrencyWithDecimals(metrics.maxDrawdownAmount)}
                                    </p>
                                </div>

                                <div className="metric-card p-4">
                                    <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">Daily DD</p>
                                    <p className="text-2xl font-bold text-slate-800 dark:text-slate-100">
                                        {account.dailyDrawdownPercent}%
                                    </p>
                                    <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">max per day</p>
                                </div>
                            </div>

                            <div className={`p-4 rounded-lg border-l-4 ${
                                metrics.totalTradesBeforeBlowout <= 5 ? 'bg-red-50 border-red-500' :
                                metrics.totalTradesBeforeBlowout <= 10 ? 'bg-amber-50 border-amber-500' :
                                'bg-emerald-50 border-emerald-500'
                            }`}>
                                <h3 className="font-bold text-slate-800 dark:text-slate-100 mb-2">Risk Assessment</h3>
                                <p className={`text-2xl font-bold ${
                                    metrics.totalTradesBeforeBlowout <= 5 ? 'text-red-600' :
                                    metrics.totalTradesBeforeBlowout <= 10 ? 'text-amber-600' :
                                    'text-emerald-600'
                                }`}>
                                    {metrics.totalTradesBeforeBlowout} trades until drawdown limit
                                </p>
                                <p className="text-sm text-slate-600 dark:text-slate-400 mt-2">
                                    Remaining buffer: ${formatCurrencyWithDecimals(buffer)}
                                </p>
                            </div>
                        </div>
                    )}

                    {/* Journal Tab */}
                    {activeTab === 'journal' && (
                        <div className="space-y-4">
                            <div className="flex justify-between items-center mb-4">
                                <h2 className="text-xl font-bold text-slate-800 dark:text-slate-100">Trade Journal</h2>
                                <button
                                    onClick={() => setShowTradeForm(!showTradeForm)}
                                    className="btn-success px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2"
                                >
                                    <Icons.Plus className="w-4 h-4" />
                                    {showTradeForm ? 'Cancel' : 'Add Entry'}
                                </button>
                            </div>

                            {/* Performance Chart */}
                            {trades.length > 0 && (
                                <div className="metric-card p-4">
                                    <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Balance Over Time</h3>
                                    <div style={{ height: '250px' }}>
                                        <canvas ref={chartRef}></canvas>
                                    </div>
                                </div>
                            )}

                            {showTradeForm && (
                                <div className="metric-card p-4 border-2 border-emerald-200">
                                    <form onSubmit={handleTradeSubmit} className="space-y-3">
                                        <div className="grid grid-cols-2 gap-3">
                                            <div>
                                                <label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1">Date</label>
                                                <input
                                                    type="date"
                                                    value={tradeForm.date}
                                                    onChange={(e) => setTradeForm({...tradeForm, date: e.target.value})}
                                                    required
                                                    className="w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-xs font-medium text-slate-700 dark:text-slate-300 mb-1">P/L ($)</label>
                                                <input
                                                    type="number"
                                                    step="0.01"
                                                    value={tradeForm.pnl}
                                                    onChange={(e) => setTradeForm({...tradeForm, pnl: e.target.value})}
                                                    required
                                                    className="w-full px-3 py-2 text-sm border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                                    placeholder="Enter + or - amount"
                                                />
                                            </div>
                                        </div>
                                        <button
                                            type="submit"
                                            className="w-full btn-success py-2 rounded-lg font-semibold"
                                        >
                                            Save Entry & Update Balance
                                        </button>
                                    </form>
                                </div>
                            )}

                            {/* Summary Stats */}
                            {recentTrades.length > 0 && (
                                <div className="grid grid-cols-3 gap-2">
                                    <div className="metric-card p-3 text-center">
                                        <p className="text-xs text-slate-600 dark:text-slate-400">Total P/L</p>
                                        <p className={`text-lg font-bold ${totalPnL >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                                            {totalPnL >= 0 ? '+' : '-'}${formatCurrency(totalPnL)}
                                        </p>
                                    </div>
                                    <div className="metric-card p-3 text-center">
                                        <p className="text-xs text-slate-600 dark:text-slate-400">Win Rate</p>
                                        <p className="text-lg font-bold text-slate-900 dark:text-slate-100">{winRate}%</p>
                                    </div>
                                    <div className="metric-card p-3 text-center">
                                        <p className="text-xs text-slate-600 dark:text-slate-400">Trades</p>
                                        <p className="text-lg font-bold text-slate-800 dark:text-slate-100">{recentTrades.length}</p>
                                    </div>
                                </div>
                            )}

                            {/* Trade History */}
                            <div className="space-y-2">
                                {trades.length === 0 ? (
                                    <div className="metric-card p-8 text-center">
                                        <p className="text-slate-500 dark:text-slate-400">No trades recorded yet</p>
                                        <p className="text-sm text-slate-400 mt-2">Add your first entry to start tracking</p>
                                    </div>
                                ) : (
                                    <div className="space-y-2 max-h-96 overflow-y-auto">
                                        {[...trades].sort((a, b) => new Date(b.date) - new Date(a.date)).map(trade => (
                                            <div key={trade.id} className="metric-card p-3 flex items-center justify-between">
                                                <div className="flex-1">
                                                    <p className="text-sm font-medium text-slate-800 dark:text-slate-100">
                                                        {new Date(trade.date).toLocaleDateString()}
                                                    </p>
                                                    <p className={`text-lg font-bold ${trade.pnl >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                                                        {trade.pnl >= 0 ? '+' : '-'}${formatCurrencyWithDecimals(trade.pnl)}
                                                    </p>
                                                </div>
                                                <button
                                                    onClick={() => onDeleteTrade(trade.id)}
                                                    className="p-2 text-slate-400 hover:text-red-500 transition-colors"
                                                >
                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                                        <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}