"use client";

import { useState, useMemo, useCallback } from "react";
import { useGewest } from "@/lib/context/gewest";
import {
  akteMeta,
  kiesBarema,
  berekenHonorarium,
  berekenHeffing,
  getAktekosten,
  getRetributies,
  getHeffingWetRefs,
  schenkingsWijzeLabels,
  type AkteType,
  type GewestEreloon,
  type Relatie,
  type SchenkingsWijze,
} from "@/data/ereloon";
import { relatieLabels } from "@/data/belastingen";
import WetReferentie from "@/components/WetReferentie";
import type { EreloonPdfData } from "@/lib/pdf/genereer";

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

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

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

export default function EreloonPage() {
  const { gewest: globalGewest } = useGewest();

  const [akteType, setAkteType] = useState<AkteType>("verkoop");
  const [bedragStr, setBedragStr] = useState("");
  const [gewest, setGewest] = useState<GewestEreloon>(globalGewest as GewestEreloon);
  const [eigenWoning, setEigenWoning] = useState(true);
  const [relatie, setRelatie] = useState<Relatie>("rechte_lijn_partner");
  const [schenkingsWijze, setSchenkingsWijze] = useState<SchenkingsWijze>("buiten_deel");
  const [toonSchijven, setToonSchijven] = useState(false);
  const [verbondenAkte, setVerbondenAkte] = useState(false);

  const bedrag = parseBedrag(bedragStr);
  const meta = akteMeta[akteType];

  const baremaCode = useMemo(
    () => kiesBarema(akteType, { eigenWoning, schenkingsWijze }),
    [akteType, eigenWoning, schenkingsWijze]
  );
  const hon = useMemo(
    () => berekenHonorarium(bedrag, baremaCode),
    [bedrag, baremaCode]
  );

  const aktekost = useMemo(
    () => getAktekosten(akteType, verbondenAkte),
    [akteType, verbondenAkte]
  );

  const heffing = useMemo(
    () => berekenHeffing(akteType, bedrag, gewest, { eigenWoning, relatie }),
    [akteType, bedrag, gewest, eigenWoning, relatie]
  );

  const retributies = useMemo(
    () => getRetributies(akteType, bedrag),
    [akteType, bedrag]
  );
  const retributiesTotaal = retributies.reduce((s, r) => s + r.bedrag, 0);

  const honWetRefs = meta.wetRefs ?? [];
  const heffingWetRefs = useMemo(
    () => getHeffingWetRefs(akteType, gewest, eigenWoning),
    [akteType, gewest, eigenWoning]
  );

  // Honorarium én vacaties (aktekosten) zijn btw-plichtig (21 %).
  const basisExclBtw = hon.honorarium + aktekost.bedrag;
  const btw = basisExclBtw * 0.21;

  const totaal = basisExclBtw + btw + (heffing?.bedrag ?? 0) + retributiesTotaal;

  const heeftResultaat = bedrag > 0;

  const exportPdf = useCallback(async () => {
    const { exportEreloonPdf } = await import("@/lib/pdf/genereer");
    const opties: string[] = [];
    if (meta.heeftEigenWoning)
      opties.push(eigenWoning ? "Enige eigen woning" : "Algemeen tarief");
    if (meta.heeftSchenkingsWijze)
      opties.push(schenkingsWijzeLabels[schenkingsWijze]);
    if (meta.heeftRelatie) opties.push(relatieLabels[relatie]);
    if (verbondenAkte) opties.push("Verbonden akte");
    const data: EreloonPdfData = {
      akteLabel: meta.label,
      gewest,
      grondslagLabel: meta.grondslachLabel,
      bedrag,
      opties,
      honorarium: {
        baremaCode: hon.baremaCode,
        baremaOmschrijving: hon.baremaOmschrijving,
        vastGedeelte: hon.vastGedeelte,
        detail: hon.detail.map((d) => ({
          label: d.label,
          percentage: d.percentage,
          bedrag: d.bedrag,
        })),
        honorarium: hon.honorarium,
      },
      aktekosten: {
        label: aktekost.label,
        bedrag: aktekost.bedrag,
        opmerking: aktekost.opmerking,
      },
      btwBasis: basisExclBtw,
      btw,
      heffing: heffing
        ? {
            label: heffing.label,
            bedrag: heffing.bedrag,
            detail: heffing.details?.map((d) => ({
              label: d.label,
              percentage: d.percentage,
              bedrag: d.bedrag,
            })),
          }
        : null,
      retributies: retributies.map((r) => ({ label: r.label, bedrag: r.bedrag })),
      retributiesTotaal,
      totaal,
    };
    exportEreloonPdf(data);
  }, [
    meta,
    gewest,
    bedrag,
    eigenWoning,
    schenkingsWijze,
    relatie,
    verbondenAkte,
    hon,
    aktekost,
    basisExclBtw,
    btw,
    heffing,
    retributies,
    retributiesTotaal,
    totaal,
  ]);

  return (
    <div className="min-h-screen bg-slate-50 p-6">
      <div className="max-w-5xl mx-auto space-y-6">
        {/* Header */}
        <div className="flex items-start justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Ereloonberekening</h1>
            <p className="text-sm text-slate-500 mt-1">
              Ereloon, getarifeerde aktekosten, overheidsrechten en hypothecaire
              retributies — KB 16.12.1950 (geconsolideerd 2022), geïndexeerd 2026
            </p>
          </div>
          {heeftResultaat && (
            <button
              onClick={exportPdf}
              className="no-print shrink-0 text-sm bg-slate-900 text-white px-4 py-2 rounded-md hover:bg-slate-700 transition-colors flex items-center gap-2"
            >
              📄 PDF exporteren
            </button>
          )}
        </div>

        {/* Akte type selector */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
          {(Object.entries(akteMeta) as [AkteType, (typeof akteMeta)[AkteType]][]).map(
            ([id, m]) => (
              <button
                key={id}
                onClick={() => setAkteType(id)}
                className={`p-3 rounded-xl border-2 text-left transition-all ${
                  akteType === id
                    ? "border-indigo-600 bg-indigo-50"
                    : "border-slate-200 bg-white hover:border-indigo-300"
                }`}
              >
                <div className="text-2xl mb-1">{m.icoon}</div>
                <div
                  className={`text-xs font-semibold leading-tight ${
                    akteType === id ? "text-indigo-800" : "text-slate-700"
                  }`}
                >
                  {m.label}
                </div>
              </button>
            )
          )}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Input form */}
          <div className="bg-white rounded-xl border border-slate-200 p-5 space-y-4 self-start">
            <h2 className="font-semibold text-slate-800">Invoer</h2>

            {/* Bedrag */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                {meta.grondslachLabel} (€)
              </label>
              <input
                type="text"
                inputMode="decimal"
                value={bedragStr}
                onChange={(e) => setBedragStr(e.target.value)}
                placeholder="bv. 350000"
                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
              {bedrag > 0 && (
                <p className="text-xs text-slate-400 mt-1">= {euro(bedrag)}</p>
              )}
            </div>

            {/* Gewest */}
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Gewest</label>
              <div className="flex gap-2">
                {(["Vlaanderen", "Wallonië", "Brussel"] as GewestEreloon[]).map((g) => (
                  <button
                    key={g}
                    onClick={() => setGewest(g)}
                    className={`flex-1 py-1.5 text-xs font-medium rounded-md border transition-colors ${
                      gewest === g
                        ? "bg-indigo-600 text-white border-indigo-600"
                        : "border-slate-300 text-slate-600 hover:border-indigo-300"
                    }`}
                  >
                    {g}
                  </button>
                ))}
              </div>
            </div>

            {/* Enige eigen woning? */}
            {meta.heeftEigenWoning && (
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Enige eigen woning?
                </label>
                <div className="flex gap-2">
                  <button
                    onClick={() => setEigenWoning(true)}
                    className={`flex-1 py-1.5 text-xs font-medium rounded-md border transition-colors ${
                      eigenWoning
                        ? "bg-indigo-600 text-white border-indigo-600"
                        : "border-slate-300 text-slate-600 hover:border-indigo-300"
                    }`}
                  >
                    Ja — verlaagd tarief
                  </button>
                  <button
                    onClick={() => setEigenWoning(false)}
                    className={`flex-1 py-1.5 text-xs font-medium rounded-md border transition-colors ${
                      !eigenWoning
                        ? "bg-indigo-600 text-white border-indigo-600"
                        : "border-slate-300 text-slate-600 hover:border-indigo-300"
                    }`}
                  >
                    Nee — algemeen tarief
                  </button>
                </div>
              </div>
            )}

            {/* Schenkingswijze (honorariumschaal) */}
            {meta.heeftSchenkingsWijze && (
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Type schenking (schaal honorarium)
                </label>
                <div className="flex flex-col gap-1.5">
                  {(["voorschot", "buiten_deel"] as SchenkingsWijze[]).map((w) => (
                    <button
                      key={w}
                      onClick={() => setSchenkingsWijze(w)}
                      className={`px-3 py-2 text-xs font-medium rounded-md border text-left transition-colors ${
                        schenkingsWijze === w
                          ? "bg-indigo-600 text-white border-indigo-600"
                          : "border-slate-300 text-slate-600 hover:border-indigo-300"
                      }`}
                    >
                      {schenkingsWijzeLabels[w]}
                      <span className={`block text-[10px] font-normal mt-0.5 ${schenkingsWijze === w ? "text-indigo-200" : "text-slate-400"}`}>
                        {w === "voorschot"
                          ? "Schaal F — art. 39 §3 KB 16.12.1950"
                          : "Schaal H — art. 39 §2 KB 16.12.1950"}
                      </span>
                    </button>
                  ))}
                </div>
                <p className="text-[11px] text-slate-400 mt-1.5">
                  Bepaalt enkel de honorariumschaal. De schenkbelasting hieronder hangt af van de relatie.
                </p>
              </div>
            )}

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

            {/* Verbonden akte? */}
            <div className="pt-2 border-t border-slate-100">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={verbondenAkte}
                  onChange={(e) => setVerbondenAkte(e.target.checked)}
                  className="rounded border-slate-300"
                />
                <span className="text-sm text-slate-600">
                  Verbonden / accessoire akte (vanaf de 2<sup>e</sup>)
                </span>
              </label>
              <p className="text-[11px] text-slate-400 mt-1 ml-6">
                Verlaagt de forfaitaire administratieve kosten naar het tarief voor
                samenhangende akten.
              </p>
            </div>
          </div>

          {/* Results */}
          <div className="space-y-4">
            {!heeftResultaat ? (
              <div className="bg-white rounded-xl border border-slate-200 p-10 text-center text-slate-400">
                <div className="text-5xl mb-3">🧮</div>
                <p className="text-sm">Voer een bedrag in om de berekening te starten</p>
              </div>
            ) : (
              <>
                {/* Honorarium */}
                <div className="bg-white rounded-xl border border-slate-200 p-5">
                  <div className="flex items-center justify-between mb-1">
                    <h3 className="font-semibold text-slate-800">Notarieel ereloon</h3>
                    <button
                      onClick={() => setToonSchijven((v) => !v)}
                      className="text-xs text-indigo-600 hover:text-indigo-800"
                    >
                      {toonSchijven ? "Verberg schijven ▲" : "Toon schijven ▼"}
                    </button>
                  </div>
                  <p className="text-xs text-slate-400 mb-3">
                    Schaal {hon.baremaCode} — {hon.baremaOmschrijving}
                  </p>

                  {toonSchijven && (
                    <div className="mb-3 bg-slate-50 rounded-lg p-3 space-y-1">
                      <div className="grid grid-cols-3 gap-1 text-[10px] text-slate-400 uppercase tracking-wide font-medium mb-1">
                        <span>Schijf</span>
                        <span className="text-right">%</span>
                        <span className="text-right">Bedrag</span>
                      </div>
                      {hon.vastGedeelte > 0 && (
                        <div className="grid grid-cols-3 gap-1 text-xs text-slate-600">
                          <span className="truncate">Vast gedeelte</span>
                          <span className="text-right">—</span>
                          <span className="text-right font-mono">{euro(hon.vastGedeelte)}</span>
                        </div>
                      )}
                      {hon.detail.map((d, i) => (
                        <div key={i} className="grid grid-cols-3 gap-1 text-xs text-slate-600">
                          <span className="truncate">{d.label}</span>
                          <span className="text-right">{d.percentage}%</span>
                          <span className="text-right font-mono">{euro(d.bedrag)}</span>
                        </div>
                      ))}
                      <p className="text-[10px] text-slate-400 pt-1.5 border-t border-slate-200 mt-1">
                        KB 16.12.1950, schaal {hon.baremaCode}
                        {hon.vastGedeelte > 0 && " — vast gedeelte geïndexeerd 2026"}
                      </p>
                    </div>
                  )}

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

                  <div className="flex justify-between font-semibold text-slate-800 text-sm">
                    <span>Honorarium (excl. btw)</span>
                    <span className="font-mono">{euro(hon.honorarium)}</span>
                  </div>
                </div>

                {/* Aktekosten */}
                <div className="bg-white rounded-xl border border-slate-200 p-5">
                  <h3 className="font-semibold text-slate-800 mb-1">
                    Getarifeerde aktekosten
                  </h3>
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-slate-700">{aktekost.label}</p>
                      <p className="text-xs text-slate-400 mt-0.5">{aktekost.opmerking}</p>
                    </div>
                    <span className="font-mono font-semibold text-slate-800 text-sm shrink-0">
                      {euro(aktekost.bedrag)}
                    </span>
                  </div>
                </div>

                {/* BTW */}
                <div className="bg-white rounded-xl border border-slate-200 p-5">
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between text-slate-600">
                      <span>Honorarium + aktekosten (excl. btw)</span>
                      <span className="font-mono">{euro(basisExclBtw)}</span>
                    </div>
                    <div className="flex justify-between text-slate-600">
                      <span>Btw 21%</span>
                      <span className="font-mono">{euro(btw)}</span>
                    </div>
                    <div className="flex justify-between font-semibold text-slate-800 border-t border-slate-100 pt-2">
                      <span>Ereloon + kosten incl. btw</span>
                      <span className="font-mono">{euro(basisExclBtw + btw)}</span>
                    </div>
                  </div>
                </div>

                {/* Overheidsrechten */}
                {heffing && (
                  <div className="bg-white rounded-xl border border-slate-200 p-5">
                    <h3 className="font-semibold text-slate-800 mb-3">Overheidsrechten</h3>
                    <div className="space-y-2">
                      <div className="flex items-start justify-between gap-3">
                        <div className="flex-1 min-w-0">
                          <p className="text-sm text-slate-700">{heffing.label}</p>
                          <div className="flex flex-wrap gap-1 mt-0.5">
                            {heffing.percentage !== null && (
                              <span className="text-xs text-slate-400">{heffing.percentage}%</span>
                            )}
                            {heffing.isIndicatief && (
                              <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded">
                                indicatief
                              </span>
                            )}
                          </div>
                        </div>
                        <span className="font-mono font-semibold text-slate-800 text-sm shrink-0">
                          {euro(heffing.bedrag)}
                        </span>
                      </div>

                      {heffing.details && (
                        <div className="bg-slate-50 rounded-lg p-3 space-y-1">
                          <div className="grid grid-cols-3 gap-1 text-[10px] text-slate-400 uppercase tracking-wide font-medium mb-1">
                            <span>Schijf</span>
                            <span className="text-right">%</span>
                            <span className="text-right">Belasting</span>
                          </div>
                          {heffing.details.map((d, i) => (
                            <div key={i} className="grid grid-cols-3 gap-1 text-xs text-slate-600">
                              <span className="truncate">{d.label}</span>
                              <span className="text-right">{d.percentage}%</span>
                              <span className="text-right font-mono">{euro(d.bedrag)}</span>
                            </div>
                          ))}
                        </div>
                      )}

                      {heffing.opmerking && (
                        <p className="text-xs text-slate-400">{heffing.opmerking}</p>
                      )}
                      {heffingWetRefs.length > 0 && <WetReferentie refs={heffingWetRefs} />}
                    </div>
                  </div>
                )}

                {/* Hypothecaire retributies */}
                {retributies.length > 0 && (
                  <div className="bg-white rounded-xl border border-slate-200 p-5">
                    <h3 className="font-semibold text-slate-800 mb-3">
                      Hypothecaire retributies{" "}
                      <span className="text-xs font-normal text-slate-400">
                        (kantoor Rechtszekerheid)
                      </span>
                    </h3>
                    <div className="space-y-2 text-sm">
                      {retributies.map((r) => (
                        <div key={r.label} className="flex items-start justify-between gap-2">
                          <span className="text-slate-600">
                            {r.label}
                            {r.opmerking && (
                              <span className="text-slate-400 text-xs block">{r.opmerking}</span>
                            )}
                          </span>
                          <span className="font-mono text-slate-600 shrink-0">
                            {euro(r.bedrag)}
                          </span>
                        </div>
                      ))}
                      <div className="flex justify-between font-medium text-slate-700 border-t border-slate-100 pt-2 mt-1">
                        <span>Subtotaal retributies</span>
                        <span className="font-mono">{euro(retributiesTotaal)}</span>
                      </div>
                    </div>
                  </div>
                )}

                {/* Totaal */}
                <div className="bg-indigo-600 rounded-xl p-5 text-white">
                  <div className="flex items-center justify-between mb-4">
                    <div>
                      <div className="font-bold text-lg">Totale kostprijs</div>
                      <div className="text-indigo-200 text-xs">
                        Indicatief — excl. diverse individualiseerbare uitgaven
                      </div>
                    </div>
                    <div className="text-3xl font-bold">{euro(totaal)}</div>
                  </div>
                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs text-center">
                    {[
                      { label: "Ereloon", value: euro(hon.honorarium) },
                      { label: "Aktekosten", value: euro(aktekost.bedrag) },
                      { label: "Btw 21%", value: euro(btw) },
                      {
                        label: "Rechten",
                        value: euro((heffing?.bedrag ?? 0) + retributiesTotaal),
                      },
                    ].map(({ label, value }) => (
                      <div key={label} className="bg-indigo-700 rounded-lg p-2">
                        <div className="text-indigo-200">{label}</div>
                        <div className="font-semibold mt-0.5">{value}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <p className="text-xs text-slate-400 text-center px-4">
                  Alle bedragen zijn indicatief. Honoraria volgens KB 16.12.1950
                  (geconsolideerd 22.11.2022), vaste gedeelten en forfaits geïndexeerd
                  op 01/01/2026. Retributies volgens KB 14.09.2016. Raadpleeg het
                  notariskantoor voor een definitieve afrekening.
                </p>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}