"use client";

import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip as RTooltip, ReferenceLine } from "recharts";

interface DataPoint { date: string; value: number }
interface EventMarker { date: string; name: string; impactPct: number }
interface Props { actual: DataPoint[]; normalized: DataPoint[]; events: EventMarker[]; totalImpact: string }

export default function NormalizedChart({ actual, normalized, events, totalImpact }: Props) {
  const chartData = actual.map((a, i) => ({ date: a.date, actual: a.value, normalized: normalized[i]?.value ?? a.value }));

  return (
    <div className="rounded-2xl overflow-hidden" style={{ background: "#0B1120" }}>
      <div className="px-5 py-4">
        <h3 className="text-sm font-bold text-white mb-1">Actual vs Normalized Performance</h3>
        <p className="text-xs text-slate-400">{totalImpact}</p>
      </div>
      <div className="px-3 pb-3 h-52">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={chartData}>
            <defs>
              <linearGradient id="normGap" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#ef4444" stopOpacity={0.15} />
                <stop offset="100%" stopColor="#ef4444" stopOpacity={0.02} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
            <XAxis dataKey="date" tick={{ fontSize: 9, fill: "#64748b" }} stroke="#334155" tickFormatter={(v) => new Date(v).toLocaleDateString(undefined, { month: "short", day: "numeric" })} />
            <YAxis tick={{ fontSize: 9, fill: "#64748b" }} stroke="#334155" />
            <RTooltip contentStyle={{ fontSize: "11px", borderRadius: "8px", background: "#1e293b", border: "1px solid #334155", color: "#e2e8f0" }} labelFormatter={(v) => new Date(String(v)).toLocaleDateString()} />
            {events.map((e, i) => <ReferenceLine key={i} x={e.date} stroke="#ef4444" strokeDasharray="3 3" label={{ value: e.name, position: "top", fontSize: 8, fill: "#94a3b8" }} />)}
            <Area type="monotone" dataKey="normalized" stroke="#64748b" strokeWidth={1.5} strokeDasharray="4 2" fill="url(#normGap)" />
            <Area type="monotone" dataKey="actual" stroke="#0D9488" strokeWidth={2} fill="none" />
          </AreaChart>
        </ResponsiveContainer>
      </div>
      <div className="px-5 py-2 border-t border-white/10 flex items-center gap-4 text-[10px] text-slate-500">
        <span className="flex items-center gap-1"><span className="w-3 h-0.5 bg-teal-600 rounded" /> Actual</span>
        <span className="flex items-center gap-1"><span className="w-3 h-0.5 border-t border-dashed border-slate-400 rounded" /> Without Events</span>
      </div>
    </div>
  );
}
