"use client";
import { useState, useMemo, useCallback } from "react";
import {
  berekenSchenking,
  berekenErfenis,
  relatieLabels,
  relatieKort,
  gewestNotes,
  getWetRefs,
  type GoedeType,
  type Relatie,
  type SchijfDetail,
} from "@/data/belastingen";
import { useGewest } from "@/lib/context/gewest";
import WetReferentie from "@/components/WetReferentie";
import type { BelastingPdfData } from "@/lib/pdf/genereer";

const relatieOpties: Relatie[] = [
  "rechte_lijn_partner",
  "broers_zussen",
  "ooms_nichten",
  "anderen",
];

const relatieIcoon: Record<Relatie, string> = {
  rechte_lijn_partner: "👨‍👩‍👧",
  broers_zussen: "👫",
  ooms_nichten: "👴",
  anderen: "👤",
};

function euro(n: number) {
  return new Intl.NumberFormat("nl-BE", {
    style: "currency",
    currency: "EUR",
    maximumFractionDigits: 0,
  }).format(n);
}

function pct(n: number) {
  return n.toFixed(2) + " %";
}

function parseBedrag(s: string): number {
  return (
    parseFloat(s.replace(/[\s  .]/g, "").replace(",", ".")) || 0
  );
}

// ── Schijventabel ──────────────────────────────────────────────
function SchijfTabel({ detail }: { detail: SchijfDetail[] }) {
  if (detail.length === 0) return null;
  return (
    <div className="mt-3 space-y-px">
      {detail.map((d, i) => (
        <div
          key={i}
          className="flex items-center justify-between gap-2 px-2 py-1.5 rounded text-xs odd:bg-slate-50"
        >
          <span className="text-slate-500">
            {euro(d.van)} → {euro(d.tot)}
          </span>
          <span className="flex items-center gap-2">
            <span className="bg-indigo-50 text-indigo-600 font-semibold rounded-full px-2 py-0.5">
              {d.tarief}%
            </span>
            <span className="text-slate-800 font-semibold w-20 text-right">
              {euro(d.bedrag)}
            </span>
          </span>
        </div>
      ))}
    </div>
  );
}

export default function BelastingPage() {
  const { gewest } = useGewest();
  const [bedrag, setBedrag] = useState("");
  const [andereGoederen, setAndereGoederen] = useState("");
  const [relatie, setRelatie] = useState<Relatie>("rechte_lijn_partner");
  const [goedType, setGoedType] = useState<GoedeType>("onroerend");
  const [toonSchenkSchijven, setToonSchenkSchijven] = useState(false);
  const [toonErfSchijven, setToonErfSchijven] = useState(false);
  const [toonSchenkRsn, setToonSchenkRsn] = useState(false);
  const [toonErfRsn, setToonErfRsn] = useState(false);

  const waarde = parseBedrag(bedrag);
  const base = parseBedrag(andereGoederen);

  const schenking = useMemo(
    () => berekenSchenking(gewest, goedType, relatie, waarde),
    [gewest, goedType, relatie, waarde]
  );
  const erfenis = useMemo(
    () => berekenErfenis(gewest, relatie, waarde, base),
    [gewest, relatie, waarde, base]
  );

  const verschil = erfenis.totaal - schenking.totaal;
  const notes = gewestNotes[gewest];

  const schenkRefs = getWetRefs(gewest, "schenking", goedType, relatie);
  const erfRefs = getWetRefs(gewest, "erfenis", goedType, relatie);

  // Redeneringsteksten (zoals in de notaristool)
  const schenkRedenering =
    goedType === "roerend"
      ? `Vast tarief van ${schenking.effectiefTarief} % op de volledige waarde: ${euro(
          waarde
        )} × ${schenking.effectiefTarief} % = ${euro(schenking.totaal)}.`
      : `Progressief barema per schijf voor een schenking van onroerend goed aan de categorie « ${relatieKort[relatie]} ». De schijven en tarieven zijn identiek in de drie gewesten.`;

  const erfRedenering = erfenis.marginaal
    ? `Marginale berekening: het gesimuleerde goed bevindt zich bovenop ${euro(
        base
      )} aan andere goederen in de nalatenschap. Totale rechten op ${euro(
        base + waarde
      )} min rechten op ${euro(base)} = ${euro(erfenis.totaal)}.`
    : `Progressief barema toegepast op ${euro(
        waarde
      )}. De wettelijke vrijstellingen zijn niet inbegrepen omdat zij gelden voor de volledige nalatenschap en niet voor dit ene goed.`;

  const heeftResultaat = waarde > 0;

  const exportPdf = useCallback(async () => {
    const { exportBelastingPdf } = await import("@/lib/pdf/genereer");
    const data: BelastingPdfData = {
      gewest,
      relatieLabel: relatieLabels[relatie],
      goedType,
      waarde,
      andereGoederen: base,
      schenking: {
        totaal: schenking.totaal,
        effectiefTarief: schenking.effectiefTarief,
        detail: schenking.detail.map((d) => ({
          van: d.van, tot: d.tot, tarief: d.tarief, bedrag: d.bedrag,
        })),
        redenering: schenkRedenering,
      },
      erfenis: {
        totaal: erfenis.totaal,
        effectiefTarief: erfenis.effectiefTarief,
        detail: erfenis.detail.map((d) => ({
          van: d.van, tot: d.tot, tarief: d.tarief, bedrag: d.bedrag,
        })),
        marginaal: erfenis.marginaal,
        redenering: erfRedenering,
        note: notes.notes[relatie],
        verdachtePeriode: notes.verdachtePeriode,
      },
      verschil,
    };
    exportBelastingPdf(data);
  }, [gewest, relatie, goedType, waarde, base, schenking, erfenis, verschil, notes, schenkRedenering, erfRedenering]);

  return (
    <div className="p-8 max-w-5xl mx-auto">
      {/* ── Koptekst ── */}
      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <p className="text-xs uppercase tracking-widest text-amber-600 font-semibold mb-1">
            België · Tarieven 2026
          </p>
          <h1 className="text-2xl font-bold text-slate-900 mb-1">
            Schenking vs Erfbelasting
          </h1>
          <p className="text-slate-500 text-sm">
            Vergelijking per schijf met fiscale redenering — gewest:{" "}
            <strong>{gewest}</strong>
          </p>
        </div>
        {heeftResultaat && (
          <div className="no-print flex gap-2 shrink-0">
            <button
              onClick={exportPdf}
              className="text-sm bg-amber-600 text-white px-4 py-2 rounded-md hover:bg-amber-700 transition-colors flex items-center gap-2"
            >
              📄 PDF exporteren
            </button>
            <button
              onClick={() => window.print()}
              className="text-sm bg-slate-900 text-white px-4 py-2 rounded-md hover:bg-slate-700 transition-colors flex items-center gap-2"
            >
              🖨️ Afdrukken
            </button>
          </div>
        )}
      </div>

      {/* ── Invoer ── */}
      <div className="bg-white border rounded-xl p-6 shadow-sm mb-6 no-print">
        <h2 className="text-base font-semibold text-slate-800 mb-4">Parameters</h2>

        {/* Type goed */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-slate-700 mb-1.5">
            Type goed
          </label>
          <div className="flex gap-2">
            {(["onroerend", "roerend"] as GoedeType[]).map((g) => (
              <button
                key={g}
                onClick={() => setGoedType(g)}
                className={`px-4 py-2 text-sm rounded-md border transition-colors capitalize ${
                  goedType === g
                    ? "bg-indigo-600 text-white border-indigo-600"
                    : "text-slate-600 border-slate-300 hover:border-indigo-300"
                }`}
              >
                {g === "onroerend" ? "🏠 Onroerend goed" : "💰 Roerend / Geld"}
              </button>
            ))}
          </div>
        </div>

        {/* Verwantschap */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-slate-700 mb-1.5">
            Verwantschap
          </label>
          <div className="flex flex-wrap gap-2">
            {relatieOpties.map((r) => (
              <button
                key={r}
                onClick={() => setRelatie(r)}
                className={`px-3 py-2 text-sm rounded-md border transition-colors ${
                  relatie === r
                    ? "bg-indigo-600 text-white border-indigo-600"
                    : "text-slate-600 border-slate-300 hover:border-indigo-300"
                }`}
              >
                {relatieIcoon[r]} {relatieLabels[r]}
              </button>
            ))}
          </div>
        </div>

        {/* Waarde */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-slate-700 mb-1.5">
            Waarde van het gesimuleerde goed
          </label>
          <div className="relative max-w-xs">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">
              €
            </span>
            <input
              type="text"
              inputMode="numeric"
              value={bedrag}
              onChange={(e) => setBedrag(e.target.value)}
              placeholder="bv. 350 000"
              className="w-full pl-8 pr-3 py-2 text-sm border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>
        </div>

        {/* Andere goederen (marginaal) */}
        <div className="bg-amber-50/50 border border-amber-100 rounded-lg p-4">
          <label className="block text-sm font-medium text-slate-700 mb-1.5">
            Andere goederen van dezelfde categorie in de nalatenschap{" "}
            <span className="text-slate-400 font-normal">(facultatief)</span>
          </label>
          <div className="relative max-w-xs">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">
              €
            </span>
            <input
              type="text"
              inputMode="numeric"
              value={andereGoederen}
              onChange={(e) => setAndereGoederen(e.target.value)}
              placeholder="bv. 200 000"
              className="w-full pl-8 pr-3 py-2 text-sm border border-amber-200 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-400"
            />
          </div>
          <p className="text-xs text-slate-500 mt-2 leading-relaxed">
            Indien na de schenking nog andere goederen van dezelfde categorie
            (roerend of onroerend) in de nalatenschap aanwezig zijn, geef hun
            totale waarde hier op. De erfbelasting op het gesimuleerde goed wordt
            dan berekend op de <strong>marginale schijf</strong> die van
            toepassing is, wat het werkelijke fiscale voordeel van de schenking
            correct weergeeft.
          </p>
        </div>
      </div>

      {/* ── Afdruk-parameters (enkel zichtbaar bij afdrukken) ── */}
      {heeftResultaat && (
        <div className="hidden print:block mb-4 text-xs text-slate-600 border border-slate-300 rounded p-2">
          <strong className="text-amber-700">België · Tarieven 2026</strong> ·{" "}
          {gewest} · {relatieKort[relatie]} ·{" "}
          {goedType === "onroerend" ? "Onroerend goed" : "Roerend / Geld"} ·{" "}
          {euro(waarde)}
          {erfenis.marginaal && <> · andere goederen: {euro(base)}</>}
        </div>
      )}

      {/* ── Resultaten ── */}
      {heeftResultaat && (
        <div className="space-y-4">
          {/* Verdict */}
          <div
            className={`print-avoid-break rounded-xl p-5 border flex items-center justify-between flex-wrap gap-3 ${
              verschil > 0
                ? "bg-green-50 border-green-200"
                : verschil < 0
                ? "bg-red-50 border-red-200"
                : "bg-slate-50 border-slate-200"
            }`}
          >
            <div>
              <p
                className={`text-xs uppercase tracking-wide mb-1 ${
                  verschil > 0
                    ? "text-green-600"
                    : verschil < 0
                    ? "text-red-600"
                    : "text-slate-500"
                }`}
              >
                {verschil > 0
                  ? "✅ Besparing via schenking"
                  : verschil < 0
                  ? "⚠️ Schenking is duurder"
                  : "= Rechten zijn gelijk"}
              </p>
              <p
                className={`text-3xl font-extrabold leading-none ${
                  verschil > 0
                    ? "text-green-700"
                    : verschil < 0
                    ? "text-red-700"
                    : "text-slate-600"
                }`}
              >
                {verschil !== 0
                  ? (verschil > 0 ? "+" : "") + euro(Math.abs(verschil))
                  : "—"}
              </p>
              <p className="text-xs text-slate-500 mt-1">
                ten opzichte van de erfenis
              </p>
            </div>
            <div className="text-right text-xs text-slate-500 leading-7">
              <div>
                Schenking:{" "}
                <strong className="text-amber-600">
                  {pct(schenking.effectiefTarief)}
                </strong>
              </div>
              <div>
                Erfbelasting:{" "}
                <strong className="text-blue-600">
                  {pct(erfenis.effectiefTarief)}
                </strong>
              </div>
            </div>
          </div>

          {/* Kolommen */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Schenking */}
            <div className="print-avoid-break bg-white border border-amber-200 rounded-xl p-5 shadow-sm">
              <div className="flex items-center gap-2 mb-2">
                <span>🎁</span>
                <span className="text-xs font-bold uppercase tracking-wide text-amber-600">
                  Schenking
                </span>
              </div>
              <p className="text-3xl font-extrabold text-amber-600 leading-none">
                {euro(schenking.totaal)}
              </p>
              <p className="text-xs text-slate-500 mt-1.5">
                op {euro(waarde)} · effectief tarief{" "}
                <strong className="text-amber-600">
                  {pct(schenking.effectiefTarief)}
                </strong>
              </p>

              <div className="flex gap-2 mt-3 no-print">
                <button
                  onClick={() => setToonSchenkSchijven((v) => !v)}
                  className="text-xs border border-amber-200 text-amber-700 bg-amber-50 rounded px-2 py-1 hover:bg-amber-100"
                >
                  {toonSchenkSchijven ? "▲ Schijven" : "▼ Schijven"}
                </button>
                <button
                  onClick={() => setToonSchenkRsn((v) => !v)}
                  className="text-xs border border-slate-200 text-slate-500 rounded px-2 py-1 hover:bg-slate-50"
                >
                  {toonSchenkRsn ? "▲ Redenering" : "💡 Redenering"}
                </button>
              </div>

              <div className={toonSchenkSchijven ? "print-toon" : "hidden print-toon"}>
                <SchijfTabel detail={schenking.detail} />
              </div>

              <div
                className={`${
                  toonSchenkRsn ? "block" : "hidden"
                } print-toon mt-3 border-l-2 border-amber-300 bg-amber-50/40 rounded-r px-3 py-2 text-xs text-slate-600 leading-relaxed`}
              >
                <p className="font-semibold text-amber-700 mb-0.5">Berekening</p>
                <p>{schenkRedenering}</p>
              </div>

              {schenkRefs.length > 0 && <WetReferentie refs={schenkRefs} />}
            </div>

            {/* Erfbelasting */}
            <div className="print-avoid-break bg-white border border-blue-200 rounded-xl p-5 shadow-sm">
              <div className="flex items-center gap-2 mb-2">
                <span>⚖️</span>
                <span className="text-xs font-bold uppercase tracking-wide text-blue-600">
                  Erfbelasting
                </span>
                {erfenis.marginaal && (
                  <span className="text-[10px] font-bold bg-blue-100 text-blue-600 rounded-full px-2 py-0.5">
                    marginaal
                  </span>
                )}
              </div>
              <p className="text-3xl font-extrabold text-blue-600 leading-none">
                {euro(erfenis.totaal)}
              </p>
              <p className="text-xs text-slate-500 mt-1.5">
                op {euro(waarde)} · effectief tarief{" "}
                <strong className="text-blue-600">
                  {pct(erfenis.effectiefTarief)}
                </strong>
              </p>

              <div className="flex gap-2 mt-3 no-print">
                <button
                  onClick={() => setToonErfSchijven((v) => !v)}
                  className="text-xs border border-blue-200 text-blue-700 bg-blue-50 rounded px-2 py-1 hover:bg-blue-100"
                >
                  {toonErfSchijven ? "▲ Schijven" : "▼ Schijven"}
                </button>
                <button
                  onClick={() => setToonErfRsn((v) => !v)}
                  className="text-xs border border-slate-200 text-slate-500 rounded px-2 py-1 hover:bg-slate-50"
                >
                  {toonErfRsn ? "▲ Redenering" : "💡 Redenering"}
                </button>
              </div>

              <div className={toonErfSchijven ? "print-toon" : "hidden print-toon"}>
                <SchijfTabel detail={erfenis.detail} />
              </div>

              <div
                className={`${
                  toonErfRsn ? "block" : "hidden"
                } print-toon mt-3 border-l-2 border-blue-300 bg-blue-50/40 rounded-r px-3 py-2 text-xs text-slate-600 leading-relaxed`}
              >
                <p className="font-semibold text-blue-700 mb-0.5">Berekening</p>
                <p>{erfRedenering}</p>
                <p className="font-semibold text-slate-500 mt-2 mb-0.5">
                  Opmerking
                </p>
                <p>{notes.notes[relatie]}</p>
                <p className="font-semibold text-slate-500 mt-2 mb-0.5">
                  Verdachte periode
                </p>
                <p>{notes.verdachtePeriode}</p>
              </div>

              {erfRefs.length > 0 && <WetReferentie refs={erfRefs} />}
            </div>
          </div>

          {/* Samenvatting */}
          <div className="print-avoid-break bg-white border rounded-xl p-5">
            <p className="text-sm font-bold text-amber-600 mb-3">📋 Samenvatting</p>
            <div className="space-y-2 text-sm text-slate-600">
              <p>
                <span className="font-semibold text-amber-600 uppercase text-xs mr-1">
                  Schenking —
                </span>
                {schenkRedenering}
              </p>
              <p>
                <span className="font-semibold text-blue-600 uppercase text-xs mr-1">
                  Erfbelasting —
                </span>
                {erfRedenering}
              </p>
              <p>
                <span className="font-semibold text-slate-500 uppercase text-xs mr-1">
                  Opmerking —
                </span>
                {notes.notes[relatie]}
              </p>
              <p
                className={`font-medium ${
                  verschil > 0
                    ? "text-green-700"
                    : verschil < 0
                    ? "text-red-700"
                    : "text-slate-600"
                }`}
              >
                <span className="uppercase text-xs mr-1">Conclusie —</span>
                {verschil > 0
                  ? `De schenking levert een besparing op van ${euro(
                      verschil
                    )} in dit scenario.`
                  : verschil < 0
                  ? `De erfbelasting is ${euro(
                      Math.abs(verschil)
                    )} goedkoper in dit scenario.`
                  : "De rechten zijn gelijk in dit scenario."}
              </p>
            </div>
          </div>

          {/* Waarschuwingen */}
          <div className="print-avoid-break bg-slate-50 border rounded-xl p-5 text-xs text-slate-500 leading-relaxed">
            <p className="font-bold text-amber-600 mb-2">⚠️ Waarschuwingen</p>
            <p className="mb-2">
              <strong>Toepassingsgebied:</strong> Dit instrument berekent{" "}
              <strong>uitsluitend de schenkings- en erfbelasting</strong> op één
              afzonderlijk goed (roerend of onroerend). Het houdt geen rekening
              met globale vrijstellingen, schulden van de nalatenschap, het
              beschikbare deel, het huwelijksstelsel of andere burgerrechtelijke
              of patrimoniale overwegingen.
            </p>
            <div className="border-t border-slate-200 my-2" />
            <p>
              <strong>Waarschuwing:</strong> Indicatieve simulatie op basis van
              de officiële tarieven van kracht in 2026. Dit is geen juridisch of
              fiscaal advies en vervangt geen notarieel overleg. De persoonlijke
              en patrimoniale situatie van elke cliënt kan de resultaten
              wezenlijk beïnvloeden. Raadpleeg het notariskantoor te Tervuren
              voor persoonlijk advies.
            </p>
          </div>
        </div>
      )}

      {!heeftResultaat && (
        <div className="bg-white border rounded-xl p-10 text-center text-slate-400 no-print">
          <div className="text-5xl mb-3">⚖️</div>
          <p className="text-sm">
            Voer een waarde in om schenking en erfbelasting te vergelijken
          </p>
        </div>
      )}
    </div>
  );
}