"use client";
import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import {
  standaardKeuzes,
  pasKeuzesToe,
  verzamelParameters,
  genereerDocument,
  herhaaldePartijParameters,
  herhaaldeGoedParameters,
  verwijderOpmaakMarkers,
  bouwParameterCatalogus,
  type GeneratieKeuze,
  type KeuzeOverride,
  type Modeldocument,
  type Modelonderdeel,
} from "@/data/modeldocumenten";
import { bouwGoedHerhalingen, type GoedMetTitel } from "@/lib/dossier/oorsprong";
import { GoederenEditor } from "./GoederenEditor";
import { downloadTekst, downloadWord } from "@/lib/download";
import { schrijfModeldocumentHandoff } from "@/lib/handoff";

export function InvulView({
  model,
  alleOnderdelen,
  onSluit,
  initieleWaarden,
  dossierLabel,
  partijHerhalingen,
  keuzeOverrides,
}: {
  model: Modeldocument;
  alleOnderdelen: Modelonderdeel[];
  onSluit: () => void;
  /** Voorgevulde parameterwaarden, bv. afgeleid uit een dossier. */
  initieleWaarden?: Record<string, string>;
  /** Korte omschrijving van het bronvenster (dossier) voor weergave. */
  dossierLabel?: string;
  /** Eén identificatie-herhaling per partij; per-partij onderdelen worden dan per partij voorgevuld. */
  partijHerhalingen?: { label?: string; waarden: Record<string, string> }[];
  /** Uit het dossier afgeleide hypothese-/opname-keuzes per onderdeel. */
  keuzeOverrides?: KeuzeOverride[];
}) {
  const router = useRouter();
  const [keuzes, setKeuzes] = useState<GeneratieKeuze[]>(() =>
    keuzeOverrides && keuzeOverrides.length > 0 ? pasKeuzesToe(model, keuzeOverrides) : standaardKeuzes(model)
  );
  const [waarden, setWaarden] = useState<Record<string, string>>(() => initieleWaarden ?? {});
  const [gekopieerd, setGekopieerd] = useState(false);
  const [toonResultaat, setToonResultaat] = useState(false);

  const herhalingen = useMemo(() => partijHerhalingen ?? [], [partijHerhalingen]);
  // Goederen & eigendomstitels: enkel relevant wanneer het model per-goed
  // hernomen clausules heeft (beschrijving + oorsprong). Leeg = het gewone
  // ééngoed-gedrag met globale parameters.
  const [goederen, setGoederen] = useState<GoedMetTitel[]>([]);
  const heeftGoedClausules = useMemo(() => model.structuur.some((i) => i.herhaalPerGoed), [model]);
  const goedHerhalingen = useMemo(() => bouwGoedHerhalingen(goederen), [goederen]);
  const perGoedParams = useMemo(
    () => (goederen.length > 0 ? herhaaldeGoedParameters(model, alleOnderdelen) : new Set<string>()),
    [model, alleOnderdelen, goederen.length]
  );
  // Parameters die per partij worden ingevuld, hoeven niet als globale parameter
  // te worden uitgevraagd zodra er partij-herhalingen zijn.
  const perPartijParams = useMemo(
    () => (herhalingen.length > 0 ? herhaaldePartijParameters(model, alleOnderdelen) : new Set<string>()),
    [model, alleOnderdelen, herhalingen.length]
  );
  const parameters = useMemo(
    () =>
      verzamelParameters(model, alleOnderdelen, keuzes).filter(
        (p) => !perPartijParams.has(p) && !perGoedParams.has(p)
      ),
    [model, alleOnderdelen, keuzes, perPartijParams, perGoedParams]
  );
  // Bibliotheekbrede omschrijving/voorbeeld per parameternaam, ook wanneer de
  // clausule in dit model de parameter zelf niet declareert.
  const catalogus = useMemo(() => bouwParameterCatalogus(alleOnderdelen), [alleOnderdelen]);
  // Met vette-tekst-markers (voor de Word-export die opmaak rendert).
  const resultaat = useMemo(
    () => genereerDocument(model, alleOnderdelen, keuzes, waarden, herhalingen, goedHerhalingen),
    [model, alleOnderdelen, keuzes, waarden, herhalingen, goedHerhalingen]
  );
  // Zonder markers, voor weergave/klembord/platte tekst.
  const resultaatPlat = useMemo(() => verwijderOpmaakMarkers(resultaat), [resultaat]);
  const aantalIngevuld = parameters.filter((p) => waarden[p]?.trim()).length;
  const bestandsbasis = model.titel.toLowerCase().replace(/[^a-z0-9]+/g, "-");
  const voorgevuld = initieleWaarden ?? {};
  const aantalUitDossier = parameters.filter((p) => voorgevuld[p]?.trim()).length;

  async function kopieer() {
    await navigator.clipboard.writeText(resultaatPlat);
    setGekopieerd(true);
    setTimeout(() => setGekopieerd(false), 2000);
  }

  function naarAiPrompts() {
    schrijfModeldocumentHandoff({ titel: model.titel, tekst: resultaatPlat });
    router.push("/ai-prompts");
  }

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-3 flex-wrap">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">✍️ {model.titel} — invullen & genereren</h2>
          <p className="text-sm text-slate-500 mt-0.5">
            Kies de onderdelen en hypotheses, vul de parameters in en genereer het werkdocument.
            Niet-ingevulde parameters worden gemarkeerd als [AAN TE VULLEN]; het resultaat blijft
            een werkdocument dat de notaris naleest en valideert.
          </p>
        </div>
        <button
          onClick={onSluit}
          className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300 shrink-0"
        >
          ← Terug naar modellen
        </button>
      </div>

      {dossierLabel && aantalUitDossier > 0 && (
        <div className="bg-brand-50 border border-brand-200 rounded-lg px-4 py-3 text-sm text-brand-800">
          {aantalUitDossier} parameter{aantalUitDossier === 1 ? "" : "s"} voorgevuld uit het dossier
          {dossierLabel ? ` (${dossierLabel})` : ""}. Controleer de waarden en vul de overige aan.
        </div>
      )}

      {herhalingen.length > 0 && (
        <div className="bg-brand-50 border border-brand-200 rounded-lg px-4 py-3 text-sm text-brand-800">
          De identificatie wordt per partij hernomen ({herhalingen.map((h) => h.label).filter(Boolean).join(", ")}),
          telkens met de gekende gegevens voorgevuld; kies per partij de juiste burgerlijke staat in het document.
        </div>
      )}

      {/* Stap 1 — onderdelen & hypotheses */}
      <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">
          Stap 1 — Onderdelen en hypotheses
        </h3>
        {model.structuur.map((item, i) => {
          const onderdeel = alleOnderdelen.find((o) => o.id === item.onderdeelId);
          const keuze = keuzes[i];
          if (!onderdeel || !keuze) return null;
          return (
            <div key={`${item.onderdeelId}-${i}`} className="border border-slate-200 rounded-lg p-3 space-y-2">
              <div className="flex items-center gap-3 flex-wrap">
                <label className="flex items-center gap-2 text-sm text-slate-800 flex-1 min-w-48">
                  <input
                    type="checkbox"
                    checked={keuze.opnemen}
                    onChange={(e) =>
                      setKeuzes((prev) => prev.map((k, j) => (j === i ? { ...k, opnemen: e.target.checked } : k)))
                    }
                  />
                  <span className="font-medium">{onderdeel.titel}</span>
                  <span
                    className={`text-xs px-1.5 py-0.5 rounded ${
                      item.verplicht ? "bg-slate-100 text-slate-500" : "bg-amber-50 text-amber-700"
                    }`}
                  >
                    {item.verplicht ? "verplicht" : "facultatief"}
                  </span>
                </label>
                {keuze.opnemen && onderdeel.varianten.length > 0 && (
                  <select
                    value={keuze.variantId}
                    onChange={(e) =>
                      setKeuzes((prev) => prev.map((k, j) => (j === i ? { ...k, variantId: e.target.value } : k)))
                    }
                    className="text-xs border border-slate-300 rounded-lg px-2 py-1.5 bg-white max-w-full"
                  >
                    <option value="alle">— alle hypotheses behouden (gemarkeerd) —</option>
                    {onderdeel.varianten.map((v) => (
                      <option key={v.id} value={v.id}>
                        {v.hypothese}
                      </option>
                    ))}
                  </select>
                )}
              </div>
              {item.conditie && <p className="text-xs text-slate-400 pl-6">{item.conditie}</p>}
            </div>
          );
        })}
      </section>

      {/* Stap 1bis — goederen & eigendomstitels (enkel bij per-goed clausules) */}
      {heeftGoedClausules && (
        <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">
            Goederen &amp; eigendomstitels ({goederen.length || "1 — standaard"})
          </h3>
          <p className="text-xs text-slate-400">
            Eén akte kan meerdere onroerende goederen en/of meerdere eigendomstitels omvatten: per goed
            worden de beschrijvingsclausule en de oorsprong van eigendom hernomen, en worden de
            kadastrale aanduidingen van de eigendomstitel, het recente uittreksel en het opmetingsplan
            automatisch vergeleken (historische nummerformaten en ha/a/ca ↔ m² inbegrepen). Zonder
            goederen hieronder blijft het gewone gedrag met de globale parameters gelden.
          </p>
          <GoederenEditor goederen={goederen} onChange={setGoederen} />
        </section>
      )}

      {/* Stap 2 — parameters */}
      <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">
          Stap 2 — Parameters ({aantalIngevuld}/{parameters.length} ingevuld)
        </h3>
        <p className="text-xs text-slate-400">
          Leeg gelaten parameters verschijnen in het document als [AAN TE VULLEN: …].
        </p>
        <div className="grid md:grid-cols-2 gap-3">
          {parameters.map((p) => {
            const info = catalogus.get(p);
            return (
              <label key={p} className="text-xs text-slate-600 space-y-1">
                <span className="font-mono">
                  {"{{" + p + "}}"}
                  {info?.omschrijving && (
                    <span className="ml-1 font-sans text-slate-400">— {info.omschrijving}</span>
                  )}
                  {voorgevuld[p]?.trim() && (
                    <span className="ml-2 font-sans text-[10px] uppercase tracking-wide bg-brand-100 text-brand-700 px-1.5 py-0.5 rounded">
                      uit dossier
                    </span>
                  )}
                </span>
                <input
                  type="text"
                  value={waarden[p] ?? ""}
                  onChange={(e) => setWaarden((prev) => ({ ...prev, [p]: e.target.value }))}
                  placeholder={info?.voorbeeld}
                  className={`w-full text-sm border rounded-lg px-3 py-2 ${
                    voorgevuld[p]?.trim() ? "border-brand-300 bg-brand-50/40" : "border-slate-300"
                  }`}
                />
              </label>
            );
          })}
        </div>
      </section>

      {/* Stap 3 — resultaat */}
      <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">
          Stap 3 — Resultaat
        </h3>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={kopieer}
            className={`text-sm px-4 py-2 rounded-lg font-medium text-white ${
              gekopieerd ? "bg-emerald-600" : "bg-brand-600 hover:bg-brand-700"
            }`}
          >
            {gekopieerd ? "✓ Gekopieerd" : "📋 Kopieer document"}
          </button>
          <button
            onClick={() => downloadWord(`${bestandsbasis}.doc`, model.titel, resultaat)}
            className="text-sm px-4 py-2 rounded-lg font-medium bg-emerald-600 text-white hover:bg-emerald-700"
          >
            ⬇ Download Word (.doc)
          </button>
          <button
            onClick={() => downloadTekst(`${bestandsbasis}.txt`, resultaatPlat, "text/plain;charset=utf-8")}
            className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
          >
            ⬇ Download .txt
          </button>
          <button
            onClick={naarAiPrompts}
            title="Geeft het gegenereerde document door aan de AI-prompts module (Modus A: model invullen op basis van dossierstukken)"
            className="text-sm px-4 py-2 rounded-lg font-medium bg-sky-600 text-white hover:bg-sky-700"
          >
            🤖 Naar AI-prompts (Modus A)
          </button>
          <button
            onClick={() => setToonResultaat((v) => !v)}
            className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
          >
            {toonResultaat ? "Verberg voorbeeld" : "Toon voorbeeld"}
          </button>
        </div>
        {toonResultaat && (
          <pre className="text-xs text-slate-700 whitespace-pre-wrap font-mono leading-relaxed p-4 bg-slate-50 rounded-lg max-h-[32rem] overflow-y-auto">
            {resultaatPlat}
          </pre>
        )}
      </section>
    </div>
  );
}