"use client";
import { useEffect, useMemo, useState } from "react";
import { seedOnderdelen, seedModellen, seedBronnen, combineerMetSeed, type Modeldocument } from "@/data/modeldocumenten";
import { useModeldocumentenStorage } from "@/lib/hooks/useModeldocumentenStorage";
import { useVerwerkteBronnenStorage } from "@/lib/hooks/useVerwerkteBronnenStorage";
import { leesOntwerpakteHandoff } from "@/lib/handoff";
import { OnderdelenTab } from "@/components/modeldocumenten/OnderdelenTab";
import { ModellenTab } from "@/components/modeldocumenten/ModellenTab";
import { OverzichtTab } from "@/components/modeldocumenten/OverzichtTab";
import { VerrijkenTab } from "@/components/modeldocumenten/VerrijkenTab";
import { ValiderenTab } from "@/components/modeldocumenten/ValiderenTab";
import { BronnenTab } from "@/components/modeldocumenten/BronnenTab";

type Tab = "onderdelen" | "modellen" | "overzicht" | "verrijken" | "valideren" | "bronnen";

interface OntwerpakteStart {
  model: Modeldocument;
  waarden: Record<string, string>;
  dossierLabel: string;
  partijHerhalingen?: { label?: string; waarden: Record<string, string> }[];
  keuzes?: { onderdeelId: string; variantId?: string; opnemen?: boolean }[];
}

export default function ModeldocumentenPage() {
  const [tab, setTab] = useState<Tab>("valideren");
  const [ontwerpakteStart, setOntwerpakteStart] = useState<OntwerpakteStart | null>(null);
  const opslag = useModeldocumentenStorage();
  const bronnenOpslag = useVerwerkteBronnenStorage();

  const alleOnderdelen = useMemo(
    () => combineerMetSeed(seedOnderdelen, opslag.gebruikersOnderdelen),
    [opslag.gebruikersOnderdelen]
  );
  const alleModellen = useMemo(
    () => [...seedModellen, ...opslag.gebruikersModellen],
    [opslag.gebruikersModellen]
  );
  const alleBronnen = useMemo(
    () => combineerMetSeed(seedBronnen, bronnenOpslag.bronnen),
    [bronnenOpslag.bronnen]
  );

  // Dossier-handoff: opent meteen de InvulView van het passende model met de
  // uit het dossier gekende parameters voorgevuld.
  useEffect(() => {
    const handoff = leesOntwerpakteHandoff();
    if (!handoff) return;
    const model =
      alleModellen.find((m) => m.akteType === handoff.akteType) ??
      alleModellen.find((m) => m.akteType.includes(handoff.akteType));
    if (!model) return;
    // Eenmalige handoff-lezing op mount (zelfde patroon als app/ereloon).
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setOntwerpakteStart({
      model,
      waarden: handoff.parameterwaarden,
      dossierLabel: handoff.dossierLabel,
      partijHerhalingen: handoff.partijHerhalingen,
      keuzes: handoff.keuzes,
    });
    setTab("modellen");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [opslag.geladen]);

  return (
    <div className="max-w-5xl 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">
          📄 Modeldocumenten
        </h1>
        <p className="text-sm text-slate-500 mt-1">
          Evolutieve bibliotheek: herbruikbare modelonderdelen (clausules met hypotheses en{" "}
          <code className="text-xs bg-brand-50 text-brand-700 px-1.5 py-0.5 rounded-md">{"{{parameters}}"}</code>) worden
          samengesteld tot volledige modeldocumenten. Bij gebruik: parameters invullen, de
          toepasselijke hypothese kiezen en overbodige clausules schrappen. De bibliotheek groeit
          met nieuwe input (voorbeeldakten, Fednot-modelclausules, …).
        </p>
      </header>

      <div className="flex gap-2 border-b border-slate-200">
        {(
          [
            [
              "valideren",
              `Te valideren${
                opslag.voorstellen.length + opslag.modelVoorstellen.length > 0
                  ? ` (${opslag.voorstellen.length + opslag.modelVoorstellen.length})`
                  : ""
              }`,
            ],
            ["modellen", `Modeldocumenten (${alleModellen.length})`],
            ["onderdelen", `Modelonderdelen (${alleOnderdelen.length})`],
            ["overzicht", "Overzicht & hergebruik"],
            ["verrijken", "Verrijken"],
            ["bronnen", `Verwerkte bronnen (${alleBronnen.length})`],
          ] as [Tab, string][]
        ).map(([id, label]) => (
          <button
            key={id}
            onClick={() => {
              setOntwerpakteStart(null);
              setTab(id);
            }}
            className={`text-sm px-4 py-2 -mb-px border-b-2 transition-colors ${
              tab === id
                ? "border-brand-600 text-brand-700 font-medium"
                : "border-transparent text-slate-500 hover:text-slate-700"
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {tab === "onderdelen" && (
        <OnderdelenTab
          alleOnderdelen={alleOnderdelen}
          slaOp={opslag.slaOnderdeelOp}
          verwijder={opslag.verwijderOnderdeel}
          slaVoorstelOp={opslag.slaVoorstelOp}
          naarValideren={() => setTab("valideren")}
          historiek={opslag.historiek}
          herstelVersie={opslag.herstelVersie}
        />
      )}
      {tab === "modellen" && (
        <ModellenTab
          alleModellen={alleModellen}
          alleOnderdelen={alleOnderdelen}
          slaOp={opslag.slaModelOp}
          verwijder={opslag.verwijderModel}
          startInvulModel={ontwerpakteStart?.model ?? null}
          startWaarden={ontwerpakteStart?.waarden}
          startDossierLabel={ontwerpakteStart?.dossierLabel}
          startPartijHerhalingen={ontwerpakteStart?.partijHerhalingen}
          startKeuzes={ontwerpakteStart?.keuzes}
        />
      )}
      {tab === "overzicht" && (
        <OverzichtTab alleModellen={alleModellen} alleOnderdelen={alleOnderdelen} />
      )}
      {tab === "verrijken" && (
        <VerrijkenTab
          slaOp={opslag.slaOnderdeelOp}
          slaVoorstelOp={opslag.slaVoorstelOp}
          naarValideren={() => setTab("valideren")}
        />
      )}
      {tab === "valideren" && (
        <ValiderenTab
          voorstellen={opslag.voorstellen}
          modelVoorstellen={opslag.modelVoorstellen}
          alleOnderdelen={alleOnderdelen}
          alleModellen={alleModellen}
          keurGoed={opslag.keurVoorstelGoed}
          wijsAf={opslag.verwijderVoorstel}
          keurModelGoed={opslag.keurModelVoorstelGoed}
          wijsModelAf={opslag.verwijderModelVoorstel}
          synchroniseer={opslag.synchroniseerVanServer}
        />
      )}
      {tab === "bronnen" && (
        <BronnenTab
          bronnen={alleBronnen}
          slaOp={bronnenOpslag.slaOp}
          verwijder={bronnenOpslag.verwijder}
        />
      )}
    </div>
  );
}