"use client";
import { useMemo } from "react";
import {
  SCHAKEL_VELDEN,
  titelSchakelLabels,
  vergelijkGoed,
  type GoedMetTitel,
  type TitelSchakelSoort,
} from "@/lib/dossier/oorsprong";

// ── Goederen & eigendomstitels — editor voor de InvulView ────────────────────
// Eén akte kan meerdere onroerende goederen en/of meerdere eigendomstitels
// omvatten: per goed worden de verplichte beschrijvingsclausule en de
// oorsprong van eigendom hernomen. Deze editor beheert de gestructureerde
// goedgegevens en toont per goed live de kadastrale vergelijking tussen de
// eigendomstitel, het recente uittreksel en het opmetingsplan (historische
// perceelnummers worden over de formaatgrens heen genormaliseerd vergeleken).

const TYPE_OPTIES: { id: string; label: string }[] = [
  { id: "", label: "— type nog niet gekozen (hypotheses blijven staan) —" },
  { id: "huis", label: "Huis" },
  { id: "grond", label: "Grond" },
  { id: "ander-goed-zonder-mede-eigendom", label: "Ander goed (zonder mede-eigendom)" },
  { id: "appartement-mede-eigendom", label: "Kavel in mede-eigendom (appartement, staanplaats, …)" },
];

const invoer = "w-full text-xs border border-slate-300 rounded px-2 py-1 bg-white";

function Veld({
  label,
  waarde,
  onChange,
  breed,
}: {
  label: string;
  waarde?: string;
  onChange: (w: string) => void;
  breed?: boolean;
}) {
  return (
    <label className={`text-xs text-slate-600 space-y-0.5 block ${breed ? "sm:col-span-2" : ""}`}>
      <span className="block text-[11px] text-slate-500">{label}</span>
      <input type="text" value={waarde ?? ""} onChange={(e) => onChange(e.target.value)} className={invoer} />
    </label>
  );
}

function VergelijkingsBadge({ goed }: { goed: GoedMetTitel }) {
  const vergelijking = useMemo(() => vergelijkGoed(goed), [goed]);
  const heeftBronnen =
    (goed.perceelnummerTitel || goed.oppervlakteTitel) && (goed.perceelnummerRecent || goed.oppervlakteRecent);
  if (!heeftBronnen) {
    return (
      <p className="text-xs text-slate-400 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2">
        Vul de aanduiding volgens titel én recent uittreksel in om de kadastrale vergelijking te zien.
      </p>
    );
  }
  if (vergelijking.meldingen.length === 0) {
    return (
      <p className="text-xs text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2">
        ✓ Titel, recent uittreksel{goed.planOppervlakte || goed.planPerceelnummer ? " en plan" : ""} stemmen overeen
        (perceelnummer over de formaatgrens heen genormaliseerd; oppervlakte na omzetting ha/a/ca ↔ m²).
      </p>
    );
  }
  return (
    <div className="space-y-1">
      {vergelijking.meldingen.map((melding, i) => (
        <p key={i} className="text-xs text-amber-800 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
          ⚠ {melding}
        </p>
      ))}
    </div>
  );
}

function SchakelKaart({
  schakel,
  onChange,
  onVerwijder,
}: {
  schakel: NonNullable<GoedMetTitel["schakels"]>[number];
  onChange: (s: NonNullable<GoedMetTitel["schakels"]>[number]) => void;
  onVerwijder: () => void;
}) {
  return (
    <div className="border border-slate-200 rounded-lg p-3 space-y-2 bg-white">
      <div className="flex items-center gap-2">
        <select
          value={schakel.soort}
          onChange={(e) => onChange({ ...schakel, soort: e.target.value as TitelSchakelSoort })}
          className="text-xs border border-slate-300 rounded px-2 py-1 bg-white"
        >
          {(Object.keys(titelSchakelLabels) as TitelSchakelSoort[]).map((soort) => (
            <option key={soort} value={soort}>
              {titelSchakelLabels[soort]}
            </option>
          ))}
        </select>
        <button onClick={onVerwijder} className="ml-auto text-xs text-red-600 hover:underline">
          Verwijder overgang
        </button>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {SCHAKEL_VELDEN[schakel.soort].map((veld) => (
          <Veld
            key={veld.naam}
            label={veld.label}
            waarde={schakel.waarden[veld.naam]}
            onChange={(w) => onChange({ ...schakel, waarden: { ...schakel.waarden, [veld.naam]: w } })}
          />
        ))}
      </div>
    </div>
  );
}

function GoedKaart({
  goed,
  index,
  onChange,
  onVerwijder,
}: {
  goed: GoedMetTitel;
  index: number;
  onChange: (g: GoedMetTitel) => void;
  onVerwijder: () => void;
}) {
  const zet = (deel: Partial<GoedMetTitel>) => onChange({ ...goed, ...deel });
  const zetTitel = (deel: Partial<NonNullable<GoedMetTitel["oudsteTitel"]>>) =>
    onChange({ ...goed, oudsteTitel: { ...goed.oudsteTitel, ...deel } });
  const schakels = goed.schakels ?? [];

  return (
    <div className="border border-slate-300 rounded-xl p-4 space-y-3 bg-slate-50/50">
      <div className="flex items-center gap-3 flex-wrap">
        <p className="text-sm font-semibold text-slate-700">Goed {index + 1}</p>
        <select
          value={goed.typeVariantId ?? ""}
          onChange={(e) => zet({ typeVariantId: e.target.value || undefined })}
          className="text-xs border border-slate-300 rounded px-2 py-1 bg-white"
        >
          {TYPE_OPTIES.map((optie) => (
            <option key={optie.id} value={optie.id}>
              {optie.label}
            </option>
          ))}
        </select>
        <button onClick={onVerwijder} className="ml-auto text-xs text-red-600 hover:underline">
          Verwijder goed
        </button>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
        <Veld label="Kop in het document (bv. 'Goed 1 — woning Kerkstraat 12')" waarde={goed.label} onChange={(w) => zet({ label: w })} breed />
        <Veld label="Gemeente" waarde={goed.gemeente} onChange={(w) => zet({ gemeente: w })} />
        <Veld label="Adres (straat + nummer)" waarde={goed.adres} onChange={(w) => zet({ adres: w })} />
        <Veld label="Deelgemeente" waarde={goed.deelgemeente} onChange={(w) => zet({ deelgemeente: w })} />
        <Veld label="Afdeling" waarde={goed.afdeling} onChange={(w) => zet({ afdeling: w })} />
      </div>

      <div>
        <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1">Volgens eigendomstitel</p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
          <Veld label="Sectie" waarde={goed.sectieTitel} onChange={(w) => zet({ sectieTitel: w })} />
          <Veld label='Perceelnummer (bv. "60 F 22")' waarde={goed.perceelnummerTitel} onChange={(w) => zet({ perceelnummerTitel: w })} />
          <Veld label='Oppervlakte (bv. "1a 80ca")' waarde={goed.oppervlakteTitel} onChange={(w) => zet({ oppervlakteTitel: w })} />
        </div>
      </div>

      <div>
        <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1">Volgens recent kadastraal uittreksel</p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
          <Veld label="Sectie" waarde={goed.sectieRecent} onChange={(w) => zet({ sectieRecent: w })} />
          <Veld label='Perceelnummer (bv. "0060F22P0000")' waarde={goed.perceelnummerRecent} onChange={(w) => zet({ perceelnummerRecent: w })} />
          <Veld label='Oppervlakte (bv. "180 m²")' waarde={goed.oppervlakteRecent} onChange={(w) => zet({ oppervlakteRecent: w })} />
        </div>
      </div>

      <div>
        <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1">Opmetingsplan (indien voorhanden)</p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
          <Veld label="Perceelnummer op het plan" waarde={goed.planPerceelnummer} onChange={(w) => zet({ planPerceelnummer: w })} />
          <Veld label="Gemeten oppervlakte" waarde={goed.planOppervlakte} onChange={(w) => zet({ planOppervlakte: w })} />
          <Veld label="Referte databank plannen (2 × 5 cijfers)" waarde={goed.planReferte} onChange={(w) => zet({ planReferte: w })} />
        </div>
      </div>

      <VergelijkingsBadge goed={goed} />

      <div>
        <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1">
          Oorsprong van eigendom — oudste (dertigjarige) titel
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
          <Veld label="Oorspronkelijke eigenaar" waarde={goed.oudsteTitel?.oorspronkelijkeEigenaar} onChange={(w) => zetTitel({ oorspronkelijkeEigenaar: w })} />
          <Veld label="Rechtsvoorganger (verkoper in die akte)" waarde={goed.oudsteTitel?.rechtsvoorganger} onChange={(w) => zetTitel({ rechtsvoorganger: w })} />
          <Veld label="Notaris" waarde={goed.oudsteTitel?.notaris} onChange={(w) => zetTitel({ notaris: w })} />
          <Veld label="Standplaats notaris" waarde={goed.oudsteTitel?.plaats} onChange={(w) => zetTitel({ plaats: w })} />
          <Veld label="Datum akte" waarde={goed.oudsteTitel?.datum} onChange={(w) => zetTitel({ datum: w })} />
          <Veld label="Overschrijvingsreferte" waarde={goed.oudsteTitel?.overschrijvingsreferte} onChange={(w) => zetTitel({ overschrijvingsreferte: w })} />
        </div>
      </div>

      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wide">
            Tussenliggende overgangen ({schakels.length})
          </p>
          <button
            onClick={() => zet({ schakels: [...schakels, { soort: "verkoop", waarden: {} }] })}
            className="text-xs px-2 py-0.5 rounded border border-slate-300 text-slate-600 hover:border-brand-300"
          >
            + Overgang toevoegen
          </button>
        </div>
        {schakels.length === 0 && (
          <p className="text-xs text-slate-400">
            Geen overgangen opgegeven: de bouwstenen blijven als hypotheses gemarkeerd in het document.
          </p>
        )}
        {schakels.map((schakel, i) => (
          <SchakelKaart
            key={i}
            schakel={schakel}
            onChange={(s) => zet({ schakels: schakels.map((x, j) => (j === i ? s : x)) })}
            onVerwijder={() => zet({ schakels: schakels.filter((_, j) => j !== i) })}
          />
        ))}
      </div>
    </div>
  );
}

export function GoederenEditor({
  goederen,
  onChange,
}: {
  goederen: GoedMetTitel[];
  onChange: (goederen: GoedMetTitel[]) => void;
}) {
  return (
    <div className="space-y-3">
      {goederen.map((goed, i) => (
        <GoedKaart
          key={i}
          goed={goed}
          index={i}
          onChange={(g) => onChange(goederen.map((x, j) => (j === i ? g : x)))}
          onVerwijder={() => onChange(goederen.filter((_, j) => j !== i))}
        />
      ))}
      <button
        onClick={() => onChange([...goederen, {}])}
        className="text-sm px-4 py-2 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-300"
      >
        + Goed toevoegen
      </button>
    </div>
  );
}