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

interface AdvertisingDashboardProps {
  data: CombinedKPIs[];
}

// Helper to aggregate data for charts
const aggregateByMonth = (data: CombinedKPIs[]) => {
    const map = new Map<string, any>();
    
    // Sort chronologically if needed, but assuming input might be mixed
    // We'll create keys like "Jan 23", "Feb 23" and sort them later
    
    data.forEach(item => {
        const key = item.month; // e.g. "May-24"
        if (!map.has(key)) {
            map.set(key, {
                name: key,
                salesTotal: 0,
                salesAds: 0,
                cost: 0,
                salesOrganic: 0,
                impressions: 0,
                clicks: 0,
                unitsTotal: 0,
                unitsAds: 0
            });
        }
        const entry = map.get(key);
        entry.salesTotal += item.salesTotal;
        entry.salesAds += item.salesAds;
        entry.cost += item.cost;
        entry.salesOrganic += item.salesOrganic;
        entry.impressions += item.impressions;
        entry.clicks += item.clicks;
        entry.unitsTotal += item.unitsTotal;
        entry.unitsAds += item.unitsAds;
    });

    const result = Array.from(map.values()).map(r => ({
        ..r,
        acos: r.salesAds > 0 ? (r.cost / r.salesAds) * 100 : 0,
        tacos: r.salesTotal > 0 ? (r.cost / r.salesTotal) * 100 : 0,
        ctr: r.impressions > 0 ? (r.clicks / r.impressions) * 100 : 0,
        cpc: r.clicks > 0 ? r.cost / r.clicks : 0
    }));

    // Sort by Date
    return result.sort((a, b) => {
        const [mA, yA] = a.name.split('-');
        const [mB, yB] = b.name.split('-');
        
        // Year comparison
        if (yA !== yB) return parseInt(yA) - parseInt(yB);
        
        // Month comparison
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        return months.indexOf(mA) - months.indexOf(mB);
    });
};

const KPICard = ({ title, value, subValue, type = 'currency' }: { title: string, value: number, subValue?: string, type?: 'currency' | 'percent' | 'number' }) => {
    const formatted = type === 'currency' 
        ? `€${value.toLocaleString('de-DE', { maximumFractionDigits: 0 })}`
        : type === 'percent' 
            ? `${value.toFixed(2)}%`
            : value.toLocaleString('de-DE');

    return (
        <div className="bg-surface border border-border rounded-xl p-5 flex flex-col shadow-sm hover:shadow-md transition-shadow">
            <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">{title}</span>
            <span className="text-2xl font-bold text-slate-100">{formatted}</span>
            {subValue && <span className="text-xs text-slate-500 mt-1">{subValue}</span>}
        </div>
    );
};

const AdvertisingDashboard: React.FC<AdvertisingDashboardProps> = ({ data }) => {
  
  const aggregated = useMemo(() => aggregateByMonth(data), [data]);
  
  const totals = useMemo(() => {
      return data.reduce((acc, curr) => ({
          salesTotal: acc.salesTotal + curr.salesTotal,
          salesAds: acc.salesAds + curr.salesAds,
          cost: acc.cost + curr.cost,
          clicks: acc.clicks + curr.clicks,
          impressions: acc.impressions + curr.impressions,
          salesOrganic: acc.salesOrganic + curr.salesOrganic
      }), { salesTotal: 0, salesAds: 0, cost: 0, clicks: 0, impressions: 0, salesOrganic: 0 });
  }, [data]);

  const kpiAcos = totals.salesAds > 0 ? (totals.cost / totals.salesAds) * 100 : 0;
  const kpiTacos = totals.salesTotal > 0 ? (totals.cost / totals.salesTotal) * 100 : 0;
  const kpiRoas = totals.cost > 0 ? totals.salesAds / totals.cost : 0;

  if (data.length === 0) {
      return (
          <div className="flex flex-col items-center justify-center h-96 text-slate-500">
              <p className="text-lg font-medium">No Advertising Data Available</p>
              <p className="text-sm">Please upload an Ads CSV file via "Connect Data".</p>
          </div>
      )
  }

  return (
    <div className="space-y-6 max-w-7xl mx-auto pb-24 animate-fade-in">
        
        {/* KPI Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <KPICard title="Ad Spend" value={totals.cost} />
            <KPICard title="Ad Sales" value={totals.salesAds} subValue={`${((totals.salesAds / totals.salesTotal) * 100).toFixed(1)}% of Total`} />
            <KPICard title="Total Sales" value={totals.salesTotal} />
            <KPICard title="ACOS" value={kpiAcos} type="percent" />
            <KPICard title="TACOS" value={kpiTacos} type="percent" />
            <KPICard title="ROAS" value={kpiRoas} type="number" subValue="Return on Ad Spend" />
        </div>

        {/* Charts Row 1 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            {/* Spend vs Sales Trend */}
            <div className="bg-surface border border-border rounded-xl p-6 h-96 flex flex-col">
                <h3 className="text-sm font-bold text-slate-300 uppercase mb-4">Ad Spend vs Ad Sales Trend</h3>
                <div className="flex-1 min-h-0">
                    <ResponsiveContainer width="100%" height="100%">
                        <ComposedChart data={aggregated}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                            <XAxis dataKey="name" stroke="#64748b" />
                            <YAxis yAxisId="left" stroke="#64748b" tickFormatter={(v) => `€${v/1000}k`} />
                            <Tooltip 
                                contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', color: '#e2e8f0' }}
                                formatter={(val: number) => `€${val.toLocaleString('de-DE')}`}
                            />
                            <Legend />
                            <Bar yAxisId="left" dataKey="cost" name="Ad Spend" fill="#f43f5e" radius={[4, 4, 0, 0]} />
                            <Line yAxisId="left" type="monotone" dataKey="salesAds" name="Ad Sales" stroke="#10b981" strokeWidth={3} />
                        </ComposedChart>
                    </ResponsiveContainer>
                </div>
            </div>

            {/* ACOS vs TACOS Trend */}
            <div className="bg-surface border border-border rounded-xl p-6 h-96 flex flex-col">
                <h3 className="text-sm font-bold text-slate-300 uppercase mb-4">Efficiency: ACOS vs TACOS</h3>
                <div className="flex-1 min-h-0">
                    <ResponsiveContainer width="100%" height="100%">
                        <LineChart data={aggregated}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                            <XAxis dataKey="name" stroke="#64748b" />
                            <YAxis stroke="#64748b" unit="%" />
                            <Tooltip 
                                contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', color: '#e2e8f0' }}
                                formatter={(val: number) => `${val.toFixed(2)}%`}
                            />
                            <Legend />
                            <Line type="monotone" dataKey="acos" name="ACOS" stroke="#f59e0b" strokeWidth={2} dot={{r:4}} />
                            <Line type="monotone" dataKey="tacos" name="TACOS" stroke="#3b82f6" strokeWidth={2} dot={{r:4}} />
                        </LineChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </div>

        {/* Charts Row 2 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            
            {/* Organic vs Paid Sales */}
            <div className="bg-surface border border-border rounded-xl p-6 h-96 flex flex-col">
                <h3 className="text-sm font-bold text-slate-300 uppercase mb-4">Total Sales Composition (Organic vs Paid)</h3>
                <div className="flex-1 min-h-0">
                    <ResponsiveContainer width="100%" height="100%">
                        <AreaChart data={aggregated}>
                             <defs>
                                <linearGradient id="colorOrganic" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="5%" stopColor="#6366f1" stopOpacity={0.3}/>
                                    <stop offset="95%" stopColor="#6366f1" stopOpacity={0}/>
                                </linearGradient>
                                <linearGradient id="colorPaid" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="5%" stopColor="#ec4899" stopOpacity={0.3}/>
                                    <stop offset="95%" stopColor="#ec4899" stopOpacity={0}/>
                                </linearGradient>
                            </defs>
                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                            <XAxis dataKey="name" stroke="#64748b" />
                            <YAxis stroke="#64748b" tickFormatter={(v) => `€${v/1000}k`} />
                            <Tooltip 
                                contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', color: '#e2e8f0' }}
                                formatter={(val: number) => `€${val.toLocaleString('de-DE')}`}
                            />
                            <Legend />
                            <Area type="monotone" dataKey="salesOrganic" name="Organic Sales" stroke="#6366f1" fillOpacity={1} fill="url(#colorOrganic)" stackId="1" />
                            <Area type="monotone" dataKey="salesAds" name="Paid Sales" stroke="#ec4899" fillOpacity={1} fill="url(#colorPaid)" stackId="1" />
                        </AreaChart>
                    </ResponsiveContainer>
                </div>
            </div>

            {/* Funnel: Impressions -> Clicks */}
            <div className="bg-surface border border-border rounded-xl p-6 h-96 flex flex-col">
                <h3 className="text-sm font-bold text-slate-300 uppercase mb-4">Marketing Funnel (Impressions & Clicks)</h3>
                <div className="flex-1 min-h-0">
                    <ResponsiveContainer width="100%" height="100%">
                        <ComposedChart data={aggregated}>
                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                            <XAxis dataKey="name" stroke="#64748b" />
                            <YAxis yAxisId="left" stroke="#8b5cf6" tickFormatter={(v) => `${(v/1000).toFixed(0)}k`} label={{ value: 'Impressions', angle: -90, position: 'insideLeft', fill: '#8b5cf6' }} />
                            <YAxis yAxisId="right" orientation="right" stroke="#0ea5e9" label={{ value: 'Clicks', angle: 90, position: 'insideRight', fill: '#0ea5e9' }} />
                            <Tooltip 
                                contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', color: '#e2e8f0' }}
                            />
                            <Legend />
                            <Bar yAxisId="left" dataKey="impressions" name="Impressions" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
                            <Line yAxisId="right" type="monotone" dataKey="clicks" name="Clicks" stroke="#0ea5e9" strokeWidth={2} />
                        </ComposedChart>
                    </ResponsiveContainer>
                </div>
            </div>
        </div>

        {/* Detailed Table */}
        <div className="bg-surface border border-border rounded-xl shadow-lg overflow-hidden flex flex-col">
             <div className="p-4 border-b border-border bg-slate-900/50">
                <h3 className="font-bold text-slate-200">Monthly Advertising Breakdown</h3>
             </div>
             <div className="overflow-x-auto">
                 <table className="w-full text-left text-sm text-slate-300">
                     <thead className="bg-slate-950 text-xs uppercase font-semibold text-slate-500">
                         <tr>
                             <th className="px-4 py-3">Period</th>
                             <th className="px-4 py-3 text-right">Spend</th>
                             <th className="px-4 py-3 text-right">Ad Sales</th>
                             <th className="px-4 py-3 text-right">Total Sales</th>
                             <th className="px-4 py-3 text-right">ACOS</th>
                             <th className="px-4 py-3 text-right">TACOS</th>
                             <th className="px-4 py-3 text-right">Clicks</th>
                             <th className="px-4 py-3 text-right">CPC</th>
                         </tr>
                     </thead>
                     <tbody className="divide-y divide-border">
                         {[...aggregated].reverse().map((row, idx) => (
                             <tr key={idx} className="hover:bg-slate-800/50">
                                 <td className="px-4 py-3 font-medium text-slate-200">{row.name}</td>
                                 <td className="px-4 py-3 text-right">€{row.cost.toLocaleString('de-DE', {maximumFractionDigits:0})}</td>
                                 <td className="px-4 py-3 text-right text-emerald-400">€{row.salesAds.toLocaleString('de-DE', {maximumFractionDigits:0})}</td>
                                 <td className="px-4 py-3 text-right">€{row.salesTotal.toLocaleString('de-DE', {maximumFractionDigits:0})}</td>
                                 <td className="px-4 py-3 text-right">{row.acos.toFixed(2)}%</td>
                                 <td className="px-4 py-3 text-right">{row.tacos.toFixed(2)}%</td>
                                 <td className="px-4 py-3 text-right">{row.clicks.toLocaleString('de-DE')}</td>
                                 <td className="px-4 py-3 text-right">€{row.cpc.toFixed(2)}</td>
                             </tr>
                         ))}
                     </tbody>
                 </table>
             </div>
        </div>

    </div>
  );
};

// Fix for AreaChart reference error in some bundlers, just export
import { AreaChart } from 'recharts';

export default AdvertisingDashboard;
