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

export function ModelEditor({
  basis,
  modus,
  alleOnderdelen,
  onBewaar,
  onAnnuleer,
}: {
  basis?: Modeldocument;
  modus: "nieuw" | "bewerk";
  alleOnderdelen: Modelonderdeel[];
  onBewaar: (m: Modeldocument) => Promise<void>;
  onAnnuleer: () => void;
}) {
  const [titel, setTitel] = useState(basis?.titel ?? "");
  const [akteType, setAkteType] = useState(basis?.akteType ?? "");
  const [omschrijving, setOmschrijving] = useState(basis?.omschrijving ?? "");
  const [inleiding, setInleiding] = useState(basis?.inleiding ?? "");
  const [slot, setSlot] = useState(basis?.slot ?? "");
  const [bron, setBron] = useState(basis?.bron ?? "");
  const [structuur, setStructuur] = useState<StructuurItem[]>(basis?.structuur ?? []);
  const [toeTeVoegen, setToeTeVoegen] = useState("");

  const geldig = titel.trim() && structuur.length > 0;

  function verplaats(i: number, richting: -1 | 1) {
    setStructuur((prev) => {
      const j = i + richting;
      if (j < 0 || j >= prev.length) return prev;
      const kopie = [...prev];
      [kopie[i], kopie[j]] = [kopie[j], kopie[i]];
      return kopie;
    });
  }

  async function bewaar() {
    await onBewaar({
      id: basis?.id ?? crypto.randomUUID(),
      titel: titel.trim(),
      akteType: akteType.trim() || titel.trim().toLowerCase(),
      omschrijving: omschrijving.trim(),
      inleiding: inleiding.trim() || undefined,
      structuur,
      slot: slot.trim() || undefined,
      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" ? `Modeldocument bewerken (v${basis?.versie} → v${basis ? bumpVersie(basis.versie) : ""})` : "Nieuw modeldocument"}
      </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>AkteType</span>
          <input
            type="text"
            value={akteType}
            onChange={(e) => setAkteType(e.target.value)}
            placeholder="verkoopakte, volmacht, huwelijksovereenkomst, …"
            className={veld}
          />
        </label>
      </div>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>Omschrijving</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>Inleiding (aanhef vóór de onderdelen, optioneel)</span>
        <textarea value={inleiding} onChange={(e) => setInleiding(e.target.value)} rows={4} className={`${veld} font-mono text-xs`} />
      </label>

      <div className="space-y-2">
        <p className="text-sm text-slate-600">Structuur — onderdelen in volgorde</p>
        {structuur.map((item, i) => {
          const onderdeel = alleOnderdelen.find((o) => o.id === item.onderdeelId);
          return (
            <div key={`${item.onderdeelId}-${i}`} className="border border-slate-200 rounded-lg p-3 flex flex-wrap gap-2 items-center">
              <span className="text-xs text-slate-400 w-5">{i + 1}.</span>
              <span className="text-sm text-slate-800 flex-1 min-w-40">
                {onderdeel?.titel ?? `Ontbrekend: ${item.onderdeelId}`}
              </span>
              <label className="text-xs text-slate-600 flex items-center gap-1">
                <input
                  type="checkbox"
                  checked={item.verplicht}
                  onChange={(e) =>
                    setStructuur((prev) => prev.map((x, j) => (j === i ? { ...x, verplicht: e.target.checked } : x)))
                  }
                />
                verplicht
              </label>
              <input
                type="text"
                value={item.conditie ?? ""}
                onChange={(e) =>
                  setStructuur((prev) =>
                    prev.map((x, j) => (j === i ? { ...x, conditie: e.target.value || undefined } : x))
                  )
                }
                placeholder="conditie, bv. 'enkel bij appartement'"
                className="text-xs border border-slate-300 rounded px-2 py-1 w-64"
              />
              <div className="flex gap-1">
                <button onClick={() => verplaats(i, -1)} className="text-xs px-2 py-1 rounded border border-slate-300 text-slate-500">↑</button>
                <button onClick={() => verplaats(i, 1)} className="text-xs px-2 py-1 rounded border border-slate-300 text-slate-500">↓</button>
                <button
                  onClick={() => setStructuur((prev) => prev.filter((_, j) => j !== i))}
                  className="text-xs px-2 py-1 rounded border border-red-200 text-red-600 hover:bg-red-50"
                >
                  ✕
                </button>
              </div>
            </div>
          );
        })}
        <div className="flex gap-2">
          <select value={toeTeVoegen} onChange={(e) => setToeTeVoegen(e.target.value)} className={`${veld} bg-white flex-1`}>
            <option value="">— kies een onderdeel om toe te voegen —</option>
            {alleOnderdelen.map((o) => (
              <option key={o.id} value={o.id}>
                {o.titel} ({onderdeelCategorieLabels[o.categorie]})
              </option>
            ))}
          </select>
          <button
            onClick={() => {
              if (!toeTeVoegen) return;
              setStructuur((prev) => [...prev, { onderdeelId: toeTeVoegen, verplicht: true }]);
              setToeTeVoegen("");
            }}
            disabled={!toeTeVoegen}
            className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300 disabled:opacity-40"
          >
            + Voeg toe
          </button>
        </div>
      </div>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>Slot (na de onderdelen, optioneel)</span>
        <textarea value={slot} onChange={(e) => setSlot(e.target.value)} rows={3} className={`${veld} font-mono text-xs`} />
      </label>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>Bron</span>
        <input type="text" value={bron} onChange={(e) => setBron(e.target.value)} className={veld} />
      </label>

      <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 modeldocument
        </button>
        <button onClick={onAnnuleer} className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600">
          Annuleer
        </button>
      </div>
    </div>
  );
}