CrazeAnalytix/components/Dashboard.tsx

import React, { useState, useMemo, useEffect } from 'react';
import { AggregatedData, GrowthMetric, AdsRecord } from '../types';
import {
    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
    LineChart, Line, Legend
} from 'recharts';

interface DashboardProps {
    data: AggregatedData;
    contextData?: AggregatedData | null;
    adsData?: AdsRecord[];
}

const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];

// Reusable Expandable Card Component
const ExpandableCard: React.FC<{ title: string; children: React.ReactNode; className?: string }> = ({ title, children, className }) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => setIsExpanded(!isExpanded);

    // Auto-scroll to top of sticky filter bar when expanded
    useEffect(() => {
        if (isExpanded) {
            // Approximate height of the Header to scroll past (Logo + padding)
            // This ensures the Sticky FilterBar snaps to the top of the viewport
            const scrollTarget = 250;
            if (window.scrollY < scrollTarget) {
                window.scrollTo({ top: scrollTarget, behavior: 'smooth' });
            }
        }
    }, [isExpanded]);

    if (isExpanded) {
        return (
            <div className="fixed inset-0 z-50 bg-slate-950 px-3 pb-16 pt-16 md:px-6 md:pb-6 md:pt-32 flex flex-col animate-fade-in overflow-hidden">

                {/* Fixed Close Button */}
                <button
                    onClick={toggleExpand}
                    className="fixed top-3 right-3 z-[100] p-2 bg-red-600/90 hover:bg-red-500 active:bg-red-500 border border-red-400 rounded-full text-white transition-all shadow-2xl hover:scale-110 flex items-center gap-2 group"
                    title="Exit Fullscreen"
                >
                    <span className="text-xs font-bold hidden group-hover:inline pr-1">CLOSE</span>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </button>

                <div className="flex justify-between items-center mb-3 md:mb-4 border-b border-slate-800 pb-3 md:pb-4 shrink-0">
                    <h3 className="text-base md:text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3>
                </div>
                <div className="flex-1 overflow-auto bg-slate-900 rounded-xl p-3 md:p-6 border border-border custom-scrollbar scroll-touch">
                    {children}
                </div>
            </div>
        );
    }

    return (
        <div
            className={`bg-surface border border-border rounded-xl p-3 md:p-6 shadow-sm flex flex-col group relative transition-all duration-300 hover:shadow-primary/5 ${className}`}
        >
            <div className="flex justify-between items-start mb-3 md:mb-4">
                <h3 className="text-xs md:text-sm font-semibold text-slate-400 uppercase tracking-wide">{title}</h3>
                <button
                    onClick={toggleExpand}
                    className="opacity-100 md:opacity-0 md:group-hover:opacity-100 text-slate-500 hover:text-primary active:text-primary transition-opacity"
                    title="Expand to Fullscreen"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
                    </svg>
                </button>
            </div>
            <div className="flex-1 min-h-[200px] md:min-h-[250px] cursor-pointer" onClick={toggleExpand}>{children}</div>
        </div>
    );
};

const MultiYearKPICard: React.FC<{
    title: string;
    metric: 'sellOut' | 'units';
    data: AggregatedData['totalsByYear'];
    availableYears: string[];
    contextData?: AggregatedData['totalsByYear']; // Added context data
}> = ({ title, metric, data, availableYears, contextData }) => {
    // Sort years descending to show most recent first
    const sortedYears = [...availableYears].sort((a, b) => parseInt(b) - parseInt(a));

    const formatValue = (val: number) => {
        if (metric === 'sellOut') {
            if (metric === 'sellOut') {
                return `€${val.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
            }
        }
        return val.toLocaleString('de-DE');
    };

    // Determine title based on context
    const displayTitle = contextData ? `${title} (Selected Item)` : title;

    return (
        <div className="bg-gradient-to-br from-surface to-slate-900 border border-border rounded-xl p-3 md:p-6 flex flex-col justify-center">
            <h3 className="text-xs md:text-sm font-medium text-slate-400 mb-2 md:mb-3">{displayTitle}</h3>

            {sortedYears.length === 0 && <p className="text-3xl font-bold text-white">0</p>}

            {sortedYears.length > 0 && (
                <div className="space-y-4">
                    {sortedYears.map((year, index) => {
                        const currentValue = data[year] ? data[year][metric] : 0;
                        const contextValue = contextData && contextData[year] ? contextData[year][metric] : 0;

                        let growthElement = null;
                        let contextGrowthElement = null;

                        // Year-over-Year Growth comparison
                        if (index < sortedYears.length - 1) {
                            const prevYear = sortedYears[index + 1];

                            // Main Item Growth
                            const prevValue = data[prevYear] ? data[prevYear][metric] : 0;
                            if (prevValue > 0) {
                                const pct = ((currentValue - prevValue) / prevValue) * 100;
                                growthElement = (
                                    <span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                        {pct > 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
                                    </span>
                                );
                            }

                            // Context Item Growth (Product Line)
                            if (contextData) {
                                const prevContextValue = contextData[prevYear] ? contextData[prevYear][metric] : 0;
                                if (prevContextValue > 0) {
                                    const pct = ((contextValue - prevContextValue) / prevContextValue) * 100;
                                    contextGrowthElement = (
                                        <span className={`text-[10px] ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                            {pct > 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
                                        </span>
                                    );
                                }
                            }
                        }

                        return (
                            <div key={year} className="flex flex-col border-b border-slate-800 pb-2 last:border-0">
                                <div className="flex justify-between items-end">
                                    <div className="flex flex-col">
                                        <span className="text-xs text-slate-500 font-mono mb-0.5">{year}</span>
                                        <div className="flex items-center">
                                            <span className="text-xl font-bold text-slate-200 leading-none">
                                                {formatValue(currentValue)}
                                            </span>
                                            {growthElement}
                                        </div>
                                    </div>
                                </div>

                                {/* Context Row (Product Line Total) */}
                                {contextData && contextValue > 0 && (
                                    <div className="mt-1 flex flex-wrap items-center justify-between bg-slate-800/50 p-2 rounded text-xs">
                                        <span className="text-slate-400 mr-2">Total Product Line:</span>
                                        <div className="flex items-center gap-1">
                                            <span className="text-slate-300 font-medium">{formatValue(contextValue)}</span>
                                            {contextGrowthElement}
                                            {/* Share of Line % */}
                                            <span className="text-indigo-400 font-bold border-l border-slate-700 pl-2 ml-2 whitespace-nowrap">
                                                {((currentValue / contextValue) * 100).toFixed(0)}% Share
                                            </span>
                                        </div>
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
};

const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
        return (
            <div className="bg-slate-900 border border-border p-3 rounded shadow-xl text-sm max-w-xs z-50">
                <p className="font-bold text-slate-100 mb-2 border-b border-slate-700 pb-1">{label}</p>
                {payload.map((p: any) => (
                    <p key={p.name} className="text-slate-300 flex justify-between gap-4" style={{ color: p.color }}>
                        <span>{p.name}:</span>
                        <span className="font-mono font-semibold">
                            {p.name.toString().toLowerCase().includes('sell out') || p.name.toString().toLowerCase().includes('year') || typeof p.value === 'number' && p.value > 1000
                                ? `€${Number(p.value).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`
                                : Number(p.value).toLocaleString('de-DE')}
                        </span>
                    </p>
                ))}
            </div>
        );
    }
    return null;
};

// Tooltip specifically for the Seasonality Chart to show YoY %
const SeasonalityTooltip = ({ active, payload, label, metric }: any) => {
    if (active && payload && payload.length) {
        // Sort payload by year (name) to ensure we compare correctly
        const sortedPayload = [...payload].sort((a, b) => parseInt(a.name) - parseInt(b.name));
        const isCurrency = metric === 'sellOut';

        return (
            <div className="bg-slate-900 border border-border p-3 rounded shadow-xl text-sm max-w-xs z-50">
                <p className="font-bold text-slate-100 mb-2 border-b border-slate-700 pb-1">{label}</p>
                {sortedPayload.map((p: any, index: number) => {
                    let growthEl = null;
                    // If there is a previous year in the list, calculate % change
                    if (index > 0) {
                        const prev = sortedPayload[index - 1];
                        const prevVal = Number(prev.value);
                        const currVal = Number(p.value);
                        if (prevVal > 0) {
                            const pct = ((currVal - prevVal) / prevVal) * 100;
                            growthEl = (
                                <span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                    {pct > 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
                                </span>
                            );
                        }
                    }

                    return (
                        <div key={p.name} className="flex justify-between items-center gap-2 mb-1">
                            <span style={{ color: p.color }}>{p.name}:</span>
                            <div className="flex items-center">
                                <span className="font-mono font-semibold text-slate-200">
                                    {isCurrency ? '€' : ''}{Number(p.value).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                </span>
                                {growthEl}
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    }
    return null;
};

// Tooltip for the Top 10 Comparison Chart
const ComparisonTooltip = ({ active, payload, label, metric }: any) => {
    if (active && payload && payload.length) {
        // Sort payload by the dataKey (which usually contains the year, e.g., "2023_value" or just "2023")
        const sortedPayload = [...payload].sort((a, b) => {
            const yearA = parseInt(a.dataKey.split('_')[0]);
            const yearB = parseInt(b.dataKey.split('_')[0]);
            return yearA - yearB;
        });
        const isCurrency = metric === 'sellOut';

        return (
            <div className="bg-slate-900 border border-border p-3 rounded shadow-xl text-sm max-w-xs z-50">
                <p className="font-bold text-slate-100 mb-2 border-b border-slate-700 pb-1">{label}</p>
                {sortedPayload.map((p: any, index: number) => {
                    const year = p.dataKey.split('_')[0];
                    let growthEl = null;

                    if (index > 0) {
                        const prev = sortedPayload[index - 1];
                        const prevVal = Number(prev.value);
                        const currVal = Number(p.value);
                        if (prevVal > 0) {
                            const pct = ((currVal - prevVal) / prevVal) * 100;
                            growthEl = (
                                <span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                    {pct > 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
                                </span>
                            );
                        }
                    }

                    return (
                        <div key={year} className="flex justify-between items-center gap-2 mb-1">
                            <span style={{ color: p.color }}>{year}:</span>
                            <div className="flex items-center">
                                <span className="font-mono font-semibold text-slate-200">
                                    {isCurrency ? '€' : ''}{Number(p.value).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                </span>
                                {growthEl}
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    }
    return null;
};

const GrowthTable: React.FC<{
    title: string;
    data: GrowthMetric[];
    type: 'growth' | 'decline';
    periods: { current: string; previous: string };
}> = ({ title, data, type, periods }) => {
    const [sortConfig, setSortConfig] = useState<{ key: keyof GrowthMetric | null; direction: 'asc' | 'desc' }>({ key: null, direction: 'desc' });

    const sortedData = useMemo(() => {
        if (!sortConfig.key) return data;

        return [...data].sort((a, b) => {
            const aVal = a[sortConfig.key!] as number | string;
            const bVal = b[sortConfig.key!] as number | string;

            if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
            if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
            return 0;
        });
    }, [data, sortConfig]);

    const requestSort = (key: keyof GrowthMetric) => {
        let direction: 'asc' | 'desc' = 'desc';
        // If already sorting by this key, toggle direction
        if (sortConfig.key === key && sortConfig.direction === 'desc') {
            direction = 'asc';
        }
        setSortConfig({ key, direction });
    };

    const getSortIndicator = (key: keyof GrowthMetric) => {
        if (sortConfig.key !== key) {
            return (
                <svg className="w-2.5 h-2.5 ml-1 text-slate-600 opacity-0 group-hover:opacity-50" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
                </svg>
            );
        }
        return (
            <svg className="w-2.5 h-2.5 ml-1 text-primary" fill="currentColor" viewBox="0 0 20 20">
                {sortConfig.direction === 'asc'
                    ? <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
                    : <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                }
            </svg>
        );
    };

    return (
        <ExpandableCard title={title} className="h-full">
            <div className="overflow-auto h-full relative">
                <table className="w-full text-left text-sm h-full border-separate border-spacing-0">
                    <thead className="bg-slate-950 text-xs uppercase font-semibold text-slate-500 sticky top-0 z-10 shadow-sm">
                        <tr>
                            <th
                                className="px-4 py-3 bg-slate-950 min-w-[150px] cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('line')}
                            >
                                <div className="flex items-center">Product Line {getSortIndicator('line')}</div>
                            </th>

                            {/* Sell Out Columns */}
                            <th
                                className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('previousYearSellOut')}
                            >
                                <div className="flex items-center justify-end">Sell Out {periods.previous} {getSortIndicator('previousYearSellOut')}</div>
                            </th>
                            <th
                                className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors"
                                onClick={() => requestSort('currentYearSellOut')}
                            >
                                <div className="flex items-center justify-end">Sell Out {periods.current} {getSortIndicator('currentYearSellOut')}</div>
                            </th>
                            <th
                                className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('sellOutGrowthValue')}
                            >
                                <div className="flex items-center justify-end">SO Diff {getSortIndicator('sellOutGrowthValue')}</div>
                            </th>
                            <th
                                className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('sellOutGrowthPercentage')}
                            >
                                <div className="flex items-center justify-end">SO Growth % {getSortIndicator('sellOutGrowthPercentage')}</div>
                            </th>

                            {/* Units Columns */}
                            <th
                                className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('previousYearUnits')}
                            >
                                <div className="flex items-center justify-end">Units {periods.previous} {getSortIndicator('previousYearUnits')}</div>
                            </th>
                            <th
                                className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors"
                                onClick={() => requestSort('currentYearUnits')}
                            >
                                <div className="flex items-center justify-end">Units {periods.current} {getSortIndicator('currentYearUnits')}</div>
                            </th>
                            <th
                                className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('unitsGrowthValue')}
                            >
                                <div className="flex items-center justify-end">Units Diff {getSortIndicator('unitsGrowthValue')}</div>
                            </th>
                            <th
                                className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
                                onClick={() => requestSort('unitsGrowthPercentage')}
                            >
                                <div className="flex items-center justify-end">Units Growth % {getSortIndicator('unitsGrowthPercentage')}</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-border text-slate-300">
                        {sortedData.length > 0 ? (
                            sortedData.map((item, idx) => (
                                <tr key={idx} className="hover:bg-slate-800/50">
                                    <td className="px-4 py-2 font-medium">{item.line}</td>

                                    {/* Sell Out Columns */}
                                    <td className="px-4 py-2 text-right text-slate-400">€{item.previousYearSellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</td>
                                    <td className="px-4 py-2 text-right font-medium text-slate-200">€{item.currentYearSellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</td>
                                    <td className={`px-4 py-2 text-right font-medium ${item.sellOutGrowthValue >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                        {item.sellOutGrowthValue > 0 ? '+' : ''}€{item.sellOutGrowthValue.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                    </td>
                                    <td className="px-4 py-2 text-right">
                                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.sellOutGrowthPercentage >= 0 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}>
                                            {item.sellOutGrowthPercentage.toFixed(0)}%
                                        </span>
                                    </td>

                                    {/* Units Columns */}
                                    <td className="px-4 py-2 text-right text-slate-400">{item.previousYearUnits.toLocaleString('de-DE')}</td>
                                    <td className="px-4 py-2 text-right font-medium text-slate-200">{item.currentYearUnits.toLocaleString('de-DE')}</td>
                                    <td className={`px-4 py-2 text-right font-medium ${item.unitsGrowthValue >= 0 ? 'text-violet-400' : 'text-orange-400'}`}>
                                        {item.unitsGrowthValue > 0 ? '+' : ''}{item.unitsGrowthValue.toLocaleString('de-DE')}
                                    </td>
                                    <td className="px-4 py-2 text-right">
                                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.unitsGrowthPercentage >= 0 ? 'bg-violet-500/10 text-violet-400' : 'bg-orange-500/10 text-orange-400'}`}>
                                            {item.unitsGrowthPercentage.toFixed(0)}%
                                        </span>
                                    </td>
                                </tr>
                            ))
                        ) : (
                            <tr>
                                <td colSpan={9} className="px-4 py-6 text-center text-slate-500 italic">
                                    Insufficient data to calculate {type}. (Select at least 2 distinct years/periods)
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </ExpandableCard>
    );
}

const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [] }) => {
    const [seasonalityMetric, setSeasonalityMetric] = useState<'sellOut' | 'units'>('sellOut');
    const [top10Metric, setTop10Metric] = useState<'sellOut' | 'units'>('sellOut');

    // Calculate Ads KPIs by Year
    const adsKPIsByYear = useMemo(() => {
        if (!adsData || adsData.length === 0) return null;

        const yearMap = new Map<string, { cost: number; attributedSales: number; clicks: number; impressions: number }>();

        adsData.forEach(ad => {
            const y = ad.year.toString();
            if (!yearMap.has(y)) {
                yearMap.set(y, { cost: 0, attributedSales: 0, clicks: 0, impressions: 0 });
            }
            const t = yearMap.get(y)!;
            t.cost += ad.cost;
            t.attributedSales += ad.attributedSales30d;
            t.clicks += ad.clicks;
            t.impressions += ad.impressions;
        });

        const result: Record<string, { totalSpend: number; attributedSales: number; acos: number; roas: number; cpc: number; ctr: number }> = {};
        yearMap.forEach((t, year) => {
            result[year] = {
                totalSpend: t.cost,
                attributedSales: t.attributedSales,
                acos: t.attributedSales > 0 ? (t.cost / t.attributedSales) * 100 : 0,
                roas: t.cost > 0 ? t.attributedSales / t.cost : 0,
                cpc: t.clicks > 0 ? t.cost / t.clicks : 0,
                ctr: t.impressions > 0 ? (t.clicks / t.impressions) * 100 : 0,
            };
        });
        return result;
    }, [adsData]);

    const availableAdsYears = useMemo(() => {
        if (!adsKPIsByYear) return [];
        return Object.keys(adsKPIsByYear).sort((a, b) => parseInt(b) - parseInt(a));
    }, [adsKPIsByYear]);

    // Decide which data source to use for Product Line charts
    // If contextData is provided (drill down), we use that to show the "Total Line" view.
    // Otherwise we use the standard filtered data.
    const displayData = contextData || data;

    // Calculate dynamic height for the All Product Lines chart to enable scrolling
    // Assume ~60px per product line to give it enough space, minimum 300px
    const chartHeight = Math.max(displayData.topLinesSplit.length * 60, 300);

    return (
        <div className="p-3 md:p-6 space-y-4 md:space-y-6 max-w-7xl mx-auto animate-fade-in pb-24">

            {/* Ads Performance Section - Condensed Layout */}
            {adsKPIsByYear && availableAdsYears.length > 0 && (
                <div className="bg-gradient-to-br from-fuchsia-950/20 to-indigo-950/30 border border-fuchsia-500/30 rounded-2xl p-4 animate-fade-in shadow-xl">
                    <div className="flex items-center gap-2 mb-4">
                        <div className="relative">
                            <span className="absolute inset-0 bg-fuchsia-400 rounded-full animate-ping opacity-20"></span>
                            <span className="relative block w-2 h-2 rounded-full bg-fuchsia-400 shadow-[0_0_8px_rgba(232,121,249,0.8)]"></span>
                        </div>
                        <h3 className="text-xs font-black text-fuchsia-400 uppercase tracking-widest">Advertising Performance</h3>
                        <div className="ml-auto px-2 py-0.5 bg-slate-900/50 rounded-full border border-fuchsia-500/10 text-[9px] text-fuchsia-300/70 font-bold uppercase">
                            {adsData.length.toLocaleString('de-DE')} Records
                        </div>
                    </div>

                    <div className={`grid gap-4 ${availableAdsYears.length > 1 ? 'grid-cols-1 lg:grid-cols-2' : 'grid-cols-1'}`}>
                        {availableAdsYears.map((year, idx) => {
                            const kpi = adsKPIsByYear[year];
                            const prevYear = availableAdsYears[idx + 1];
                            const prevKpi = prevYear ? adsKPIsByYear[prevYear] : null;

                            const renderGrowth = (current: number, previous: number | undefined, inverse: boolean = false) => {
                                if (!previous || previous === 0) return null;
                                const pct = ((current - previous) / previous) * 100;
                                const isPositive = pct >= 0;
                                const colorClass = inverse
                                    ? (isPositive ? 'text-red-400' : 'text-emerald-400')
                                    : (isPositive ? 'text-emerald-400' : 'text-red-400');

                                return (
                                    <span className={`text-[9px] font-black ml-1 ${colorClass} whitespace-nowrap`}>
                                        {isPositive ? '▲' : '▼'}{Math.abs(pct).toFixed(0)}%
                                    </span>
                                );
                            };

                            return (
                                <div key={year} className="relative bg-slate-950/40 rounded-xl p-3 border border-white/5">
                                    <div className="flex items-center gap-2 mb-2">
                                        <span className="text-[10px] font-black text-slate-400 font-mono bg-slate-900 px-1.5 py-0.5 rounded">{year}</span>
                                        <div className="h-[1px] flex-1 bg-gradient-to-r from-slate-800 to-transparent"></div>
                                    </div>

                                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                        {/* Ad Spend */}
                                        <div className="group">
                                            <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">Spend</span>
                                            <div className="flex items-baseline overflow-hidden">
                                                <span className="text-sm font-black text-fuchsia-400 truncate">
                                                    €{kpi.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                                </span>
                                                {renderGrowth(kpi.totalSpend, prevKpi?.totalSpend)}
                                            </div>
                                        </div>
                                        {/* Attributed Sales */}
                                        <div className="group">
                                            <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">Sales</span>
                                            <div className="flex items-baseline overflow-hidden">
                                                <span className="text-sm font-black text-emerald-400 truncate">
                                                    €{kpi.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                                </span>
                                                {renderGrowth(kpi.attributedSales, prevKpi?.attributedSales)}
                                            </div>
                                        </div>
                                        {/* ACOS */}
                                        <div className="group">
                                            <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">ACOS</span>
                                            <div className="flex items-baseline overflow-hidden">
                                                <span className={`text-sm font-black truncate ${kpi.acos <= 30 ? 'text-emerald-400' : kpi.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
                                                    {kpi.acos.toFixed(1)}%
                                                </span>
                                                {renderGrowth(kpi.acos, prevKpi?.acos, true)}
                                            </div>
                                        </div>
                                        {/* ROAS */}
                                        <div className="group">
                                            <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">ROAS</span>
                                            <div className="flex items-baseline overflow-hidden">
                                                <span className={`text-sm font-black truncate ${kpi.roas >= 3 ? 'text-emerald-400' : kpi.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
                                                    {kpi.roas.toFixed(2)}x
                                                </span>
                                                {renderGrowth(kpi.roas, prevKpi?.roas)}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            )}

            {/* KPI Section - Pass both specific data and context data */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <MultiYearKPICard
                    title="Sell Out Revenue"
                    metric="sellOut"
                    data={data.totalsByYear}
                    availableYears={data.availableYears}
                    contextData={contextData ? contextData.totalsByYear : undefined}
                />
                <MultiYearKPICard
                    title="Units Sold"
                    metric="units"
                    data={data.totalsByYear}
                    availableYears={data.availableYears}
                    contextData={contextData ? contextData.totalsByYear : undefined}
                />
            </div>

            {/* Main Grid */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">

                {/* Left Column */}
                <div className="space-y-6 flex flex-col">
                    {/* All Product Lines Revenue Chart */}
                    <ExpandableCard title={contextData ? "Total Product Line Performance (Context)" : "Product Lines (Revenue)"} className="h-96">
                        <div className="flex flex-col h-full">
                            <div className="flex justify-between items-center mb-2">
                                {contextData && <span className="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Showing Full Product Line Data</span>}
                                <div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-xs ml-auto">
                                    <button
                                        onClick={(e) => { e.stopPropagation(); setTop10Metric('sellOut'); }}
                                        className={`px-3 py-1 rounded-md transition-colors ${top10Metric === 'sellOut' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`}
                                    >
                                        Sell Out (€)
                                    </button>
                                    <button
                                        onClick={(e) => { e.stopPropagation(); setTop10Metric('units'); }}
                                        className={`px-3 py-1 rounded-md transition-colors ${top10Metric === 'units' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`}
                                    >
                                        Units
                                    </button>
                                </div>
                            </div>
                            {/* Scrollable Container */}
                            <div className="flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
                                <div style={{ height: `${chartHeight}px` }}>
                                    <ResponsiveContainer width="100%" height="100%">
                                        <BarChart data={displayData.topLinesSplit} layout="vertical" margin={{ left: 20 }}>
                                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" horizontal={false} />
                                            <XAxis
                                                type="number"
                                                stroke="#64748b"
                                                tickFormatter={(val) => top10Metric === 'sellOut' ? `€${(val / 1000).toFixed(0)}k` : val.toLocaleString('de-DE')}
                                                orientation='top'
                                            />
                                            <YAxis dataKey="name" type="category" width={100} stroke="#94a3b8" tick={{ fontSize: 12 }} />
                                            <Tooltip content={(props: any) => <ComparisonTooltip {...props} metric={top10Metric} />} cursor={{ fill: '#1e293b' }} />

                                            {displayData.availableYears.map((year, index) => (
                                                <Bar
                                                    key={year}
                                                    dataKey={`${year}_${top10Metric === 'sellOut' ? 'value' : 'units'}`}
                                                    name={year}
                                                    fill={COLORS[index % COLORS.length]}
                                                    radius={[0, 4, 4, 0]}
                                                />
                                            ))}
                                        </BarChart>
                                    </ResponsiveContainer>
                                </div>
                            </div>
                        </div>
                    </ExpandableCard>

                    {/* Growth Table */}
                    <div className="h-72">
                        <GrowthTable
                            title={contextData ? "Fastest Growing Lines (Full Line Context)" : "Fastest Growing Lines (YoY - €)"}
                            data={displayData.topMovers}
                            type="growth"
                            periods={displayData.comparisonPeriods}
                        />
                    </div>

                    {/* Decline Table */}
                    <div className="h-72">
                        <GrowthTable
                            title={contextData ? "Declining Lines (Full Line Context)" : "Declining Lines (YoY - €)"}
                            data={displayData.bottomMovers}
                            type="decline"
                            periods={displayData.comparisonPeriods}
                        />
                    </div>
                </div>

                {/* Right Column */}
                <div className="space-y-6">
                    {/* Units Chart (Split by Year) */}
                    <ExpandableCard title={contextData ? "Total Product Line Units (Context)" : "Units Sold by Product Line (Overview)"} className="h-96">
                        <div className="flex flex-col h-full">
                            {contextData && <div className="text-xs text-indigo-400 font-semibold uppercase tracking-wider mb-2 text-right">Showing Full Product Line Data</div>}
                            <div className="flex-1">
                                <ResponsiveContainer width="100%" height="100%">
                                    <BarChart data={displayData.byLineOverviewSplit} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                                        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
                                        <XAxis dataKey="name" stroke="#64748b" tick={{ fontSize: 10 }} interval={0} angle={-15} textAnchor="end" height={60} />
                                        <YAxis
                                            stroke="#64748b"
                                            tickFormatter={(val) => {
                                                if (val >= 1000000) return `${(val / 1000000).toFixed(1)}M`;
                                                if (val >= 1000) return `${(val / 1000).toFixed(0)}k`;
                                                return val;
                                            }}
                                        />
                                        <Tooltip content={(props: any) => <ComparisonTooltip {...props} metric="units" />} cursor={{ fill: '#1e293b' }} />

                                        {displayData.availableYears.map((year, index) => (
                                            <Bar
                                                key={year}
                                                dataKey={year}
                                                name={year}
                                                fill={COLORS[index % COLORS.length]}
                                                radius={[4, 4, 0, 0]}
                                            />
                                        ))}
                                    </BarChart>
                                </ResponsiveContainer>
                            </div>
                        </div>
                    </ExpandableCard>

                    {/* Seasonality Chart - ALWAYS uses specific filtered data 'data' */}
                    <ExpandableCard title="Monthly Sales Seasonality (Selected Items)" className="h-96">
                        <div className="flex flex-col h-full">
                            <div className="flex justify-end mb-2">
                                <div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-xs">
                                    <button
                                        onClick={(e) => { e.stopPropagation(); setSeasonalityMetric('sellOut'); }}
                                        className={`px-3 py-1 rounded-md transition-colors ${seasonalityMetric === 'sellOut' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`}
                                    >
                                        Sell Out (€)
                                    </button>
                                    <button
                                        onClick={(e) => { e.stopPropagation(); setSeasonalityMetric('units'); }}
                                        className={`px-3 py-1 rounded-md transition-colors ${seasonalityMetric === 'units' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`}
                                    >
                                        Units
                                    </button>
                                </div>
                            </div>
                            <div className="flex-1 min-h-0">
                                <ResponsiveContainer width="100%" height="100%">
                                    <LineChart data={seasonalityMetric === 'sellOut' ? data.seasonality : data.seasonalityUnits}>
                                        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                                        <XAxis dataKey="name" stroke="#64748b" />
                                        <YAxis
                                            stroke="#64748b"
                                            tickFormatter={(val) => seasonalityMetric === 'sellOut' ? `€${(val / 1000).toFixed(0)}k` : val.toLocaleString('de-DE')}
                                        />
                                        <Tooltip content={(props: any) => <SeasonalityTooltip {...props} metric={seasonalityMetric} />} />
                                        <Legend />
                                        {data.availableYears.map((year, index) => (
                                            <Line
                                                key={year}
                                                type="monotone"
                                                dataKey={year}
                                                name={year}
                                                stroke={COLORS[index % COLORS.length]}
                                                strokeWidth={3}
                                                dot={{ r: 4, strokeWidth: 2 }}
                                                activeDot={{ r: 6 }}
                                            />
                                        ))}
                                    </LineChart>
                                </ResponsiveContainer>
                            </div>
                        </div>
                    </ExpandableCard>

                    {/* Country Chart - Uses Specific Data 'data' usually, unless we want to broaden it. Kept specific for now. */}
                    <ExpandableCard title="Revenue Distribution by Customer" className="h-80">
                        <ResponsiveContainer width="100%" height="100%">
                            <BarChart data={data.byCustomerSplit}>
                                <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
                                <XAxis dataKey="name" stroke="#64748b" />
                                <YAxis stroke="#64748b" tickFormatter={(val) => `€${(val / 1000).toFixed(0)}k`} />
                                <Tooltip content={(props: any) => <ComparisonTooltip {...props} metric="sellOut" />} cursor={{ fill: '#1e293b' }} />

                                {data.availableYears.map((year, index) => (
                                    <Bar
                                        key={year}
                                        dataKey={year}
                                        name={year}
                                        fill={COLORS[index % COLORS.length]}
                                        radius={[4, 4, 0, 0]}
                                    />
                                ))}
                            </BarChart>
                        </ResponsiveContainer>
                    </ExpandableCard>
                </div>
            </div>
        </div>
    );
};

export default Dashboard;