CrazeAnalytix/components/ForecastView.tsx

import React, { useMemo, useState } from 'react';
import { ProductForecastData } from '../types';
import {
    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
    LineChart, Line, Legend, ComposedChart, Area
} from 'recharts';

interface ForecastViewProps {
    data: ProductForecastData[];
}

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

const ForecastView: React.FC<ForecastViewProps> = ({ data }) => {
    const [searchTerm, setSearchTerm] = useState('');

    // Global Aggregate Data
    const globalMonthlyData = useMemo(() => {
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        return months.map(m => {
            let forecast = 0;
            let actual = 0;
            data.forEach(p => {
                const monthPoint = p.monthlyData.find(md => md.month === m);
                if (monthPoint) {
                    forecast += monthPoint.forecastUnits;
                    actual += monthPoint.actualUnits;
                }
            });
            return { name: m, Forecast: forecast, Actual: actual };
        });
    }, [data]);

    const globalSummary = useMemo(() => {
        let totalForecast = 0;
        let totalActual = 0;
        data.forEach(p => {
            totalForecast += p.annualForecast;
            p.monthlyData.forEach(md => {
                totalActual += md.actualUnits;
            });
        });
        const fulfillment = totalForecast > 0 ? (totalActual / totalForecast) * 100 : 0;
        return { totalForecast, totalActual, fulfillment };
    }, [data]);

    const filteredProducts = useMemo(() => {
        if (!searchTerm) return data;
        const s = searchTerm.toLowerCase();
        return data.filter(p =>
            p.asin.toLowerCase().includes(s) ||
            p.sku.toLowerCase().includes(s) ||
            p.title.toLowerCase().includes(s)
        );
    }, [data, searchTerm]);

    const sortedProducts = useMemo(() => {
        return [...filteredProducts].sort((a, b) => b.annualForecast - a.annualForecast);
    }, [filteredProducts]);

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

            {/* Summary Cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-slate-900 border border-border rounded-2xl p-6 shadow-xl relative overflow-hidden group">
                    <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
                    <h3 className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Total Forecast 2026</h3>
                    <div className="text-4xl font-black text-white">
                        {globalSummary.totalForecast.toLocaleString('de-DE')} <span className="text-sm font-medium text-slate-500">Units</span>
                    </div>
                </div>

                <div className="bg-slate-900 border border-border rounded-2xl p-6 shadow-xl relative overflow-hidden group">
                    <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-emerald-500/20 transition-all"></div>
                    <h3 className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Total Actual Sales 2026</h3>
                    <div className="text-4xl font-black text-emerald-400">
                        {globalSummary.totalActual.toLocaleString('de-DE')} <span className="text-sm font-medium text-slate-500">Units</span>
                    </div>
                </div>

                <div className="bg-slate-900 border border-indigo-500/30 rounded-2xl p-6 shadow-xl relative overflow-hidden group">
                    <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/20 rounded-full -mr-16 -mt-16 blur-3xl"></div>
                    <h3 className="text-xs font-black text-indigo-400 uppercase tracking-widest mb-4">Global Fulfillment</h3>
                    <div className="flex items-baseline gap-2">
                        <div className={`text-4xl font-black ${globalSummary.fulfillment >= 100 ? 'text-emerald-400' : 'text-indigo-400'}`}>
                            {globalSummary.fulfillment.toFixed(1)}%
                        </div>
                    </div>
                    {/* Fulfillment Progress Bar */}
                    <div className="mt-4 w-full h-2 bg-slate-800 rounded-full overflow-hidden">
                        <div
                            className="h-full bg-gradient-to-r from-indigo-500 to-fuchsia-500 shadow-[0_0_8px_rgba(99,102,241,0.5)] transition-all duration-1000"
                            style={{ width: `${Math.min(100, globalSummary.fulfillment)}%` }}
                        ></div>
                    </div>
                </div>
            </div>

            {/* Main Trend Chart */}
            <div className="bg-slate-900 border border-border rounded-2xl p-6 shadow-xl">
                <div className="flex justify-between items-center mb-6">
                    <h3 className="text-lg font-bold text-white flex items-center gap-2">
                        <svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
                        Monthly Evolution: Forecast vs Actual
                    </h3>
                </div>
                <div className="h-96">
                    <ResponsiveContainer width="100%" height="100%">
                        <ComposedChart data={globalMonthlyData}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
                            <XAxis dataKey="name" stroke="#64748b" />
                            <YAxis stroke="#64748b" />
                            <Tooltip
                                contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', borderRadius: '12px', padding: '12px' }}
                                itemStyle={{ fontWeight: 'bold' }}
                            />
                            <Legend verticalAlign="top" height={36} />
                            <Bar dataKey="Actual" fill="#10b981" radius={[4, 4, 0, 0]} name="Actual Sales" barSize={40} />
                            <Line type="monotone" dataKey="Forecast" stroke="#6366f1" strokeWidth={4} dot={{ r: 6, fill: '#6366f1' }} name="Forecast Target" />
                            <Area type="monotone" dataKey="Forecast" fill="#6366f1" fillOpacity={0.05} stroke="none" />
                        </ComposedChart>
                    </ResponsiveContainer>
                </div>
            </div>

            {/* Product Table */}
            <div className="bg-slate-900 border border-border rounded-2xl shadow-xl overflow-hidden">
                <div className="p-6 border-b border-border flex flex-col md:flex-row justify-between gap-4">
                    <h3 className="text-lg font-bold text-white uppercase tracking-tight">Product Performance Comparison</h3>
                    <div className="relative">
                        <input
                            type="text"
                            placeholder="Search by ASIN, SKU or Title..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="bg-slate-950 border border-slate-700 rounded-lg px-10 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500 w-full md:w-80"
                        />
                        <svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
                <div className="overflow-x-auto">
                    <table className="w-full text-left text-sm whitespace-nowrap">
                        <thead className="bg-slate-950 text-slate-500 uppercase text-[10px] font-black tracking-widest border-b border-border">
                            <tr>
                                <th className="px-6 py-4">Product Info</th>
                                <th className="px-6 py-4 text-right">Annual Forecast</th>
                                <th className="px-6 py-4 text-right">Actual 2026</th>
                                <th className="px-6 py-4 text-right">Fulfillment %</th>
                                <th className="px-6 py-4">Monthly Status (YTD)</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-800">
                            {sortedProducts.map((p) => {
                                const actualTotal = p.monthlyData.reduce((acc, md) => acc + md.actualUnits, 0);
                                const fulfillment = p.annualForecast > 0 ? (actualTotal / p.annualForecast) * 100 : 0;

                                return (
                                    <tr key={p.asin} className="hover:bg-indigo-500/5 transition-colors group">
                                        <td className="px-6 py-4">
                                            <div className="flex flex-col">
                                                <span className="font-bold text-slate-200 group-hover:text-indigo-400 transition-colors">{p.asin}</span>
                                                <span className="text-[10px] text-slate-500 truncate max-w-xs">{p.title}</span>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4 text-right font-mono font-bold text-slate-400">
                                            {p.annualForecast.toLocaleString('de-DE')}
                                        </td>
                                        <td className="px-6 py-4 text-right font-mono font-bold text-emerald-400">
                                            {actualTotal.toLocaleString('de-DE')}
                                        </td>
                                        <td className="px-6 py-4 text-right">
                                            <span className={`px-2 py-1 rounded text-xs font-black ${fulfillment >= 50 ? 'bg-emerald-500/10 text-emerald-400' : fulfillment >= 20 ? 'bg-indigo-500/10 text-indigo-400' : 'bg-slate-800 text-slate-500'}`}>
                                                {fulfillment.toFixed(1)}%
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 min-w-[240px]">
                                            <div className="flex gap-1 h-3 items-end">
                                                {p.monthlyData.map((md, idx) => {
                                                    const isMet = md.actualUnits >= md.forecastUnits && md.forecastUnits > 0;
                                                    const height = md.forecastUnits > 0 ? (Math.min(1.5, md.actualUnits / md.forecastUnits) * 100) : 0;
                                                    return (
                                                        <div
                                                            key={md.month}
                                                            className={`flex-1 rounded-t-sm transition-all ${isMet ? 'bg-emerald-500' : md.actualUnits > 0 ? 'bg-indigo-500' : 'bg-slate-800'}`}
                                                            style={{ height: `${Math.max(10, height)}%` }}
                                                            title={`${md.month}: ${md.actualUnits} / ${md.forecastUnits}`}
                                                        ></div>
                                                    );
                                                })}
                                            </div>
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default ForecastView;