CrazeAnalytix/components/WeeklyGrid.tsx

import React, { useMemo, useState, useEffect } from 'react';
import { CombinedKPIs } from '../types';
import { pivotWeeklySalesData, WeeklyPivotRow } from '../services/dataProcessor';

interface WeeklyGridProps {
    data: CombinedKPIs[];
}

type SortConfig = {
    key: string; // weekKey
    direction: 'asc' | 'desc';
    metric: 'units' | 'spend';
} | null;

const ROWS_PER_PAGE = 50;

const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
    const { rows, weeks } = useMemo(() => pivotWeeklySalesData(data), [data]);

    const [searchTerm, setSearchTerm] = useState('');
    const [currentPage, setCurrentPage] = useState(1);

    // Default sort: most recent week, descending, units
    const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
        if (weeks.length > 0) {
            return { key: weeks[0], direction: 'desc', metric: 'units' };
        }
        return null;
    });

    // Reset pagination when search changes
    useEffect(() => {
        setCurrentPage(1);
    }, [searchTerm]);

    const handleSort = (weekKey: string, metric: 'units' | 'spend') => {
        setSortConfig(prev => {
            if (prev?.key === weekKey && prev.metric === metric) {
                // Toggle direction if same week & same metric
                return { key: weekKey, direction: prev.direction === 'asc' ? 'desc' : 'asc', metric };
            }
            // Switch to new week/metric with default DESC
            return { key: weekKey, direction: 'desc', metric };
        });
    };

    // 1. Filter by search term
    const filteredRows = useMemo(() => {
        if (!searchTerm) return rows;
        const lowSearch = searchTerm.toLowerCase();
        return rows.filter(r =>
            r.sku.toLowerCase().includes(lowSearch) ||
            r.title.toLowerCase().includes(lowSearch) ||
            r.line.toLowerCase().includes(lowSearch)
        );
    }, [rows, searchTerm]);

    // 2. Sort results
    const sortedRows = useMemo(() => {
        const result = [...filteredRows];
        if (sortConfig) {
            result.sort((a, b) => {
                const metricKey = sortConfig.metric === 'units' ? 'unitsByWeek' : 'spendByWeek';
                const valA = a[metricKey][sortConfig.key] || 0;
                const valB = b[metricKey][sortConfig.key] || 0;
                if (sortConfig.direction === 'asc') {
                    return valA - valB;
                }
                return valB - valA;
            });
        }
        return result;
    }, [filteredRows, sortConfig]);

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

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

    // Calculate totals per week
    const weekTotals = useMemo(() => {
        const totals: { [weekKey: string]: { units: number, spend: number } } = {};
        weeks.forEach(week => {
            totals[week] = filteredRows.reduce((acc, row) => {
                acc.units += (row.unitsByWeek[week] || 0);
                acc.spend += (row.spendByWeek[week] || 0);
                return acc;
            }, { units: 0, spend: 0 });
        });
        return totals;
    }, [filteredRows, weeks]);

    const renderGrowth = (current: number, previous: number) => {
        if (!previous || previous === 0) return null;
        const pct = ((current - previous) / previous) * 100;
        const isPositive = pct >= 0;

        return (
            <span className={`text-[10px] font-bold ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>
                {isPositive ? '▲' : '▼'}{Math.abs(pct).toFixed(0)}%
            </span>
        );
    };

    return (
        <div className="flex flex-col gap-4 animate-fade-in">
            {/* Toolbar: Search & Pagination */}
            <div className="flex flex-col lg:flex-row justify-between items-center gap-4 bg-slate-900/50 p-4 border border-white/10 rounded-xl">
                <div className="relative w-full md:w-80">
                    <input
                        type="text"
                        placeholder="Search SKU, Title, or Line..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-base text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
                    />
                    <svg className="absolute left-3 top-3 w-5 h-5 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>
                </div>

                <div className="flex items-center gap-3">
                    <span className="text-sm text-slate-500">
                        Showing {Math.min(sortedRows.length, (currentPage - 1) * ROWS_PER_PAGE + 1)}-{Math.min(sortedRows.length, currentPage * ROWS_PER_PAGE)} of {sortedRows.length}
                    </span>
                    <div className="flex items-center gap-1">
                        <button
                            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                            disabled={currentPage === 1}
                            className="p-2.5 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-5 h-5 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>
                        <span className="bg-slate-950 border border-white/10 px-4 py-2 rounded-lg text-sm font-bold text-white min-w-[70px] text-center">
                            {currentPage} / {Math.max(1, totalPages)}
                        </span>
                        <button
                            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                            disabled={currentPage >= totalPages}
                            className="p-2.5 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-5 h-5 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>
            </div>

            <div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden shadow-2xl">
                <div className="overflow-x-auto overflow-y-auto max-h-[calc(100vh-360px)] custom-scrollbar">
                    <table className="w-full text-left border-collapse min-w-[max-content]">
                        <thead className="sticky top-0 z-20">
                            <tr className="bg-slate-900 border-b border-white/10">
                                <th className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-30 bg-slate-900 border-r border-white/10 min-w-[240px]">Product Details</th>
                                {weeks.map(week => (
                                    <th
                                        key={week}
                                        className={`p-0 text-[10px] font-black uppercase tracking-widest text-center border-r border-white/10 min-w-[130px] transition-colors select-none ${sortConfig?.key === week ? 'bg-white/[0.02]' : ''}`}
                                    >
                                        <div className="flex flex-col h-full">
                                            {/* Week Label */}
                                            <div className="p-2 border-b border-white/5 bg-slate-800/30 text-xs text-white">
                                                {week.split('-')[1]}/{week.split('-')[0].slice(-2)}
                                            </div>

                                            {/* Units Sort Trigger */}
                                            <div
                                                onClick={() => handleSort(week, 'units')}
                                                className={`flex-1 p-1.5 cursor-pointer hover:bg-indigo-500/10 transition-colors flex items-center justify-center gap-1 border-b border-white/5 ${sortConfig?.key === week && sortConfig.metric === 'units' ? 'bg-indigo-500/5 text-indigo-400' : 'text-slate-500 hover:text-slate-300'}`}
                                            >
                                                <span className="text-[9px]">Units</span>
                                                {sortConfig?.key === week && sortConfig.metric === 'units' && (
                                                    <span className="text-xs font-bold leading-none">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>
                                                )}
                                            </div>

                                            {/* Spend Sort Trigger */}
                                            <div
                                                onClick={() => handleSort(week, 'spend')}
                                                className={`flex-1 p-1.5 cursor-pointer hover:bg-amber-500/10 transition-colors flex items-center justify-center gap-1 ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'bg-amber-500/5 text-amber-400' : 'text-slate-500 hover:text-slate-300'}`}
                                            >
                                                <span className="text-[9px]">Spend</span>
                                                {sortConfig?.key === week && sortConfig.metric === 'spend' && (
                                                    <span className="text-xs font-bold leading-none">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>
                                                )}
                                            </div>
                                        </div>
                                    </th>
                                ))}
                            </tr>
                            <tr className="bg-indigo-950/40 backdrop-blur-md border-b border-white/10">
                                <th className="p-3 text-sm font-black text-white sticky left-0 z-30 bg-indigo-900/60 border-r border-white/10">TOTALS</th>
                                {weeks.map((week, idx) => (
                                    <th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10">
                                        <div className="flex flex-col items-center">
                                            <div className="flex items-center gap-1">
                                                <span>{weekTotals[week].units.toLocaleString('de-DE')}</span>
                                                {renderGrowth(weekTotals[week].units, weekTotals[weeks[idx + 1]]?.units)}
                                            </div>
                                            <div className="text-[10px] text-indigo-400 font-bold">
                                                €{weekTotals[week].spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                            </div>
                                        </div>
                                    </th>
                                ))}
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-white/5">
                            {paginatedRows.length > 0 ? (
                                paginatedRows.map((row) => (
                                    <tr key={row.id} className="hover:bg-white/[0.02] transition-colors group">
                                        <td className="p-3 py-2 sticky left-0 z-10 bg-slate-900 md:bg-slate-900/95 backdrop-blur-sm group-hover:bg-slate-800 border-r border-white/10">
                                            <div className="flex flex-col">
                                                <span className="text-xs font-black text-indigo-400 uppercase tracking-tighter truncate w-[210px]">{row.sku}</span>
                                                <span className="text-[11px] text-white/70 truncate w-[210px] leading-tight mb-1" title={row.title}>{row.title}</span>
                                                <span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>
                                            </div>
                                        </td>
                                        {weeks.map((week, idx) => {
                                            const val = row.unitsByWeek[week] || 0;
                                            const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0;
                                            const spend = row.spendByWeek[week] || 0;
                                            return (
                                                <td key={week} className={`p-3 py-2 text-center border-r border-white/5 align-middle ${sortConfig?.key === week ? 'bg-white/[0.01]' : ''}`}>
                                                    <div className="flex flex-col items-center justify-center gap-0.5">
                                                        <div className="flex items-center gap-1">
                                                            <span className={`text-sm font-bold ${val > 0 ? (sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}>
                                                                {val > 0 ? val.toLocaleString('de-DE') : '-'}
                                                            </span>
                                                            {val > 0 && renderGrowth(val, prevVal)}
                                                        </div>
                                                        {spend > 0 && (
                                                            <span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
                                                                €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                                            </span>
                                                        )}
                                                    </div>
                                                </td>
                                            );
                                        })}
                                    </tr>
                                ))
                            ) : (
                                <tr>
                                    <td colSpan={weeks.length + 1} className="p-10 text-center text-slate-500 italic text-base">
                                        No SKUs found matching "{searchTerm}"
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default WeeklyGrid;