/** Graphiques SVG QC26 (rendu serveur possible, sans dépendance). */
import type { ReactNode } from "react";
import type { TrendPoint } from "@/lib/api";
import { OTHERS, PARTY_IDS, partyColor, partyLabel } from "@/lib/parties";
import { cls } from "@/lib/format";

// -------------------------------------------------------------- SeatMeter
/** Barre de sièges empilée, seuil de majorité marqué (dérivé des données, jamais codé en dur). */
export function SeatMeter({ seats, total, majority, height = 22, showLabels = true, className, title }: {
  seats: Record<string, number>; total: number; majority: number; height?: number; showLabels?: boolean; className?: string; title?: string;
}) {
  const entries = Object.entries(seats).filter(([id]) => id !== "aut").sort((a, b) => b[1] - a[1]);
  const others = seats["aut"] ?? 0;
  let x = 0;
  const majX = (majority / total) * 100;
  return (
    <div className={cls("w-full", className)}>
      <div className="relative" style={{ height: height + 22 }} role="img" aria-label={title ?? `Répartition des sièges sur ${total}, majorité à ${majority}`}>
        <div className="absolute inset-x-0 top-[14px] rounded-[6px] overflow-hidden bg-surface-3 flex" style={{ height }}>
          {entries.map(([id, n]) => {
            const w = (n / total) * 100;
            const el = <div key={id} className="h-full relative" style={{ width: `${w}%`, background: partyColor(id) }} title={`${partyLabel(id)} : ${n}`} />;
            x += w;
            return el;
          })}
          {others > 0 && <div className="h-full" style={{ width: `${(others / total) * 100}%`, background: OTHERS.color }} title={`Autres : ${others}`} />}
        </div>
        <div className="absolute top-0 bottom-0 w-[2px] bg-ink" style={{ left: `calc(${majX}% - 1px)` }} aria-hidden />
        <div className="absolute -top-[2px] text-[10.5px] font-bold uppercase tracking-wider num translate-x-[-50%] bg-background px-1" style={{ left: `${majX}%` }}>
          {majority} · Majorité
        </div>
      </div>
      {showLabels && (
        <div className="flex flex-wrap gap-x-4 gap-y-1 mt-1 text-[12.5px]">
          {entries.map(([id, n]) => (
            <span key={id} className="inline-flex items-center gap-1.5 num"><span className="w-2.5 h-2.5 rounded-[3px] inline-block" style={{ background: partyColor(id) }} /><span className="font-semibold">{partyLabel(id)}</span> {n}</span>
          ))}
          {others > 0 && <span className="inline-flex items-center gap-1.5 num"><span className="w-2.5 h-2.5 rounded-[3px] inline-block" style={{ background: OTHERS.color }} />Autres {others}</span>}
        </div>
      )}
    </div>
  );
}

// ------------------------------------------------------- SeatDistribution
/** Distribution des sièges d'un parti (histogramme Monte Carlo) avec seuil de majorité et intervalles. */
export function SeatDistribution({ dist, color, majority, median, lo80, hi80, lo95, hi95, height = 120, className, total }: {
  dist: number[]; color: string; majority: number; median: number; lo80: number; hi80: number; lo95: number; hi95: number; height?: number; className?: string; total: number;
}) {
  const n = dist.length;
  const max = Math.max(...dist, 1);
  const W = 640, H = height, pad = 18;
  const bw = (W - 2 * pad) / n;
  const xs = (i: number) => pad + i * bw;
  const vis = dist.map((v, i) => [i, v] as const).filter(([, v]) => v > 0);
  const minI = Math.max(0, (vis[0]?.[0] ?? 0) - 2), maxI = Math.min(n - 1, (vis[vis.length - 1]?.[0] ?? n - 1) + 2);
  const span = Math.max(1, maxI - minI);
  const xz = (i: number) => pad + ((i - minI) / span) * (W - 2 * pad);
  const bwz = (W - 2 * pad) / span;
  return (
    <svg viewBox={`0 0 ${W} ${H + 26}`} className={cls("w-full h-auto", className)} role="img" aria-label={`Distribution des sièges, médiane ${median}, intervalle 80 % ${lo80}–${hi80}, 95 % ${lo95}–${hi95}, majorité à ${majority}`}>
      <rect x={xz(lo95)} y={0} width={Math.max(1, xz(hi95) - xz(lo95) + bwz)} height={H} fill={color} opacity={0.06} />
      <rect x={xz(lo80)} y={0} width={Math.max(1, xz(hi80) - xz(lo80) + bwz)} height={H} fill={color} opacity={0.08} />
      {dist.map((v, i) => (i < minI || i > maxI || v === 0) ? null : (
        <rect key={i} x={xz(i) + 0.5} y={H - (v / max) * (H - 8)} width={Math.max(1, bwz - 1)} height={(v / max) * (H - 8)} fill={color} opacity={i >= majority ? 1 : 0.55} rx={1} />
      ))}
      {majority >= minI && majority <= maxI && (
        <>
          <line x1={xz(majority)} x2={xz(majority)} y1={0} y2={H + 4} stroke="var(--text)" strokeWidth={1.5} strokeDasharray="3 3" />
          <text x={xz(majority) + 4} y={11} fontSize={10.5} fontWeight={700} fill="var(--text)" className="num">{majority} · majorité</text>
        </>
      )}
      <line x1={xz(median) + bwz / 2} x2={xz(median) + bwz / 2} y1={0} y2={H} stroke={color} strokeWidth={2} />
      {[minI, Math.round((minI + maxI) / 2), maxI].map((i) => (
        <text key={i} x={xz(i) + bwz / 2} y={H + 20} fontSize={10.5} textAnchor="middle" fill="var(--text-2)" className="num">{i}</text>
      ))}
      <text x={xz(median) + bwz / 2} y={H + 20} fontSize={10.5} textAnchor="middle" fontWeight={700} fill={color} className="num">{median}</text>
      <title>{`Sur ${total} sièges`}</title>
    </svg>
  );
}

// ----------------------------------------------------------------- Trend
export function TrendChart({ trend, polls, from, height = 300, showBand = true, ids = PARTY_IDS, className, markers = [], election2022 }: {
  trend: TrendPoint[]; polls?: { date: string; values: Record<string, number>; id?: string }[]; from?: string; height?: number; showBand?: boolean; ids?: string[]; className?: string;
  markers?: { date: string; label: string }[]; election2022?: Record<string, number> | null;
}) {
  const pts = from ? trend.filter((t) => t.date >= from) : trend;
  if (pts.length < 2) return <div className="text-ink-3 text-sm">Pas assez de données.</div>;
  const W = 900, H = height, pl = 34, pr = 78, pt = 12, pb = 28;
  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 allVals = pts.flatMap((p) => ids.map((id) => p.mean[id] ?? 0));
  const pollVals = (polls ?? []).filter((p) => !from || p.date >= from).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);
  // repères temporels : premier jour de chaque mois (ou trimestre si long)
  const months: { d: Date; label: string }[] = [];
  const spanDays = (t1 - t0) / 86400000;
  const step = spanDays > 900 ? 6 : spanDays > 400 ? 3 : 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);
  // évite les chevauchements d'étiquettes
  let prevY = -Infinity;
  const labelY = labels.map((l) => { let yy = y(l.v); if (yy - prevY < 13) yy = prevY + 13; prevY = yy; return yy; });
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className={cls("w-full h-auto", className)} role="img" aria-label="Évolution des intentions de vote (moyenne QC26) et sondages">
      {ticks.map((t) => (
        <g key={t}>
          <line x1={pl} x2={W - pr} y1={y(t)} y2={y(t)} stroke="var(--border)" strokeWidth={1} />
          <text x={pl - 6} y={y(t) + 3.5} fontSize={10.5} textAnchor="end" fill="var(--text-3)" className="num">{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(--border)" strokeWidth={1} />
          <text x={x(m.d.toISOString())} y={H - 8} fontSize={10.5} textAnchor="middle" fill="var(--text-3)">{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" />
          <text x={x(m.date) + 3} y={pt + 9} fontSize={9.5} fill="var(--text-2)">{m.label}</text>
        </g>
      ))}
      {polls?.filter((p) => !from || p.date >= from).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={2.6} fill={partyColor(id)} opacity={0.35} />
      )))}
      {showBand && ids.map((id) => <path key={`b${id}`} d={band(id)} fill={partyColor(id)} opacity={0.10} />)}
      {ids.map((id) => <path key={id} d={path(id)} fill="none" stroke={partyColor(id)} strokeWidth={2.4} strokeLinejoin="round" strokeLinecap="round" />)}
      {election2022 && ids.map((id) => election2022[id] !== undefined && (
        <g key={`e${id}`}><rect x={pl - 2} y={y(election2022[id]) - 1.5} width={5} height={3} fill={partyColor(id)} /></g>
      ))}
      {labels.map((l, i) => (
        <text key={l.id} x={W - pr + 6} y={labelY[i] + 4} fontSize={12} fontWeight={700} fill={partyColor(l.id)} className="num">{partyLabel(l.id)} {l.v.toFixed(1).replace(".", ",")}</text>
      ))}
    </svg>
  );
}

// ---------------------------------------------------------------- VoteBars
export function VoteBars({ values, ci, max, className, order }: { values: Record<string, number>; ci?: Record<string, [number, number]>; max?: number; className?: string; order?: string[] }) {
  const ids = order ?? Object.keys(values).filter((k) => k !== "aut").sort((a, b) => values[b] - values[a]);
  const m = max ?? Math.max(...ids.map((i) => ci?.[i]?.[1] ?? values[i]), 10) * 1.08;
  return (
    <div className={cls("space-y-2", className)}>
      {ids.map((id) => (
        <div key={id} className="grid grid-cols-[44px_1fr_58px] items-center gap-3 text-[13.5px]">
          <span className="font-semibold num" style={{ color: partyColor(id) }}>{partyLabel(id)}</span>
          <div className="relative h-[14px] bg-surface-3 rounded-[4px] overflow-hidden">
            {ci?.[id] && <div className="absolute top-0 bottom-0 rounded-[4px]" style={{ left: `${(ci[id][0] / m) * 100}%`, width: `${((ci[id][1] - ci[id][0]) / m) * 100}%`, background: partyColor(id), opacity: 0.25 }} />}
            <div className="absolute top-0 bottom-0 left-0 rounded-[4px]" style={{ width: `${(values[id] / m) * 100}%`, background: partyColor(id) }} />
          </div>
          <span className="num font-semibold text-right">{values[id].toFixed(1).replace(".", ",")} %</span>
        </div>
      ))}
    </div>
  );
}

export function Legend({ ids, className }: { ids: string[]; className?: string }) {
  return (
    <div className={cls("flex flex-wrap gap-x-4 gap-y-1 text-[12.5px]", className)}>
      {ids.map((id) => (
        <span key={id} className="inline-flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full inline-block" style={{ background: partyColor(id) }} />{partyLabel(id)}</span>
      ))}
    </div>
  );
}

export function Sparkline({ values, color, width = 120, height = 32, className }: { values: number[]; color: string; width?: number; height?: number; className?: string }) {
  if (values.length < 2) return null;
  const min = Math.min(...values), max = Math.max(...values), span = Math.max(0.001, max - min);
  const pts = values.map((v, i) => `${(i / (values.length - 1)) * width},${height - ((v - min) / span) * (height - 4) - 2}`).join(" ");
  return <svg width={width} height={height} className={className} aria-hidden><polyline points={pts} fill="none" stroke={color} strokeWidth={1.8} strokeLinejoin="round" /></svg>;
}

export function Note({ children }: { children: ReactNode }) {
  return <p className="text-[12px] text-ink-3 leading-relaxed mt-2">{children}</p>;
}