"use client";
// ── Dossierspecifieke checklist: dezelfde akte-checklist (kennisbank), maar
// hier afvinkbaar per dossier. De gedeelde checklist (welke punten, welk
// gewicht) blijft ongewijzigd; enkel de afvinkstatus leeft op het dossier.

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

export function DossierChecklist({
  checklist,
  voortgang,
  onToggle,
}: {
  checklist: AkteChecklist;
  /** puntId → afgevinkt. */
  voortgang: Record<string, boolean>;
  onToggle: (puntId: string) => void;
}) {
  const groepen = groepeerPuntenPerGewicht(checklist);
  const totaal = checklist.punten.length;
  const afgevinkt = checklist.punten.filter((p) => voortgang[p.id]).length;

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-4">
      <div className="flex items-center justify-between gap-3 flex-wrap mb-1">
        <div>
          <p className="text-sm font-medium text-slate-700">Checklist — {checklist.titel}</p>
          <p className="text-xs text-slate-500 mt-0.5">{checklist.omschrijving}</p>
        </div>
        <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 font-medium shrink-0">
          {afgevinkt} / {totaal} afgevinkt
        </span>
      </div>

      <div className="mt-3 space-y-3">
        {groepen.map(({ gewicht, punten }) => (
          <div key={gewicht}>
            <p
              className={`inline-block text-xs px-2 py-0.5 rounded border font-semibold mb-1.5 ${GEWICHT_STIJL[gewicht]}`}
            >
              {gewichtLabels[gewicht]}
            </p>
            <ul className="space-y-1.5">
              {punten.map((punt) => {
                const afgevinktPunt = voortgang[punt.id] === true;
                return (
                  <li key={punt.id} className="flex items-start gap-2 text-sm">
                    <input
                      type="checkbox"
                      checked={afgevinktPunt}
                      onChange={() => onToggle(punt.id)}
                      className="mt-0.5 h-4 w-4 rounded border-slate-300 text-brand-600 shrink-0"
                    />
                    <div className="flex-1 min-w-0">
                      <p className={afgevinktPunt ? "text-slate-400 line-through" : "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 && !afgevinktPunt && (
                        <p className="text-xs text-slate-500 mt-0.5">{punt.toelichting}</p>
                      )}
                      {punt.modelonderdeelId && !afgevinktPunt && (
                        <p className="text-xs text-slate-400 mt-0.5 font-mono">
                          ↳ modelonderdeel: {punt.modelonderdeelId}
                        </p>
                      )}
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}