"use client";
import { useState } from "react";
import type { GewestCode } from "@/data/vastgoed-opzoekingen";
import {
  GEWICHTEN,
  gewestLabels,
  gewichtLabels,
  type AkteChecklist,
  type ChecklistPunt,
  type PuntGewicht,
} from "@/data/kennisbank-checklists";

const ALLE_GEWESTEN: GewestCode[] = ["vl", "br", "wa"];

interface PuntVelden {
  id: string;
  omschrijving: string;
  gewicht: PuntGewicht;
  toelichting: string;
  gewesten: GewestCode[];
  wetsbasis: string;
}

function naarVelden(punt: ChecklistPunt): PuntVelden {
  return {
    id: punt.id,
    omschrijving: punt.omschrijving,
    gewicht: punt.gewicht,
    toelichting: punt.toelichting ?? "",
    gewesten: punt.gewesten ?? [],
    wetsbasis: (punt.wetsbasis ?? []).join(", "),
  };
}

function naarPunt(velden: PuntVelden): ChecklistPunt {
  const wetsbasis = velden.wetsbasis.split(",").map((s) => s.trim()).filter(Boolean);
  return {
    id: velden.id,
    omschrijving: velden.omschrijving.trim(),
    gewicht: velden.gewicht,
    toelichting: velden.toelichting.trim() || undefined,
    gewesten: velden.gewesten.length > 0 ? velden.gewesten : undefined,
    wetsbasis: wetsbasis.length > 0 ? wetsbasis : undefined,
  };
}

/** Verhoogt het minor-versienummer: "1.0" → "1.1". */
function volgendeVersie(versie: string): string {
  const [hoofd, minor] = versie.split(".");
  const volgende = Number.parseInt(minor ?? "0", 10) + 1;
  return `${hoofd || "1"}.${Number.isNaN(volgende) ? 1 : volgende}`;
}

export function ChecklistEditor({
  initieel,
  onSla,
  onAnnuleer,
}: {
  initieel: AkteChecklist;
  onSla: (checklist: AkteChecklist) => Promise<void>;
  onAnnuleer: () => void;
}) {
  const [titel, setTitel] = useState(initieel.titel);
  const [omschrijving, setOmschrijving] = useState(initieel.omschrijving);
  const [punten, setPunten] = useState<PuntVelden[]>(initieel.punten.map(naarVelden));
  const [bezig, setBezig] = useState(false);
  const [fout, setFout] = useState<string | null>(null);

  function wijzigPunt(index: number, deels: Partial<PuntVelden>) {
    setPunten((prev) => prev.map((p, i) => (i === index ? { ...p, ...deels } : p)));
  }

  function wisselGewest(index: number, gewest: GewestCode) {
    setPunten((prev) =>
      prev.map((p, i) => {
        if (i !== index) return p;
        const gewesten = p.gewesten.includes(gewest)
          ? p.gewesten.filter((g) => g !== gewest)
          : [...p.gewesten, gewest];
        return { ...p, gewesten };
      })
    );
  }

  function voegPuntToe() {
    setPunten((prev) => [
      ...prev,
      {
        id: `punt-${Date.now()}-${prev.length}`,
        omschrijving: "",
        gewicht: "belangrijk",
        toelichting: "",
        gewesten: [],
        wetsbasis: "",
      },
    ]);
  }

  function verwijderPunt(index: number) {
    setPunten((prev) => prev.filter((_, i) => i !== index));
  }

  async function doeOpslaan(e: React.FormEvent) {
    e.preventDefault();
    const gevuld = punten.filter((p) => p.omschrijving.trim());
    if (!titel.trim() || gevuld.length === 0) {
      setFout("Titel en minstens één ingevuld punt zijn verplicht.");
      return;
    }
    setFout(null);
    setBezig(true);
    const checklist: AkteChecklist = {
      ...initieel,
      titel: titel.trim(),
      omschrijving: omschrijving.trim(),
      punten: gevuld.map(naarPunt),
      versie: volgendeVersie(initieel.versie),
      aangepast: new Date().toISOString(),
    };
    try {
      await onSla(checklist);
      onAnnuleer();
    } finally {
      setBezig(false);
    }
  }

  return (
    <form onSubmit={doeOpslaan} className="bg-white border border-brand-200 rounded-xl shadow-sm p-5 space-y-4">
      <h3 className="text-sm font-semibold text-slate-700">
        Checklist bewerken — {initieel.akteType} (versie {initieel.versie})
      </h3>

      {fout && (
        <p className="text-xs text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{fout}</p>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div className="space-y-1">
          <label className="text-xs font-medium text-slate-600">Titel</label>
          <input
            type="text"
            value={titel}
            onChange={(e) => setTitel(e.target.value)}
            className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          />
        </div>
        <div className="space-y-1">
          <label className="text-xs font-medium text-slate-600">Omschrijving</label>
          <input
            type="text"
            value={omschrijving}
            onChange={(e) => setOmschrijving(e.target.value)}
            className="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-300"
          />
        </div>
      </div>

      <div className="space-y-3">
        {punten.map((punt, i) => (
          <div key={punt.id} className="border border-slate-200 rounded-lg p-3 space-y-2 bg-slate-50/50">
            <div className="flex items-start gap-2">
              <select
                value={punt.gewicht}
                onChange={(e) => wijzigPunt(i, { gewicht: e.target.value as PuntGewicht })}
                className="text-xs border border-slate-200 rounded-lg px-2 py-1.5 bg-white focus:outline-none focus:ring-2 focus:ring-brand-300 shrink-0"
                aria-label="Gewicht"
              >
                {GEWICHTEN.map((g) => (
                  <option key={g} value={g}>{gewichtLabels[g]}</option>
                ))}
              </select>
              <textarea
                rows={2}
                value={punt.omschrijving}
                onChange={(e) => wijzigPunt(i, { omschrijving: e.target.value })}
                placeholder="Wat moet gecontroleerd, aangevuld of geschrapt worden?"
                className="flex-1 text-sm border border-slate-200 rounded-lg px-3 py-1.5 bg-white focus:outline-none focus:ring-2 focus:ring-brand-300"
              />
              <button
                type="button"
                onClick={() => verwijderPunt(i)}
                className="text-xs px-2 py-1.5 rounded-lg border border-red-200 text-red-500 hover:bg-red-50 shrink-0"
                aria-label="Punt verwijderen"
              >
                ✕
              </button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
              <input
                type="text"
                value={punt.toelichting}
                onChange={(e) => wijzigPunt(i, { toelichting: e.target.value })}
                placeholder="Toelichting of valkuil (optioneel)"
                className="text-xs border border-slate-200 rounded-lg px-3 py-1.5 bg-white focus:outline-none focus:ring-2 focus:ring-brand-300"
              />
              <input
                type="text"
                value={punt.wetsbasis}
                onChange={(e) => wijzigPunt(i, { wetsbasis: e.target.value })}
                placeholder="Wetsbasis, komma-gescheiden (optioneel)"
                className="text-xs border border-slate-200 rounded-lg px-3 py-1.5 bg-white focus:outline-none focus:ring-2 focus:ring-brand-300"
              />
            </div>
            <div className="flex items-center gap-3">
              <span className="text-xs text-slate-400">Gewest:</span>
              {ALLE_GEWESTEN.map((g) => (
                <label key={g} className="flex items-center gap-1 text-xs text-slate-600">
                  <input
                    type="checkbox"
                    checked={punt.gewesten.includes(g)}
                    onChange={() => wisselGewest(i, g)}
                  />
                  {gewestLabels[g]}
                </label>
              ))}
              <span className="text-xs text-slate-400">(niets aangevinkt = alle gewesten)</span>
            </div>
          </div>
        ))}
      </div>

      <button
        type="button"
        onClick={voegPuntToe}
        className="text-xs px-3 py-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50"
      >
        + Punt toevoegen
      </button>

      <div className="flex gap-2 pt-1">
        <button
          type="submit"
          disabled={bezig}
          className="text-sm px-4 py-2 rounded-lg font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-50"
        >
          {bezig ? "Opslaan…" : "Wijzigingen opslaan"}
        </button>
        <button
          type="button"
          onClick={onAnnuleer}
          className="text-sm px-4 py-2 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50"
        >
          Annuleer
        </button>
      </div>
    </form>
  );
}