"use client";

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

interface ForecastData { baseline: { day30: number; day60: number; day90: number }; optimistic: { day30: number; day60: number; day90: number }; pessimistic: { day30: number; day60: number; day90: number }; confidence: string }

interface Props { data: ForecastData; metric?: string }

export default function ForecastChart({ data, metric = "clicks" }: Props) {
  const today = new Date();
  const chartData = [
    { label: "Today", date: today.toISOString().split("T")[0], baseline: null, optimistic: null, pessimistic: null, isToday: true },
    { label: "+30d", date: new Date(today.getTime() + 30 * 86400000).toISOString().split("T")[0], baseline: data.baseline.day30, optimistic: data.optimistic.day30, pessimistic: data.pessimistic.day30 },
    { label: "+60d", date: new Date(today.getTime() + 60 * 86400000).toISOString().split("T")[0], baseline: data.baseline.day60, optimistic: data.optimistic.day60, pessimistic: data.pessimistic.day60 },
    { label: "+90d", date: new Date(today.getTime() + 90 * 86400000).toISOString().split("T")[0], baseline: data.baseline.day90, optimistic: data.optimistic.day90, pessimistic: data.pessimistic.day90 },
  ];

  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <div className="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
        <h3 className="font-bold text-slate-800 text-sm">Traffic Forecast</h3>
        <span className={`text-[9px] font-bold uppercase tracking-wider rounded-full px-2 py-0.5 ${data.confidence === "high" ? "bg-green-50 text-green-700" : data.confidence === "medium" ? "bg-amber-50 text-amber-700" : "bg-slate-100 text-slate-600"}`}>{data.confidence} confidence</span>
      </div>
      <div className="px-3 pt-3 pb-2 h-56">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={chartData}>
            <defs>
              <linearGradient id="confBand" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#0D9488" stopOpacity={0.1} />
                <stop offset="100%" stopColor="#0D9488" stopOpacity={0.02} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
            <XAxis dataKey="label" tick={{ fontSize: 11 }} stroke="#94a3b8" />
            <YAxis tick={{ fontSize: 10 }} stroke="#94a3b8" />
            <RTooltip contentStyle={{ fontSize: "11px", borderRadius: "8px", border: "1px solid #e2e8f0" }} formatter={(v: unknown) => [typeof v === "number" ? v.toLocaleString() : "—", metric]} />
            <ReferenceLine x="Today" stroke="#94a3b8" strokeDasharray="3 3" label={{ value: "Today", position: "top", fontSize: 10 }} />
            <Area type="monotone" dataKey="optimistic" stroke="#22c55e" strokeWidth={1.5} strokeDasharray="4 2" fill="none" connectNulls />
            <Area type="monotone" dataKey="baseline" stroke="#0D9488" strokeWidth={2} fill="url(#confBand)" connectNulls />
            <Area type="monotone" dataKey="pessimistic" stroke="#ef4444" strokeWidth={1.5} strokeDasharray="4 2" fill="none" connectNulls />
          </AreaChart>
        </ResponsiveContainer>
      </div>
      <div className="px-5 py-2 border-t border-slate-100 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-green-500 rounded" /> Optimistic</span>
        <span className="flex items-center gap-1"><span className="w-3 h-0.5 bg-teal-600 rounded" /> Baseline</span>
        <span className="flex items-center gap-1"><span className="w-3 h-0.5 bg-red-500 rounded" /> Pessimistic</span>
      </div>
    </div>
  );
}
