"use client";
import { useState } from "react";
import {
  GEWICHT_STIJL,
  gewestLabels,
  gewichtLabels,
  groepeerPuntenPerGewicht,
  type AkteChecklist,
} from "@/data/kennisbank-checklists";

export function ChecklistKaart({
  checklist,
  isBewerkt,
  onBewerk,
  onHerstel,
}: {
  checklist: AkteChecklist;
  /** True wanneer een opgeslagen bewerking het seed-exemplaar vervangt. */
  isBewerkt: boolean;
  onBewerk: () => void;
  onHerstel: () => Promise<void>;
}) {
  const [open, setOpen] = useState(false);
  const [bezig, setBezig] = useState(false);
  const groepen = groepeerPuntenPerGewicht(checklist);

  async function herstel() {
    setBezig(true);
    try {
      await onHerstel();
    } finally {
      setBezig(false);
    }
  }

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
      <button
        onClick={() => setOpen((o) => !o)}
        className="w-full px-5 py-3.5 flex items-start gap-3 text-left hover:bg-slate-50"
      >
        <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">{checklist.titel}</p>
            <span className="text-xs px-1.5 py-0.5 rounded bg-rose-50 text-rose-700 font-medium">
              {checklist.akteType}
            </span>
            {isBewerkt && (
              <span className="text-xs px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 font-medium">
                bewerkt · v{checklist.versie}
              </span>
            )}
          </div>
          <p className="text-xs text-slate-500 mt-1">{checklist.omschrijving}</p>
          <div className="flex items-center gap-1.5 mt-2 flex-wrap">
            {groepen.map(({ gewicht, punten }) => (
              <span
                key={gewicht}
                className={`text-xs px-2 py-0.5 rounded border font-medium ${GEWICHT_STIJL[gewicht]}`}
              >
                {gewichtLabels[gewicht]} {punten.length}
              </span>
            ))}
          </div>
        </div>
        <span className="text-slate-400 text-sm pt-0.5">{open ? "▴" : "▾"}</span>
      </button>

      {open && (
        <div className="border-t border-slate-100">
          {groepen.map(({ gewicht, punten }) => (
            <div key={gewicht} className="px-5 py-3 border-b border-slate-100 last:border-b-0">
              <p className={`inline-block text-xs px-2 py-0.5 rounded border font-semibold mb-2 ${GEWICHT_STIJL[gewicht]}`}>
                {gewichtLabels[gewicht]}
              </p>
              <ul className="space-y-2">
                {punten.map((punt) => (
                  <li key={punt.id} className="text-sm">
                    <div className="flex items-start gap-2">
                      <span className="text-slate-300 mt-0.5">☐</span>
                      <div className="flex-1 min-w-0">
                        <p className="text-slate-800">
                          {punt.omschrijving}
                          {(punt.gewesten ?? []).map((g) => (
                            <span
                              key={g}
                              className="ml-1.5 text-xs px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 align-middle"
                            >
                              {gewestLabels[g]}
                            </span>
                          ))}
                        </p>
                        {punt.toelichting && (
                          <p className="text-xs text-slate-500 mt-0.5">{punt.toelichting}</p>
                        )}
                        {(punt.wetsbasis ?? []).length > 0 && (
                          <p className="text-xs text-indigo-600 mt-0.5">
                            § {punt.wetsbasis!.join(" · ")}
                          </p>
                        )}
                        {punt.modelonderdeelId && (
                          <p className="text-xs text-slate-400 mt-0.5 font-mono">
                            ↳ modelonderdeel: {punt.modelonderdeelId}
                          </p>
                        )}
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          <div className="px-5 py-2.5 bg-slate-50 flex items-center gap-1.5">
            <button
              onClick={onBewerk}
              className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-100"
            >
              ✏️ Bewerk checklist
            </button>
            {isBewerkt && (
              <button
                onClick={herstel}
                disabled={bezig}
                className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-100 disabled:opacity-50"
                title="Verwijdert de bewerking en herstelt de kantoorstandaard uit de code"
              >
                ↩︎ Herstel kantoorstandaard
              </button>
            )}
            <p className="text-xs text-slate-400 ml-auto">
              {checklist.punten.length} punten · aangepast {checklist.aangepast.slice(0, 10)}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}