"use client";
import { useState } from "react";
import {
  KENNISBANK_SEED,
  KENNIS_CATEGORIE_STIJL,
  KENNIS_STATUS_STIJL,
  kennisCategorieLabels,
  kennisStatusLabels,
  type KennisItem,
} from "@/data/kennisbank";
import { KennisInhoud } from "./KennisInhoud";

const SEED_IDS = new Set(KENNISBANK_SEED.map((i) => i.id));

const AUTEUR_LABEL: Record<KennisItem["aangemaaktDoor"], string> = {
  seed: "kantoorkennis",
  notaris: "notaris",
  agent: "AI-agent",
};

export function KennisKaart({
  item,
  onBewerk,
  onSla,
  onVerwijder,
  onKeurGoed,
}: {
  item: KennisItem;
  onBewerk: () => void;
  onSla: (item: KennisItem) => Promise<void>;
  onVerwijder: (id: string) => Promise<void>;
  onKeurGoed: (voorstel: KennisItem) => Promise<void>;
}) {
  const [open, setOpen] = useState(false);
  const [bezig, setBezig] = useState(false);

  const isVoorstel = item.status === "te_valideren";
  const isGearchiveerd = item.status === "gearchiveerd";
  const isSeedItem = SEED_IDS.has(item.id);

  async function doe(actie: () => Promise<void>) {
    setBezig(true);
    try {
      await actie();
    } finally {
      setBezig(false);
    }
  }

  async function wisselArchief() {
    const nu = new Date().toISOString();
    await doe(() =>
      onSla({ ...item, status: isGearchiveerd ? "gevalideerd" : "gearchiveerd", aangepast: nu })
    );
  }

  return (
    <div
      className={`bg-white border rounded-xl shadow-sm overflow-hidden ${
        isVoorstel ? "border-amber-300" : "border-slate-200"
      } ${isGearchiveerd ? "opacity-60" : ""}`}
    >
      {/* Kop */}
      <div className="px-5 py-3.5">
        <div className="flex items-start gap-3">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <p className="text-sm font-semibold text-slate-800">{item.titel}</p>
              <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${KENNIS_CATEGORIE_STIJL[item.categorie]}`}>
                {kennisCategorieLabels[item.categorie]}
              </span>
              <span className={`text-xs px-2 py-0.5 rounded border font-medium ${KENNIS_STATUS_STIJL[item.status]}`}>
                {kennisStatusLabels[item.status]}
              </span>
            </div>
            <p className="text-xs text-slate-400 mt-1">
              {AUTEUR_LABEL[item.aangemaaktDoor]} · versie {item.versie} · aangepast{" "}
              {item.aangepast.slice(0, 10)}
              {item.wijzigtItemId && (
                <span className="text-amber-600"> · wijzigt bestaand item “{item.wijzigtItemId}”</span>
              )}
            </p>
          </div>
          <button
            onClick={() => setOpen((o) => !o)}
            className="text-slate-400 text-sm shrink-0 hover:text-slate-600 pt-0.5"
            aria-label={open ? "Inhoud verbergen" : "Inhoud tonen"}
          >
            {open ? "▴" : "▾"}
          </button>
        </div>

        {/* Voorbeschouwing of volledige inhoud */}
        <div className="mt-2">
          {open ? (
            <KennisInhoud inhoud={item.inhoud} />
          ) : (
            <p className="text-sm text-slate-600 line-clamp-2 whitespace-pre-wrap">{item.inhoud}</p>
          )}
        </div>

        {/* Motivering van een agentvoorstel */}
        {isVoorstel && item.motivering && (
          <div className="mt-3 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
            <p className="text-xs font-semibold text-amber-700 uppercase tracking-wide mb-0.5">
              Motivering van het voorstel
            </p>
            <p className="text-sm text-amber-800 whitespace-pre-wrap">{item.motivering}</p>
          </div>
        )}

        {/* Thema's en bronnen */}
        <div className="mt-3 flex items-center gap-1.5 flex-wrap">
          {item.themas.map((t) => (
            <span key={t} className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-500">
              {t}
            </span>
          ))}
          {(item.bronnen ?? []).map((b) => (
            <span
              key={b}
              className="text-xs px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-600"
              title="Wetsbasis / bron"
            >
              § {b}
            </span>
          ))}
        </div>
      </div>

      {/* Acties */}
      <div className="border-t border-slate-100 px-5 py-2.5 flex items-center gap-1.5 flex-wrap">
        {isVoorstel ? (
          <>
            <button
              onClick={() => doe(() => onKeurGoed(item))}
              disabled={bezig}
              className="text-xs px-3 py-1.5 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 font-medium disabled:opacity-50"
            >
              ✓ Goedkeuren
            </button>
            <button
              onClick={() => doe(() => onVerwijder(item.id))}
              disabled={bezig}
              className="text-xs px-3 py-1.5 rounded-lg border border-red-200 text-red-500 hover:bg-red-50 disabled:opacity-50"
            >
              ✕ Afwijzen
            </button>
            <button
              onClick={onBewerk}
              className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 ml-auto"
            >
              ✏️ Bewerk vóór goedkeuring
            </button>
          </>
        ) : (
          <>
            <button
              onClick={onBewerk}
              className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50"
            >
              ✏️ Bewerk
            </button>
            <button
              onClick={wisselArchief}
              disabled={bezig}
              className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-50"
            >
              {isGearchiveerd ? "↩︎ Herstel" : "🗄 Archiveer"}
            </button>
            {!isSeedItem && (
              <button
                onClick={() => doe(() => onVerwijder(item.id))}
                disabled={bezig}
                className="text-xs px-3 py-1.5 rounded-lg border border-red-200 text-red-500 hover:bg-red-50 disabled:opacity-50 ml-auto"
              >
                ✕ Verwijder
              </button>
            )}
          </>
        )}
      </div>
    </div>
  );
}