"use client";
import Link from "next/link";
import { seedModellen, seedOnderdelen } from "@/data/modeldocumenten";
import { seedBrieven } from "@/data/modelbrieven";
import { useUitbouwDekking } from "@/lib/hooks/useUitbouwDekking";
import ProgressBar from "@/components/ui/ProgressBar";
import { GOUDEN_PADEN } from "@/lib/dossier/gouden-paden";
import { perceptieRegister } from "@/lib/dossier/perceptie-register";
import { BRON_TYPES } from "@/lib/dossier/types";
import { ALLE_DIENSTEN, DIENST_IMPACT } from "@/lib/connectoren/connector";
import { seedAdapters } from "@/lib/connectoren/adapters";
import { aangeslotenDiensten } from "@/lib/connectoren/register";
import { modules } from "@/lib/modules";
import {
  AGENTWENKEN_PLAFOND,
  AUT_WERVEN,
  AUTONOMIE_LAGEN,
  NIET_DOCUMENTAIRE_BRONTYPES,
  NOORDSTER_PLAFONDS,
  wervenVoorLaag,
  type AutWerf,
  type LaagStatus,
  type WerfModel,
  type WerfStatus,
} from "@/lib/roadmap";

// ── Vaste labels en statuskleuren (status altijd met icoon + label, nooit kleur alleen) ──

const LAAG_STATUS: Record<LaagStatus, { label: string; icoon: string; chip: string; stip: string }> = {
  operationeel: { label: "Operationeel", icoon: "✓", chip: "bg-emerald-50 text-emerald-700 border-emerald-200", stip: "bg-emerald-500" },
  "kern-bewaakt": { label: "Kern bewaakt — opbouw volgt", icoon: "◐", chip: "bg-sky-50 text-sky-700 border-sky-200", stip: "bg-sky-500" },
  voorbehouden: { label: "Voorbehouden aan de notaris", icoon: "🔒", chip: "bg-yellow-50 text-yellow-800 border-yellow-300", stip: "bg-yellow-500" },
};

const WERF_STATUS: Record<WerfStatus, { label: string; icoon: string; chip: string }> = {
  gedaan: { label: "opgeleverd", icoon: "✓", chip: "bg-emerald-50 text-emerald-700 border-emerald-200" },
  loopt: { label: "loopt", icoon: "◐", chip: "bg-amber-50 text-amber-700 border-amber-200" },
  "te-doen": { label: "te doen", icoon: "○", chip: "bg-slate-50 text-slate-500 border-slate-200" },
};

const MODEL_INFO: Record<WerfModel, { label: string; rol: string }> = {
  opus: { label: "Opus 4.8", rol: "Dragende ontwerpkeuzes" },
  sonnet: { label: "Sonnet 5", rol: "Opbouw per laag" },
  fable: { label: "Fable 5", rol: "Mechanisch fundament" },
};

function StatusChip({ icoon, label, chip }: { icoon: string; label: string; chip: string }) {
  return (
    <span className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full border whitespace-nowrap ${chip}`}>
      <span aria-hidden="true">{icoon}</span>
      {label}
    </span>
  );
}

/** Kleine meter "x van y" met balk — voor de meetbare lagen en ratchets. */
function Meter({ label, waarde, totaal, kleur }: { label: string; waarde: number; totaal: number; kleur?: string }) {
  const pct = totaal === 0 ? 0 : Math.round((waarde / totaal) * 100);
  return (
    <div>
      <div className="flex items-center justify-between gap-2 text-xs text-slate-500 mb-1">
        <span>{label}</span>
        <span className="font-semibold text-slate-700 whitespace-nowrap">
          {waarde}/{totaal}
        </span>
      </div>
      <ProgressBar percentage={pct} kleur={kleur ?? (pct === 100 ? "bg-emerald-500" : pct === 0 ? "bg-slate-300" : "bg-brand-600")} />
    </div>
  );
}

function WerfChip({ werf }: { werf: AutWerf }) {
  const s = WERF_STATUS[werf.status];
  return (
    <span
      title={`${werf.id} · ${werf.titel} — ${s.label}`}
      className={`inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded border font-mono ${s.chip}`}
    >
      <span aria-hidden="true">{s.icoon}</span>
      {werf.id.replace("AUT-", "")}
    </span>
  );
}

export default function VoortgangPage() {
  // ── Laag 4 (generatie), live uit de echte bibliotheken ──
  const { dekking, samenvatting } = useUitbouwDekking();

  // ── Laag 1 (perceptie), live uit het extractorregister ──
  const extractorDoeltypes = BRON_TYPES.filter((t) => !NIET_DOCUMENTAIRE_BRONTYPES.includes(t));
  const extractorsAangesloten = extractorDoeltypes.filter((t) => perceptieRegister[t]).length;

  // ── Lagen 3/5 (connectoren), live uit het adapterregister ──
  const opzoekingsdiensten = ALLE_DIENSTEN.filter((d) => DIENST_IMPACT[d] === "opzoeking");
  const formaliteitsdiensten = ALLE_DIENSTEN.filter((d) => DIENST_IMPACT[d] === "formaliteit");
  const aangesloten = new Set(aangeslotenDiensten(seedAdapters));
  const echteAdapters = aangeslotenDiensten(seedAdapters, "echt").length;

  // ── Bibliotheek, live ──
  const modellenNL = seedModellen.filter((m) => (m.taal ?? "nl") === "nl").length;
  const modellenFR = seedModellen.length - modellenNL;

  // ── Agentwenken-ratchet, live (zelfde telling als agentwenken-ratchet.test.ts) ──
  const agentwenkenAchterstand = seedOnderdelen.filter(
    (o) => o.varianten.length > 2 && !o.agentwenken?.trim()
  ).length;

  // ── Werven per model ──
  const wervenPerModel = (model: WerfModel) => AUT_WERVEN.filter((w) => w.model === model);
  const wervenGedaan = AUT_WERVEN.filter((w) => w.status === "gedaan").length;

  const laagMeters: Record<number, { label: string; waarde: number; totaal: number }[]> = {
    1: [{ label: "Intake-extractors aangesloten", waarde: extractorsAangesloten, totaal: extractorDoeltypes.length }],
    3: [{ label: "Opzoekingsdiensten aangesloten (mock telt)", waarde: opzoekingsdiensten.filter((d) => aangesloten.has(d)).length, totaal: opzoekingsdiensten.length }],
    4: [{ label: "Dekkingscontroles (ontwerp · FR · detectie · mails · afrekening)", waarde: samenvatting.aantalControlesVoltooid, totaal: samenvatting.aantalControlesTotaal }],
    5: [{ label: "Formaliteitsdiensten aangesloten (mock telt)", waarde: formaliteitsdiensten.filter((d) => aangesloten.has(d)).length, totaal: formaliteitsdiensten.length }],
  };

  return (
    <div className="p-4 md:p-8 max-w-5xl mx-auto space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Voortgang</h1>
        <p className="text-sm text-slate-500 mt-1 max-w-2xl">
          Eén oogopslag over de hele uitbouw van Notary.AI: de dossierketen (lagen 0-8 van de
          autonomie-roadmap), de werven per Claude-model, de bewaakte meters en alle modules.
        </p>
      </div>

      {/* Kerncijfers */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
          <p className="text-xs uppercase tracking-wide text-slate-400">Generatie-motor (laag 4)</p>
          <p className="text-3xl font-bold text-slate-900 mt-1">{samenvatting.percentageVoltooid}%</p>
          <p className="text-xs text-slate-500 mt-1">
            {samenvatting.aantalControlesVoltooid} van {samenvatting.aantalControlesTotaal} controles gedekt
          </p>
          <div className="mt-2">
            <ProgressBar percentage={samenvatting.percentageVoltooid} kleur="bg-emerald-500" />
          </div>
        </div>
        <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
          <p className="text-xs uppercase tracking-wide text-slate-400">Gouden paden</p>
          <p className="text-3xl font-bold text-slate-900 mt-1">{GOUDEN_PADEN.length}</p>
          <p className="text-xs text-slate-500 mt-1">
            vastgezette scenario&apos;s · {dekking.perDossiertype.length} dossiertypes ·{" "}
            {dekking.kandidaten.length} kandidaten
          </p>
          <Link href="/gouden-paden" className="text-xs text-brand-600 hover:text-brand-800 underline mt-2 inline-block">
            Detail per rechtshandeling →
          </Link>
        </div>
        <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
          <p className="text-xs uppercase tracking-wide text-slate-400">Bibliotheek</p>
          <p className="text-3xl font-bold text-slate-900 mt-1">{seedModellen.length}</p>
          <p className="text-xs text-slate-500 mt-1">
            modellen ({modellenNL} NL · {modellenFR} FR) · {seedOnderdelen.length} onderdelen ·{" "}
            {seedBrieven.length} modelbrieven
          </p>
        </div>
        <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
          <p className="text-xs uppercase tracking-wide text-slate-400">Autonomie-werven</p>
          <p className="text-3xl font-bold text-slate-900 mt-1">
            {wervenGedaan}
            <span className="text-lg font-semibold text-slate-400">/{AUT_WERVEN.length}</span>
          </p>
          <p className="text-xs text-slate-500 mt-1">opgeleverd — alle ontwerpen en het fundament staan</p>
          <div className="mt-2">
            <ProgressBar percentage={Math.round((wervenGedaan / AUT_WERVEN.length) * 100)} />
          </div>
        </div>
      </div>

      {/* De dossierketen — lagen 0-8 */}
      <div>
        <h2 className="text-lg font-semibold text-slate-900 mb-1">De dossierketen — lagen 0 tot 8</h2>
        <p className="text-xs text-slate-400 mb-4 max-w-2xl">
          Elke laag schuift de autonomiegrens één stap verder; het eindpunt blijft altijd &quot;klaar
          voor het verlijden&quot; — het verlijden zelf is bij wet aan de notaris voorbehouden.
        </p>
        <ol className="relative">
          {AUTONOMIE_LAGEN.map((laag, i) => {
            const s = LAAG_STATUS[laag.status];
            const werven = wervenVoorLaag(laag.laag);
            const meters = laagMeters[laag.laag];
            const laatste = i === AUTONOMIE_LAGEN.length - 1;
            return (
              <li key={laag.laag} className="relative pl-12 pb-4">
                {/* Ketenlijn + genummerde stip */}
                {!laatste && <span aria-hidden="true" className="absolute left-[15px] top-8 bottom-0 w-0.5 bg-slate-200" />}
                <span
                  aria-hidden="true"
                  className={`absolute left-0 top-1 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white ${s.stip}`}
                >
                  {laag.laag}
                </span>
                <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
                  <div className="flex items-center justify-between gap-3 flex-wrap">
                    <h3 className="font-semibold text-slate-800">{laag.titel}</h3>
                    <StatusChip icoon={s.icoon} label={s.label} chip={s.chip} />
                  </div>
                  <p className="text-sm text-slate-500 mt-1">{laag.omschrijving}</p>
                  {meters && (
                    <div className="mt-3 space-y-2">
                      {meters.map((m) => (
                        <Meter key={m.label} {...m} />
                      ))}
                    </div>
                  )}
                  {(laag.volgendeStap || laag.kern || werven.length > 0) && (
                    <div className="mt-3 pt-3 border-t border-slate-100 flex flex-col gap-1.5">
                      {laag.volgendeStap && (
                        <p className="text-xs text-slate-500">
                          <span className="font-medium text-slate-700">Volgende stap:</span> {laag.volgendeStap}
                        </p>
                      )}
                      <div className="flex items-center gap-2 flex-wrap">
                        {werven.length > 0 && (
                          <span className="flex items-center gap-1.5 flex-wrap">
                            {werven.map((w) => (
                              <WerfChip key={w.id} werf={w} />
                            ))}
                          </span>
                        )}
                        {laag.kern && <span className="text-xs text-slate-400 font-mono">{laag.kern}</span>}
                      </div>
                    </div>
                  )}
                </div>
              </li>
            );
          })}
        </ol>
      </div>

      {/* Werven per Claude-model */}
      <div>
        <h2 className="text-lg font-semibold text-slate-900 mb-1">Werven per Claude-model</h2>
        <p className="text-xs text-slate-400 mb-3">
          De AUT-werven uit AUTONOMIE-ROADMAP.md: Opus ontwerpt, Fable legt het fundament, Sonnet bouwt op.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {(["opus", "fable", "sonnet"] as WerfModel[]).map((model) => {
            const werven = wervenPerModel(model);
            const gedaan = werven.filter((w) => w.status === "gedaan").length;
            const pct = Math.round((gedaan / werven.length) * 100);
            return (
              <div key={model} className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
                <div className="flex items-baseline justify-between gap-2 mb-0.5">
                  <h3 className="font-semibold text-slate-800">{MODEL_INFO[model].label}</h3>
                  <span className="text-sm font-bold text-slate-700">
                    {gedaan}/{werven.length}
                  </span>
                </div>
                <p className="text-xs text-slate-400 mb-2">{MODEL_INFO[model].rol}</p>
                <ProgressBar percentage={pct} kleur={pct === 100 ? "bg-emerald-500" : "bg-amber-500"} />
                <ul className="mt-3 space-y-1.5">
                  {werven.map((w) => {
                    const s = WERF_STATUS[w.status];
                    return (
                      <li key={w.id} className="flex items-start gap-2 text-xs" title={w.resterend ? `Resterend: ${w.resterend}` : undefined}>
                        <span
                          aria-label={s.label}
                          className={`shrink-0 inline-flex items-center justify-center w-4 h-4 rounded-full border text-[10px] leading-none ${s.chip}`}
                        >
                          {s.icoon}
                        </span>
                        <span className={w.status === "te-doen" ? "text-slate-400" : "text-slate-600"}>
                          <span className="font-mono text-slate-500">{w.id.replace("AUT-", "")}</span> · {w.titel}
                          {w.status === "loopt" && <span className="text-amber-600 font-medium"> — loopt</span>}
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </div>
      </div>

      {/* Bewaakte meters */}
      <div>
        <h2 className="text-lg font-semibold text-slate-900 mb-1">Bewaakte meters (ratchets)</h2>
        <p className="text-xs text-slate-400 mb-3">
          Elke meter is een test die alleen de goede kant op mag: een gedicht gat wordt geschrapt, een
          regressie faalt hard. De cijfers hieronder komen live uit dezelfde registers als de tests.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4 space-y-4">
            <Meter
              label={`Uitbouw-gaten laag 4 (open: ${dekking.gaten.length})`}
              waarde={samenvatting.aantalControlesVoltooid}
              totaal={samenvatting.aantalControlesTotaal}
            />
            <Meter label="Intake-extractors (laag 1, AUT-S1)" waarde={extractorsAangesloten} totaal={extractorDoeltypes.length} />
            <Meter label="Connector-diensten aangesloten (mock telt)" waarde={aangesloten.size} totaal={ALLE_DIENSTEN.length} />
            <Meter label="Echte overheids-adapters (AUT-S4/S7)" waarde={echteAdapters} totaal={ALLE_DIENSTEN.length} />
            <Meter
              label={`Agentwenken-achterstand (${agentwenkenAchterstand} onderdelen, plafond ${AGENTWENKEN_PLAFOND} — enkel dalen)`}
              waarde={Math.max(AGENTWENKEN_PLAFOND, agentwenkenAchterstand) - agentwenkenAchterstand}
              totaal={Math.max(AGENTWENKEN_PLAFOND, agentwenkenAchterstand)}
            />
          </div>
          <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
            <h3 className="text-sm font-semibold text-slate-800">Noordster-metriek</h3>
            <p className="text-xs text-slate-400 mt-0.5 mb-3">
              Hoeveel moet de notaris nog aanvullen op een vólledig verkoopdossier? Open velden per
              scenario — plafonds mogen enkel dalen (bron: noordster-metriek.test.ts).
            </p>
            <ul className="space-y-2.5">
              {NOORDSTER_PLAFONDS.map((p) => {
                const max = Math.max(...NOORDSTER_PLAFONDS.map((x) => x.plafond));
                return (
                  <li key={p.scenario}>
                    <div className="flex items-center justify-between gap-2 text-xs text-slate-500 mb-1">
                      <span>{p.scenario}</span>
                      <span className="font-semibold text-slate-700">≤ {p.plafond} open velden</span>
                    </div>
                    <ProgressBar percentage={Math.round((p.plafond / max) * 100)} kleur="bg-violet-400" />
                  </li>
                );
              })}
            </ul>
            <p className="text-xs text-slate-400 mt-3">
              Lager = beter: elk deterministisch ingevuld veld is een veld dat de notaris niet meer hoeft
              na te kijken.
            </p>
          </div>
        </div>
      </div>

      {/* Modules */}
      <div>
        <h2 className="text-lg font-semibold text-slate-900 mb-1">Modules</h2>
        <p className="text-xs text-slate-400 mb-3">
          {modules.filter((m) => m.beschikbaar).length} van {modules.length} modules beschikbaar; de module
          Boekhouding is bewust gereserveerd voor de financiële afhandeling (laag 6, AUT-S8).
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {modules.map((m) => {
            const inhoud = (
              <div className="flex items-start gap-3">
                <span className="text-xl" aria-hidden="true">
                  {m.icoon}
                </span>
                <div className="min-w-0">
                  <p className="font-medium text-slate-800 text-sm flex items-center gap-2 flex-wrap">
                    {m.titel}
                    {m.beschikbaar ? (
                      <StatusChip icoon="✓" label="actief" chip="bg-emerald-50 text-emerald-700 border-emerald-200" />
                    ) : (
                      <StatusChip icoon="○" label="gereserveerd" chip="bg-slate-50 text-slate-500 border-slate-200" />
                    )}
                  </p>
                  <p className="text-xs text-slate-500 mt-0.5">{m.beschrijving}</p>
                </div>
              </div>
            );
            return m.beschikbaar ? (
              <Link
                key={m.id}
                href={m.href}
                className="bg-white border border-slate-200 rounded-xl shadow-sm p-4 hover:shadow-md hover:-translate-y-0.5 transition-all block"
              >
                {inhoud}
              </Link>
            ) : (
              <div key={m.id} className="bg-white border border-slate-200 rounded-xl shadow-sm p-4 opacity-60">
                {inhoud}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}