"use client";
import { useEffect, useState } from "react";
import { useKantoor } from "@/lib/hooks/useKantoor";

function Veld({
  label,
  waarde,
  zet,
  hint,
}: {
  label: string;
  waarde: string;
  zet: (v: string) => void;
  hint?: string;
}) {
  return (
    <div>
      <label className="text-xs text-slate-500 block mb-1">{label}</label>
      <input
        className="border border-slate-300 rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
        value={waarde}
        onChange={(e) => zet(e.target.value)}
      />
      {hint && <p className="text-[11px] text-slate-400 mt-0.5">{hint}</p>}
    </div>
  );
}

export default function InstellingenPage() {
  const { kantoor, geladen, bewaarKantoor } = useKantoor();
  const [naam, setNaam] = useState("");
  const [standplaats, setStandplaats] = useState("");
  const [zetel, setZetel] = useState("");
  const [kbo, setKbo] = useState("");
  const [notarissen, setNotarissen] = useState("");
  const [standaardNotaris, setStandaardNotaris] = useState("");
  const [bewaard, setBewaard] = useState(false);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- bestaand, bewust opslag-synchronisatiepatroon (IndexedDB/localStorage -> formulierstate); zie eslint.config.mjs
    setNaam(kantoor.naam);
    setStandplaats(kantoor.standplaats);
    setZetel(kantoor.zetel);
    setKbo(kantoor.kbo ?? "");
    setNotarissen(kantoor.notarissen.join(", "));
    setStandaardNotaris(kantoor.standaardNotaris);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [geladen]);

  async function opslaan() {
    await bewaarKantoor({
      naam: naam.trim(),
      standplaats: standplaats.trim(),
      zetel: zetel.trim(),
      kbo: kbo.trim() || undefined,
      notarissen: notarissen.split(",").map((n) => n.trim()).filter(Boolean),
      standaardNotaris: standaardNotaris.trim(),
    });
    setBewaard(true);
    setTimeout(() => setBewaard(false), 2500);
  }

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <h1 className="text-xl font-semibold mb-1">Kantoorinstellingen</h1>
      <p className="text-sm text-slate-500 mb-6">
        Deze gegevens vullen automatisch de akte- en mailparameters (notaris, standplaats,
        plaats van ondertekening, kantoornaam). Ze gelden kantoorbreed.
      </p>

      <div className="border border-slate-200 rounded-xl shadow-sm p-5 space-y-3 bg-slate-50">
        <Veld label="Maatschappelijke benaming" waarde={naam} zet={setNaam} />
        <Veld label="Standplaats (gemeente)" waarde={standplaats} zet={setStandplaats} hint="Vult {{standplaats}} en {{plaats_ondertekening}}." />
        <Veld label="Zetel (adres)" waarde={zetel} zet={setZetel} />
        <Veld label="Ondernemingsnummer (KBO)" waarde={kbo} zet={setKbo} />
        <Veld label="Geassocieerde notarissen" waarde={notarissen} zet={setNotarissen} hint="Komma-gescheiden, bv. Jadoul, Kestelyn, Genicot, Dierckx." />
        <Veld label="Standaard instrumenterende notaris" waarde={standaardNotaris} zet={setStandaardNotaris} hint="Vult {{naam_notaris}}; leeg laten om per akte te kiezen." />
        <div className="flex items-center gap-3 pt-1">
          <button
            onClick={opslaan}
            className="bg-brand-600 text-white text-sm px-4 py-2 rounded-md hover:bg-brand-700"
          >
            Opslaan
          </button>
          {bewaard && <span className="text-sm text-emerald-700">Bewaard.</span>}
        </div>
      </div>
    </div>
  );
}