"use client";
import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useDossierStorage } from "@/lib/hooks/useDossierStorage";
import { WerkdossiersPaneel } from "@/components/dossier/WerkdossiersPaneel";
import { berekenOntbrekendeStukken } from "@/lib/dossier/afleiding";
import { bepaalDossierUrgentie, type DossierUrgentie } from "@/lib/dossier/opvolging";
import { dossierVeldenUitIntake, vindJsonObject, maakDossierUitIntakeResultaat, type IntakeResultaat } from "@/lib/dossier/intake";
import {
  maakVeld,
  maakLeegDossier,
  isVerkoopType,
  heeftOverdrachtsbelastingVelden,
  DOSSIERTYPE_LABEL,
  DOSSIERSTATUS_LABEL,
  type Dossier,
  type DossierStatus,
  type Dossiertype,
} from "@/lib/dossier/types";
import { relatieLabels, type GoedeType, type Relatie } from "@/data/belastingen";

/** Label + toelichting per verkoopregime, gedeeld tussen de knoppen op dit formulier. */
const VERKOOPREGIME_LABEL: Record<NonNullable<Dossier["verkoopRegime"]>, string> = {
  gewoon: "Gewone verkoop",
  "wet-breyne": "Wet Breyne (te bouwen/in aanbouw)",
  lijfrente: "Lijfrente",
};
const VERKOOPREGIME_TOELICHTING: Partial<Record<NonNullable<Dossier["verkoopRegime"]>, string>> = {
  "wet-breyne":
    "Verkoop van een nog te bouwen of in aanbouw zijnde woning (wet van 9 juli 1971) — termijnbetaling per bouwfase, prijsherziening, waarborgregeling en tienjarige aansprakelijkheid.",
  lijfrente:
    "Verkoop tegen lijfrente (bail à rente viagère) — bouquet + periodieke rente i.p.v. een vaste prijs, met een aleatoir karakter en doorgaans een voorbehouden genotsrecht voor de verkoper.",
};

function nieuwId(): string {
  return `dossier-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
}

/** Bouwt een nieuw dossier uit de geïmporteerde intake-velden. */
function dossierUitIntake(resultaat: IntakeResultaat): Dossier {
  const nu = new Date().toISOString();
  const dossier = maakDossierUitIntakeResultaat(resultaat, {
    id: nieuwId(),
    status: "compromis-ontvangen",
    aangemaakt: nu,
    aangepast: nu,
  });
  dossier.ontbrekendeStukken = berekenOntbrekendeStukken(dossier);
  return dossier;
}

/** Badge-opmaak per urgentieniveau (enkel de niveaus mét badge). */
const URGENTIE_BADGE: Record<"verstreken" | "nabij", string> = {
  verstreken: "bg-red-100 text-red-700",
  nabij: "bg-amber-100 text-amber-700",
};

export default function DossierOverzichtPage() {
  const router = useRouter();
  const { dossiers, geladen, slaDossier } = useDossierStorage();
  // Sinds de fusie van de modules Dossiers en Werkdossiers: twee tabbladen op
  // één pagina. ?tab=werkdossiers (o.m. de redirect van /werkdossiers) opent
  // meteen het werkdossiers-paneel; via een effect om een
  // SSR-hydratieverschil te vermijden.
  const [tab, setTab] = useState<"fiches" | "werkdossiers">("fiches");
  useEffect(() => {
    if (new URLSearchParams(window.location.search).get("tab") === "werkdossiers") {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- bewuste eenmalige URL-synchronisatie na hydratie (?tab= uit de /werkdossiers-redirect)
      setTab("werkdossiers");
    }
  }, []);
  const [statusFilter, setStatusFilter] = useState<DossierStatus | "alle">("alle");
  const [dossiertype, setDossiertype] = useState<Dossiertype>("verkoop-met-krediet");
  const [verkoopdocument, setVerkoopdocument] = useState<NonNullable<Dossier["verkoopdocument"]>>("compromis");
  const [verkoopRegime, setVerkoopRegime] = useState<NonNullable<Dossier["verkoopRegime"]>>("gewoon");
  const [referentie, setReferentie] = useState("");
  const [importTekst, setImportTekst] = useState("");
  const [importVoorbeeld, setImportVoorbeeld] = useState<IntakeResultaat | null>(null);
  const [importFout, setImportFout] = useState<string | null>(null);
  const [adres, setAdres] = useState("");
  const [prijs, setPrijs] = useState("");
  const [koper, setKoper] = useState("");
  const [verkoper, setVerkoper] = useState("");
  const [partijA, setPartijA] = useState("");
  const [partijB, setPartijB] = useState("");
  const [belastbareWaarde, setBelastbareWaarde] = useState("");
  const [relatie, setRelatie] = useState<Relatie>("rechte_lijn_partner");
  const [goedType, setGoedType] = useState<GoedeType>("onroerend");

  const verkoopGekozen = isVerkoopType(dossiertype);

  // Werklijst-volgorde: dringendste termijn eerst (verstreken → nakend →
  // lopend), daarna de rest op laatst aangepast. De urgentieberekening zelf is
  // puur (lib/dossier/opvolging.ts); enkel "vandaag" komt uit de client.
  const vandaag = new Date().toISOString().slice(0, 10);
  const gesorteerd = useMemo<{ dossier: Dossier; urgentie: DossierUrgentie }[]>(
    () =>
      dossiers
        .map((dossier) => ({ dossier, urgentie: bepaalDossierUrgentie(dossier, vandaag) }))
        .sort(
          (a, b) =>
            a.urgentie.sorteersleutel - b.urgentie.sorteersleutel ||
            b.dossier.aangepast.localeCompare(a.dossier.aangepast)
        ),
    [dossiers, vandaag]
  );
  const perStatus = useMemo(() => {
    const telling = new Map<DossierStatus, number>();
    for (const d of dossiers) telling.set(d.status, (telling.get(d.status) ?? 0) + 1);
    return telling;
  }, [dossiers]);
  const getoond = statusFilter === "alle" ? gesorteerd : gesorteerd.filter((g) => g.dossier.status === statusFilter);

  async function maakDossier() {
    const nu = new Date().toISOString();
    if (isVerkoopType(dossiertype)) {
      if (!adres.trim() || !prijs.trim()) return;
      const dossier = maakLeegDossier(dossiertype, {
        id: nieuwId(),
        status: "compromis-ontvangen",
        referentie: referentie.trim() || undefined,
        partijen: maakVeld(
          [
            ...(verkoper.trim() ? [{ naam: verkoper.trim(), rol: "verkoper" as const }] : []),
            ...(koper.trim() ? [{ naam: koper.trim(), rol: "koper" as const }] : []),
          ],
          "compromis"
        ),
        ontbrekendeStukken: [],
        tegenstrijdigheden: [],
        aangemaakt: nu,
        aangepast: nu,
      });
      dossier.verkoopdocument = verkoopdocument;
      dossier.verkoopRegime = verkoopRegime === "wet-breyne" ? verkoopRegime : undefined;
      dossier.goed = maakVeld({ adres: adres.trim() }, "compromis");
      dossier.prijs = maakVeld(Number(prijs), "compromis");
      dossier.ontbrekendeStukken = berekenOntbrekendeStukken(dossier);
      await slaDossier(dossier);
      setAdres("");
      setPrijs("");
      setKoper("");
      setVerkoper("");
      setReferentie("");
      return;
    }

    if (!partijA.trim() || !belastbareWaarde.trim()) return;
    const isSchenking = dossiertype === "schenking";
    const dossier: Dossier = maakLeegDossier(dossiertype, {
      id: nieuwId(),
      status: "compromis-ontvangen",
      referentie: referentie.trim() || undefined,
      partijen: maakVeld(
        [
          { naam: partijA.trim(), rol: isSchenking ? "schenker" : "erflater" },
          ...(partijB.trim()
            ? [{ naam: partijB.trim(), rol: isSchenking ? ("begiftigde" as const) : ("erfgenaam" as const) }]
            : []),
        ],
        "verklaring-partij"
      ),
      ontbrekendeStukken: [],
      tegenstrijdigheden: [],
      aangemaakt: nu,
      aangepast: nu,
    });
    // De fiscale velden bestaan enkel op schenking-/nalatenschapsdossiers;
    // voor de overige types (vennootschap, testament) blijven ze weg.
    if (heeftOverdrachtsbelastingVelden(dossier)) {
      dossier.belastbareWaarde = maakVeld(Number(belastbareWaarde), "verklaring-partij");
      dossier.relatieBelasting = maakVeld(relatie, "verklaring-partij");
      dossier.goedTypeBelasting = maakVeld(goedType, "verklaring-partij");
    }
    await slaDossier(dossier);
    setPartijA("");
    setPartijB("");
    setBelastbareWaarde("");
    setReferentie("");
  }

  /** Stap 1: lees het geplakte agent-JSON in en toon een voorbeeld zonder te bewaren. */
  function leesImportIn() {
    setImportFout(null);
    setImportVoorbeeld(null);
    const json = vindJsonObject(importTekst);
    if (!json) {
      setImportFout("Geen JSON gevonden. Plak het volledige ```json-blok dat de agent heeft opgeleverd.");
      return;
    }
    let parsed: unknown;
    try {
      parsed = JSON.parse(json);
    } catch {
      setImportFout("De JSON is ongeldig (kon niet worden ontleed). Controleer of je het volledige blok hebt geplakt.");
      return;
    }
    const resultaat = dossierVeldenUitIntake(parsed);
    const aantalVelden = Object.keys(resultaat.velden).length;
    if (aantalVelden === 0 && !resultaat.dossiertype) {
      setImportFout("Geen bruikbare dossiervelden in de JSON. Controleer het formaat (schema notary-ai-dossier-intake/v1).");
      return;
    }
    setImportVoorbeeld(resultaat);
  }

  /** Stap 2: maak het dossier effectief aan uit het ingelezen voorbeeld en open het. */
  async function maakDossierUitImport() {
    if (!importVoorbeeld) return;
    const dossier = dossierUitIntake(importVoorbeeld);
    await slaDossier(dossier);
    setImportTekst("");
    setImportVoorbeeld(null);
    router.push(`/dossier/${dossier.id}`);
  }

  return (
    <div className={`p-6 mx-auto ${tab === "werkdossiers" ? "max-w-7xl" : "max-w-3xl"}`}>
      <h1 className="text-xl font-semibold mb-1">Dossiers</h1>
      <p className="text-sm text-slate-500 mb-4">
        Gestructureerde dossierfiche per dossier én de werkdossiers (.docx-sessies) van elke
        Word-generatie — bekijken, bewerken en regenereren op één plaats.
      </p>

      <div className="flex gap-1 border-b border-slate-200 mb-6">
        {(
          [
            ["fiches", "Dossierfiches"],
            ["werkdossiers", "Werkdossiers (.docx)"],
          ] as const
        ).map(([id, label]) => (
          <button
            key={id}
            onClick={() => setTab(id)}
            className={`text-sm px-4 py-2 -mb-px border-b-2 transition-colors ${
              tab === id
                ? "border-brand-600 text-brand-700 font-medium"
                : "border-transparent text-slate-500 hover:text-slate-700"
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {tab === "werkdossiers" && <WerkdossiersPaneel />}

      {tab === "fiches" && (
      <>
      <div className="border border-slate-200 rounded-xl shadow-sm p-5 mb-8 bg-slate-50">
        <h2 className="text-sm font-medium mb-3">Nieuw dossier (uit compromis)</h2>
        <div className="flex gap-2 mb-3">
          {(Object.keys(DOSSIERTYPE_LABEL) as Dossiertype[]).map((type) => (
            <button
              key={type}
              type="button"
              onClick={() => setDossiertype(type)}
              className={`text-sm px-3 py-1.5 rounded-md border ${
                dossiertype === type
                  ? "border-brand-400 bg-brand-50 text-brand-700"
                  : "border-slate-300 hover:bg-slate-100"
              }`}
            >
              {DOSSIERTYPE_LABEL[type]}
            </button>
          ))}
        </div>
        <input
          className="border border-slate-300 rounded-md px-3 py-2 text-sm w-full mb-3 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
          placeholder="Kantoorreferentie / dossiernummer (optioneel)"
          value={referentie}
          onChange={(e) => setReferentie(e.target.value)}
        />
        {verkoopGekozen && (
          <div className="mb-3">
            <p className="text-xs text-slate-500 mb-1">Welk document stelt het kantoor op?</p>
            <div className="flex gap-2">
              {(["compromis", "verkoopakte"] as const).map((doc) => (
                <button
                  key={doc}
                  type="button"
                  onClick={() => setVerkoopdocument(doc)}
                  className={`text-sm px-3 py-1.5 rounded-md border ${
                    verkoopdocument === doc
                      ? "border-brand-400 bg-brand-50 text-brand-700"
                      : "border-slate-300 hover:bg-slate-100"
                  }`}
                >
                  {doc === "compromis" ? "Compromis (onderhands)" : "Verkoopakte (notarieel)"}
                </button>
              ))}
            </div>
            <p className="text-[11px] text-slate-400 mt-1">
              {verkoopdocument === "compromis"
                ? "Onderhandse verkoopovereenkomst — voordien is enkel een bod/aankoopbelofte getekend."
                : "Authentieke akte — meestal binnen de vier maanden na de ondertekening van het compromis."}
            </p>
          </div>
        )}
        {verkoopGekozen && (
          <div className="mb-3">
            <p className="text-xs text-slate-500 mb-1">Verkoopregime</p>
            <div className="flex gap-2">
              {(["gewoon", "wet-breyne", "lijfrente"] as const).map((regime) => (
                <button
                  key={regime}
                  type="button"
                  onClick={() => setVerkoopRegime(regime)}
                  className={`text-sm px-3 py-1.5 rounded-md border ${
                    verkoopRegime === regime
                      ? "border-brand-400 bg-brand-50 text-brand-700"
                      : "border-slate-300 hover:bg-slate-100"
                  }`}
                >
                  {VERKOOPREGIME_LABEL[regime]}
                </button>
              ))}
            </div>
            {VERKOOPREGIME_TOELICHTING[verkoopRegime] && (
              <p className="text-[11px] text-slate-400 mt-1">{VERKOOPREGIME_TOELICHTING[verkoopRegime]}</p>
            )}
          </div>
        )}
        {verkoopGekozen ? (
          <div className="grid grid-cols-2 gap-3 mb-3">
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm col-span-2 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder="Adres van het goed"
              value={adres}
              onChange={(e) => setAdres(e.target.value)}
            />
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder="Verkoper(s)"
              value={verkoper}
              onChange={(e) => setVerkoper(e.target.value)}
            />
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder="Koper(s)"
              value={koper}
              onChange={(e) => setKoper(e.target.value)}
            />
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder="Verkoopprijs (€)"
              type="number"
              value={prijs}
              onChange={(e) => setPrijs(e.target.value)}
            />
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-3 mb-3">
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder={dossiertype === "schenking" ? "Schenker" : "Erflater"}
              value={partijA}
              onChange={(e) => setPartijA(e.target.value)}
            />
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder={dossiertype === "schenking" ? "Begiftigde(n)" : "Erfgenaam/erfgenamen"}
              value={partijB}
              onChange={(e) => setPartijB(e.target.value)}
            />
            <input
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              placeholder="Belastbare waarde (€)"
              type="number"
              value={belastbareWaarde}
              onChange={(e) => setBelastbareWaarde(e.target.value)}
            />
            <select
              className="border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              value={relatie}
              onChange={(e) => setRelatie(e.target.value as Relatie)}
            >
              {Object.entries(relatieLabels).map(([waarde, label]) => (
                <option key={waarde} value={waarde}>
                  {label}
                </option>
              ))}
            </select>
            <select
              className="border border-slate-300 rounded-md px-3 py-2 text-sm col-span-2 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
              value={goedType}
              onChange={(e) => setGoedType(e.target.value as GoedeType)}
            >
              <option value="onroerend">Onroerend goed</option>
              <option value="roerend">Roerend goed</option>
              <option value="gezinswoning">Gezinswoning</option>
            </select>
          </div>
        )}
        <button
          onClick={maakDossier}
          className="bg-brand-600 text-white text-sm px-4 py-2 rounded-md hover:bg-brand-700"
        >
          Dossier aanmaken
        </button>
      </div>

      <div className="border border-indigo-200 rounded-xl shadow-sm p-5 mb-8 bg-indigo-50/50">
        <h2 className="text-sm font-medium mb-1">Importeer uit brondocument</h2>
        <p className="text-xs text-slate-500 mb-3">
          Laat je AI-agent het compromis lokaal omzetten naar JSON met de prompt{" "}
          <Link href="/ai-prompts" className="text-indigo-700 underline">
            &ldquo;dossiergegevens extraheren naar importeerbaar JSON&rdquo;
          </Link>{" "}
          en plak het resultaat hier. De gegevens blijven lokaal; ze gaan nooit naar de Notary.AI-API.
        </p>
        <textarea
          className="border border-slate-300 rounded-md px-3 py-2 text-sm w-full font-mono h-28 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400"
          placeholder={'Plak hier het ```json-blok van de agent…'}
          value={importTekst}
          onChange={(e) => {
            setImportTekst(e.target.value);
            setImportVoorbeeld(null);
            setImportFout(null);
          }}
        />
        <div className="flex items-center gap-2 mt-2">
          <button
            onClick={leesImportIn}
            disabled={!importTekst.trim()}
            className="text-sm px-4 py-2 rounded-md font-medium bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-40 disabled:cursor-not-allowed"
          >
            Inlezen
          </button>
          {importVoorbeeld && (
            <button
              onClick={maakDossierUitImport}
              className="text-sm px-4 py-2 rounded-md font-medium bg-brand-600 text-white hover:bg-brand-700"
            >
              Dossier aanmaken →
            </button>
          )}
        </div>
        {importFout && <p className="text-xs text-rose-700 mt-2">{importFout}</p>}
        {importVoorbeeld && (
          <div className="mt-3 text-xs text-slate-700 bg-white border border-slate-200 rounded-lg p-3">
            <p className="font-medium mb-1">Klaar om te importeren:</p>
            <ul className="space-y-0.5">
              <li>
                Dossiertype:{" "}
                {importVoorbeeld.dossiertype
                  ? DOSSIERTYPE_LABEL[importVoorbeeld.dossiertype]
                  : "onbekend — wordt 'Verkoop zonder krediet' (pas nadien aan)"}
              </li>
              {importVoorbeeld.velden.partijen && (
                <li>
                  Partijen:{" "}
                  {importVoorbeeld.velden.partijen.waarde
                    .map((p) => `${[p.voornaam, p.naam].filter(Boolean).join(" ")} (${p.rol})`)
                    .join(", ") || "—"}
                </li>
              )}
              {importVoorbeeld.velden.goed && <li>Goed: {importVoorbeeld.velden.goed.waarde.adres}</li>}
              {importVoorbeeld.velden.prijs && (
                <li>Prijs: €{importVoorbeeld.velden.prijs.waarde.toLocaleString("nl-BE")}</li>
              )}
              {importVoorbeeld.velden.belastbareWaarde && (
                <li>Belastbare waarde: €{importVoorbeeld.velden.belastbareWaarde.waarde.toLocaleString("nl-BE")}</li>
              )}
            </ul>
            {importVoorbeeld.problemen.length > 0 && (
              <div className="mt-2 border-t border-slate-200 pt-2">
                <p className="font-medium text-amber-700 mb-1">
                  Overgeslagen / na te kijken ({importVoorbeeld.problemen.length}):
                </p>
                <ul className="space-y-0.5 text-amber-800">
                  {importVoorbeeld.problemen.map((p, i) => (
                    <li key={i}>• {p}</li>
                  ))}
                </ul>
              </div>
            )}
            <p className="text-slate-400 mt-2">
              Na het aanmaken lees je elke waarde na tegen het brondocument — het blijft een werkdocument.
            </p>
          </div>
        )}
      </div>

      {!geladen ? (
        <p className="text-sm text-slate-400">Laden...</p>
      ) : dossiers.length === 0 ? (
        <p className="text-sm text-slate-400">Nog geen dossiers.</p>
      ) : (
        <>
          <div className="flex flex-wrap gap-1.5 mb-3">
            <button
              type="button"
              onClick={() => setStatusFilter("alle")}
              className={`text-xs px-2.5 py-1 rounded-full border ${
                statusFilter === "alle"
                  ? "border-brand-400 bg-brand-50 text-brand-700 font-medium"
                  : "border-slate-300 text-slate-600 hover:bg-slate-100"
              }`}
            >
              Alle ({dossiers.length})
            </button>
            {(Object.keys(DOSSIERSTATUS_LABEL) as DossierStatus[])
              .filter((s) => (perStatus.get(s) ?? 0) > 0)
              .map((s) => (
                <button
                  key={s}
                  type="button"
                  onClick={() => setStatusFilter(statusFilter === s ? "alle" : s)}
                  className={`text-xs px-2.5 py-1 rounded-full border ${
                    statusFilter === s
                      ? "border-brand-400 bg-brand-50 text-brand-700 font-medium"
                      : "border-slate-300 text-slate-600 hover:bg-slate-100"
                  }`}
                >
                  {DOSSIERSTATUS_LABEL[s]} ({perStatus.get(s)})
                </button>
              ))}
          </div>
          <ul className="space-y-2">
            {getoond.map(({ dossier: d, urgentie }) => (
              <li key={d.id}>
                <Link
                  href={`/dossier/${d.id}`}
                  className="flex items-center justify-between border border-slate-200 rounded-xl shadow-sm px-5 py-4 hover:border-brand-300 hover:bg-brand-50/50"
                >
                  <div>
                    <p className="text-sm font-medium">
                      {isVerkoopType(d.dossiertype)
                        ? d.goed?.waarde.adres ?? "—"
                        : d.partijen.waarde.map((p) => p.naam).join(", ") || "—"}
                    </p>
                    <p className="text-xs text-slate-500">
                      €
                      {(isVerkoopType(d.dossiertype)
                        ? d.prijs?.waarde ?? 0
                        : d.belastbareWaarde?.waarde ?? 0
                      ).toLocaleString("nl-BE")}{" "}
                      · {DOSSIERTYPE_LABEL[d.dossiertype]}
                      {isVerkoopType(d.dossiertype) && d.verkoopdocument
                        ? ` · ${d.verkoopdocument === "verkoopakte" ? "Verkoopakte" : "Compromis"}`
                        : ""}
                      {isVerkoopType(d.dossiertype) && d.verkoopRegime && d.verkoopRegime !== "gewoon"
                        ? ` · ${VERKOOPREGIME_LABEL[d.verkoopRegime]}`
                        : ""}{" "}
                      · {DOSSIERSTATUS_LABEL[d.status]}
                    </p>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    {(urgentie.niveau === "verstreken" || urgentie.niveau === "nabij") && (
                      <span
                        className={`text-xs px-2 py-1 rounded-md font-medium ${URGENTIE_BADGE[urgentie.niveau]}`}
                        title={urgentie.termijn ? `${urgentie.termijn.titel} — vervalt ${urgentie.termijn.vervaldatumVoluit}` : undefined}
                      >
                        {urgentie.label}
                      </span>
                    )}
                    {(d.koppelingen?.length ?? 0) > 0 && (
                      <span
                        className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-md"
                        title={`Gekoppeld aan ${d.koppelingen!.length} dossier(s)`}
                      >
                        🔗 {d.koppelingen!.length}
                      </span>
                    )}
                    {d.ontbrekendeStukken.length > 0 && (
                      <span className="text-xs bg-amber-100 text-amber-700 px-2 py-1 rounded-md">
                        {d.ontbrekendeStukken.length} stuk(ken) ontbreken
                      </span>
                    )}
                  </div>
                </Link>
              </li>
            ))}
            {getoond.length === 0 && (
              <li className="text-sm text-slate-400">Geen dossiers met deze status.</li>
            )}
          </ul>
        </>
      )}
      </>
      )}
    </div>
  );
}