// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * v3 — constructeur de rapports personnalisés ValoPlex (ka-stats SPEC §3bis,
 * port maison au style ValoPlex, bilingue fr/en). Compose un PDF bloc par
 * bloc : catalogue (GET /api/stats/catalog), rendu au choix, ordre libre,
 * modèles sauvegardés en localStorage (clé ka-stats-rapports).
 */
"use client";
import { useEffect, useState } from "react";
import { useLang } from "./LangContext";

type CatalogBlock = {
  key: string; section: string; title: string;
  renders: string[]; default_render: string; count?: number;
};
type Sel = { key: string; render: string };
type Tpl = { name: string; title: string; blocks: Sel[] };

const TPL_KEY = "ka-stats-rapports";
const RENDER_FR: Record<string, string> = {
  line: "Courbe", area: "Aire", bar: "Barres verticales", bars: "Barres horizontales",
  donut: "Anneau", cards: "Cartes", table: "Tableau",
};
const RENDER_EN: Record<string, string> = {
  line: "Line", area: "Area", bar: "Vertical bars", bars: "Horizontal bars",
  donut: "Donut", cards: "Cards", table: "Table",
};
const SECTION_FR: Record<string, string> = {
  kpis: "Indicateurs", series: "Évolution", breakdowns: "Répartitions",
  geo: "Géographie", tables: "Tableaux", records: "Records",
};
const SECTION_EN: Record<string, string> = {
  kpis: "Indicators", series: "Trends", breakdowns: "Breakdowns",
  geo: "Geography", tables: "Tables", records: "Records",
};

const loadTpls = (): Tpl[] => {
  try { return JSON.parse(localStorage.getItem(TPL_KEY) ?? "[]"); } catch { return []; }
};
const saveTpls = (t: Tpl[]) => { try { localStorage.setItem(TPL_KEY, JSON.stringify(t)); } catch { /* privé */ } };

export default function ReportBuilder() {
  const { lang } = useLang();
  const fr = lang === "fr";
  const RL = fr ? RENDER_FR : RENDER_EN;
  const SL = fr ? SECTION_FR : SECTION_EN;
  const [open, setOpen] = useState(false);
  const [cat, setCat] = useState<CatalogBlock[] | null>(null);
  const [sel, setSel] = useState<Sel[]>([]);
  const [title, setTitle] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const [tpls, setTpls] = useState<Tpl[]>([]);

  useEffect(() => {
    if (!open) return;
    setErr("");
    setTpls(loadTpls());
    fetch("/api/stats/catalog")
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((d) => setCat(d.blocks ?? []))
      .catch(() => setErr(fr ? "Catalogue indisponible — réessayez plus tard." : "Catalog unavailable — try again later."));
    const esc = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", esc);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", esc); document.body.style.overflow = prev; };
  }, [open, fr]);

  const generate = async () => {
    if (busy || !sel.length) return;
    setBusy(true); setErr("");
    try {
      const r = await fetch("/api/stats/report/custom", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title, blocks: sel }),
      });
      if (!r.ok) throw new Error(String(r.status));
      const blob = await r.blob();
      const m = (r.headers.get("Content-Disposition") ?? "").match(/filename="?([^";]+)/);
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = m ? m[1] : "valoplex-rapport-personnalise.pdf";
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(a.href), 4000);
    } catch {
      setErr(fr ? "La génération a échoué — réessayez." : "Generation failed — try again.");
    }
    setBusy(false);
  };

  const groups: [string, CatalogBlock[]][] = [];
  for (const b of cat ?? []) {
    const g = groups.find(([s]) => s === b.section);
    if (g) g[1].push(b); else groups.push([b.section, [b]]);
  }
  const selKeys = new Set(sel.map((s) => s.key));

  return (
    <>
      <button type="button" className="btn btn-ghost mt-5 ml-0 sm:ml-3" onClick={() => setOpen(true)}>
        🛠 {fr ? "Rapport personnalisé" : "Custom report"}
      </button>
      {open && (
        <div role="dialog" aria-modal="true"
          onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
          className="fixed inset-0 z-[900] flex items-start justify-center overflow-auto bg-[rgba(20,24,20,0.5)] px-3 py-[4vh]">
          <div className="flex max-h-[92vh] w-full max-w-[960px] flex-col rounded-[10px] border-[1.5px] border-ink bg-paper text-left shadow-[10px_10px_0_rgba(20,24,20,0.25)]">
            <div className="flex items-center justify-between gap-3 border-b border-ink/20 px-5 py-4">
              <b className="vp-display text-lg">{fr ? "Rapport personnalisé" : "Custom report"}</b>
              <button type="button" className="btn btn-ghost" onClick={() => setOpen(false)}>✕ {fr ? "Fermer" : "Close"}</button>
            </div>
            <div className="grid flex-1 grid-cols-1 overflow-auto md:grid-cols-2">
              <div className="min-w-0 border-b border-ink/15 p-5 md:border-b-0 md:border-r">
                <h3 className="vp-mono mb-2 text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
                  {fr ? "Blocs disponibles" : "Available blocks"} ({cat?.length ?? "…"})
                </h3>
                {!cat && !err && <p className="text-sm text-ink-3">{fr ? "Chargement du catalogue…" : "Loading catalog…"}</p>}
                {groups.map(([secId, bs]) => (
                  <div key={secId}>
                    <p className="vp-mono mb-1.5 mt-3 text-[10px] font-bold uppercase tracking-[0.08em] text-ink-2">{SL[secId] ?? secId}</p>
                    {bs.map((b) => (
                      <div key={b.key}
                        className={`mb-1.5 flex items-center justify-between gap-2 rounded-lg border border-ink/25 px-2.5 py-1.5 text-[13px] ${selKeys.has(b.key) ? "opacity-45" : ""}`}>
                        <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" title={b.title}>{b.title}</span>
                        <button type="button" className="btn btn-ghost !min-h-0 !px-2.5 !py-1"
                          onClick={() => setSel((s) => s.some((x) => x.key === b.key && x.render === b.default_render) ? s : [...s, { key: b.key, render: b.default_render }])}
                          aria-label={`+ ${b.title}`}>+</button>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
              <div className="min-w-0 p-5">
                <h3 className="vp-mono mb-2 text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
                  {fr ? "Composition du rapport" : "Report composition"} ({sel.length})
                </h3>
                <label className="vp-mono text-[10px] uppercase tracking-[0.06em] text-ink-3" htmlFor="rb-title">
                  {fr ? "Titre du rapport" : "Report title"}
                </label>
                <input id="rb-title" maxLength={80} value={title} onChange={(e) => setTitle(e.target.value)}
                  placeholder={fr ? "Ex. : Revue du parc 2026" : "E.g.: 2026 portfolio review"}
                  className="mb-3 mt-1 w-full rounded-lg border-[1.5px] border-ink bg-white px-3 py-2 text-sm" />
                {sel.length ? sel.map((s, i) => {
                  const b = (cat ?? []).find((x) => x.key === s.key);
                  return (
                    <div key={`${s.key}:${s.render}:${i}`}
                      className="mb-1.5 flex items-center gap-2 rounded-lg border-[1.5px] border-ink bg-white px-2.5 py-2 text-[13px]">
                      <button type="button" disabled={i === 0} className="disabled:opacity-25"
                        onClick={() => setSel((xs) => { const n = [...xs]; [n[i - 1], n[i]] = [n[i], n[i - 1]]; return n; })}
                        aria-label={fr ? "Monter" : "Move up"}>▲</button>
                      <button type="button" disabled={i === sel.length - 1} className="disabled:opacity-25"
                        onClick={() => setSel((xs) => { const n = [...xs]; [n[i + 1], n[i]] = [n[i], n[i + 1]]; return n; })}
                        aria-label={fr ? "Descendre" : "Move down"}>▼</button>
                      <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" title={b?.title ?? s.key}>
                        <b>{i + 1}.</b> {b?.title ?? s.key}
                      </span>
                      {b && b.renders.length > 1 ? (
                        <select value={s.render}
                          onChange={(e) => setSel((xs) => xs.map((x, j) => (j === i ? { ...x, render: e.target.value } : x)))}
                          className="max-w-[140px] rounded-md border border-ink/40 bg-paper px-1.5 py-1 text-xs"
                          aria-label={fr ? "Rendu" : "Render"}>
                          {b.renders.map((r) => <option key={r} value={r}>{RL[r] ?? r}</option>)}
                        </select>
                      ) : <span className="vp-mono text-[10px] uppercase text-ink-3">{RL[s.render] ?? s.render}</span>}
                      <button type="button" onClick={() => setSel((xs) => xs.filter((_, j) => j !== i))}
                        aria-label={fr ? "Retirer" : "Remove"}>✕</button>
                    </div>
                  );
                }) : (
                  <div className="rounded-lg border border-dashed border-ink/40 p-4 text-center text-[13px] text-ink-3">
                    {fr ? "Aucun bloc — ajoutez des blocs depuis la colonne de gauche, ou chargez un modèle ci-dessous."
                        : "No blocks yet — add blocks from the left column, or load a template below."}
                  </div>
                )}
                <p className="mt-2.5 flex gap-2">
                  <button type="button" className="btn btn-ghost" disabled={!cat?.length}
                    onClick={() => setSel((cat ?? []).map((b) => ({ key: b.key, render: b.default_render })))}>
                    {fr ? "Tout ajouter" : "Add all"}
                  </button>
                  <button type="button" className="btn btn-ghost" disabled={!sel.length} onClick={() => setSel([])}>
                    {fr ? "Vider" : "Clear"}
                  </button>
                </p>
                {err && <p className="mt-1.5 text-[12.5px] text-[#b3423a]">{err}</p>}
              </div>
            </div>
            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-ink/20 px-5 py-4">
              <span className="flex flex-wrap items-center gap-2">
                <select value="" aria-label={fr ? "Modèles sauvegardés" : "Saved templates"}
                  className="max-w-[200px] rounded-lg border-[1.5px] border-ink bg-white px-2 py-1.5 text-sm"
                  onChange={(e) => {
                    const t = tpls[Number(e.target.value)];
                    if (!t) return;
                    setTitle(t.title || t.name);
                    setSel((t.blocks ?? []).filter((x) => (cat ?? []).some((b) => b.key === x.key)).map((x) => ({ ...x })));
                  }}>
                  <option value="">{fr ? "Modèles" : "Templates"} ({tpls.length})…</option>
                  {tpls.map((t, i) => <option key={t.name} value={i}>{t.name}</option>)}
                </select>
                <button type="button" className="btn btn-ghost" disabled={!sel.length}
                  onClick={() => {
                    const name = window.prompt(fr ? "Nom du modèle :" : "Template name:", title || (fr ? "Mon rapport" : "My report"));
                    if (!name) return;
                    const next = [...tpls.filter((t) => t.name !== name), { name, title, blocks: sel.map((x) => ({ ...x })) }];
                    setTpls(next); saveTpls(next);
                  }}>💾 {fr ? "Sauvegarder" : "Save"}</button>
                <button type="button" className="btn btn-ghost" disabled={!tpls.length}
                  onClick={() => {
                    const name = window.prompt((fr ? "Nom du modèle à supprimer :\n" : "Template to delete:\n") + tpls.map((t) => `· ${t.name}`).join("\n"));
                    if (!name) return;
                    const next = tpls.filter((t) => t.name !== name);
                    setTpls(next); saveTpls(next);
                  }}>🗑 {fr ? "Supprimer" : "Delete"}</button>
              </span>
              <button type="button" className="btn btn-primary" disabled={!sel.length || busy} onClick={generate}>
                {busy ? (fr ? "Génération…" : "Generating…") : `⬇ ${fr ? "Générer le PDF" : "Generate PDF"}`}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}