"use client";
import { useState } from "react";
import {
  voorstelPrioriteitLabels,
  type Modelonderdeel,
  type VoorstelPrioriteit,
  type Wijzigingsvoorstel,
} from "@/data/modeldocumenten";
import { OnderdeelEditor } from "./OnderdeelEditor";
import { invoerVeld as veld } from "./stijlen";

/**
 * Twee stappen: (1) titel, prioriteit en toelichting voor het voorstel, (2)
 * de tekst van het (nieuwe of aangepaste) onderdeel via OnderdeelEditor.
 * Het resultaat komt als Wijzigingsvoorstel in de wachtrij van het tabblad
 * "Te valideren" terecht — er wordt niets rechtstreeks in de bibliotheek
 * opgeslagen.
 */
export function VoorstelFormulier({
  basisOnderdeel,
  onIngediend,
  onAnnuleer,
}: {
  basisOnderdeel?: Modelonderdeel;
  onIngediend: (voorstel: Wijzigingsvoorstel) => Promise<void>;
  onAnnuleer: () => void;
}) {
  const [stap, setStap] = useState<"info" | "onderdeel">("info");
  const [titel, setTitel] = useState(
    basisOnderdeel ? `Wijziging: ${basisOnderdeel.titel}` : "Nieuw modelonderdeel"
  );
  const [prioriteit, setPrioriteit] = useState<VoorstelPrioriteit>("midden");
  const [omschrijving, setOmschrijving] = useState("");

  if (stap === "onderdeel") {
    return (
      <OnderdeelEditor
        basis={basisOnderdeel}
        modus={basisOnderdeel ? "bewerk" : "nieuw"}
        onAnnuleer={() => setStap("info")}
        onBewaar={async (o) =>
          onIngediend({
            id: crypto.randomUUID(),
            onderdeelId: basisOnderdeel?.id,
            titel: titel.trim() || o.titel,
            omschrijving: omschrijving.trim(),
            prioriteit,
            voorgesteldOnderdeel: o,
            status: "open",
            bron: o.bron,
            datum: new Date().toISOString().slice(0, 10),
          })
        }
      />
    );
  }

  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">
        Wijziging voorstellen{basisOnderdeel ? `: ${basisOnderdeel.titel}` : ""}
      </h2>
      <p className="text-sm text-slate-600">
        Dit voorstel komt in het tabblad &ldquo;Te valideren&rdquo; terecht. Pas in de volgende
        stap de tekst van het onderdeel aan; pas na goedkeuring wordt die versie in de
        bibliotheek overgenomen.
      </p>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>Titel van het voorstel</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 block">
        <span>Prioriteit</span>
        <select
          value={prioriteit}
          onChange={(e) => setPrioriteit(e.target.value as VoorstelPrioriteit)}
          className={`${veld} bg-white max-w-xs`}
        >
          {Object.entries(voorstelPrioriteitLabels).map(([id, label]) => (
            <option key={id} value={id}>
              {label}
            </option>
          ))}
        </select>
      </label>

      <label className="text-sm text-slate-600 space-y-1 block">
        <span>Toelichting — wat verandert er en waarom?</span>
        <textarea
          value={omschrijving}
          onChange={(e) => setOmschrijving(e.target.value)}
          rows={3}
          className={veld}
        />
      </label>

      <div className="flex gap-2 pt-2">
        <button
          onClick={() => setStap("onderdeel")}
          disabled={!titel.trim()}
          className="text-sm px-4 py-2 rounded-lg font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:bg-slate-300"
        >
          Volgende: tekst aanpassen
        </button>
        <button onClick={onAnnuleer} className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600">
          Annuleer
        </button>
      </div>
    </div>
  );
}