"use client";
// ── Editor voor één controlepunt van de conventie-nazicht-kennisbank ─────────
// Bewerkt een bestaand (seed- of kantoor-)punt of maakt een nieuw kantoorpunt.
// Valideert via valideerControlepunt vóór opslag, zodat geen punt in de
// kennisbank belandt dat de analyse-engine niet aankan. De signalen worden als
// mensvriendelijke tekst bewerkt (één groep per regel, " + " = EN).

import { useState } from "react";
import {
  signalenNaarTekst,
  tekstNaarSignalen,
  valideerControlepunt,
} from "@/data/conventie-nazicht/aanpassingen";
import {
  nazichtCategorieLabels,
  NAZICHT_CATEGORIE_VOLGORDE,
  type Controlepunt,
  type NazichtCategorie,
  type NazichtDoel,
} from "@/data/conventie-nazicht/types";
import { AKTETYPES } from "@/data/modeldocumenten/akte-types";

const veld =
  "w-full text-sm border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400 transition-colors";

function leegPunt(): Controlepunt {
  return {
    id: "",
    categorie: "belangrijk",
    doel: "vereist",
    akteTypes: [],
    titel: "",
    uitleg: "",
    signalen: [],
    voorstel: "",
  };
}

/** Slugify een titel tot een stabiel, kantooreigen id. */
function maakId(titel: string): string {
  const basis = titel
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .slice(0, 48);
  return `kantoor-${basis || "punt"}`;
}

export function ControlepuntEditor({
  basis,
  bestaandeIds,
  onBewaar,
  onAnnuleer,
}: {
  basis?: Controlepunt;
  /** Reeds gebruikte ids (voor uniciteitscontrole bij een nieuw punt). */
  bestaandeIds: readonly string[];
  onBewaar: (punt: Controlepunt) => void;
  onAnnuleer: () => void;
}) {
  const isNieuw = !basis;
  const [punt, setPunt] = useState<Controlepunt>(basis ?? leegPunt());
  const [signalenTekst, setSignalenTekst] = useState(
    basis ? signalenNaarTekst(basis.signalen) : ""
  );
  const [alleTypes, setAlleTypes] = useState(basis?.akteTypes === "alle");
  const [fouten, setFouten] = useState<string[]>([]);

  const gekozenTypes = punt.akteTypes === "alle" ? [] : punt.akteTypes;

  function wijzig<K extends keyof Controlepunt>(sleutel: K, waarde: Controlepunt[K]) {
    setPunt((p) => ({ ...p, [sleutel]: waarde }));
  }

  function toggleType(type: string) {
    setPunt((p) => {
      const huidig = p.akteTypes === "alle" ? [] : [...p.akteTypes];
      const index = huidig.indexOf(type as (typeof huidig)[number]);
      if (index >= 0) huidig.splice(index, 1);
      else huidig.push(type as (typeof huidig)[number]);
      return { ...p, akteTypes: huidig };
    });
  }

  function bewaar() {
    const kandidaat: Controlepunt = {
      ...punt,
      id: isNieuw ? punt.id.trim() || maakId(punt.titel) : punt.id,
      titel: punt.titel.trim(),
      uitleg: punt.uitleg.trim(),
      akteTypes: alleTypes ? "alle" : gekozenTypes,
      signalen: tekstNaarSignalen(signalenTekst),
      voorstel: punt.doel === "vereist" ? punt.voorstel?.trim() || "" : undefined,
      vervanging: punt.doel === "verdacht" ? punt.vervanging?.trim() || undefined : undefined,
      validatie: { status: "gevalideerd", datum: new Date().toISOString().slice(0, 10) },
    };

    const problemen = valideerControlepunt(kandidaat);
    if (isNieuw && bestaandeIds.includes(kandidaat.id)) {
      problemen.push(`Er bestaat al een punt met id "${kandidaat.id}".`);
    }
    if (problemen.length > 0) {
      setFouten(problemen);
      return;
    }
    onBewaar(kandidaat);
  }

  return (
    <div className="bg-white border border-slate-300 rounded-xl shadow-sm p-5 space-y-4">
      <h3 className="text-base font-semibold text-slate-900">
        {isNieuw ? "Nieuw controlepunt" : `Bewerk: ${basis?.titel}`}
      </h3>

      {fouten.length > 0 && (
        <ul className="text-sm text-red-800 bg-red-50 border border-red-200 rounded-lg px-3 py-2 space-y-1">
          {fouten.map((f, i) => (
            <li key={i}>• {f}</li>
          ))}
        </ul>
      )}

      <div className="grid md:grid-cols-2 gap-4">
        <label className="block space-y-1">
          <span className="text-xs font-medium text-slate-600">Categorie (gewicht)</span>
          <select
            value={punt.categorie}
            onChange={(e) => {
              const categorie = e.target.value as NazichtCategorie;
              // Categorie stuurt het doel voor de eenduidige gevallen.
              const doel: NazichtDoel =
                categorie === "te-vermijden"
                  ? "verdacht"
                  : categorie === "essentieel" || categorie === "belangrijk"
                    ? "vereist"
                    : punt.doel;
              setPunt((p) => ({ ...p, categorie, doel }));
            }}
            className={veld}
          >
            {NAZICHT_CATEGORIE_VOLGORDE.map((c) => (
              <option key={c} value={c}>
                {nazichtCategorieLabels[c]}
              </option>
            ))}
          </select>
        </label>

        <label className="block space-y-1">
          <span className="text-xs font-medium text-slate-600">
            Doel — {punt.doel === "vereist" ? "moet aanwezig zijn" : "moet afwezig zijn"}
          </span>
          <select
            value={punt.doel}
            onChange={(e) => wijzig("doel", e.target.value as NazichtDoel)}
            disabled={punt.categorie !== "beter"}
            className={`${veld} disabled:bg-slate-50 disabled:text-slate-500`}
          >
            <option value="vereist">Vereist (invoegen als het ontbreekt)</option>
            <option value="verdacht">Verdacht (schrappen/vervangen als aangetroffen)</option>
          </select>
        </label>
      </div>

      <label className="block space-y-1">
        <span className="text-xs font-medium text-slate-600">Titel</span>
        <input value={punt.titel} onChange={(e) => wijzig("titel", e.target.value)} className={veld} />
      </label>

      <label className="block space-y-1">
        <span className="text-xs font-medium text-slate-600">Uitleg / motivering</span>
        <textarea
          value={punt.uitleg}
          onChange={(e) => wijzig("uitleg", e.target.value)}
          rows={3}
          className={veld}
        />
      </label>

      <fieldset className="space-y-2">
        <legend className="text-xs font-medium text-slate-600">Van toepassing op</legend>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={alleTypes} onChange={(e) => setAlleTypes(e.target.checked)} />
          Alle rechtshandelingen
        </label>
        {!alleTypes && (
          <div className="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto border border-slate-200 rounded-lg p-2">
            {AKTETYPES.map((type) => (
              <button
                key={type}
                type="button"
                onClick={() => toggleType(type)}
                className={`text-xs px-2 py-0.5 rounded-full border ${
                  gekozenTypes.includes(type)
                    ? "bg-brand-600 text-white border-brand-600"
                    : "bg-white text-slate-600 border-slate-300 hover:bg-slate-50"
                }`}
              >
                {type}
              </button>
            ))}
          </div>
        )}
      </fieldset>

      <label className="block space-y-1">
        <span className="text-xs font-medium text-slate-600">
          Signalen — één groep per regel, trefwoorden binnen een groep met &quot; + &quot; (allemaal
          aanwezig)
        </span>
        <textarea
          value={signalenTekst}
          onChange={(e) => setSignalenTekst(e.target.value)}
          rows={3}
          placeholder={"bodemattest\nopschortende voorwaarde + lening"}
          className={`${veld} font-mono`}
        />
      </label>

      {punt.doel === "vereist" ? (
        <label className="block space-y-1">
          <span className="text-xs font-medium text-slate-600">
            In te voegen clausule (bij ontbreken)
          </span>
          <textarea
            value={punt.voorstel ?? ""}
            onChange={(e) => wijzig("voorstel", e.target.value)}
            rows={3}
            className={veld}
          />
        </label>
      ) : (
        <label className="block space-y-1">
          <span className="text-xs font-medium text-slate-600">
            Vervangtekst (leeg = zuivere schrapping)
          </span>
          <textarea
            value={punt.vervanging ?? ""}
            onChange={(e) => wijzig("vervanging", e.target.value)}
            rows={3}
            className={veld}
          />
        </label>
      )}

      <label className="block space-y-1">
        <span className="text-xs font-medium text-slate-600">Wetsbasis (één per regel, optioneel)</span>
        <textarea
          value={(punt.wetsbasis ?? []).join("\n")}
          onChange={(e) =>
            wijzig(
              "wetsbasis",
              e.target.value
                .split("\n")
                .map((r) => r.trim())
                .filter(Boolean)
            )
          }
          rows={2}
          className={veld}
        />
      </label>

      <div className="flex gap-2 justify-end">
        <button
          onClick={onAnnuleer}
          className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-700 hover:bg-slate-50"
        >
          Annuleren
        </button>
        <button
          onClick={bewaar}
          className="text-sm px-4 py-2 rounded-lg font-medium text-white bg-brand-600 hover:bg-brand-700"
        >
          {isNieuw ? "Punt toevoegen" : "Wijziging bewaren"}
        </button>
      </div>
    </div>
  );
}