"use client";
// ── Werkdossiers-paneel: sessies + document-venster (bekijken/bewerken) ──────
// Sinds de fusie van de modules Dossiers en Werkdossiers leeft dit paneel als
// tabblad op /dossier. Links: de sessielijst met de bewaarde parameters en de
// parameter-regeneratie. Rechts: het DOCUMENT zelf — de ontwerptekst van het
// .docx (via /api/dossier/sessies/[token]/tekst), rechtstreeks bewerkbaar;
// opslaan rendert meteen een nieuw .docx en levert de downloadlink. Aanpassen
// kan dus op twee manieren: in het venster (tekst) of via de parameters
// (regeneratie) — beide sporen verversen het venster.

import { useCallback, useEffect, useState } from "react";
import type { SessieSamenvatting, WerkdossierSessie } from "@/lib/dossier/werkdossierSessies";

interface RegeneratieResultaat {
  bestandsnaam: string;
  downloadUrl: string;
  toegepasteWijziging: string;
}

interface SessieTekst {
  tekst: string;
  bron: "aangepast" | "gereconstrueerd";
  taal: "nl" | "fr";
  aangepasteTekstVerouderd?: boolean;
}

function formatteerTijdstip(iso: string): string {
  return new Date(iso).toLocaleString("nl-BE", { dateStyle: "short", timeStyle: "short" });
}

export function WerkdossiersPaneel() {
  const [sessies, setSessies] = useState<SessieSamenvatting[] | null>(null);
  const [detail, setDetail] = useState<WerkdossierSessie | null>(null);
  const [bezig, setBezig] = useState(false);
  const [fout, setFout] = useState<string | null>(null);
  const [resultaat, setResultaat] = useState<RegeneratieResultaat | null>(null);

  // Parameter-aanvullingen (linkerkolom)
  const [nieuweNaam, setNieuweNaam] = useState("");
  const [nieuweWaarde, setNieuweWaarde] = useState("");
  const [aanvullingen, setAanvullingen] = useState<Record<string, string>>({});
  const [wijziging, setWijziging] = useState("");

  // Document-venster (rechterkolom)
  const [tekst, setTekst] = useState<SessieTekst | null>(null);
  const [tekstFout, setTekstFout] = useState<string | null>(null);
  const [bewerken, setBewerken] = useState(false);
  const [bewerkTekst, setBewerkTekst] = useState("");
  const [opslaanBezig, setOpslaanBezig] = useState(false);

  const laadLijst = useCallback(async () => {
    try {
      const res = await fetch("/api/dossier/sessies");
      const json = await res.json();
      setSessies(json.sessies ?? []);
    } catch {
      setSessies([]);
    }
  }, []);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- bewust opslag-synchronisatiepatroon (server-sessies -> lijststate); de setState gebeurt pas ná de await in laadLijst
    laadLijst();
  }, [laadLijst]);

  const laadTekst = useCallback(async (token: string) => {
    setTekst(null);
    setTekstFout(null);
    setBewerken(false);
    const res = await fetch(`/api/dossier/sessies/${token}/tekst`);
    const json = await res.json();
    if (!res.ok) {
      setTekstFout(typeof json.fout === "string" ? json.fout : "Geen tekstweergave beschikbaar.");
      return;
    }
    setTekst(json as SessieTekst);
    setBewerkTekst((json as SessieTekst).tekst);
  }, []);

  async function openDetail(token: string) {
    setFout(null);
    setResultaat(null);
    setAanvullingen({});
    const res = await fetch(`/api/dossier/sessies/${token}`);
    if (!res.ok) {
      setFout("Sessie niet gevonden of verlopen.");
      setDetail(null);
      setTekst(null);
      return;
    }
    setDetail((await res.json()) as WerkdossierSessie);
    await laadTekst(token);
  }

  function huidigeParameters(sessie: WerkdossierSessie): Record<string, string> {
    if (sessie.soort === "modeldocument") return (sessie.invoer.query ?? {}) as Record<string, string>;
    try {
      return JSON.parse((sessie.invoer.modeldocumentParametersJson as string) ?? "{}") as Record<string, string>;
    } catch {
      return {};
    }
  }

  function voegAanvullingToe() {
    if (!nieuweNaam.trim()) return;
    setAanvullingen((huidig) => ({ ...huidig, [nieuweNaam.trim()]: nieuweWaarde }));
    setNieuweNaam("");
    setNieuweWaarde("");
  }

  async function regenereer() {
    if (!detail) return;
    setBezig(true);
    setFout(null);
    setResultaat(null);
    try {
      const res = await fetch(`/api/dossier/sessies/${detail.token}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          parameters: aanvullingen,
          wijziging: wijziging.trim() || "Aanvullende stukken via het dossierpaneel",
        }),
      });
      const json = await res.json();
      if (!res.ok) {
        setFout(typeof json.fout === "string" ? json.fout : "Regeneratie mislukt.");
        return;
      }
      await Promise.all([openDetail(detail.token), laadLijst()]);
      setResultaat({ bestandsnaam: json.bestandsnaam, downloadUrl: json.downloadUrl, toegepasteWijziging: json.toegepasteWijziging });
      setWijziging("");
    } finally {
      setBezig(false);
    }
  }

  async function bewaarTekst() {
    if (!detail || !bewerkTekst.trim()) return;
    setOpslaanBezig(true);
    setFout(null);
    setResultaat(null);
    try {
      const res = await fetch(`/api/dossier/sessies/${detail.token}/tekst`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tekst: bewerkTekst, wijziging: wijziging.trim() || undefined }),
      });
      const json = await res.json();
      if (!res.ok) {
        setFout(typeof json.fout === "string" ? json.fout : "Opslaan mislukt.");
        return;
      }
      await Promise.all([openDetail(detail.token), laadLijst()]);
      setResultaat({ bestandsnaam: json.bestandsnaam, downloadUrl: json.downloadUrl, toegepasteWijziging: json.toegepasteWijziging });
      setWijziging("");
    } finally {
      setOpslaanBezig(false);
    }
  }

  return (
    <div>
      <p className="text-sm text-slate-500 mb-4">
        Elke .docx-generatie bewaart haar volledige (geanonimiseerde) invoer 24 uur als sessie. Bekijk
        het document rechts, pas het aan — rechtstreeks in het venster of via de parameters links — en
        sla op om de aangepaste versie als .docx te downloaden. AI-agenten werken op dezelfde sessies
        via de MCP-tools lijst/haal/werkWerkdossierSessieBij.
      </p>

      {fout && <p className="text-sm text-rose-700 mb-3">{fout}</p>}
      {resultaat && (
        <p className="text-sm text-emerald-700 mb-3">
          Opgeslagen ({resultaat.toegepasteWijziging}):{" "}
          <a href={resultaat.downloadUrl} className="underline font-medium">
            ⬇ {resultaat.bestandsnaam}
          </a>
        </p>
      )}

      <div className="grid lg:grid-cols-2 gap-4 items-start">
        {/* ── Linkerkolom: sessies + parameters ── */}
        <div>
          {sessies === null ? (
            <p className="text-sm text-slate-400">Laden…</p>
          ) : sessies.length === 0 ? (
            <p className="text-sm text-slate-400">
              Geen actieve sessies. Genereer eerst een document (via een AI-agent of de module Modeldocumenten).
            </p>
          ) : (
            <ul className="space-y-2 mb-4">
              {sessies.map((s) => (
                <li key={s.token}>
                  <button
                    onClick={() => openDetail(s.token)}
                    className={`w-full text-left border rounded-xl shadow-sm px-4 py-2.5 hover:border-brand-300 hover:bg-brand-50/50 ${
                      detail?.token === s.token ? "border-brand-400 bg-brand-50/50" : "border-slate-200"
                    }`}
                  >
                    <p className="text-sm font-medium">{s.bestandsnaam}</p>
                    <p className="text-xs text-slate-500">
                      {s.modeldocumentId ?? s.soort} · {s.aantalGeneraties} generatie{s.aantalGeneraties > 1 ? "s" : ""} · bijgewerkt{" "}
                      {formatteerTijdstip(s.bijgewerkt)} · vervalt {formatteerTijdstip(s.verlooptOm)}
                    </p>
                  </button>
                </li>
              ))}
            </ul>
          )}

          {detail && (
            <div className="border border-slate-200 rounded-xl shadow-sm p-4">
              <div className="flex items-center justify-between gap-3 flex-wrap mb-3">
                <h2 className="text-sm font-medium">{detail.bestandsnaam}</h2>
                <a href={detail.downloadUrl} className="text-sm text-brand-700 underline hover:text-brand-900">
                  ⬇ Download actueel .docx
                </a>
              </div>

              <h3 className="text-xs font-medium text-slate-500 mb-1">Bewaarde parameters</h3>
              {Object.keys(huidigeParameters(detail)).length === 0 ? (
                <p className="text-xs text-slate-400 mb-3">Geen ingevulde parameters bewaard.</p>
              ) : (
                <ul className="text-xs text-slate-700 mb-3 max-h-40 overflow-y-auto space-y-0.5 border border-slate-100 rounded-md p-2 bg-slate-50">
                  {Object.entries(huidigeParameters(detail)).map(([naam, waarde]) => (
                    <li key={naam}>
                      <span className="font-mono text-slate-500">{naam}</span> = {String(waarde)}
                    </li>
                  ))}
                </ul>
              )}

              <h3 className="text-xs font-medium text-slate-500 mb-1">Aanpassen via de parameters</h3>
              <div className="flex gap-2 mb-2">
                <input
                  className="border border-slate-300 rounded-md px-2.5 py-1.5 text-sm flex-1 font-mono focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
                  placeholder="parameternaam"
                  value={nieuweNaam}
                  onChange={(e) => setNieuweNaam(e.target.value)}
                />
                <input
                  className="border border-slate-300 rounded-md px-2.5 py-1.5 text-sm flex-1 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
                  placeholder="waarde"
                  value={nieuweWaarde}
                  onChange={(e) => setNieuweWaarde(e.target.value)}
                />
                <button onClick={voegAanvullingToe} className="text-sm px-3 py-1.5 rounded-md border border-slate-300 hover:bg-slate-100">
                  +
                </button>
              </div>
              {Object.keys(aanvullingen).length > 0 && (
                <ul className="text-xs text-emerald-800 mb-2 space-y-0.5">
                  {Object.entries(aanvullingen).map(([naam, waarde]) => (
                    <li key={naam}>
                      + <span className="font-mono">{naam}</span> = {waarde}
                    </li>
                  ))}
                </ul>
              )}
              <input
                className="border border-slate-300 rounded-md px-2.5 py-1.5 text-sm w-full mb-3 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
                placeholder="Omschrijving van de wijziging (voor de historiek)"
                value={wijziging}
                onChange={(e) => setWijziging(e.target.value)}
              />
              <button
                onClick={regenereer}
                disabled={bezig || Object.keys(aanvullingen).length === 0}
                className="text-sm px-4 py-2 rounded-md font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed"
              >
                {bezig ? "Regenereren…" : "Regenereer .docx met deze parameters"}
              </button>

              <h3 className="text-xs font-medium text-slate-500 mt-4 mb-1">Historiek</h3>
              <ul className="text-xs text-slate-600 space-y-0.5 max-h-32 overflow-y-auto">
                {[...detail.historiek].reverse().map((h, i) => (
                  <li key={i}>
                    {formatteerTijdstip(h.tijdstip)} — {h.samenvatting} ·{" "}
                    <a href={h.downloadUrl} className="text-brand-700 underline">
                      {h.bestandsnaam}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* ── Rechterkolom: het document ── */}
        <div className="lg:sticky lg:top-4">
          {!detail ? (
            <div className="border border-dashed border-slate-300 rounded-xl p-8 text-center text-sm text-slate-400">
              Kies links een werkdossier om het document hier te bekijken en te bewerken.
            </div>
          ) : tekstFout ? (
            <div className="border border-slate-200 rounded-xl p-5 text-sm text-slate-500">{tekstFout}</div>
          ) : tekst === null ? (
            <p className="text-sm text-slate-400">Document laden…</p>
          ) : (
            <div className="border border-slate-200 rounded-xl shadow-sm overflow-hidden">
              <div className="flex items-center justify-between gap-2 flex-wrap bg-slate-50 border-b border-slate-200 px-4 py-2">
                <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
                  Document ({tekst.taal.toUpperCase()}) —{" "}
                  {tekst.bron === "aangepast" ? "bewerkte versie" : "uit de bewaarde invoer"}
                </p>
                <div className="flex gap-2">
                  {!bewerken ? (
                    <button
                      onClick={() => {
                        setBewerkTekst(tekst.tekst);
                        setBewerken(true);
                      }}
                      className="text-xs px-3 py-1.5 rounded-md border border-slate-300 hover:bg-slate-100"
                    >
                      ✏ Bewerken
                    </button>
                  ) : (
                    <>
                      <button
                        onClick={bewaarTekst}
                        disabled={opslaanBezig || !bewerkTekst.trim()}
                        className="text-xs px-3 py-1.5 rounded-md font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-40"
                      >
                        {opslaanBezig ? "Opslaan…" : "💾 Opslaan & download .docx"}
                      </button>
                      <button
                        onClick={() => setBewerken(false)}
                        className="text-xs px-3 py-1.5 rounded-md border border-slate-300 hover:bg-slate-100"
                      >
                        Annuleer
                      </button>
                    </>
                  )}
                </div>
              </div>
              {tekst.aangepasteTekstVerouderd && !bewerken && (
                <p className="text-[11px] text-amber-800 bg-amber-50 px-4 py-1.5 border-b border-amber-100">
                  Er bestaat een oudere, rechtstreeks bewerkte versie, maar het document is nadien
                  opnieuw uit de parameters gegenereerd — hieronder staat de actuele reconstructie.
                </p>
              )}
              {bewerken ? (
                <textarea
                  value={bewerkTekst}
                  onChange={(e) => setBewerkTekst(e.target.value)}
                  spellCheck={false}
                  className="w-full h-[32rem] text-xs font-mono leading-relaxed p-4 focus:outline-none resize-y"
                />
              ) : (
                <pre className="text-xs text-slate-900 whitespace-pre-wrap font-mono leading-relaxed p-4 max-h-[32rem] overflow-y-auto">
                  {tekst.tekst}
                </pre>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}