"use client";
import { useMemo, useState } from "react";
import { useVerbetervoorstellenStorage } from "@/lib/hooks/useVerbetervoorstellenStorage";
import { VoorstelForm } from "@/components/verbetervoorstellen/VoorstelForm";
import { VoorstelKaart } from "@/components/verbetervoorstellen/VoorstelKaart";
import {
  sorteerVerbetervoorstellen,
  exporteerAlsPrompt,
  statusLabels,
  prioriteitLabels,
  STATUSSEN,
  PRIORITEITEN,
  type VoorstelStatus,
  type VoorstelPrioriteit,
} from "@/data/verbetervoorstellen";

export default function VerbetervoorstellenPage() {
  const { voorstellen, geladen, slaOp, verwijder } = useVerbetervoorstellenStorage();
  const [bewerkId, setBewerkId] = useState<string | null>(null);
  const [toonNieuw, setToonNieuw] = useState(false);
  const [filterStatus, setFilterStatus] = useState<VoorstelStatus | "alle">("open");
  const [filterPrioriteit, setFilterPrioriteit] = useState<VoorstelPrioriteit | "alle">("alle");
  const [toonExport, setToonExport] = useState(false);
  const [gekopieerd, setGekopieerd] = useState(false);

  const gefilterd = useMemo(() => {
    let lijst = sorteerVerbetervoorstellen(voorstellen);
    if (filterStatus !== "alle") lijst = lijst.filter((v) => v.status === filterStatus);
    if (filterPrioriteit !== "alle") lijst = lijst.filter((v) => v.prioriteit === filterPrioriteit);
    return lijst;
  }, [voorstellen, filterStatus, filterPrioriteit]);

  const telPerStatus = useMemo(() => {
    const tel: Record<VoorstelStatus, number> = { open: 0, in_behandeling: 0, gedaan: 0, afgewezen: 0 };
    voorstellen.forEach((v) => tel[v.status]++);
    return tel;
  }, [voorstellen]);

  const exportTekst = useMemo(() => exporteerAlsPrompt(voorstellen), [voorstellen]);

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

  const bewerkVoorstel = bewerkId ? voorstellen.find((v) => v.id === bewerkId) : undefined;

  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">
            🛠️ Verbetervoorstellen
          </h1>
          <p className="text-sm text-slate-500 mt-1 max-w-xl">
            Registreer en prioritiseer gewenste verbeteringen aan de applicatie. Een AI-agent kan
            deze lijst ophalen en de aanpassingen implementeren op jouw vraag.
          </p>
        </div>
        <div className="flex gap-2 shrink-0">
          <button
            onClick={() => setToonExport((t) => !t)}
            className="text-sm px-4 py-2 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 font-medium shadow-sm"
          >
            📋 Exporteer voor AI
          </button>
          <button
            onClick={() => { setToonNieuw(true); setBewerkId(null); }}
            className="text-sm px-4 py-2 rounded-lg bg-brand-600 text-white hover:bg-brand-700 font-medium shadow-sm"
          >
            + Nieuw voorstel
          </button>
        </div>
      </header>

      {/* Exporteer-paneel */}
      {toonExport && (
        <div className="bg-slate-900 rounded-xl p-5 space-y-3 shadow-sm">
          <div className="flex items-center justify-between">
            <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide">
              Prompt voor AI-agent
            </p>
            <div className="flex gap-2">
              <button
                onClick={kopieer}
                className="text-xs px-3 py-1.5 rounded-lg bg-brand-600 text-white hover:bg-brand-700 font-medium"
              >
                {gekopieerd ? "✓ Gekopieerd!" : "Kopieer"}
              </button>
              <button
                onClick={() => setToonExport(false)}
                className="text-xs px-2 py-1.5 text-slate-400 hover:text-slate-200"
              >
                ✕
              </button>
            </div>
          </div>
          <pre className="text-xs text-slate-200 whitespace-pre-wrap font-mono leading-relaxed max-h-72 overflow-y-auto">
            {exportTekst}
          </pre>
        </div>
      )}

      {/* Nieuw / bewerk formulier */}
      {(toonNieuw || bewerkId) && (
        <VoorstelForm
          initieel={bewerkVoorstel}
          onSla={slaOp}
          onAnnuleer={() => { setToonNieuw(false); setBewerkId(null); }}
        />
      )}

      {/* Stats */}
      <div className="flex gap-3 flex-wrap">
        {STATUSSEN.map((s) => (
          <button
            key={s}
            onClick={() => setFilterStatus(filterStatus === s ? "alle" : s)}
            className={`text-xs px-3 py-1.5 rounded-lg border transition-colors ${
              filterStatus === s
                ? "bg-brand-600 text-white border-brand-600"
                : "border-slate-200 text-slate-600 hover:bg-slate-50"
            }`}
          >
            {statusLabels[s]}{" "}
            <span className={`font-semibold ${filterStatus === s ? "text-brand-100" : "text-slate-800"}`}>
              {telPerStatus[s]}
            </span>
          </button>
        ))}
        {filterStatus !== "alle" && (
          <button
            onClick={() => setFilterStatus("alle")}
            className="text-xs text-slate-400 hover:text-slate-600 px-1"
          >
            Wis filter
          </button>
        )}
      </div>

      {/* Prioriteit filter */}
      <div className="flex items-center gap-2">
        <span className="text-xs text-slate-500">Prioriteit:</span>
        <div className="flex gap-1">
          {(["alle", ...PRIORITEITEN] as const).map((p) => (
            <button
              key={p}
              onClick={() => setFilterPrioriteit(p)}
              className={`text-xs px-2.5 py-1 rounded-md border transition-colors ${
                filterPrioriteit === p
                  ? "bg-slate-700 text-white border-slate-700"
                  : "border-slate-200 text-slate-500 hover:bg-slate-50"
              }`}
            >
              {p === "alle" ? "Alle" : prioriteitLabels[p]}
            </button>
          ))}
        </div>
      </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">
            {voorstellen.length === 0
              ? "Nog geen verbetervoorstellen. Klik op \"+ Nieuw voorstel\" om te beginnen."
              : "Geen voorstellen voor de geselecteerde filters."}
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {gefilterd.map((v) =>
            bewerkId === v.id ? (
              <VoorstelForm
                key={v.id}
                initieel={v}
                onSla={slaOp}
                onAnnuleer={() => setBewerkId(null)}
              />
            ) : (
              <VoorstelKaart
                key={v.id}
                voorstel={v}
                onBewerk={() => { setBewerkId(v.id); setToonNieuw(false); }}
                onSla={slaOp}
                onVerwijder={verwijder}
              />
            )
          )}
          <p className="text-xs text-slate-400 text-center pt-2">
            {gefilterd.length} voorstel{gefilterd.length !== 1 ? "len" : ""} weergegeven
            {(filterStatus !== "alle" || filterPrioriteit !== "alle") &&
              ` (gefilterd van ${voorstellen.length})`}
          </p>
        </div>
      )}
    </div>
  );
}