"use client";
import { useEffect, useMemo, useState } from "react";
import {
  seedBrieven,
  briefCategorieLabels,
  briefTaalLabels,
  verzamelParameterNamen,
  vulModelbriefIn,
  vindModelbriefGroep,
  type BriefCategorie,
  type BriefTaal,
  type Modelbrief,
} from "@/data/modelbrieven";
import { leesModelbriefHandoff } from "@/lib/handoff";

interface DossierStart {
  briefId: string;
  waarden: Record<string, string>;
  dossierLabel: string;
}

export default function ModelbrievenPage() {
  const [categorie, setCategorie] = useState<BriefCategorie | "alle">("alle");
  const [taal, setTaal] = useState<BriefTaal | "alle">("alle");
  const [zoek, setZoek] = useState("");
  const [geselecteerdId, setGeselecteerdId] = useState<string | null>(null);
  const [dossierStart, setDossierStart] = useState<DossierStart | null>(null);

  // Dossier-handoff: opent meteen de gepaste categorie/brief met de uit het
  // dossier gekende parameters voorgevuld (zelfde patroon als app/modeldocumenten).
  useEffect(() => {
    const handoff = leesModelbriefHandoff();
    if (!handoff) return;
    const categorieMatch = (handoff.categorie as BriefCategorie) ?? "alle";
    const eersteBrief = seedBrieven.find((b) => b.categorie === categorieMatch && b.taal === "nl");
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setCategorie(categorieMatch);
    if (eersteBrief) {
      setDossierStart({
        briefId: eersteBrief.id,
        waarden: handoff.parameterwaarden,
        dossierLabel: handoff.dossierLabel,
      });
      setGeselecteerdId(eersteBrief.id);
    }
  }, []);

  const gefilterd = useMemo(() => {
    const z = zoek.trim().toLowerCase();
    return seedBrieven.filter((brief) => {
      if (categorie !== "alle" && brief.categorie !== categorie) return false;
      if (taal !== "alle" && brief.taal !== taal) return false;
      if (z && !`${brief.titel} ${brief.ontvanger}`.toLowerCase().includes(z)) return false;
      return true;
    });
  }, [categorie, taal, zoek]);

  const geselecteerd = useMemo(
    () => seedBrieven.find((b) => b.id === geselecteerdId) ?? null,
    [geselecteerdId]
  );

  const categorieen = useMemo(() => {
    const set = new Set(seedBrieven.map((b) => b.categorie));
    return [...set];
  }, []);

  return (
    <div className="max-w-7xl mx-auto p-4 md:p-8 space-y-8">
      <header>
        <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">✉️ Modelbrieven</h1>
        <p className="text-sm text-slate-500 mt-1">
          Bibliotheek van modelmails voor dossierbeheer. Kies een modelmail, vul de{" "}
          <code className="text-xs bg-brand-50 text-brand-700 px-1.5 py-0.5 rounded-md">{"{{parameters}}"}</code> in en selecteer
          de toepasselijke varianten. Het resultaat (onderwerp + tekst) kan u kopiëren naar uw e-mailclient.
        </p>
      </header>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-1 space-y-3">
          <input
            type="text"
            value={zoek}
            onChange={(e) => setZoek(e.target.value)}
            placeholder="Zoeken op titel of ontvanger…"
            className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
          />
          <div className="flex gap-2">
            <select
              value={categorie}
              onChange={(e) => setCategorie(e.target.value as BriefCategorie | "alle")}
              className="w-full border border-slate-300 rounded-lg px-2 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
            >
              <option value="alle">Alle categorieën</option>
              {categorieen.map((c) => (
                <option key={c} value={c}>
                  {briefCategorieLabels[c]}
                </option>
              ))}
            </select>
            <select
              value={taal}
              onChange={(e) => setTaal(e.target.value as BriefTaal | "alle")}
              className="border border-slate-300 rounded-lg px-2 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
            >
              <option value="alle">Alle talen</option>
              {Object.entries(briefTaalLabels).map(([code, label]) => (
                <option key={code} value={code}>
                  {label}
                </option>
              ))}
            </select>
          </div>

          <ul className="space-y-1.5 max-h-[32rem] overflow-y-auto">
            {gefilterd.map((brief) => (
              <li key={brief.id}>
                <button
                  onClick={() => setGeselecteerdId(brief.id)}
                  className={`w-full text-left text-sm px-3 py-2.5 rounded-lg border transition-colors ${
                    geselecteerdId === brief.id
                      ? "border-brand-500 bg-brand-50 text-brand-800 shadow-sm"
                      : "border-slate-200 hover:border-brand-300 hover:bg-slate-50 text-slate-700"
                  }`}
                >
                  <div className="font-medium">{brief.titel}</div>
                  <div className="text-xs text-slate-400">
                    {briefCategorieLabels[brief.categorie]} · @{brief.ontvanger} · {briefTaalLabels[brief.taal]}
                  </div>
                </button>
              </li>
            ))}
            {gefilterd.length === 0 && (
              <li className="text-sm text-slate-400 px-3 py-2">Geen modelmails gevonden.</li>
            )}
          </ul>
        </div>

        <div className="md:col-span-3">
          {geselecteerd ? (
            <ModelbriefInvulView
              key={geselecteerd.id}
              brief={geselecteerd}
              initieleWaarden={dossierStart?.briefId === geselecteerd.id ? dossierStart.waarden : undefined}
              dossierLabel={dossierStart?.briefId === geselecteerd.id ? dossierStart.dossierLabel : undefined}
            />
          ) : (
            <div className="text-sm text-slate-400 border border-dashed border-slate-200 rounded-xl p-8 text-center">
              Selecteer een modelmail om de tekst samen te stellen.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

const TAALVOLGORDE: BriefTaal[] = ["nl", "fr", "en"];

function ModelbriefInvulView({
  brief,
  initieleWaarden,
  dossierLabel,
}: {
  brief: Modelbrief;
  /** Voorgevulde parameterwaarden, bv. afgeleid uit een dossier. */
  initieleWaarden?: Record<string, string>;
  /** Korte omschrijving van het bronvenster (dossier) voor weergave. */
  dossierLabel?: string;
}) {
  // Alle taalversies van dezelfde brief (NL/FR/EN), zodat één gedeelde
  // invulstaat de voorbeeldbrief in élke beschikbare taal tegelijk bijwerkt.
  const groep = useMemo(() => vindModelbriefGroep(brief, seedBrieven), [brief]);
  const taalversies = useMemo(
    () => TAALVOLGORDE.map((t) => groep[t]).filter((b): b is Modelbrief => !!b),
    [groep]
  );

  const parameterNamen = useMemo(() => {
    const set = new Set<string>();
    for (const b of taalversies) for (const naam of verzamelParameterNamen(b)) set.add(naam);
    return [...set].sort((a, c) => a.localeCompare(c));
  }, [taalversies]);

  const parameterInfo = useMemo(() => {
    const map = new Map<string, { omschrijving: string; voorbeeld?: string }>();
    for (const b of taalversies) {
      for (const p of b.parameters) {
        if (!map.has(p.naam)) map.set(p.naam, { omschrijving: p.omschrijving, voorbeeld: p.voorbeeld });
      }
    }
    return map;
  }, [taalversies]);

  // Varianten-id's zijn per conventie identiek over de taalversies heen (zie
  // data/modelbrieven/brieven/); de labels komen van de eerste taalversie die
  // het id kent, zodat één checkboxlijst alle taalversies tegelijk stuurt.
  const variantenInfo = useMemo(() => {
    const map = new Map<string, string>();
    for (const b of taalversies) for (const v of b.varianten) if (!map.has(v.id)) map.set(v.id, v.hypothese);
    return [...map.entries()].map(([id, hypothese]) => ({ id, hypothese }));
  }, [taalversies]);

  const [waarden, setWaarden] = useState<Record<string, string>>(() => initieleWaarden ?? {});
  const [variantIds, setVariantIds] = useState<string[]>(() => variantenInfo.map((v) => v.id));
  const voorgevuld = initieleWaarden ?? {};
  const aantalUitDossier = parameterNamen.filter((p) => voorgevuld[p]?.trim()).length;
  const [gekopieerd, setGekopieerd] = useState<string | null>(null);

  const kopieer = async (sleutel: string, inhoud: string) => {
    await navigator.clipboard.writeText(inhoud);
    setGekopieerd(sleutel);
    setTimeout(() => setGekopieerd(null), 1500);
  };

  const kolomKlasse = taalversies.length >= 3 ? "lg:grid-cols-3" : taalversies.length === 2 ? "lg:grid-cols-2" : "";

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">{brief.titel}</h2>
        <p className="text-xs text-slate-400">
          {briefCategorieLabels[brief.categorie]} · @{brief.ontvanger} · versie {brief.versie} ({brief.datum})
          {taalversies.length > 1 &&
            ` · beschikbaar in ${taalversies.map((b) => briefTaalLabels[b.taal]).join(", ")}`}
        </p>
      </div>

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

      {parameterNamen.length > 0 && (
        <div>
          <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
            Parameters ({parameterNamen.length}) — werkt live door in elke taalversie hieronder
          </h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {parameterNamen.map((naam) => {
              const param = parameterInfo.get(naam);
              return (
                <label key={naam} className="block">
                  <span className="block text-xs text-slate-500 mb-1">
                    <span className="font-mono">{`{{${naam}}}`}</span>
                    {param?.omschrijving ? ` — ${param.omschrijving}` : ""}
                    {voorgevuld[naam]?.trim() && (
                      <span className="ml-2 font-sans text-[10px] uppercase tracking-wide bg-sky-100 text-sky-700 px-1.5 py-0.5 rounded">
                        uit dossier
                      </span>
                    )}
                  </span>
                  <input
                    type="text"
                    value={waarden[naam] ?? ""}
                    onChange={(e) => setWaarden((w) => ({ ...w, [naam]: e.target.value }))}
                    placeholder={param?.voorbeeld}
                    className={`w-full text-sm border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-500 ${
                      voorgevuld[naam]?.trim() ? "border-sky-300 bg-sky-50/40" : "border-slate-300"
                    }`}
                  />
                </label>
              );
            })}
          </div>
        </div>
      )}

      {variantenInfo.length > 0 && (
        <div>
          <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
            Te gebruiken passages ({variantenInfo.length})
          </h3>
          <div className="space-y-2">
            {variantenInfo.map((variant) => (
              <label key={variant.id} className="flex items-start gap-2 text-sm text-slate-700">
                <input
                  type="checkbox"
                  checked={variantIds.includes(variant.id)}
                  onChange={(e) =>
                    setVariantIds((ids) =>
                      e.target.checked ? [...ids, variant.id] : ids.filter((id) => id !== variant.id)
                    )
                  }
                  className="mt-1"
                />
                <span>{variant.hypothese}</span>
              </label>
            ))}
          </div>
        </div>
      )}

      <div>
        <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
          Voorbeeldbrief{taalversies.length > 1 ? " — live bijgewerkt per taal" : " — live bijgewerkt"}
        </h3>
        <div className={`grid grid-cols-1 ${kolomKlasse} gap-4`}>
          {taalversies.map((b) => {
            const resultaat = vulModelbriefIn(b, waarden, variantIds);
            return (
              <div key={b.id} className="space-y-3 border border-slate-200 rounded-xl p-4 bg-white shadow-sm">
                <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
                  {briefTaalLabels[b.taal]}
                </p>
                <div>
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Onderwerp</h4>
                    <button
                      onClick={() => kopieer(`${b.id}-onderwerp`, resultaat.onderwerp)}
                      className="text-xs text-brand-600 hover:underline"
                    >
                      {gekopieerd === `${b.id}-onderwerp` ? "Gekopieerd ✓" : "Kopieer"}
                    </button>
                  </div>
                  <p className="text-sm text-slate-700 p-3 bg-slate-50 rounded-lg border border-slate-200 font-mono">
                    {resultaat.onderwerp}
                  </p>
                </div>
                <div>
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Tekst</h4>
                    <button
                      onClick={() => kopieer(`${b.id}-tekst`, resultaat.tekst)}
                      className="text-xs text-brand-600 hover:underline"
                    >
                      {gekopieerd === `${b.id}-tekst` ? "Gekopieerd ✓" : "Kopieer"}
                    </button>
                  </div>
                  <pre className="text-sm text-slate-700 whitespace-pre-wrap font-mono leading-relaxed p-4 bg-slate-50 rounded-xl border border-slate-200 max-h-96 overflow-y-auto">
                    {resultaat.tekst}
                  </pre>
                </div>
                {resultaat.bijlagen.length > 0 && (
                  <p className="text-xs text-slate-400">Bijlagen: {resultaat.bijlagen.join(", ")}</p>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {brief.bron && <p className="text-xs text-slate-400">Bron: {brief.bron}</p>}
    </div>
  );
}