"use client";
import { useState } from "react";
import type { BronDocument } from "@/data/modeldocumenten";

function leegFormulier(): Omit<BronDocument, "id"> {
  return { bestandsnaam: "", datum: new Date().toISOString().slice(0, 10), opmerking: "" };
}

export function BronnenTab({
  bronnen,
  slaOp,
  verwijder,
}: {
  bronnen: BronDocument[];
  slaOp: (b: BronDocument) => Promise<void>;
  verwijder: (id: string) => Promise<void>;
}) {
  const [form, setForm] = useState(leegFormulier());
  const [bewerkId, setBewerkId] = useState<string | null>(null);

  const gesorteerd = [...bronnen].sort((a, b) => b.datum.localeCompare(a.datum));

  async function bewaar() {
    if (!form.bestandsnaam.trim()) return;
    await slaOp({
      id: bewerkId ?? crypto.randomUUID(),
      bestandsnaam: form.bestandsnaam.trim(),
      datum: form.datum,
      opmerking: form.opmerking?.trim() || undefined,
    });
    setForm(leegFormulier());
    setBewerkId(null);
  }

  function bewerk(b: BronDocument) {
    setBewerkId(b.id);
    setForm({ bestandsnaam: b.bestandsnaam, datum: b.datum, opmerking: b.opmerking ?? "" });
  }

  return (
    <div className="space-y-6">
      <section className="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-3">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">
          {bewerkId ? "Bron bewerken" : "Verwerkte bron toevoegen"}
        </h3>
        <p className="text-sm text-slate-600">
          Houd bij welke voorbeeldakten, Fednot-modellen of andere bronbestanden al verwerkt zijn
          in de bibliotheek van modelonderdelen. Zuiver administratief — geen wijzigingsvoorstel
          nodig.
        </p>
        <div className="flex flex-wrap gap-3">
          <label className="text-sm text-slate-600 space-y-1 flex-1 min-w-[220px]">
            <span>Bestandsnaam</span>
            <input
              type="text"
              value={form.bestandsnaam}
              onChange={(e) => setForm({ ...form, bestandsnaam: e.target.value })}
              placeholder="bv. voorbeeldakte-tervuren-2026.docx"
              className="w-full text-sm border border-slate-300 rounded-lg px-3 py-2"
            />
          </label>
          <label className="text-sm text-slate-600 space-y-1">
            <span>Datum</span>
            <input
              type="date"
              value={form.datum}
              onChange={(e) => setForm({ ...form, datum: e.target.value })}
              className="text-sm border border-slate-300 rounded-lg px-3 py-2"
            />
          </label>
        </div>
        <label className="text-sm text-slate-600 space-y-1 block">
          <span>Opmerking (optioneel)</span>
          <input
            type="text"
            value={form.opmerking ?? ""}
            onChange={(e) => setForm({ ...form, opmerking: e.target.value })}
            placeholder="bv. basis voor beschrijving-onroerend-goed"
            className="w-full text-sm border border-slate-300 rounded-lg px-3 py-2"
          />
        </label>
        <div className="flex gap-2">
          <button
            onClick={bewaar}
            disabled={!form.bestandsnaam.trim()}
            className="text-sm px-4 py-2 rounded-lg font-medium bg-brand-600 text-white hover:bg-brand-700 disabled:bg-slate-300"
          >
            {bewerkId ? "Wijziging bewaren" : "Toevoegen"}
          </button>
          {bewerkId && (
            <button
              onClick={() => {
                setBewerkId(null);
                setForm(leegFormulier());
              }}
              className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
            >
              Annuleer
            </button>
          )}
        </div>
      </section>

      <section className="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-3">
          Reeds verwerkt ({gesorteerd.length})
        </h3>
        {gesorteerd.length === 0 ? (
          <p className="text-sm text-slate-500">Nog geen bronbestanden geregistreerd.</p>
        ) : (
          <ul className="divide-y divide-slate-100">
            {gesorteerd.map((b) => (
              <li key={b.id} className="flex items-center justify-between gap-3 py-2.5">
                <div className="min-w-0">
                  <p className="text-sm font-medium text-slate-800 truncate">{b.bestandsnaam}</p>
                  <p className="text-xs text-slate-500">
                    {b.datum}
                    {b.opmerking ? ` — ${b.opmerking}` : ""}
                  </p>
                </div>
                <div className="flex gap-2 shrink-0">
                  <button
                    onClick={() => bewerk(b)}
                    className="text-xs px-3 py-1.5 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
                  >
                    Bewerk
                  </button>
                  <button
                    onClick={() => verwijder(b.id)}
                    className="text-xs px-3 py-1.5 rounded-lg border border-red-200 text-red-600 hover:bg-red-50"
                  >
                    Verwijder
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}