"use client";
import { useMemo, useState } from "react";
import { useKennisbankStorage } from "@/lib/hooks/useKennisbankStorage";
import { useChecklistsStorage } from "@/lib/hooks/useChecklistsStorage";
import { KennisForm } from "@/components/kennisbank/KennisForm";
import { KennisKaart } from "@/components/kennisbank/KennisKaart";
import { ChecklistKaart } from "@/components/kennisbank/ChecklistKaart";
import { ChecklistEditor } from "@/components/kennisbank/ChecklistEditor";
import { WerkwijzePaneel } from "@/components/kennisbank/WerkwijzePaneel";
import {
  KENNIS_CATEGORIEEN,
  alleThemas,
  kennisCategorieLabels,
  sorteerKennis,
  zoekKennis,
  type KennisCategorie,
  type KennisStatus,
} from "@/data/kennisbank";

type StatusFilter = KennisStatus | "alle";
type Weergave = "items" | "checklists";

const STATUS_TABS: { waarde: StatusFilter; label: string }[] = [
  { waarde: "gevalideerd", label: "Gevalideerd" },
  { waarde: "te_valideren", label: "Te valideren" },
  { waarde: "gearchiveerd", label: "Gearchiveerd" },
  { waarde: "alle", label: "Alles" },
];

function KennisItemsWeergave({
  opslag,
  toonNieuw,
  setToonNieuw,
}: {
  opslag: ReturnType<typeof useKennisbankStorage>;
  toonNieuw: boolean;
  setToonNieuw: (t: boolean) => void;
}) {
  const { kennisbank, geladen, slaOp, verwijder, keurGoed } = opslag;
  const [zoekterm, setZoekterm] = useState("");
  const [filterCategorie, setFilterCategorie] = useState<KennisCategorie | "alle">("alle");
  const [filterThema, setFilterThema] = useState<string>("alle");
  const [filterStatus, setFilterStatus] = useState<StatusFilter>("gevalideerd");
  const [bewerkId, setBewerkId] = useState<string | null>(null);

  const teValideren = useMemo(
    () => kennisbank.filter((i) => i.status === "te_valideren").length,
    [kennisbank]
  );

  const themas = useMemo(() => alleThemas(kennisbank), [kennisbank]);

  const gefilterd = useMemo(() => {
    let lijst = kennisbank;
    if (filterStatus !== "alle") lijst = lijst.filter((i) => i.status === filterStatus);
    if (filterCategorie !== "alle") lijst = lijst.filter((i) => i.categorie === filterCategorie);
    if (filterThema !== "alle") lijst = lijst.filter((i) => i.themas.includes(filterThema));
    return sorteerKennis(zoekKennis(lijst, zoekterm));
  }, [kennisbank, filterStatus, filterCategorie, filterThema, zoekterm]);

  const telPerStatus = useMemo(() => {
    const tel: Record<StatusFilter, number> = {
      gevalideerd: 0,
      te_valideren: 0,
      gearchiveerd: 0,
      alle: kennisbank.length,
    };
    kennisbank.forEach((i) => tel[i.status]++);
    return tel;
  }, [kennisbank]);

  return (
    <>
      {/* Nieuw formulier */}
      {toonNieuw && <KennisForm onSla={slaOp} onAnnuleer={() => setToonNieuw(false)} />}

      {/* Statustabs */}
      <div className="flex gap-3 flex-wrap">
        {STATUS_TABS.map(({ waarde, label }) => (
          <button
            key={waarde}
            onClick={() => setFilterStatus(waarde)}
            className={`text-xs px-3 py-1.5 rounded-lg border transition-colors ${
              filterStatus === waarde
                ? "bg-brand-600 text-white border-brand-600"
                : "border-slate-200 text-slate-600 hover:bg-slate-50"
            }`}
          >
            {label}{" "}
            <span
              className={`font-semibold ${
                waarde === "te_valideren" && teValideren > 0 && filterStatus !== waarde
                  ? "text-amber-600"
                  : filterStatus === waarde
                  ? "text-brand-100"
                  : "text-slate-800"
              }`}
            >
              {telPerStatus[waarde]}
            </span>
          </button>
        ))}
      </div>

      {/* Zoeken en filteren */}
      <div className="flex items-center gap-3 flex-wrap">
        <input
          type="search"
          value={zoekterm}
          onChange={(e) => setZoekterm(e.target.value)}
          placeholder="Zoek in titel, inhoud, thema's en bronnen…"
          className="flex-1 min-w-56 text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
        />
        <select
          value={filterCategorie}
          onChange={(e) => setFilterCategorie(e.target.value as KennisCategorie | "alle")}
          className="text-sm border border-slate-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          aria-label="Filter op categorie"
        >
          <option value="alle">Alle categorieën</option>
          {KENNIS_CATEGORIEEN.map((c) => (
            <option key={c} value={c}>{kennisCategorieLabels[c]}</option>
          ))}
        </select>
        <select
          value={filterThema}
          onChange={(e) => setFilterThema(e.target.value)}
          className="text-sm border border-slate-200 rounded-lg px-2 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          aria-label="Filter op thema"
        >
          <option value="alle">Alle thema&apos;s</option>
          {themas.map((t) => (
            <option key={t} value={t}>{t}</option>
          ))}
        </select>
      </div>

      {/* Lijst */}
      {!geladen ? (
        <p className="text-sm text-slate-400 py-8 text-center">Laden…</p>
      ) : gefilterd.length === 0 ? (
        <div className="py-12 text-center">
          <p className="text-slate-400 text-sm">
            {filterStatus === "te_valideren"
              ? "Geen kennisvoorstellen te valideren."
              : "Geen kennisitems voor de geselecteerde filters."}
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {gefilterd.map((item) =>
            bewerkId === item.id ? (
              <KennisForm
                key={item.id}
                initieel={item}
                onSla={slaOp}
                onAnnuleer={() => setBewerkId(null)}
              />
            ) : (
              <KennisKaart
                key={item.id}
                item={item}
                onBewerk={() => { setBewerkId(item.id); setToonNieuw(false); }}
                onSla={slaOp}
                onVerwijder={verwijder}
                onKeurGoed={keurGoed}
              />
            )
          )}
          <p className="text-xs text-slate-400 text-center pt-2">
            {gefilterd.length} kennisitem{gefilterd.length !== 1 ? "s" : ""} weergegeven
            {kennisbank.length !== gefilterd.length && ` (gefilterd van ${kennisbank.length})`}
          </p>
        </div>
      )}
    </>
  );
}

function ChecklistsWeergave() {
  const { checklists, bewerkteIds, geladen, slaOp, verwijder } = useChecklistsStorage();
  const [bewerkId, setBewerkId] = useState<string | null>(null);

  const gesorteerd = useMemo(
    () => [...checklists].sort((a, b) => a.titel.localeCompare(b.titel, "nl")),
    [checklists]
  );

  return (
    <>
      <WerkwijzePaneel />

      {!geladen ? (
        <p className="text-sm text-slate-400 py-8 text-center">Laden…</p>
      ) : (
        <div className="space-y-3">
          {gesorteerd.map((checklist) =>
            bewerkId === checklist.id ? (
              <ChecklistEditor
                key={checklist.id}
                initieel={checklist}
                onSla={slaOp}
                onAnnuleer={() => setBewerkId(null)}
              />
            ) : (
              <ChecklistKaart
                key={checklist.id}
                checklist={checklist}
                isBewerkt={bewerkteIds.has(checklist.id)}
                onBewerk={() => setBewerkId(checklist.id)}
                onHerstel={() => verwijder(checklist.id)}
              />
            )
          )}
          <p className="text-xs text-slate-400 text-center pt-2">
            {gesorteerd.length} checklists · elk punt weegt cruciaal, belangrijk, nuttig of overbodig
          </p>
        </div>
      )}
    </>
  );
}

export default function KennisbankPage() {
  const kennisOpslag = useKennisbankStorage();
  const [weergave, setWeergave] = useState<Weergave>("items");
  const [toonNieuw, setToonNieuw] = useState(false);

  return (
    <div className="max-w-4xl mx-auto p-4 md:p-8 space-y-6">
      <header className="flex items-start justify-between gap-4 flex-wrap">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
            🧠 Kennisbank
          </h1>
          <p className="text-sm text-slate-500 mt-1 max-w-xl">
            De gedeelde kantoorkennis: werkwijzen, juridische aandachtspunten, kantoorgebruiken én
            de akte-checklists met gewogen controlepunten. AI-agenten raadplegen alles via de API en
            dienen nieuwe kennis in als voorstel — jij keurt goed of wijst af.
          </p>
        </div>
        {weergave === "items" && (
          <button
            onClick={() => setToonNieuw(true)}
            className="text-sm px-4 py-2 rounded-lg bg-brand-600 text-white hover:bg-brand-700 font-medium shadow-sm shrink-0"
          >
            + Nieuw kennisitem
          </button>
        )}
      </header>

      {/* Weergavekeuze */}
      <div className="inline-flex rounded-lg border border-slate-200 bg-white p-0.5">
        {(
          [
            { waarde: "items", label: "📚 Kennisitems" },
            { waarde: "checklists", label: "✅ Checklists per akte" },
          ] as { waarde: Weergave; label: string }[]
        ).map(({ waarde, label }) => (
          <button
            key={waarde}
            onClick={() => setWeergave(waarde)}
            className={`text-sm px-4 py-1.5 rounded-md font-medium transition-colors ${
              weergave === waarde
                ? "bg-brand-600 text-white shadow-sm"
                : "text-slate-600 hover:bg-slate-50"
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {weergave === "items" ? (
        <KennisItemsWeergave opslag={kennisOpslag} toonNieuw={toonNieuw} setToonNieuw={setToonNieuw} />
      ) : (
        <ChecklistsWeergave />
      )}
    </div>
  );
}