"use client";
import { useState } from "react";
import {
  KENNIS_CATEGORIEEN,
  genereerKennisId,
  kennisCategorieLabels,
  type KennisCategorie,
  type KennisItem,
} from "@/data/kennisbank";

const leegFormulier = {
  titel: "",
  inhoud: "",
  categorie: "kantoorgebruik" as KennisCategorie,
  themas: "",
  bronnen: "",
};

function naarLijst(tekst: string): string[] {
  return tekst
    .split(",")
    .map((s) => s.trim())
    .filter(Boolean);
}

/** Verhoogt het minor-versienummer: "1.0" → "1.1". */
function volgendeVersie(versie: string): string {
  const [hoofd, minor] = versie.split(".");
  const volgende = Number.parseInt(minor ?? "0", 10) + 1;
  return `${hoofd || "1"}.${Number.isNaN(volgende) ? 1 : volgende}`;
}

export function KennisForm({
  initieel,
  onSla,
  onAnnuleer,
}: {
  initieel?: KennisItem;
  onSla: (item: KennisItem) => Promise<void>;
  onAnnuleer: () => void;
}) {
  const [velden, setVelden] = useState(
    initieel
      ? {
          titel: initieel.titel,
          inhoud: initieel.inhoud,
          categorie: initieel.categorie,
          themas: initieel.themas.join(", "),
          bronnen: (initieel.bronnen ?? []).join(", "),
        }
      : leegFormulier
  );
  const [bezig, setBezig] = useState(false);
  const [fout, setFout] = useState<string | null>(null);

  const isNieuw = !initieel;

  function stelIn<K extends keyof typeof velden>(key: K, waarde: (typeof velden)[K]) {
    setVelden((v) => ({ ...v, [key]: waarde }));
  }

  async function doeOpslaan(e: React.FormEvent) {
    e.preventDefault();
    if (!velden.titel.trim() || !velden.inhoud.trim()) {
      setFout("Titel en inhoud zijn verplicht.");
      return;
    }
    setFout(null);
    setBezig(true);
    const nu = new Date().toISOString();
    // De notaris bewerkt rechtstreeks: hij ís de validator. Een bewerkt
    // agentvoorstel behoudt zijn status "te_valideren" tot de goedkeuring.
    const item: KennisItem = {
      ...(initieel ?? {
        id: genereerKennisId(),
        status: "gevalideerd" as const,
        aangemaaktDoor: "notaris" as const,
        versie: "1.0",
        datum: nu,
      }),
      titel: velden.titel.trim(),
      inhoud: velden.inhoud.trim(),
      categorie: velden.categorie,
      themas: naarLijst(velden.themas).map((t) => t.toLowerCase()),
      bronnen: naarLijst(velden.bronnen).length > 0 ? naarLijst(velden.bronnen) : undefined,
      versie: initieel ? volgendeVersie(initieel.versie) : "1.0",
      aangepast: nu,
    };
    try {
      await onSla(item);
      onAnnuleer();
    } finally {
      setBezig(false);
    }
  }

  return (
    <form onSubmit={doeOpslaan} className="bg-white border border-brand-200 rounded-xl shadow-sm p-5 space-y-4">
      <h3 className="text-sm font-semibold text-slate-700">
        {isNieuw ? "Nieuw kennisitem" : `Kennisitem bewerken — versie ${initieel.versie}`}
      </h3>

      {fout && (
        <p className="text-xs text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{fout}</p>
      )}

      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div className="space-y-1 md:col-span-2">
          <label className="text-xs font-medium text-slate-600">Titel</label>
          <input
            type="text"
            value={velden.titel}
            onChange={(e) => stelIn("titel", e.target.value)}
            placeholder="Korte, sprekende titel van de kennis"
            className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          />
        </div>
        <div className="space-y-1">
          <label className="text-xs font-medium text-slate-600">Categorie</label>
          <select
            value={velden.categorie}
            onChange={(e) => stelIn("categorie", e.target.value as KennisCategorie)}
            className="w-full text-sm border border-slate-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          >
            {KENNIS_CATEGORIEEN.map((c) => (
              <option key={c} value={c}>{kennisCategorieLabels[c]}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="space-y-1">
        <label className="text-xs font-medium text-slate-600">
          Inhoud{" "}
          <span className="text-slate-400 font-normal">
            (lege regel = nieuwe alinea; begin een regel met “- ” voor een opsomming; geen bedragen of
            tarieven — verwijs naar de rekenmodules)
          </span>
        </label>
        <textarea
          rows={8}
          value={velden.inhoud}
          onChange={(e) => stelIn("inhoud", e.target.value)}
          placeholder="De kennis zelf: werkwijze, aandachtspunt, kantoorgebruik of vraag & antwoord."
          className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div className="space-y-1">
          <label className="text-xs font-medium text-slate-600">
            Thema&apos;s <span className="text-slate-400 font-normal">(komma-gescheiden)</span>
          </label>
          <input
            type="text"
            value={velden.themas}
            onChange={(e) => stelIn("themas", e.target.value)}
            placeholder="bv. verkoop, gewest, bodem"
            className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          />
        </div>
        <div className="space-y-1">
          <label className="text-xs font-medium text-slate-600">
            Wetsbasis / bronnen <span className="text-slate-400 font-normal">(komma-gescheiden, optioneel)</span>
          </label>
          <input
            type="text"
            value={velden.bronnen}
            onChange={(e) => stelIn("bronnen", e.target.value)}
            placeholder="bv. art. 12 OWN, art. 3.17 BW"
            className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          />
        </div>
      </div>

      <div className="flex gap-2 pt-1">
        <button
          type="submit"
          disabled={bezig}
          className="text-sm px-4 py-2 rounded-lg font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50"
        >
          {bezig ? "Opslaan…" : isNieuw ? "Kennisitem toevoegen" : "Wijzigingen opslaan"}
        </button>
        <button
          type="button"
          onClick={onAnnuleer}
          className="text-sm px-4 py-2 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50"
        >
          Annuleer
        </button>
      </div>
    </form>
  );
}