"use client";
import { useState } from "react";
import {
  VERRIJKINGS_PROMPT,
  type Modelonderdeel,
  type Wijzigingsvoorstel,
} from "@/data/modeldocumenten";
import { OnderdeelEditor } from "./OnderdeelEditor";
import { VoorstelFormulier } from "./VoorstelFormulier";

export function VerrijkenTab({
  slaOp,
  slaVoorstelOp,
  naarValideren,
}: {
  slaOp: (o: Modelonderdeel) => Promise<void>;
  slaVoorstelOp: (v: Wijzigingsvoorstel) => Promise<void>;
  naarValideren: () => void;
}) {
  const [bronTekst, setBronTekst] = useState("");
  const [bronOmschrijving, setBronOmschrijving] = useState("");
  const [editorBasis, setEditorBasis] = useState<Modelonderdeel | null>(null);
  const [voorstelBasis, setVoorstelBasis] = useState<Modelonderdeel | null>(null);
  const [promptGekopieerd, setPromptGekopieerd] = useState(false);
  const [toonPrompt, setToonPrompt] = useState(false);

  function nieuwOnderdeelVanBron(): Modelonderdeel {
    return {
      id: crypto.randomUUID(),
      titel: "",
      categorie: "partijen",
      omschrijving: "",
      tekst: bronTekst.trim(),
      varianten: [],
      parameters: [],
      toepasbaarOp: [],
      bron: bronOmschrijving.trim() || undefined,
      versie: "1.0",
      datum: new Date().toISOString().slice(0, 10),
      isGebruiker: true,
    };
  }

  if (editorBasis) {
    return (
      <OnderdeelEditor
        basis={editorBasis}
        modus="nieuw"
        onAnnuleer={() => setEditorBasis(null)}
        onBewaar={async (o) => {
          await slaOp(o);
          setEditorBasis(null);
          setBronTekst("");
          setBronOmschrijving("");
        }}
      />
    );
  }

  if (voorstelBasis) {
    return (
      <VoorstelFormulier
        basisOnderdeel={voorstelBasis}
        onAnnuleer={() => setVoorstelBasis(null)}
        onIngediend={async (v) => {
          await slaVoorstelOp(v);
          setVoorstelBasis(null);
          setBronTekst("");
          setBronOmschrijving("");
          naarValideren();
        }}
      />
    );
  }

  async function kopieerPrompt() {
    await navigator.clipboard.writeText(VERRIJKINGS_PROMPT);
    setPromptGekopieerd(true);
    setTimeout(() => setPromptGekopieerd(false), 2000);
  }

  return (
    <div className="space-y-6">
      <section className="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-3">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
          Bibliotheek verrijken met nieuwe input
        </h3>
        <p className="text-sm text-slate-600">
          Plak hieronder een voorbeeldakte, een Fednot-modelclausule of een andere modeltekst.
          Verwijder vooraf dossierspecifieke persoonsgegevens, of vervang ze meteen door{" "}
          <code className="text-xs bg-slate-100 px-1 rounded">{"{{parameters}}"}</code>. Maak er
          daarna rechtstreeks een modelonderdeel van, of gebruik de AI-verrijkingsprompt om de
          tekst door een AI-agent te laten opsplitsen in herbruikbare onderdelen met parameters
          en hypotheses.
        </p>
        <label className="text-sm text-slate-600 space-y-1 block">
          <span>Herkomst van de tekst (Fednot-model, voorbeeldakte kantoor, …)</span>
          <input
            type="text"
            value={bronOmschrijving}
            onChange={(e) => setBronOmschrijving(e.target.value)}
            className="w-full text-sm border border-slate-300 rounded-lg px-3 py-2"
          />
        </label>
        <textarea
          value={bronTekst}
          onChange={(e) => setBronTekst(e.target.value)}
          rows={12}
          placeholder="Plak hier de brontekst…"
          className="w-full text-xs font-mono border border-slate-300 rounded-lg px-3 py-2"
        />
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => setEditorBasis(nieuwOnderdeelVanBron())}
            disabled={!bronTekst.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"
          >
            Maak modelonderdeel van deze tekst
          </button>
          <button
            onClick={() => setVoorstelBasis(nieuwOnderdeelVanBron())}
            disabled={!bronTekst.trim()}
            title="Voor latere validatie — komt in het tabblad 'Te valideren' terecht"
            className="text-sm px-4 py-2 rounded-lg font-medium border border-amber-300 text-amber-700 hover:bg-amber-50 disabled:opacity-50"
          >
            Dien in als voorstel ter validatie
          </button>
        </div>
      </section>

      <section className="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-3">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
          AI-ondersteund verrijken
        </h3>
        <p className="text-sm text-slate-600">
          Kopieer de verrijkingsprompt, plak die samen met de brontekst in een AI-agent (Claude,
          Copilot, …) en neem het resultaat per onderdeel over via &ldquo;Maak modelonderdeel van
          deze tekst&rdquo; of het tabblad Modelonderdelen. De agent splitst de tekst op in
          herbruikbare onderdelen met parameters en hypotheses, en markeert eigen toevoegingen
          als [NIEUW — TE VALIDEREN DOOR DE NOTARIS].
        </p>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={kopieerPrompt}
            className={`text-sm px-4 py-2 rounded-lg font-medium text-white ${
              promptGekopieerd ? "bg-emerald-600" : "bg-brand-600 hover:bg-brand-700"
            }`}
          >
            {promptGekopieerd ? "✓ Gekopieerd" : "📋 Kopieer verrijkingsprompt"}
          </button>
          <button
            onClick={() => setToonPrompt((v) => !v)}
            className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
          >
            {toonPrompt ? "Verberg prompt" : "Toon prompt"}
          </button>
        </div>
        {toonPrompt && (
          <pre className="text-xs text-slate-700 whitespace-pre-wrap font-mono leading-relaxed p-4 bg-slate-50 rounded-lg max-h-96 overflow-y-auto">
            {VERRIJKINGS_PROMPT}
          </pre>
        )}
      </section>

      <section className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2">
          Versiebeheer
        </h3>
        <p className="text-sm text-slate-600">
          Bij elke bewerking van een eigen onderdeel of model wordt het versienummer automatisch
          verhoogd (bv. 1.0 → 1.1) en de datum bijgewerkt. Seed-onderdelen zijn alleen-lezen:
          dupliceer ze als eigen onderdeel om ze aan te passen — het bronveld verwijst dan naar
          het origineel.
        </p>
      </section>
    </div>
  );
}