"use client";
import Link from "next/link";
import { useMemo, useState } from "react";
import { useUitbouwDekking } from "@/lib/hooks/useUitbouwDekking";
import ProgressBar from "@/components/ui/ProgressBar";
import {
  UITBOUW_KANDIDATEN,
  percentageDossiertypeDekking,
  percentageKandidaatDekking,
  type KandidaatDekking,
  type UitbouwDomein,
  type UitbouwGat,
  type UitbouwPijler,
} from "@/lib/dossier/uitbouw";
import { DOSSIERTYPE_LABEL, type Dossiertype } from "@/lib/dossier/types";

const PIJLER_LABEL: Record<UitbouwPijler, string> = {
  ontwerp: "Ontwerp (NL)",
  "ontwerp-fr": "FR-spiegel",
  detectie: "Detectie",
  mails: "Modelmails",
  afrekening: "Afrekening",
};

const PIJLER_KLEUR: Record<UitbouwPijler, string> = {
  ontwerp: "bg-blue-50 text-blue-700 border-blue-200",
  "ontwerp-fr": "bg-indigo-50 text-indigo-700 border-indigo-200",
  detectie: "bg-violet-50 text-violet-700 border-violet-200",
  mails: "bg-sky-50 text-sky-700 border-sky-200",
  afrekening: "bg-orange-50 text-orange-700 border-orange-200",
};

const DOMEIN_LABEL: Record<UitbouwDomein, string> = {
  vastgoed: "Vastgoed",
  familie: "Familie",
  vennootschappen: "Vennootschappen",
  algemeen: "Algemeen",
};

const DOMEINEN: UitbouwDomein[] = ["vastgoed", "familie", "vennootschappen", "algemeen"];

/**
 * "Verkoop met krediet" en "verkoop zonder krediet" zijn dossiertypes, geen
 * aparte gouden paden voor het ontwerp: financiering bepaalt enkel een
 * clausule binnen het compromis, geen apart model. De twee échte gouden paden
 * — in de eigen woorden van de notaris ("het gouden pad van de compromis" /
 * "het gouden pad van de verkoopakte", zie integratie/INTEGRATIE-CLAUSULES.md)
 * — zijn de akteTypes hieronder, gedeeld door beide financieringsvarianten.
 */
const VERKOOP_AKTETYPES = ["verkoopovereenkomst (compromis) - heldere taal", "verkoopakte"];
const AKTETYPE_LABEL: Record<string, string> = {
  "verkoopovereenkomst (compromis) - heldere taal": "Compromis (heldere taal)",
  verkoopakte: "Verkoopakte",
};

function onderwerpLabel(onderwerp: string): string {
  if (onderwerp in DOSSIERTYPE_LABEL) return DOSSIERTYPE_LABEL[onderwerp as Dossiertype];
  return UITBOUW_KANDIDATEN.find((k) => k.akteType === onderwerp)?.omschrijving ?? onderwerp;
}

function ControleLijst({ items }: { items: { label: string; ok: boolean }[] }) {
  return (
    <ul className="flex flex-wrap gap-1.5">
      {items.map((item) => (
        <li
          key={item.label}
          className={`text-xs px-2 py-1 rounded-md border flex items-center gap-1 ${
            item.ok
              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
              : "bg-slate-50 text-slate-400 border-slate-200"
          }`}
        >
          <span aria-hidden="true">{item.ok ? "✓" : "✗"}</span>
          {item.label}
        </li>
      ))}
    </ul>
  );
}

function GatRegel({ gat }: { gat: UitbouwGat }) {
  return (
    <li className="flex flex-col gap-1 py-3 border-b last:border-b-0 border-slate-100">
      <div className="flex items-center gap-2 flex-wrap">
        <span className="font-medium text-slate-800 text-sm">{onderwerpLabel(gat.onderwerp)}</span>
        <span className={`text-xs px-2 py-0.5 rounded-full border ${PIJLER_KLEUR[gat.pijler]}`}>
          {PIJLER_LABEL[gat.pijler]}
        </span>
      </div>
      <p className="text-sm text-slate-500">{gat.omschrijving}</p>
      <p className="text-xs text-slate-400 font-mono">{gat.receptStap}</p>
    </li>
  );
}

function VolgendeStapVoorItem({ gaten }: { gaten: UitbouwGat[] }) {
  if (gaten.length === 0) {
    return <p className="text-sm text-emerald-700 font-medium">✅ Volledig gedekt</p>;
  }
  const volgende = [...gaten].sort((a, b) => a.prioriteit - b.prioriteit)[0];
  return (
    <div className="text-sm">
      <p className="text-slate-600">
        <span className="font-medium text-slate-800">Volgende stap</span> ({PIJLER_LABEL[volgende.pijler]}):{" "}
        {volgende.omschrijving}
      </p>
      <p className="text-xs text-slate-400 font-mono mt-0.5">{volgende.receptStap}</p>
    </div>
  );
}

export default function GoudenPadenPage() {
  const { dekking, samenvatting, modellen: alleModellen } = useUitbouwDekking();

  const [toonAlleStappen, setToonAlleStappen] = useState(false);
  const volgendeStappen = toonAlleStappen ? dekking.gaten : dekking.gaten.slice(0, 8);

  function modelInfo(akteType: string) {
    const nl = alleModellen.find((m) => m.akteType === akteType && (m.taal ?? "nl") === "nl");
    const fr = nl ? alleModellen.find((m) => (m.taal ?? "nl") === "fr" && m.vertalingVanId === nl.id) : undefined;
    return { nl, fr };
  }

  const verkoopMetKrediet = dekking.perDossiertype.find((d) => d.dossiertype === "verkoop-met-krediet");
  const verkoopZonderKrediet = dekking.perDossiertype.find((d) => d.dossiertype === "verkoop-zonder-krediet");
  const overigeDossiertypes = dekking.perDossiertype.filter(
    (d) => d.dossiertype !== "verkoop-met-krediet" && d.dossiertype !== "verkoop-zonder-krediet"
  );

  const kandidatenPerDomein = useMemo(() => {
    const groepen = new Map<UitbouwDomein, KandidaatDekking[]>();
    for (const k of dekking.kandidaten) {
      const kandidaat = UITBOUW_KANDIDATEN.find((c) => c.akteType === k.akteType);
      if (!kandidaat) continue;
      const lijst = groepen.get(kandidaat.domein) ?? [];
      lijst.push(k);
      groepen.set(kandidaat.domein, lijst);
    }
    return groepen;
  }, [dekking.kandidaten]);

  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">Gouden paden</h1>
        <p className="text-sm text-slate-500 mt-1 max-w-2xl">
          Stand van zaken van de uitbouw naar het einddoel: een autonome notariële medewerker die voor elke
          rechtshandeling zelfstandig het ontwerp (NL/FR), de modelmails en de afrekening klaarzet.
        </p>
      </div>

      {/* Voortgang */}
      <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
        <div className="flex items-end justify-between gap-4 flex-wrap mb-2">
          <div>
            <p className="text-xs uppercase tracking-wide text-slate-400">Voortgang naar het einddoel</p>
            <p className="text-3xl font-bold text-slate-900">{samenvatting.percentageVoltooid}%</p>
          </div>
          <p className="text-sm text-slate-500 text-right">
            {samenvatting.aantalControlesVoltooid} van {samenvatting.aantalControlesTotaal} controles gedekt
            <br />
            <span className="text-xs text-slate-400">
              {dekking.perDossiertype.length} bestaande gouden paden · {dekking.kandidaten.length} toekomstige
            </span>
          </p>
        </div>
        <ProgressBar percentage={samenvatting.percentageVoltooid} kleur="bg-yellow-500" />
      </div>

      {/* Volgende stappen */}
      <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
        <div className="flex items-center justify-between mb-1 gap-3 flex-wrap">
          <h2 className="text-lg font-semibold text-slate-900">Volgende stappen</h2>
          {dekking.gaten.length > 8 && (
            <button
              onClick={() => setToonAlleStappen((v) => !v)}
              className="text-xs text-brand-600 hover:text-brand-800"
            >
              {toonAlleStappen ? "Toon minder" : `Toon alle ${dekking.gaten.length}`}
            </button>
          )}
        </div>
        <p className="text-xs text-slate-400 mb-2">
          In prioriteitsvolgorde: ontwerp eerst, dan de FR-spiegel, detectie, modelmails en afrekening.
        </p>
        {dekking.gaten.length === 0 ? (
          <p className="text-sm text-emerald-700 font-medium py-3">✅ Geen openstaande gaten meer.</p>
        ) : (
          <ul>
            {volgendeStappen.map((gat, i) => (
              <GatRegel key={`${gat.onderwerp}-${gat.pijler}-${i}`} gat={gat} />
            ))}
          </ul>
        )}
      </div>

      {/* Bestaande gouden paden */}
      <div>
        <h2 className="text-lg font-semibold text-slate-900 mb-3">Bestaande gouden paden</h2>

        {verkoopMetKrediet && verkoopZonderKrediet && (
          <div className="mb-6">
            <h3 className="text-sm font-semibold text-slate-700 mb-1">Vastgoedverkoop — compromis en verkoopakte</h3>
            <p className="text-xs text-slate-400 mb-3 max-w-2xl">
              &quot;Verkoop met krediet&quot; en &quot;verkoop zonder krediet&quot; zijn dossiertypes, geen aparte
              gouden paden: financiering bepaalt enkel een clausule binnen het compromis, geen apart model. De twee
              échte gouden paden — compromis en verkoopakte — gelden voor beide financieringsvarianten.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {VERKOOP_AKTETYPES.map((akteType) => {
                const { nl, fr } = modelInfo(akteType);
                const checks = [
                  { label: "Ontwerp NL", ok: Boolean(nl) },
                  { label: "FR-spiegel", ok: Boolean(nl && fr) },
                ];
                const pct = Math.round((checks.filter((c) => c.ok).length / checks.length) * 100);
                return (
                  <div key={akteType} className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                    <div className="flex items-start justify-between gap-3 mb-2">
                      <h4 className="font-semibold text-slate-800">{AKTETYPE_LABEL[akteType] ?? akteType}</h4>
                      <span className="text-sm font-bold text-slate-700 shrink-0">{pct}%</span>
                    </div>
                    <ProgressBar percentage={pct} />
                    <div className="mt-3">
                      <ControleLijst items={checks} />
                    </div>
                    <p className="mt-3 text-xs text-slate-500">
                      {nl ? (
                        <>
                          <Link href={`/modeldocumenten/${nl.id}`} className="text-brand-600 hover:text-brand-800 underline">
                            {nl.titel}
                          </Link>{" "}
                          {fr ? <span className="text-emerald-600">FR ✓</span> : <span className="text-slate-400">FR ✗</span>}
                        </>
                      ) : (
                        <span className="text-rose-500">geen NL-model</span>
                      )}
                    </p>
                  </div>
                );
              })}
            </div>
            <div className="mt-3 bg-white border border-slate-200 rounded-xl shadow-sm p-4">
              <p className="text-xs text-slate-400 mb-2">Gedeeld over compromis én verkoopakte, met of zonder krediet:</p>
              <ControleLijst
                items={[
                  { label: "Detectie", ok: verkoopMetKrediet.detectieZeker && verkoopZonderKrediet.detectieZeker },
                  { label: "Modelmails", ok: verkoopMetKrediet.mails && verkoopZonderKrediet.mails },
                  { label: "Afrekening", ok: verkoopMetKrediet.afrekening && verkoopZonderKrediet.afrekening },
                ]}
              />
            </div>
          </div>
        )}

        <h3 className="text-sm font-semibold text-slate-700 mb-3">Overige gouden paden</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {overigeDossiertypes.map((d) => {
            const pct = percentageDossiertypeDekking(d);
            return (
              <div key={d.dossiertype} className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                <div className="flex items-start justify-between gap-3 mb-2">
                  <h3 className="font-semibold text-slate-800">{DOSSIERTYPE_LABEL[d.dossiertype]}</h3>
                  <span className="text-sm font-bold text-slate-700 shrink-0">{pct}%</span>
                </div>
                <ProgressBar percentage={pct} />
                <div className="mt-3">
                  <ControleLijst
                    items={[
                      { label: "Ontwerp NL", ok: d.ontwerpNL },
                      { label: "FR-spiegel", ok: d.ontwerpFR },
                      { label: "Detectie", ok: d.detectieZeker },
                      { label: "Modelmails", ok: d.mails },
                      { label: "Afrekening", ok: d.afrekening },
                    ]}
                  />
                </div>
                {d.akteTypes.length > 0 && (
                  <ul className="mt-3 space-y-1 text-xs text-slate-500">
                    {d.akteTypes.map((akteType) => {
                      const { nl, fr } = modelInfo(akteType);
                      return (
                        <li key={akteType} className="flex items-center gap-1.5 flex-wrap">
                          <span className="text-slate-400">{akteType}:</span>
                          {nl ? (
                            <Link href={`/modeldocumenten/${nl.id}`} className="text-brand-600 hover:text-brand-800 underline">
                              {nl.titel}
                            </Link>
                          ) : (
                            <span className="text-rose-500">geen NL-model</span>
                          )}
                          {nl && (fr ? <span className="text-emerald-600">FR ✓</span> : <span className="text-slate-400">FR ✗</span>)}
                        </li>
                      );
                    })}
                  </ul>
                )}
                <div className="mt-3 pt-3 border-t border-slate-100">
                  <VolgendeStapVoorItem gaten={d.gaten} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Toekomstige gouden paden */}
      <div>
        <h2 className="text-lg font-semibold text-slate-900 mb-1">Toekomstige gouden paden</h2>
        <p className="text-xs text-slate-400 mb-3">
          Rechtshandelingen die het kantoor nog niet (volledig) autonoom kan afhandelen, in prioriteitsvolgorde.
        </p>
        <div className="space-y-6">
          {DOMEINEN.map((domein) => {
            const items = kandidatenPerDomein.get(domein) ?? [];
            if (items.length === 0) return null;
            return (
              <div key={domein}>
                <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">
                  {DOMEIN_LABEL[domein]}
                </h3>
                <div className="space-y-2">
                  {items.map((k) => {
                    const pct = percentageKandidaatDekking(k);
                    return (
                      <div key={k.akteType} className="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
                        <div className="flex items-start justify-between gap-3">
                          <div className="min-w-0">
                            <p className="font-medium text-slate-800 text-sm">{k.omschrijving}</p>
                            <div className="mt-1.5">
                              <ControleLijst
                                items={[
                                  { label: "Ontwerp NL", ok: k.ontwerpNL },
                                  { label: "FR-spiegel", ok: k.ontwerpFR },
                                  { label: "Modelmails", ok: k.brieven },
                                  { label: "Afrekening", ok: k.afrekeningActief },
                                ]}
                              />
                            </div>
                          </div>
                          <div className="text-right shrink-0">
                            <span className="text-sm font-bold text-slate-700">{pct}%</span>
                            <div className="w-24 mt-1">
                              <ProgressBar percentage={pct} />
                            </div>
                          </div>
                        </div>
                        <div className="mt-2 pt-2 border-t border-slate-100">
                          <VolgendeStapVoorItem gaten={k.gaten} />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}