"use client";

import { useMemo, useRef, useState } from "react";
import type { TrendPoint } from "@/lib/api";
import { cls, dateFr } from "@/lib/format";
import { PARTY_IDS, partyLabel, partyVar } from "@/lib/parties";
import { useMeasure } from "@/lib/use-measure";

/** Tendance interactive, dimensionnée à la largeur réelle (1 unité SVG = 1 px : les textes restent lisibles
 * sur téléphone). Réticule + infobulle ; sur écran étroit, les valeurs courantes passent sous le graphique. */
export function TrendChartInteractive({ trend, polls, from, height = 320, ids = PARTY_IDS, markers = [], election2022, className, showBand = true }: {
  trend: TrendPoint[]; polls?: { date: string; values: Record<string, number>; id?: string; pollster?: string }[]; from?: string; height?: number; ids?: string[];
  markers?: { date: string; label: string }[]; election2022?: Record<string, number> | null; className?: string; showBand?: boolean;
}) {
  const { ref, width } = useMeasure<HTMLDivElement>(900);
  const [range, setRange] = useState<string | undefined>(from);
  const pts = useMemo(() => (range ? trend.filter((t) => t.date >= range) : trend), [trend, range]);
  const [hover, setHover] = useState<number | null>(null);
  const svgRef = useRef<SVGSVGElement>(null);
  if (pts.length < 2) return <div className="text-ink-3 text-sm">Pas assez de données.</div>;
  const narrow = width < 560;
  const W = Math.max(300, width), H = narrow ? Math.min(height, 240) : height;
  const pl = 30, pr = narrow ? 10 : 86, pt = 14, pb = 26;
  const t0 = new Date(pts[0].date).getTime(), t1 = new Date(pts[pts.length - 1].date).getTime();
  const x = (d: string) => pl + ((new Date(d).getTime() - t0) / Math.max(1, t1 - t0)) * (W - pl - pr);
  const visPolls = (polls ?? []).filter((p) => p.date >= pts[0].date && p.date <= pts[pts.length - 1].date);
  const allVals = pts.flatMap((p) => ids.map((id) => p.mean[id] ?? 0));
  const pollVals = visPolls.flatMap((p) => ids.map((id) => p.values[id] ?? 0));
  const ymax = Math.min(100, Math.ceil((Math.max(...allVals, ...pollVals, 10) + 4) / 5) * 5);
  const y = (v: number) => pt + (1 - v / ymax) * (H - pt - pb);
  const ticks = Array.from({ length: Math.floor(ymax / 10) + 1 }, (_, i) => i * 10);
  const months: { d: Date; label: string }[] = [];
  const spanDays = (t1 - t0) / 86400000;
  const step = spanDays > 900 ? (narrow ? 12 : 6) : spanDays > 400 ? (narrow ? 6 : 3) : spanDays > 120 ? (narrow ? 2 : 1) : 1;
  const cur = new Date(t0); cur.setDate(1); cur.setMonth(cur.getMonth() + 1);
  while (cur.getTime() <= t1) {
    if (cur.getMonth() % step === 0) months.push({ d: new Date(cur), label: cur.toLocaleDateString("fr-CA", { month: "short", year: spanDays > 200 ? "2-digit" : undefined }) });
    cur.setMonth(cur.getMonth() + 1);
  }
  const path = (id: string) => pts.map((p, i) => `${i ? "L" : "M"}${x(p.date).toFixed(1)},${y(p.mean[id] ?? 0).toFixed(1)}`).join(" ");
  const band = (id: string) => {
    const up = pts.map((p) => `${x(p.date).toFixed(1)},${y((p.mean[id] ?? 0) + 1.28 * (p.sd[id] ?? 0)).toFixed(1)}`);
    const dn = [...pts].reverse().map((p) => `${x(p.date).toFixed(1)},${y((p.mean[id] ?? 0) - 1.28 * (p.sd[id] ?? 0)).toFixed(1)}`);
    return `M${up.join(" L")} L${dn.join(" L")} Z`;
  };
  const last = pts[pts.length - 1];
  const labels = ids.map((id) => ({ id, v: last.mean[id] ?? 0 })).sort((a, b) => b.v - a.v);
  const labelY = labels.reduce<number[]>((acc, l) => { const prev = acc.length ? acc[acc.length - 1] : -Infinity; const yy = y(l.v); acc.push(yy - prev < 13 ? prev + 13 : yy); return acc; }, []);
  const pick = (clientX: number) => {
    const r = svgRef.current!.getBoundingClientRect();
    const px = ((clientX - r.left) / r.width) * W;
    const t = t0 + ((px - pl) / (W - pl - pr)) * (t1 - t0);
    let best = 0, bd = Infinity;
    pts.forEach((p, i) => { const d = Math.abs(new Date(p.date).getTime() - t); if (d < bd) { bd = d; best = i; } });
    setHover(best);
  };
  const hp = hover !== null ? pts[hover] : null;
  const shown = hp ?? last;
  const hpolls = hp ? visPolls.filter((p) => Math.abs(new Date(p.date).getTime() - new Date(hp.date).getTime()) <= 2 * 86400000) : [];
  const refT = new Date(trend[trend.length - 1].date).getTime();
  const ranges: { label: string; from?: string }[] = [
    { label: "Campagne", from: "2026-08-20" }, { label: "6 mois", from: new Date(refT - 182 * 86400000).toISOString().slice(0, 10) },
    { label: "1 an", from: new Date(refT - 365 * 86400000).toISOString().slice(0, 10) }, { label: "Depuis 2022" },
  ];
  const tipLeft = hp ? Math.min(Math.max(8, x(hp.date) + 12), W - 172) : 0;
  return (
    <div className={cls("relative", className)} ref={ref}>
      <div className="flex flex-wrap items-center gap-1.5 mb-3">
        {ranges.map((r) => <button key={r.label} onClick={() => { setRange(r.from); setHover(null); }} className={cls("chip !py-1 !px-2.5 !text-[12px]", (range ?? "") === (r.from ?? "") && "chip-active")}>{r.label}</button>)}
        <span className="text-[12px] text-ink-3 ml-auto hidden sm:inline">Survolez pour lire la moyenne QC26 du jour</span>
      </div>
      <svg ref={svgRef} viewBox={`0 0 ${W} ${H}`} width={W} height={H} className="block max-w-full h-auto touch-pan-y" role="img" aria-label="Évolution des intentions de vote (moyenne QC26) et sondages"
        onPointerMove={(e) => pick(e.clientX)} onPointerDown={(e) => pick(e.clientX)} onPointerLeave={() => setHover(null)}>
        {ticks.map((t) => (
          <g key={t}>
            <line x1={pl} x2={W - pr} y1={y(t)} y2={y(t)} stroke="var(--grid)" strokeWidth={1} />
            <text x={pl - 6} y={y(t) + 3.5} fontSize={10.5} textAnchor="end" fill="var(--text-3)" fontFamily="var(--font-mono)">{t}</text>
          </g>
        ))}
        {months.map((m, i) => (
          <g key={i}>
            <line x1={x(m.d.toISOString())} x2={x(m.d.toISOString())} y1={pt} y2={H - pb + 4} stroke="var(--grid)" strokeWidth={1} />
            <text x={x(m.d.toISOString())} y={H - 8} fontSize={10.5} textAnchor="middle" fill="var(--text-3)" fontFamily="var(--font-mono)">{m.label}</text>
          </g>
        ))}
        {markers.filter((m) => new Date(m.date).getTime() >= t0 && new Date(m.date).getTime() <= t1).map((m, i) => (
          <g key={`m${i}`}>
            <line x1={x(m.date)} x2={x(m.date)} y1={pt} y2={H - pb} stroke="var(--text-2)" strokeWidth={1} strokeDasharray="2 3" />
            {!narrow && <text x={x(m.date) + 4} y={pt + 9} fontSize={9.5} fill="var(--text-2)" fontFamily="var(--font-mono)">{m.label}</text>}
          </g>
        ))}
        {visPolls.map((p, i) => ids.map((id) => p.values[id] === undefined ? null : (
          <circle key={`${i}-${id}`} cx={x(p.date)} cy={y(p.values[id])} r={narrow ? 2 : 2.6} fill={partyVar(id)} opacity={0.3} />
        )))}
        {showBand && ids.map((id) => <path key={`b${id}`} d={band(id)} fill={partyVar(id)} opacity={0.1} />)}
        {ids.map((id) => <path key={id} d={path(id)} fill="none" stroke={partyVar(id)} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />)}
        {election2022 && ids.map((id) => election2022[id] !== undefined && (
          <rect key={`e22${id}`} x={pl - 2} y={y(election2022[id]) - 1.5} width={5} height={3} fill={partyVar(id)} />
        ))}
        {hp ? (
          <g>
            <line x1={x(hp.date)} x2={x(hp.date)} y1={pt} y2={H - pb} stroke="var(--text)" strokeWidth={1} strokeOpacity={0.6} />
            {ids.map((id) => <circle key={`h${id}`} cx={x(hp.date)} cy={y(hp.mean[id] ?? 0)} r={4} fill={partyVar(id)} stroke="var(--surface)" strokeWidth={2} />)}
          </g>
        ) : ids.map((id) => <circle key={`e${id}`} cx={x(last.date)} cy={y(last.mean[id] ?? 0)} r={3.5} fill={partyVar(id)} stroke="var(--surface)" strokeWidth={2} />)}
        {!narrow && labels.map((l, i) => (
          <text key={l.id} x={W - pr + 8} y={labelY[i] + 4} fontSize={12} fontWeight={600} fill="var(--text)" fontFamily="var(--font-sans)">
            <tspan fill={partyVar(l.id)}>■</tspan> {partyLabel(l.id)} <tspan fontFamily="var(--font-mono)">{(shown.mean[l.id] ?? 0).toFixed(1).replace(".", ",")}</tspan>
          </text>
        ))}
      </svg>
      {narrow && (
        <div className="grid grid-cols-5 gap-1.5 mt-2">
          {labels.map((l) => (
            <div key={l.id} className="inset px-1.5 py-1.5 text-center" style={{ borderTop: `3px solid ${partyVar(l.id)}` }}>
              <div className="mono text-[9.5px] uppercase tracking-[0.06em] text-ink-2">{partyLabel(l.id)}</div>
              <div className="mono text-[15px] font-semibold leading-tight">{(shown.mean[l.id] ?? 0).toFixed(1).replace(".", ",")}</div>
            </div>
          ))}
          <div className="col-span-5 text-[11px] text-ink-3 text-center">{hp ? `Moyenne QC26 au ${dateFr(hp.date, { day: "numeric", month: "short", year: "numeric" })}` : `Dernier point : ${dateFr(last.date, { day: "numeric", month: "short", year: "numeric" })} · touchez la courbe pour une autre date`}</div>
        </div>
      )}
      {hp && !narrow && (
        <div className="chart-tip" style={{ left: tipLeft, top: 40 }}>
          <div className="font-semibold text-ink mb-1">{dateFr(hp.date, { day: "numeric", month: "short", year: "numeric" })}</div>
          {ids.map((id) => ({ id, v: hp.mean[id] ?? 0, sd: hp.sd[id] ?? 0 })).sort((a, b) => b.v - a.v).map((r) => (
            <div key={r.id} className="flex items-center justify-between gap-4"><span className="inline-flex items-center gap-1.5"><span className="w-2 h-2 rounded-full" style={{ background: partyVar(r.id) }} />{partyLabel(r.id)}</span><span className="mono">{r.v.toFixed(1).replace(".", ",")} <span className="text-ink-3">± {(1.28 * r.sd).toFixed(1).replace(".", ",")}</span></span></div>
          ))}
          {hpolls.length > 0 && <div className="text-ink-3 mt-1 pt-1 border-t border-border">{hpolls.length} sondage{hpolls.length > 1 ? "s" : ""} à ± 2 j{hpolls[0].pollster ? ` · ${hpolls.slice(0, 2).map((p) => p.pollster).join(", ")}` : ""}</div>}
        </div>
      )}
    </div>
  );
}