"use client";
import { useMemo, useState } from "react";
import {
  onderdeelCategorieLabels,
  extraheerParameters,
  bumpVersie,
  type Modelonderdeel,
  type ModelVariant,
  type OnderdeelCategorie,
} from "@/data/modeldocumenten";
import { invoerVeld as veld } from "./stijlen";

export function OnderdeelEditor({
  basis,
  modus,
  onBewaar,
  onAnnuleer,
}: {
  basis?: Modelonderdeel;
  modus: "nieuw" | "bewerk";
  onBewaar: (o: Modelonderdeel) => Promise<void>;
  onAnnuleer: () => void;
}) {
  const [titel, setTitel] = useState(basis?.titel ?? "");
  const [categorie, setCategorie] = useState<OnderdeelCategorie>(basis?.categorie ?? "partijen");
  const [omschrijving, setOmschrijving] = useState(basis?.omschrijving ?? "");
  const [tekst, setTekst] = useState(basis?.tekst ?? "");
  const [varianten, setVarianten] = useState<ModelVariant[]>(basis?.varianten ?? []);
  const [toepasbaarOp, setToepasbaarOp] = useState((basis?.toepasbaarOp ?? []).join(", "));
  const [bron, setBron] = useState(basis?.bron ?? "");

  const gedetecteerdeParams = useMemo(
    () => extraheerParameters(tekst, ...varianten.map((v) => v.tekst)),
    [tekst, varianten]
  );

  const geldig = titel.trim() && (tekst.trim() || varianten.some((v) => v.tekst.trim()));

  async function bewaar() {
    const bestaandeParams = new Map((basis?.parameters ?? []).map((p) => [p.naam, p]));
    await onBewaar({
      id: basis?.id ?? crypto.randomUUID(),
      titel: titel.trim(),
      categorie,
      omschrijving: omschrijving.trim(),
      tekst: tekst.trim(),
      varianten: varianten
        .filter((v) => v.hypothese.trim() || v.tekst.trim())
        .map((v) => ({ ...v, hypothese: v.hypothese.trim(), tekst: v.tekst.trim() })),
      parameters: gedetecteerdeParams.map(
        (naam) => bestaandeParams.get(naam) ?? { naam, omschrijving: "" }
      ),
      toepasbaarOp: toepasbaarOp
        .split(",")
        .map((t) => t.trim())
        .filter(Boolean),
      bron: bron.trim() || undefined,
      versie: modus === "bewerk" && basis ? bumpVersie(basis.versie) : "1.0",
      datum: new Date().toISOString().slice(0, 10),
      isGebruiker: true,
    });
  }

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
      <h2 className="text-lg font-semibold text-slate-900">
        {modus === "bewerk" ? `Onderdeel bewerken (v${basis?.versie} → v${basis ? bumpVersie(basis.versie) : ""})` : "Nieuw modelonderdeel"}
      </h2>

      <div className="grid md:grid-cols-2 gap-3">
        <label className="text-sm text-slate-600 space-y-1">
          <span>Titel</span>
          <input type="text" value={titel} onChange={(e) => setTitel(e.target.value)} className={veld} />
        </label>
        <label className="text-sm text-slate-600 space-y-1">
          <span>Categorie</span>
          <select
            value={categorie}
            onChange={(e) => setCategorie(e.target.value as OnderdeelCategorie)}
            className={`${veld} bg-white`}
          >
            {Object.entries(onderdeelCategorieLabels).map(([id, label]) => (
              <option key={id} value={id}>
                {label}
              </option>
            ))}
          </select>
        </label>
      </div>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>Omschrijving (waarvoor dient dit onderdeel, welke hypotheses dekt het)</span>
        <input type="text" value={omschrijving} onChange={(e) => setOmschrijving(e.target.value)} className={veld} />
      </label>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>
          Basistekst — parameters als <code className="text-xs bg-slate-100 px-1 rounded">{"{{naam}}"}</code>,
          facultatieve passages tussen [NAKIJKEN OF SCHRAPPEN: …]. Leeg laten als alles in hypotheses zit.
        </span>
        <textarea value={tekst} onChange={(e) => setTekst(e.target.value)} rows={6} className={`${veld} font-mono text-xs`} />
      </label>

      <div className="space-y-2">
        <p className="text-sm text-slate-600">Hypotheses (varianten — bij gebruik blijft enkel de toepasselijke staan)</p>
        {varianten.map((v, i) => (
          <div key={v.id} className="border border-slate-200 rounded-lg p-3 space-y-2">
            <div className="flex gap-2">
              <input
                type="text"
                value={v.hypothese}
                onChange={(e) =>
                  setVarianten((prev) => prev.map((x, j) => (j === i ? { ...x, hypothese: e.target.value } : x)))
                }
                placeholder="Hypothese, bv. 'Partij is gehuwd'"
                className={`${veld} flex-1`}
              />
              <button
                onClick={() => setVarianten((prev) => prev.filter((_, j) => j !== i))}
                className="text-xs px-3 rounded-lg border border-red-200 text-red-600 hover:bg-red-50"
              >
                ✕
              </button>
            </div>
            <textarea
              value={v.tekst}
              onChange={(e) =>
                setVarianten((prev) => prev.map((x, j) => (j === i ? { ...x, tekst: e.target.value } : x)))
              }
              rows={4}
              placeholder="Tekst van deze variant"
              className={`${veld} font-mono text-xs`}
            />
          </div>
        ))}
        <button
          onClick={() => setVarianten((prev) => [...prev, { id: crypto.randomUUID(), hypothese: "", tekst: "" }])}
          className="text-xs px-3 py-1.5 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
        >
          + Hypothese toevoegen
        </button>
      </div>

      {gedetecteerdeParams.length > 0 && (
        <div>
          <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
            Gedetecteerde parameters
          </p>
          <div className="flex flex-wrap gap-1.5">
            {gedetecteerdeParams.map((p) => (
              <span key={p} className="text-xs bg-brand-50 text-brand-700 px-2 py-0.5 rounded font-mono">
                {"{{" + p + "}}"}
              </span>
            ))}
          </div>
        </div>
      )}

      <div className="grid md:grid-cols-2 gap-3">
        <label className="text-sm text-slate-600 space-y-1">
          <span>Toepasbaar in (kommagescheiden)</span>
          <input
            type="text"
            value={toepasbaarOp}
            onChange={(e) => setToepasbaarOp(e.target.value)}
            placeholder="verkoopakte, volmacht, …"
            className={veld}
          />
        </label>
        <label className="text-sm text-slate-600 space-y-1">
          <span>Bron (Fednot-model, voorbeeldakte, …)</span>
          <input type="text" value={bron} onChange={(e) => setBron(e.target.value)} className={veld} />
        </label>
      </div>

      <div className="flex gap-2 pt-2">
        <button
          onClick={bewaar}
          disabled={!geldig}
          className="text-sm px-4 py-2 rounded-lg font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:bg-slate-300"
        >
          Bewaar onderdeel
        </button>
        <button onClick={onAnnuleer} className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600">
          Annuleer
        </button>
      </div>
    </div>
  );
}