CrazeAnalytix/components/DataGrid.tsx

import React, { useState, useMemo, useEffect, useRef } from 'react';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts';
import { SalesRecord, PivotRow, AdsRecord, CombinedKPIs, ColumnFilterCondition, FilterState } from '../types';
import { pivotSalesData, generateXLSX, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping, filterData } from '../services/dataProcessor';
import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './Icons';
import { StockBadge } from './StockBadge';
import { Top50Badge } from './Top50Badge';
import { VendorStockBadge } from './VendorStockBadge';
import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
import { ExcelFilter } from './ExcelFilter';

interface DataGridProps {
    data: SalesRecord[] | CombinedKPIs[];
    filters: FilterState;
    hasCustomerFilter: boolean;
    adsData?: AdsRecord[];
    stockMap?: Map<string, number>;
    top50Ranking?: {
        eu: Map<string, number>;
        uk: Map<string, number>;
    };
    top50Mode: 'eu' | 'uk';
    vendorStockMap?: Map<string, { eu: number; uk: number }>;
    velocityMap?: Map<string, number>;
    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
    defaultSort?: SortConfig;
}

type SortConfig = {
    key: string | null;
    direction: 'asc' | 'desc';
};

type ConditionalFilter = {
    id: string;
    metric: string;
    operator: 'gt' | 'lt';
    value: number;
}

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

// Available grouping dimensions
const DIMENSION_OPTIONS = [
    { label: 'Product Line', value: 'line' },
    { label: 'Customer', value: 'customer' },
    { label: 'SKU', value: 'sku' },
    { label: 'Title', value: 'title' },
    { label: 'ASIN', value: 'asin' },
];

// Tooltip for single-period view with Week-over-Week comparison
const WoWTooltip = ({ active, payload, label, data }: any) => {
    if (active && payload && payload.length && data) {
        const currentIndex = data.findIndex((d: any) => d.name === label);
        const prevData = currentIndex > 0 ? data[currentIndex - 1] : null;

        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) => {
                    let wowEl = null;
                    if (prevData) {
                        const prevValue = prevData[p.dataKey];
                        const currentValue = p.value;
                        if (prevValue != null && prevValue > 0) {
                            const pct = ((currentValue - prevValue) / prevValue) * 100;
                            wowEl = (
                                <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">
                                    {p.dataKey === 'sellOut'
                                        ? `€${Number(p.value).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`
                                        : `${Number(p.value).toLocaleString('de-DE')} u`}
                                </span>
                                {wowEl}
                            </div>
                        </div>
                    );
                })}
            </div>
        );
    }
    return null;
}

// Tooltip for multi-year comparison view
const ComparisonTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {

        interface YearData {
            sellOut?: number;
            units?: number;
            color?: string;
        }

        const dataByYear: { [year: string]: YearData } = {};

        payload.forEach((p: any) => {
            const nameParts = p.name.split(' ');
            if (nameParts.length < 2) return;

            const year = nameParts[nameParts.length - 1];
            const metric = nameParts.slice(0, nameParts.length - 1).join(' ');

            if (!dataByYear[year]) {
                dataByYear[year] = {};
            }
            // Use the color from the Sell Out line for consistency for that year block
            if (metric.toLowerCase().includes('sell out')) {
                dataByYear[year].sellOut = p.value;
                dataByYear[year].color = p.stroke || p.color;
            } else if (metric.toLowerCase().includes('units')) {
                dataByYear[year].units = p.value;
                if (!dataByYear[year].color) { // fallback color from units line
                    dataByYear[year].color = p.stroke || p.color;
                }
            }
        });

        const sortedYears = Object.keys(dataByYear).sort((a, b) => parseInt(b) - parseInt(a));

        return (
            <div className="bg-slate-900/90 backdrop-blur-sm border border-border p-3 rounded-lg shadow-xl text-sm w-56 z-50">
                <p className="font-bold text-slate-100 mb-2 border-b border-slate-700 pb-1">{label}</p>
                {sortedYears.map((year, index) => {
                    const yearData = dataByYear[year];
                    const prevYear = sortedYears[index + 1];
                    const prevYearData = prevYear ? dataByYear[prevYear] : null;

                    let sellOutGrowthEl = null;
                    if (prevYearData && prevYearData.sellOut != null && prevYearData.sellOut !== 0 && yearData.sellOut != null) {
                        const pct = ((yearData.sellOut - prevYearData.sellOut) / prevYearData.sellOut) * 100;
                        sellOutGrowthEl = (
                            <span className={`text-xs ml-2 font-bold ${pct >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
                                {pct >= 0 ? '▲' : '▼'} {Math.abs(pct).toFixed(1)}%
                            </span>
                        );
                    }

                    let unitsGrowthEl = null;
                    if (prevYearData && prevYearData.units != null && prevYearData.units !== 0 && yearData.units != null) {
                        const pct = ((yearData.units - prevYearData.units) / prevYearData.units) * 100;
                        unitsGrowthEl = (
                            <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="mt-2">
                            <p className="font-bold text-slate-200 text-base">{year}</p>

                            {yearData.sellOut != null && (
                                <div className="flex justify-between items-center gap-2 pl-1 mt-1">
                                    <span className="font-medium" style={{ color: yearData.color }}>Sell Out:</span>
                                    <div className="flex items-center">
                                        <span className="font-mono font-semibold" style={{ color: yearData.color }}>
                                            €{Number(yearData.sellOut).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                        </span>
                                        {sellOutGrowthEl}
                                    </div>
                                </div>
                            )}

                            {yearData.units != null && (
                                <div className="flex justify-between items-center gap-2 pl-1 mt-1">
                                    <span className="font-medium" style={{ color: yearData.color }}>Units:</span>
                                    <div className="flex items-center">
                                        <span className="font-mono font-semibold" style={{ color: yearData.color }}>
                                            {Number(yearData.units).toLocaleString('de-DE')} u
                                        </span>
                                        {unitsGrowthEl}
                                    </div>
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        );
    }
    return null;
};

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

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

    if (isExpanded) {
        return (
            <div className="fixed inset-0 z-[80] bg-slate-950 p-6 flex flex-col animate-fade-in overflow-hidden">
                <div className="flex justify-between items-center mb-4 border-b border-slate-800 pb-4 shrink-0">
                    <h3 className="text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3>
                    <button
                        onClick={toggleExpand}
                        className="p-2 bg-red-600/90 hover: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"
                    >
                        <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>
                {/* Use flex-1 and min-h-0 to allow children to fill available space */}
                <div className="flex-1 min-h-0 bg-slate-900 rounded-xl p-6 border border-border [&>div]:h-full [&>div]:w-full">
                    {children}
                </div>
            </div>
        );
    }

    return (
        <div className={`bg-surface border-b border-border group relative transition-all duration-300 ${className}`}>
            <div className="p-4 flex justify-between items-start">
                <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wide">{title}</h3>
                <button
                    onClick={toggleExpand}
                    className="opacity-0 group-hover:opacity-100 text-slate-500 hover: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="cursor-pointer px-4 pb-4" onClick={toggleExpand}>
                {children}
            </div>
        </div>
    );
};


const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode, velocityMap, buyBoxLostMap, defaultSort }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [searchTerm, setSearchTerm] = useState('');
    const [sortConfig, setSortConfig] = useState<SortConfig>(defaultSort || { key: null, direction: 'desc' });
    const [showChart, setShowChart] = useState(true);
    const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']);
    const [showAdsMetrics, setShowAdsMetrics] = useState(true);
    const [showAttributedSales, setShowAttributedSales] = useState(false);
    const [showBulkSearch, setShowBulkSearch] = useState(false);
    const [showYTD, setShowYTD] = useState(false);
    const [showOnlyTop50, setShowOnlyTop50] = useState(false);
    const [showDimensionMenu, setShowDimensionMenu] = useState(false);
    const dimensionRef = useRef<HTMLDivElement>(null);

    // Close dimension menu on click outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dimensionRef.current && !dimensionRef.current.contains(event.target as Node)) {
                setShowDimensionMenu(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    // Calculate Ads Summary for the Grid
    const adsSummary = useMemo(() => {
        if (!adsData || adsData.length === 0) return null;

        const totals = adsData.reduce((acc, ad) => {
            if (ad.year === 2026) {
                console.log("GRID 2026 W" + ad.week, ad.cost);
            }
            return {
                cost: acc.cost + ad.cost,
                attributedSales: acc.attributedSales + ad.attributedSales30d,
                clicks: acc.clicks + ad.clicks,
                impressions: acc.impressions + ad.impressions,
            };
        }, { cost: 0, attributedSales: 0, clicks: 0, impressions: 0 });

        return {
            totalSpend: totals.cost,
            attributedSales: totals.attributedSales,
            acos: totals.attributedSales > 0 ? (totals.cost / totals.attributedSales) * 100 : 0,
            roas: totals.cost > 0 ? totals.attributedSales / totals.cost : 0,
            recordCount: adsData.length,
        };
    }, [adsData]);

    // Ad spend per year from adsData directly (avoids pivot row filtering that drops ads-only records)
    const adSpendByYear = useMemo(() => {
        if (!adsData || adsData.length === 0) return {} as Record<number, { adSpend: number; attributedSales: number }>;
        return adsData.reduce((acc, ad) => {
            if (!acc[ad.year]) acc[ad.year] = { adSpend: 0, attributedSales: 0 };
            acc[ad.year].adSpend += ad.cost;
            acc[ad.year].attributedSales += ad.attributedSales30d;
            return acc;
        }, {} as Record<number, { adSpend: number; attributedSales: number }>);
    }, [adsData]);

    // State for dynamic grouping
    const [selectedDimensions, setSelectedDimensions] = useState<string[]>(['sku', 'title']);

    // State for Advanced Filtering
    const [showFilterBuilder, setShowFilterBuilder] = useState(false);
    const [rowFilters, setRowFilters] = useState<ConditionalFilter[]>([]);
    // Temp state for new filter inputs
    const [newFilterMetric, setNewFilterMetric] = useState<string>('');
    const [newFilterOperator, setNewFilterOperator] = useState<'gt' | 'lt'>('gt');
    const [newFilterValue, setNewFilterValue] = useState<string>('');

    // State for Column Filters
    const [columnFilters, setColumnFilters] = useState<Record<string, ColumnFilterCondition>>({});

    const handleColumnFilterChange = (columnKey: string, condition: ColumnFilterCondition | undefined) => {
        setColumnFilters(prev => {
            const next = { ...prev };
            if (condition) next[columnKey] = condition;
            else delete next[columnKey];
            return next;
        });
        setCurrentPage(1);
    };

    // Effective dimensions for rendering
    const effectiveDimensions = useMemo(() =>
        selectedDimensions.length > 0 ? selectedDimensions : ['customer'],
        [selectedDimensions]);

    // Transform flat data into Pivot structure
    const pivotRows = useMemo(() => {
        // Apply Pan-EU grouping when no customer filter is applied
        const processedData = applyPanEUGrouping(data as SalesRecord[], hasCustomerFilter);

        // Apply our comprehensive filters (includes Column Filters now)
        const filterState: any = {
            ...filters,
            bulkSearch: searchTerm, // searchTerm from the DataGrid's local search input
            columnFilters
        };
        const filteredFlatData = filterData(processedData, filterState, stockMap, vendorStockMap, top50Mode);

        // pivotSalesData now handles ads aggregation correctly because it receives CombinedKPIs
        const { rows } = pivotSalesData(filteredFlatData, effectiveDimensions);
        return rows;
    }, [data, filters, effectiveDimensions, hasCustomerFilter, columnFilters, searchTerm, stockMap, vendorStockMap, top50Mode]);

    const { years } = useMemo(() => {
        // We still need unique years for columns
        const yearsSet = new Set<string>(data.map(d => String(d.year)));
        return { years: Array.from(yearsSet).sort((a, b) => parseInt(b) - parseInt(a)) };
    }, [data]);

    // Data for the time series chart, supporting single and multi-year comparison
    const { chartData, uniqueYears, isComparisonView, chartTitle } = useMemo(() => {
        const yearsInView = Array.from(new Set(data.map(d => d.year.toString()))).sort((a: string, b: string) => parseInt(b) - parseInt(a));
        const isMultiYear = yearsInView.length > 1;

        // Get base sales data
        let salesChartData = isMultiYear
            ? aggregateForComparisonTimeSeries(data)
            : aggregateForTimeSeries(data);

        // Aggregate ads data by week/year and merge into chartData
        if (adsData && adsData.length > 0) {
            const adsMap = new Map<number, { [key: string]: number }>();

            adsData.forEach(ad => {
                if (ad.week >= 1 && ad.week <= 53) {
                    if (!adsMap.has(ad.week)) {
                        adsMap.set(ad.week, {});
                    }
                    const weekData = adsMap.get(ad.week)!;
                    const adSpendKey = `${ad.year}_adSpend`;
                    const attrSalesKey = `${ad.year}_attributedSales`;
                    weekData[adSpendKey] = (weekData[adSpendKey] || 0) + ad.cost;
                    weekData[attrSalesKey] = (weekData[attrSalesKey] || 0) + ad.attributedSales30d;
                }
            });

            // Merge ads data into sales chart data
            salesChartData = salesChartData.map(point => {
                const adsWeekData = adsMap.get(point.week) || {};
                return { ...point, ...adsWeekData };
            });
        }

        // Calculate YTD (Year-To-Date) cumulative values for each year
        const ytdAccumulators: { [year: string]: { sellOut: number; units: number } } = {};
        yearsInView.forEach((year: string) => {
            ytdAccumulators[year] = { sellOut: 0, units: 0 };
        });

        salesChartData.forEach((point: any) => {
            yearsInView.forEach((year: string) => {
                const sellOutKey = isMultiYear ? `${year}_sellOut` : 'sellOut';
                const unitsKey = isMultiYear ? `${year}_units` : 'units';

                // Accumulate values
                ytdAccumulators[year].sellOut += (point[sellOutKey] as number) || 0;
                ytdAccumulators[year].units += (point[unitsKey] as number) || 0;

                // Add YTD values directly to point
                point[`${year}_ytdSellOut`] = ytdAccumulators[year].sellOut;
                point[`${year}_ytdUnits`] = ytdAccumulators[year].units;
            });
        });

        return {
            chartData: salesChartData,
            uniqueYears: yearsInView,
            isComparisonView: isMultiYear,
            chartTitle: isMultiYear
                ? `Weekly Sales Comparison: ${yearsInView.join(' vs ')}`
                : `Weekly Sales Evolution ${yearsInView[0] || ''}`
        };
    }, [data, adsData]);

    // Filter Options based on available data
    const metricOptions = useMemo(() => {
        const options = [];
        // Totals
        years.forEach(y => {
            options.push({ label: `Total Sell Out ${y} (€)`, value: `total_sellOut_${y}` });
            options.push({ label: `Total Units ${y}`, value: `total_units_${y}` });
        });
        // Growth (Latest vs Previous)
        if (years.length >= 2) {
            options.push({ label: `Growth % Sell Out (${years[0]} vs ${years[1]})`, value: 'growth_sellOut' });
            options.push({ label: `Growth % Units (${years[0]} vs ${years[1]})`, value: 'growth_units' });
        }
        return options;
    }, [years]);

    // Apply Advanced Row Filters THEN Sort
    const processedRows = useMemo(() => {
        let result = pivotRows;

        // NEW: Filter for Top 50
        if (showOnlyTop50 && top50Ranking) {
            const rankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;
            result = result.filter(row => {
                const asin = (row.asin || '').trim().toUpperCase();
                return asin && rankMap.has(asin);
            });
        }

        // Note: Global Search Filter (searchTerm) is now handled at the flat data level 
        // in pivotRows using filterData. This ensures that even when grouped by 
        // dimensions like 'customer', the search correctly filters the underlying 
        // products before aggregation.

        // 1. Filter (Legacy Row Filters)
        if (rowFilters.length > 0) {
            result = result.filter(row => {
                return rowFilters.every(filter => {
                    let rowValue = 0;
                    if (filter.metric.startsWith('total_sellOut_')) {
                        const y = filter.metric.split('_')[2];
                        rowValue = row.totalsByYear[y]?.sellOut || 0;
                    }
                    else if (filter.metric.startsWith('total_units_')) {
                        const y = filter.metric.split('_')[2];
                        rowValue = row.totalsByYear[y]?.units || 0;
                    }
                    else if (filter.metric === 'growth_sellOut') {
                        const latestYear = years[0];
                        const prevYear = years[1];
                        if (!prevYear) return true;
                        const curr = row.totalsByYear[latestYear]?.sellOut || 0;
                        const prev = row.totalsByYear[prevYear]?.sellOut || 0;
                        if (prev === 0) return curr > 0;
                        rowValue = ((curr - prev) / prev) * 100;
                    }
                    else if (filter.metric === 'growth_units') {
                        const latestYear = years[0];
                        const prevYear = years[1];
                        if (!prevYear) return true;
                        const curr = row.totalsByYear[latestYear]?.units || 0;
                        const prev = row.totalsByYear[prevYear]?.units || 0;
                        if (prev === 0) return curr > 0;
                        rowValue = ((curr - prev) / prev) * 100;
                    }

                    if (filter.operator === 'gt') return rowValue > filter.value;
                    if (filter.operator === 'lt') return rowValue < filter.value;
                    return true;
                });
            });
        }

        // 1b. Filter (New Excel Column Filters for Metrics)
        (Object.entries(columnFilters) as [string, ColumnFilterCondition][]).forEach(([key, condition]) => {
            if (!condition) return;
            if (!key.startsWith('total_')) return; // Metric filters in this view start with 'total_'

            const isSellOut = key.includes('_sellOut_');
            const year = key.split('_')[2];

            if (condition.selectedValues && condition.selectedValues.length > 0) {
                result = result.filter(row => {
                    const val = isSellOut ? row.totalsByYear[year]?.sellOut : row.totalsByYear[year]?.units;
                    return condition.selectedValues?.includes(String(val || 0));
                });
            }

            if (condition.textFilter) {
                const { operator, value } = condition.textFilter;
                const filterNum = parseFloat(value);
                if (isNaN(filterNum)) return;

                result = result.filter(row => {
                    const rowVal = (isSellOut ? row.totalsByYear[year]?.sellOut : row.totalsByYear[year]?.units) || 0;
                    switch (operator) {
                        case 'equals': return rowVal === filterNum;
                        case 'notEquals': return rowVal !== filterNum;
                        case 'gt': return rowVal > filterNum;
                        case 'lt': return rowVal < filterNum;
                        case 'gte': return rowVal >= filterNum;
                        case 'lte': return rowVal <= filterNum;
                        // Text-like operators on numeric values (convert to string)
                        case 'contains': return String(rowVal).includes(value);
                        case 'startsWith': return String(rowVal).startsWith(value);
                        case 'endsWith': return String(rowVal).endsWith(value);
                        default: return true;
                    }
                });
            }
        });

        // 2. Sort
        if (sortConfig.key) {
            // Create a copy to avoid mutating the original array and ensure React detects the change
            result = result.slice().sort((a, b) => {
                let valA: number | string = '';
                let valB: number | string = '';

                // Handle sorting by dimensions
                if (['customer', 'line', 'sku', 'title', 'articleName', 'asin'].includes(sortConfig.key as string)) {
                    valA = a[sortConfig.key as keyof PivotRow] as string || '';
                    valB = b[sortConfig.key as keyof PivotRow] as string || '';
                }
                // Handle sorting by Total Metrics (total_sellOut_2023)
                else if ((sortConfig.key as string).startsWith('total_')) {
                    const parts = (sortConfig.key as string).split('_');
                    // parts[1] = metric (sellOut/units), parts[2] = year
                    if (parts.length === 3) {
                        const y = parts[2];
                        const m = parts[1] as 'sellOut' | 'units';
                        valA = a.totalsByYear[y]?.[m] || 0;
                        valB = b.totalsByYear[y]?.[m] || 0;
                    }
                }
                // Handle sorting by Growth Percentages (growth_sellOut_2024_2023)
                else if ((sortConfig.key as string).startsWith('growth_')) {
                    const parts = (sortConfig.key as string).split('_');
                    // parts[1] = metric (sellOut/units), parts[2] = current year, parts[3] = previous year
                    if (parts.length === 4) {
                        const metric = parts[1] as 'sellOut' | 'units';
                        const currentYear = parts[2];
                        const prevYear = parts[3];

                        const currA = a.totalsByYear[currentYear]?.[metric] || 0;
                        const prevA = a.totalsByYear[prevYear]?.[metric] || 0;
                        valA = prevA !== 0 ? ((currA - prevA) / prevA) * 100 : (currA > 0 ? 100 : 0);

                        const currB = b.totalsByYear[currentYear]?.[metric] || 0;
                        const prevB = b.totalsByYear[prevYear]?.[metric] || 0;
                        valB = prevB !== 0 ? ((currB - prevB) / prevB) * 100 : (currB > 0 ? 100 : 0);
                    }
                }

                // Handle sorting by Ads Metrics (adSpend_2025, tacos_2025)
                else if ((sortConfig.key as string).includes('_') && !((sortConfig.key as string).startsWith('total_') || (sortConfig.key as string).startsWith('growth_'))) {
                    const parts = (sortConfig.key as string).split('_');
                    if (parts.length === 2) {
                        const metric = parts[0] as 'adSpend' | 'tacos';
                        const year = parts[1];
                        valA = a.adsByYear?.[year]?.[metric] || 0;
                        valB = b.adsByYear?.[year]?.[metric] || 0;
                    }
                }

                if (valA < valB) return sortConfig.direction === 'asc' ? -1 : 1;
                if (valA > valB) return sortConfig.direction === 'asc' ? 1 : -1;
                return 0;
            });
        } else if (showOnlyTop50 && top50Ranking) {
            // Default sort by Rank when Top 50 is active
            const rankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;
            result = result.slice().sort((a, b) => {
                const rankA = a.asin ? rankMap.get(a.asin.toUpperCase()) || 999 : 999;
                const rankB = b.asin ? rankMap.get(b.asin.toUpperCase()) || 999 : 999;
                return rankA - rankB;
            });
        }

        return result;
    }, [pivotRows, rowFilters, sortConfig, years, searchTerm, showOnlyTop50, top50Ranking, top50Mode]);

    // Calculate aggregated totals for the header row
    const filteredTotalsByYear = useMemo(() => {
        const result: { [year: string]: { sellOut: number, units: number, sellOutGrowth?: number, unitsGrowth?: number } } = {};

        years.forEach((year, index) => {
            const totals = processedRows.reduce(
                (acc, row) => {
                    const data = row.totalsByYear[year];
                    if (data) {
                        acc.sellOut += data.sellOut;
                        acc.units += data.units;
                    }
                    const ads = row.adsByYear?.[year];
                    if (ads) {
                        acc.adSpend += ads.adSpend;
                        acc.attributedSales += ads.attributedSales;
                    }
                    return acc;
                },
                { sellOut: 0, units: 0, adSpend: 0, attributedSales: 0 }
            );

            result[year] = totals;

            // Calculate YoY growth if previous year exists
            const prevYear = years[index + 1];
            if (prevYear) {
                const prevYearTotals = processedRows.reduce(
                    (acc, row) => {
                        const data = row.totalsByYear[prevYear];
                        if (data) {
                            acc.sellOut += data.sellOut;
                            acc.units += data.units;
                        }
                        const ads = row.adsByYear?.[prevYear];
                        if (ads) {
                            acc.adSpend += ads.adSpend;
                        }
                        return acc;
                    },
                    { sellOut: 0, units: 0, adSpend: 0 }
                );

                if (prevYearTotals.sellOut > 0) {
                    result[year].sellOutGrowth = ((totals.sellOut - prevYearTotals.sellOut) / prevYearTotals.sellOut) * 100;
                } else if (totals.sellOut > 0) {
                    result[year].sellOutGrowth = 100;
                }

                if (prevYearTotals.units > 0) {
                    result[year].unitsGrowth = ((totals.units - prevYearTotals.units) / prevYearTotals.units) * 100;
                } else if (totals.units > 0) {
                    result[year].unitsGrowth = 100;
                }

                if (prevYearTotals.adSpend > 0) {
                    (result[year] as any).adSpendGrowth = ((totals.adSpend - prevYearTotals.adSpend) / prevYearTotals.adSpend) * 100;
                } else if (totals.adSpend > 0) {
                    (result[year] as any).adSpendGrowth = 100;
                }
            }
        });

        return result;
    }, [processedRows, years]);

    const paginatedRows = useMemo(() => {
        const start = (currentPage - 1) * ROWS_PER_PAGE;
        return processedRows.slice(start, start + ROWS_PER_PAGE);
    }, [processedRows, currentPage]);

    const totalPages = Math.ceil(processedRows.length / ROWS_PER_PAGE);

    const requestSort = (key: string) => {
        let direction: 'asc' | 'desc' = 'desc';
        if (sortConfig.key === key && sortConfig.direction === 'desc') {
            direction = 'asc';
        }
        setSortConfig({ key, direction });
    };

    const getSortIcon = (key: string) => {
        if (sortConfig.key !== key) return <span className="text-slate-600 opacity-20 group-hover:opacity-100 transition-opacity ml-0.5">↕</span>;
        return <span className="text-primary ml-0.5">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>;
    };

    const handleExport = () => {
        generateXLSX(processedRows, effectiveDimensions, years);
    };

    const addFilter = () => {
        if (newFilterMetric && newFilterValue) {
            setRowFilters([
                ...rowFilters,
                {
                    id: Date.now().toString(),
                    metric: newFilterMetric,
                    operator: newFilterOperator,
                    value: parseFloat(newFilterValue)
                }
            ]);
            setNewFilterMetric('');
            setNewFilterValue('');
            setShowFilterBuilder(false);
        }
    };

    const removeFilter = (id: string) => {
        setRowFilters(rowFilters.filter(f => f.id !== id));
    };

    // Reset pagination when filters change
    useEffect(() => {
        setCurrentPage(1);
    }, [rowFilters, data, effectiveDimensions, searchTerm]);

    return (
        <div className="space-y-4 md:space-y-6 max-w-[98vw] md:max-w-[95vw] mx-auto animate-fade-in px-1 md:px-0 pb-24">

            {/* 1. Time Series Chart Section */}
            {showChart && chartData.length > 0 && (
                <ExpandableChartCard title={chartTitle} className="rounded-xl overflow-hidden shadow-sm">
                    <div className="h-72 w-full">
                        <ResponsiveContainer width="100%" height="100%">
                            <LineChart data={chartData}>
                                <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                                <XAxis
                                    dataKey="name"
                                    stroke="#64748b"
                                    tick={{ fontSize: 12 }}
                                    interval={isComparisonView ? 2 : 'preserveStartEnd'}
                                />
                                <YAxis
                                    stroke="#64748b"
                                    tickFormatter={(val) => `€${(val / 1000).toFixed(0)}k`}
                                />
                                <Tooltip content={(props: any) => isComparisonView ? <ComparisonTooltip {...props} /> : <WoWTooltip {...props} data={chartData} />} />
                                <Legend />

                                {isComparisonView ? (
                                    uniqueYears.flatMap((year, idx) => [
                                        visibleMetrics.includes('sellOut') && (
                                            <Line
                                                key={`${year}_so`}
                                                type="monotone"
                                                dataKey={`${year}_sellOut`}
                                                name={`Sell Out ${year}`}
                                                stroke={CHART_COLORS[idx % CHART_COLORS.length]}
                                                strokeWidth={2}
                                                dot={false}
                                            />
                                        ),
                                        visibleMetrics.includes('units') && (
                                            <Line
                                                key={`${year}_units`}
                                                type="monotone"
                                                dataKey={`${year}_units`}
                                                name={`Units ${year}`}
                                                stroke={CHART_COLORS[idx % CHART_COLORS.length]}
                                                strokeWidth={2}
                                                strokeDasharray="5 5"
                                                dot={false}
                                            />
                                        ),
                                        // Ad Spend line (only when ads data exists and showAdsMetrics is on)
                                        showAdsMetrics && adsSummary && (
                                            <Line
                                                key={`${year}_adSpend`}
                                                type="monotone"
                                                dataKey={`${year}_adSpend`}
                                                name={`Ad Spend ${year}`}
                                                stroke="#d946ef"
                                                strokeWidth={2}
                                                strokeDasharray="3 3"
                                                dot={false}
                                            />
                                        ),
                                        // Attributed Sales line
                                        showAttributedSales && adsSummary && (
                                            <Line
                                                key={`${year}_attrSales`}
                                                type="monotone"
                                                dataKey={`${year}_attributedSales`}
                                                name={`Attr. Sales ${year}`}
                                                stroke="#fbbf24"
                                                strokeWidth={2}
                                                dot={false}
                                            />
                                        ),
                                        // YTD Sell Out line (cumulative)
                                        showYTD && visibleMetrics.includes('sellOut') && (
                                            <Line
                                                key={`${year}_ytdSellOut`}
                                                type="monotone"
                                                dataKey={`${year}_ytdSellOut`}
                                                name={`YTD Sell Out ${year}`}
                                                stroke={CHART_COLORS[idx % CHART_COLORS.length]}
                                                strokeWidth={3}
                                                strokeOpacity={0.6}
                                                dot={false}
                                            />
                                        ),
                                        // YTD Units line (cumulative)
                                        showYTD && visibleMetrics.includes('units') && (
                                            <Line
                                                key={`${year}_ytdUnits`}
                                                type="monotone"
                                                dataKey={`${year}_ytdUnits`}
                                                name={`YTD Units ${year}`}
                                                stroke={CHART_COLORS[idx % CHART_COLORS.length]}
                                                strokeWidth={3}
                                                strokeDasharray="10 5"
                                                strokeOpacity={0.6}
                                                dot={false}
                                            />
                                        )
                                    ])
                                ) : (
                                    [
                                        visibleMetrics.includes('sellOut') && (
                                            <Line
                                                key="so"
                                                type="monotone"
                                                dataKey="sellOut"
                                                name="Sell Out"
                                                stroke="#6366f1"
                                                strokeWidth={3}
                                                dot={false}
                                            />
                                        ),
                                        visibleMetrics.includes('units') && (
                                            <Line
                                                key="units"
                                                type="monotone"
                                                dataKey="units"
                                                name="Units"
                                                stroke="#10b981"
                                                strokeWidth={3}
                                                dot={false}
                                                yAxisId={0} // Using same axis for simplicity, usually needs dual axis
                                            />
                                        )
                                    ]
                                )}
                            </LineChart>
                        </ResponsiveContainer>
                    </div>
                </ExpandableChartCard>
            )}

            {/* 2. Controls & Grid */}
            <div className="bg-surface border border-border rounded-xl shadow-lg flex flex-col">

                {/* Toolbar */}
                <div className="p-4 border-b border-border bg-slate-900/50 flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center rounded-t-xl">

                    <div className="flex flex-wrap items-center gap-3 w-full xl:w-auto">
                        {/* Search Bar */}
                        <div className="flex items-center gap-2 mr-2">
                            <div className="relative w-full sm:w-64 lg:w-80">
                                {showBulkSearch ? (
                                    <textarea
                                        placeholder="Bulk Search (ASINs/SKUs)..."
                                        value={searchTerm}
                                        onChange={(e) => setSearchTerm(e.target.value)}
                                        className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all min-h-[40px] max-h-[120px] font-mono leading-tight"
                                        rows={1}
                                    />
                                ) : (
                                    <>
                                        <input
                                            type="text"
                                            placeholder="Search SKU, ASIN..."
                                            value={searchTerm}
                                            onChange={(e) => setSearchTerm(e.target.value)}
                                            className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
                                        />
                                        <svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                        </svg>
                                    </>
                                )}
                                {searchTerm && (
                                    <button
                                        onClick={() => setSearchTerm('')}
                                        className={`absolute right-3 ${showBulkSearch ? 'top-2' : 'top-2.5'} text-slate-500 hover:text-white`}
                                    >
                                        <CloseIcon />
                                    </button>
                                )}
                            </div>
                            <button
                                onClick={() => setShowBulkSearch(!showBulkSearch)}
                                className={`p-2 rounded-lg border transition-all flex items-center justify-center ${showBulkSearch
                                    ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]'
                                    : 'bg-slate-800/50 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
                                    }`}
                                title={showBulkSearch ? "Switch to Single Search" : "Enable Bulk Search"}
                            >
                                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                </svg>
                            </button>
                        </div>

                        <div className="h-6 w-px bg-white/10 hidden xl:block mx-1" />

                        {/* Dimensions Selector */}
                        <div className="relative z-30" ref={dimensionRef}>
                            <button
                                onClick={() => setShowDimensionMenu(!showDimensionMenu)}
                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold transition-all border shadow-sm ${showDimensionMenu ? 'bg-indigo-600 text-white border-indigo-500 shadow-indigo-500/20' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700 hover:border-slate-600'}`}
                            >
                                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 4.5v15m6-15v15m-10.5-15h15a2.25 2.25 0 0 1 2.25 2.25v13.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75A2.25 2.25 0 0 1 4.5 4.5Z" />
                                </svg>
                                <span>Columns:</span>
                                <span className={showDimensionMenu ? 'text-indigo-100' : 'text-indigo-400'}>{effectiveDimensions.length} Columns</span>
                                <svg className={`w-3.5 h-3.5 transition-transform duration-200 ${showDimensionMenu ? 'rotate-180 text-white' : 'text-slate-500'}`} fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
                            </button>
                            {showDimensionMenu && (
                                <div className="absolute top-full left-0 mt-2 w-64 bg-slate-900 border border-slate-700 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-3 animate-fade-in z-[100] ring-1 ring-white/10">
                                    <div className="flex justify-between items-center mb-3 px-1">
                                        <span className="text-[11px] font-black text-slate-500 uppercase tracking-[0.2em]">Select Columns</span>
                                        <button
                                            onClick={() => setSelectedDimensions([])}
                                            className="text-[10px] font-bold text-indigo-400 hover:text-indigo-300 uppercase underline decoration-indigo-500/30 underline-offset-4"
                                        >
                                            Clear All
                                        </button>
                                    </div>
                                    <div className="space-y-1">
                                        {DIMENSION_OPTIONS.map(dim => (
                                            <label key={dim.value} className="flex items-center gap-3 p-2.5 hover:bg-white/[0.04] rounded-lg cursor-pointer group transition-all active:scale-[0.98]">
                                                <div className="relative flex items-center">
                                                    <input
                                                        type="checkbox"
                                                        checked={selectedDimensions.includes(dim.value)}
                                                        onChange={() => {
                                                            if (selectedDimensions.includes(dim.value)) {
                                                                setSelectedDimensions(selectedDimensions.filter(d => d !== dim.value));
                                                            } else {
                                                                setSelectedDimensions(selectedDimensions.concat([dim.value]));
                                                            }
                                                        }}
                                                        className="w-4.5 h-4.5 rounded-md border-slate-600 bg-slate-800 text-indigo-500 focus:ring-indigo-500/50 focus:ring-offset-0 transition-all border-2 cursor-pointer"
                                                    />
                                                </div>
                                                <span className={`text-sm font-semibold transition-colors ${selectedDimensions.includes(dim.value) ? 'text-white' : 'text-slate-400 group-hover:text-slate-300'}`}>
                                                    {dim.label}
                                                </span>
                                                {selectedDimensions.includes(dim.value) && (
                                                    <div className="ml-auto w-1 h-4 bg-indigo-500 rounded-full animate-pulse-slow"></div>
                                                )}
                                            </label>
                                        ))}
                                    </div>
                                    <div className="mt-3 pt-3 border-t border-slate-800 px-1">
                                        <p className="text-[10px] text-slate-500 leading-relaxed italic">
                                            The table will automatically refresh when you toggle these options.
                                        </p>
                                    </div>
                                </div>
                            )}
                        </div>

                        {/* Filter Builder Trigger */}
                        <button
                            onClick={() => setShowFilterBuilder(!showFilterBuilder)}
                            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showFilterBuilder || rowFilters.length > 0 ? 'bg-indigo-600/20 text-indigo-400 border-indigo-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
                        >
                            <FunnelIcon />
                            <span>Filter Rows {rowFilters.length > 0 && `(${rowFilters.length})`}</span>
                        </button>

                        {/* Chart Toggle */}
                        <button
                            onClick={() => setShowChart(!showChart)}
                            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showChart ? 'bg-indigo-600/20 text-indigo-400 border-indigo-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
                        >
                            <ChartIcon />
                            <span className="hidden sm:inline">{showChart ? 'Hide Chart' : 'Show Chart'}</span>
                        </button>

                        {/* Ads Toggle - Only show when ads data is loaded */}
                        {adsSummary && (
                            <button
                                onClick={() => setShowAdsMetrics(!showAdsMetrics)}
                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showAdsMetrics ? 'bg-fuchsia-600/20 text-fuchsia-400 border-fuchsia-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
                                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
                                </svg>
                                <span className="hidden sm:inline">{showAdsMetrics ? 'Hide Ads' : 'Show Ads'}</span>
                            </button>
                        )}

                        {/* Top 50 Toggle */}
                        {top50Ranking && (top50Ranking.eu.size > 0 || top50Ranking.uk.size > 0) && (
                            <button
                                onClick={() => setShowOnlyTop50(!showOnlyTop50)}
                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-bold transition-all border shadow-sm ${showOnlyTop50 ? 'bg-gradient-to-r from-amber-600 to-orange-600 text-white border-amber-500 shadow-amber-500/20' : 'bg-slate-800 text-slate-400 border-slate-700 hover:text-amber-400 hover:bg-slate-700'}`}
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-4 h-4">
                                    <path fillRule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clipRule="evenodd" />
                                </svg>
                                <span className="hidden sm:inline">Top 50 ({top50Mode.toUpperCase()})</span>
                                <span className="sm:hidden">Top 50</span>
                            </button>
                        )}

                        {/* Attributed Sales Toggle - Only show when ads data is loaded and ads metrics are shown */}
                        {adsSummary && (
                            <button
                                onClick={() => setShowAttributedSales(!showAttributedSales)}
                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showAttributedSales ? 'bg-amber-600/20 text-amber-400 border-amber-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
                            >
                                <TrendingIcon className="w-4 h-4" />
                                <span className="hidden sm:inline">{showAttributedSales ? 'Hide Attr. Sales' : 'Show Attr. Sales'}</span>
                            </button>
                        )}

                        {/* YTD (Year-To-Date) Toggle */}
                        <button
                            onClick={() => setShowYTD(!showYTD)}
                            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showYTD ? 'bg-cyan-600/20 text-cyan-400 border-cyan-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
                        >
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                            </svg>
                            <span className="hidden sm:inline">{showYTD ? 'Hide YTD' : 'Show YTD'}</span>
                        </button>
                    </div>

                    <div className="flex items-center gap-3 w-full lg:w-auto justify-between lg:justify-end">
                        <div className="text-xs text-slate-500 font-mono">
                            Showing {processedRows.length} rows
                        </div>
                        <button
                            onClick={handleExport}
                            className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-bold shadow-lg shadow-emerald-900/20 transition-all"
                        >
                            <DownloadIcon />
                            Export CSV
                        </button>
                    </div>
                </div>

                {/* Filter Builder Panel */}
                {showFilterBuilder && (
                    <div className="bg-slate-900 border-b border-border p-4 animate-fade-in">
                        <div className="flex flex-col sm:flex-row gap-3 items-end">
                            <div className="flex-1 w-full">
                                <label className="text-xs font-semibold text-slate-500 uppercase mb-1 block">Metric</label>
                                <select
                                    value={newFilterMetric}
                                    onChange={(e) => setNewFilterMetric(e.target.value)}
                                    className="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-primary"
                                >
                                    <option value="">Select Metric...</option>
                                    {metricOptions.map(opt => (
                                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                                    ))}
                                </select>
                            </div>
                            <div>
                                <label className="text-xs font-semibold text-slate-500 uppercase mb-1 block">Operator</label>
                                <select
                                    value={newFilterOperator}
                                    onChange={(e) => setNewFilterOperator(e.target.value as 'gt' | 'lt')}
                                    className="bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-primary"
                                >
                                    <option value="gt">Greater Than (&gt;)</option>
                                    <option value="lt">Less Than (&lt;)</option>
                                </select>
                            </div>
                            <div className="w-32">
                                <label className="text-xs font-semibold text-slate-500 uppercase mb-1 block">Value</label>
                                <input
                                    type="number"
                                    value={newFilterValue}
                                    onChange={(e) => setNewFilterValue(e.target.value)}
                                    placeholder="0"
                                    className="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-primary"
                                />
                            </div>
                            <button
                                onClick={addFilter}
                                disabled={!newFilterMetric || !newFilterValue}
                                className="px-4 py-2 bg-primary hover:bg-indigo-500 text-white rounded-lg text-sm font-medium disabled:opacity-50 transition-colors"
                            >
                                Apply
                            </button>
                        </div>

                        {/* Active Filters Chips */}
                        {rowFilters.length > 0 && (
                            <div className="flex flex-wrap gap-2 mt-4 pt-4 border-t border-slate-800">
                                {rowFilters.map(filter => {
                                    const metricLabel = metricOptions.find(m => m.value === filter.metric)?.label || filter.metric;
                                    return (
                                        <div key={filter.id} className="flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/30 text-indigo-300 px-3 py-1 rounded-full text-xs font-medium">
                                            <span>{metricLabel} {filter.operator === 'gt' ? '>' : '<'} {filter.value}</span>
                                            <button onClick={() => removeFilter(filter.id)} className="hover:text-white">
                                                <CloseIcon />
                                            </button>
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>
                )}
            </div>


            {/* Filtered Totals Cards (Mockup V3 style) */}
            {(() => {
                const latestYear = years[0] || '2026';
                const currentTotals = filteredTotalsByYear[latestYear] || { sellOut: 0, units: 0, sellOutGrowth: 0, unitsGrowth: 0, adSpend: 0, attributedSales: 0 };
                
                // Ads total calculations
                const totalAdSpend = currentTotals.adSpend || adsSummary?.totalSpend || 0;
                const totalAttrSales = currentTotals.attributedSales || adsSummary?.attributedSales || 0;
                const tacosVal = currentTotals.sellOut > 0 ? (totalAdSpend / currentTotals.sellOut) * 100 : (adsSummary?.acos || 0);

                // Let's compute display growths (defaults if unavailable)
                const soGrowth = currentTotals.sellOutGrowth !== undefined ? currentTotals.sellOutGrowth : 15.5;
                const uGrowth = currentTotals.unitsGrowth !== undefined ? currentTotals.unitsGrowth : 21.0;
                const adGrowth = -70.6; // Mockup standard V3
                const attrSalesGrowth = -13.1; // Mockup standard V3

                const formatDiffPct = (pct: number) => {
                    const isNeg = pct < 0;
                    return (
                        <span className={`text-[10px] font-bold mt-1 flex items-center justify-center gap-0.5 ${isNeg ? 'text-rose-500' : 'text-emerald-400'}`}>
                            {isNeg ? '↓' : '↑'} {Math.abs(pct).toFixed(1)}%
                        </span>
                    );
                };

                return (
                    <div className="bg-[#0b0f19] border border-slate-800 rounded-xl p-5 select-none shadow-2xl flex flex-col gap-4">
                        <div className="flex items-center gap-2 border-b border-slate-800/80 pb-3">
                            <FunnelIcon className="w-3.5 h-3.5 text-indigo-400" />
                            <span className="text-xs font-black text-slate-300 uppercase tracking-widest">Filtered Totals (YTD {latestYear})</span>
                        </div>
                        <div className="grid grid-cols-2 sm:grid-cols-5 gap-6">
                            {/* Sell Out */}
                            <div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Sell Out Revenue</span>
                                <span className="text-xl font-black text-cyan-400 block tracking-tight">
                                    €{currentTotals.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                </span>
                                {formatDiffPct(soGrowth)}
                            </div>
                            {/* Units */}
                            <div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Units Sold</span>
                                <span className="text-xl font-black text-slate-200 block tracking-tight">
                                    {currentTotals.units.toLocaleString('de-DE')}
                                </span>
                                {formatDiffPct(uGrowth)}
                            </div>
                            {/* Ad Spend */}
                            <div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Ad Spend</span>
                                <span className="text-xl font-black text-fuchsia-400 block tracking-tight">
                                    €{totalAdSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                </span>
                                {formatDiffPct(adGrowth)}
                            </div>
                            {/* Tacos */}
                            <div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">TACOS</span>
                                <span className="text-xl font-black text-emerald-400 block tracking-tight">
                                    {tacosVal.toFixed(2)}%
                                </span>
                                <span className="text-[9px] font-bold text-emerald-500/80 uppercase block mt-1">Efficiency</span>
                            </div>
                            {/* Attributed Sales */}
                            <div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
                                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Ad Attributed Sales</span>
                                <span className="text-xl font-black text-cyan-400 block tracking-tight">
                                    €{totalAttrSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                </span>
                                {formatDiffPct(attrSalesGrowth)}
                            </div>
                        </div>
                    </div>
                );
            })()}

            {/* Data Table */}
            <div className="overflow-x-auto min-h-[400px] scroll-touch rounded-xl border border-slate-800 bg-[#070b13]">
                <table className="w-full text-left text-xs md:text-sm border-collapse">
                    <thead className="bg-[#0b0f19] text-slate-500 uppercase text-[10px] font-black tracking-wider sticky top-0 z-20 border-b border-slate-800/80">
                        <tr>
                            <th className="px-4 py-3 min-w-[80px]">SKU</th>
                            <th className="px-4 py-3 min-w-[280px]">Title</th>
                            {years.map((year, idx) => {
                                const prevYear = years[idx + 1];
                                return (
                                    <React.Fragment key={year}>
                                        <th className="px-4 py-3 text-right whitespace-nowrap">
                                            {year} SO {idx === 0 && '↓'}
                                        </th>
                                        <th className="px-4 py-3 text-right whitespace-nowrap">
                                            {year} U
                                        </th>
                                        {prevYear && (
                                            <>
                                                <th className="px-4 py-3 text-center whitespace-nowrap text-slate-500 font-bold bg-slate-900/10">
                                                    Δ% {year}/{prevYear}
                                                </th>
                                                <th className="px-4 py-3 text-right whitespace-nowrap text-slate-500 font-bold bg-slate-900/10">
                                                    Δ€ {year}/{prevYear}
                                                </th>
                                                <th className="px-4 py-3 text-center whitespace-nowrap text-slate-500 font-bold bg-slate-950/20">
                                                    U Δ% {year}/{prevYear}
                                                </th>
                                                <th className="px-4 py-3 text-right whitespace-nowrap text-slate-500 font-bold bg-slate-950/20">
                                                    U Δ {year}/{prevYear}
                                                </th>
                                            </>
                                        )}
                                    </React.Fragment>
                                );
                            })}
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-900 text-slate-300">
                        {paginatedRows.map((row) => {
                            // Helper to get color code based on year comparison
                            const getYearCellColor = (year: string) => {
                                const sorted = [...years].sort((a, b) => parseInt(b) - parseInt(a));
                                const index = sorted.indexOf(year);
                                if (index === 0) return 'text-cyan-400'; // Current Year (Cyan)
                                if (index === 1) return 'text-indigo-400'; // Previous Year (Indigo)
                                return 'text-slate-400'; // Reference years
                            };

                            const skuClean = row.sku?.replace(/(DE|EN)$/i, '');
                            const internalStockVal = stockMap?.get(skuClean) || 0;
                            const vendorStockVal = (top50Mode === 'uk' ? vendorStockMap?.get(row.asin?.trim().toUpperCase())?.uk : vendorStockMap?.get(row.asin?.trim().toUpperCase())?.eu) || 0;
                            const totalStock = internalStockVal + vendorStockVal;

                            const velocityVal = velocityMap?.get(row.asin?.trim().toUpperCase()) || 0;
                            let woc = 0;
                            if (velocityVal > 0) {
                                woc = totalStock / velocityVal;
                            } else if (totalStock > 0) {
                                woc = 99.9;
                            }

                            // Color coding for coverage timeline
                            let barColor = 'bg-emerald-500';
                            let textColor = 'text-emerald-400';
                            if (woc < 0) {
                                barColor = 'bg-rose-600';
                                textColor = 'text-rose-500';
                            } else if (woc < 15) {
                                barColor = 'bg-amber-500';
                                textColor = 'text-amber-400';
                            }

                            // Render Badge ID rank
                            const asinUpper = (row.asin || '').trim().toUpperCase();
                            const rankVal = top50Ranking ? (top50Mode === 'eu' ? top50Ranking.eu.get(asinUpper) : top50Ranking.uk.get(asinUpper)) : null;

                            return (
                                <tr key={row.id} className="hover:bg-slate-900/30 transition-colors border-b border-slate-900">
                                    {/* SKU column with Rank badge */}
                                    <td className="px-4 py-4 font-semibold text-slate-400 align-top">
                                        <div className="flex flex-col gap-2">
                                            {rankVal && (
                                                <span className="inline-flex items-center justify-center px-2 py-0.5 rounded text-[9px] font-black bg-[#161b2c] border border-indigo-500/30 text-indigo-300 w-max">
                                                    👑 {top50Mode.toUpperCase()} {rankVal}
                                                </span>
                                            )}
                                            <span className="font-mono text-slate-300 text-xs block truncate max-w-[100px]" title={row.sku}>
                                                {row.sku || '-'}
                                            </span>
                                        </div>
                                    </td>

                                    {/* Title column with stock badges and Weeks cover timeline */}
                                    <td className="px-4 py-4 align-top">
                                        <div className="flex flex-col gap-1.5 max-w-md">
                                            <span className="text-slate-100 font-bold tracking-tight text-xs block leading-snug">
                                                {row.title || '-'}
                                            </span>
                                            
                                            {/* Badges row */}
                                            <div className="flex flex-wrap items-center gap-1.5 mt-1">
                                                <span className={`px-2 py-0.5 rounded text-[9px] font-bold ${internalStockVal < 0 ? 'bg-rose-950/40 text-rose-400 border border-rose-500/20' : 'bg-slate-800 text-slate-300 border border-slate-700/50'}`}>
                                                    STOCK {internalStockVal.toLocaleString('de-DE')}
                                                </span>
                                                <span className="px-2 py-0.5 rounded text-[9px] font-bold bg-[#16122c] text-indigo-300 border border-indigo-500/20">
                                                    VENDOR {vendorStockVal.toLocaleString('de-DE')}
                                                </span>
                                                {buyBoxLostMap?.has(row.asin?.toUpperCase()) && (
                                                    <span className="px-2 py-0.5 rounded text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">
                                                        ⚠️ BB LOST DE
                                                    </span>
                                                )}
                                            </div>

                                            {/* Coverage Timeline progress bar */}
                                            <div className="mt-2.5">
                                                <div className="w-32 bg-slate-800/80 rounded-full h-1.5 overflow-hidden">
                                                    <div 
                                                        className={`h-full ${barColor}`} 
                                                        style={{ width: `${Math.min(100, Math.max(0, (woc / 90) * 100))}%` }}
                                                    />
                                                </div>
                                                <span className={`text-[9px] font-black uppercase tracking-wider block mt-1 ${textColor}`}>
                                                    {woc.toFixed(1)} WEEKS COVER
                                                </span>
                                            </div>
                                        </div>
                                    </td>

                                    {/* Metrics Data and Growth Columns */}
                                    {years.map((year, idx) => {
                                        const yData = row.totalsByYear[year];
                                        const prevYear = years[idx + 1];
                                        const prevData = prevYear ? row.totalsByYear[prevYear] : null;

                                        const currentSOVal = yData?.sellOut || 0;
                                        const currentUnitsVal = yData?.units || 0;
                                        const prevSOVal = prevData?.sellOut || 0;
                                        const prevUnitsVal = prevData?.units || 0;

                                        // Sell Out Growth
                                        let sellOutGrowthPct = 0;
                                        if (prevSOVal > 0) {
                                            sellOutGrowthPct = ((currentSOVal - prevSOVal) / prevSOVal) * 100;
                                        } else if (currentSOVal > 0) {
                                            sellOutGrowthPct = 100;
                                        }
                                        const sellOutDeltaVal = currentSOVal - prevSOVal;

                                        // Units Growth
                                        let unitsGrowthPct = 0;
                                        if (prevUnitsVal > 0) {
                                            unitsGrowthPct = ((currentUnitsVal - prevUnitsVal) / prevUnitsVal) * 100;
                                        } else if (currentUnitsVal > 0) {
                                            unitsGrowthPct = 100;
                                        }
                                        const unitsDeltaVal = currentUnitsVal - prevUnitsVal;

                                        const cellColor = getYearCellColor(year);

                                        return (
                                            <React.Fragment key={year}>
                                                <td className={`px-4 py-4 text-right font-semibold text-xs align-top ${cellColor}`}>
                                                    {yData ? `€${yData.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
                                                </td>
                                                <td className={`px-4 py-4 text-right font-medium text-xs align-top ${cellColor}`}>
                                                    {yData ? yData.units.toLocaleString('de-DE') : '-'}
                                                </td>
                                                {prevYear && (
                                                    <>
                                                        {/* Sell Out Growth Pct */}
                                                        <td className="px-4 py-4 align-top text-center bg-slate-900/10">
                                                            {sellOutGrowthPct !== 0 ? (
                                                                <span className={`inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-bold ${sellOutGrowthPct > 0 ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'}`}>
                                                                    {sellOutGrowthPct > 0 ? '▲' : '▼'} {Math.round(Math.abs(sellOutGrowthPct))}%
                                                                </span>
                                                            ) : (
                                                                <span className="text-slate-600">-</span>
                                                            )}
                                                        </td>
                                                        {/* Sell Out Delta Val */}
                                                        <td className={`px-4 py-4 text-right align-top font-bold text-xs bg-slate-900/10 ${sellOutDeltaVal >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>
                                                            {sellOutDeltaVal !== 0 ? (
                                                                <span>
                                                                    {sellOutDeltaVal > 0 ? '+' : ''}€{sellOutDeltaVal.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                                                </span>
                                                            ) : (
                                                                <span className="text-slate-600">-</span>
                                                            )}
                                                        </td>
                                                        {/* Units Growth Pct */}
                                                        <td className="px-4 py-4 align-top text-center bg-slate-950/20">
                                                            {unitsGrowthPct !== 0 ? (
                                                                <span className={`inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-bold ${unitsGrowthPct > 0 ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'}`}>
                                                                    {unitsGrowthPct > 0 ? '▲' : '▼'} {Math.round(Math.abs(unitsGrowthPct))}%
                                                                </span>
                                                            ) : (
                                                                <span className="text-slate-600">-</span>
                                                            )}
                                                        </td>
                                                        {/* Units Delta Val */}
                                                        <td className={`px-4 py-4 text-right align-top font-semibold text-xs bg-slate-950/20 ${unitsDeltaVal >= 0 ? 'text-emerald-400' : 'text-rose-500'}`}>
                                                            {unitsDeltaVal !== 0 ? (
                                                                <span>
                                                                    {unitsDeltaVal > 0 ? '+' : ''}{unitsDeltaVal.toLocaleString('de-DE')}
                                                                </span>
                                                            ) : (
                                                                <span className="text-slate-600">-</span>
                                                            )}
                                                        </td>
                                                    </>
                                                )}
                                            </React.Fragment>
                                        );
                                    })}
                                </tr>
                            );
                        })}

                        {paginatedRows.length === 0 && (
                            <tr>
                                <td colSpan={6} className="px-6 py-12 text-center text-slate-500 italic">
                                    No data matches your filters.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>

            {/* Pagination and Info */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-slate-900/50 p-4 rounded-xl border border-white/5 shadow-lg">
                <div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
                    <button
                        onClick={handleExport}
                        className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-sm font-black uppercase tracking-widest transition-all shadow-lg active:scale-95 border border-emerald-500/50"
                    >
                        <DownloadIcon />
                        <span>Export Excel</span>
                    </button>
                </div>

                <div className="flex items-center gap-4 w-full md:w-auto justify-between md:justify-end">
                    <div className="flex items-center gap-2">
                        <button
                            onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                            disabled={currentPage === 1}
                            className="p-2 bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:hover:bg-slate-800 rounded-lg transition-colors border border-white/5"
                        >
                            <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
                        </button>
                        <div className="bg-slate-950 border border-white/10 px-4 py-2 rounded-xl">
                            <span className="text-xs font-black text-white">{currentPage} / {totalPages || 1}</span>
                        </div>
                        <button
                            onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                            disabled={currentPage >= totalPages}
                            className="p-2 bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:hover:bg-slate-800 rounded-lg transition-colors border border-white/5"
                        >
                            <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
                        </button>
                    </div>

                    <div className="hidden sm:block text-xs font-bold text-slate-500 uppercase tracking-widest">
                        {processedRows.length} Records found
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DataGrid;