"use client";
import { useMemo, useState } from "react";
import { computeMortgage, minDownPayment, transferDuty } from "@/lib/mortgage";
import { fmtPrice, fmtPct } from "@/lib/format";
import { Notice, Stat } from "@/components/ui";

const DEFAULT_RATE = 4.89; // hypothèse éditable — aucun taux « réel » n'est importé ; l'utilisateur saisit le taux de son prêteur

function F({ label, value, set, step = 1, suffix = "" }: { label: string; value: number; set: (v: number) => void; step?: number; suffix?: string }): React.ReactElement {
  return (    <label className="block text-sm"><span className="tv-label">{label}</span><div className="relative mt-1"><input type="number" inputMode="decimal" step={step} value={value} onChange={(e) => set(Number(e.target.value))} className="tv-chip w-full !pl-3 !pr-8 tabular-nums" />{suffix && <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-ink-3">{suffix}</span>}</div></label>
  );
}

export function MortgageWidget({ price: p0 = 500000, city, compact = false, taxes: t0, schoolTaxes: s0, condoFees: c0 }: { price?: number; city?: string | null; compact?: boolean; taxes?: number; schoolTaxes?: number; condoFees?: number }) {
  const [price, setPrice] = useState(p0);
  const [dpPct, setDpPct] = useState(20);
  const [rate, setRate] = useState(DEFAULT_RATE);
  const [amort, setAmort] = useState(25);
  const [freq, setFreq] = useState<12 | 26 | 52>(12);
  const [taxes, setTaxes] = useState(t0 ?? Math.round(p0 * 0.009));
  const [school, setSchool] = useState(s0 ?? Math.round(p0 * 0.0007));
  const [ins, setIns] = useState(90);
  const [condo, setCondo] = useState(c0 ?? 0);
  const [heat, setHeat] = useState(150);
  const dp = Math.round(price * dpPct / 100);
  const r = useMemo(() => computeMortgage({ price, downPayment: dp, rateAnnualPct: rate, amortYears: amort, paymentsPerYear: freq, municipalTaxAnnual: taxes, schoolTaxAnnual: school, insuranceMonthly: ins, condoFeesMonthly: condo, heatingMonthly: heat }), [price, dp, rate, amort, freq, taxes, school, ins, condo, heat]);
  const isMtl = /montr[ée]al/i.test(city ?? "");
  const duty = transferDuty(price, isMtl);
  const closing = duty + 1500 + 1000; // notaire + inspection (ordres de grandeur éditables mentalement)
  return (
    <div className="grid lg:grid-cols-[1fr_1.1fr] gap-5">
      <div className="tv-card p-4 grid grid-cols-2 gap-3">
        <F label="Prix" value={price} set={setPrice} step={1000} suffix="$" />
        <label className="block text-sm"><span className="tv-label">Mise de fonds</span><div className="mt-1 flex items-center gap-2"><input type="range" min={5} max={50} step={1} value={dpPct} onChange={(e) => setDpPct(Number(e.target.value))} className="flex-1 accent-[#e0263c]" aria-label="Mise de fonds en pourcentage" /><span className="text-xs tabular-nums w-24 text-right">{dpPct} % · {fmtPrice(dp, { compact: true })}</span></div></label>
        <F label="Taux d'intérêt (hypothèse)" value={rate} set={setRate} step={0.05} suffix="%" />
        <label className="block text-sm"><span className="tv-label">Amortissement</span><select value={amort} onChange={(e) => setAmort(Number(e.target.value))} className="tv-chip w-full mt-1 appearance-none">{[15, 20, 25, 30].map((y) => <option key={y} value={y}>{y} ans</option>)}</select></label>
        <label className="block text-sm"><span className="tv-label">Fréquence</span><select value={freq} onChange={(e) => setFreq(Number(e.target.value) as 12 | 26 | 52)} className="tv-chip w-full mt-1 appearance-none"><option value={12}>Mensuelle</option><option value={26}>Aux deux semaines</option><option value={52}>Hebdomadaire</option></select></label>
        {!compact && <F label="Taxes municipales (an)" value={taxes} set={setTaxes} step={50} suffix="$" />}
        {!compact && <F label="Taxes scolaires (an)" value={school} set={setSchool} step={10} suffix="$" />}
        <F label="Assurance habitation (mois)" value={ins} set={setIns} step={5} suffix="$" />
        <F label="Frais de condo (mois)" value={condo} set={setCondo} step={10} suffix="$" />
        {!compact && <F label="Chauffage (mois)" value={heat} set={setHeat} step={10} suffix="$" />}
      </div>
      <div className="space-y-3">
        <div className="grid grid-cols-2 gap-3">
          <Stat label={`Versement ${freq === 12 ? "mensuel" : freq === 26 ? "aux deux semaines" : "hebdomadaire"}`} value={fmtPrice(r.payment)} sub={freq !== 12 ? `≈ ${fmtPrice(r.paymentMonthlyEq)} / mois` : `taux ${rate.toLocaleString("fr-CA")} %, ${amort} ans`} />
          <Stat label="Coût mensuel total estimé" value={fmtPrice(r.monthlyAllIn)} sub="hypothèque + taxes + assurance + condo + chauffage" tone="info" />
          <Stat label="Prêt total" value={fmtPrice(r.loan)} sub={r.cmhcPremium > 0 ? `dont prime d'assurance ${fmtPrice(r.cmhcPremium)} (${r.cmhcRatePct} %)` : "sans assurance prêt (mise de fonds ≥ 20 %)"} />
          <Stat label="Intérêts sur la durée" value={fmtPrice(r.totalInterest)} sub={`total remboursé ${fmtPrice(r.totalPaid)}`} />
          <Stat label="Test de résistance" value={fmtPrice(r.stressTest.payment)} sub={`versement mensuel à ${r.stressTest.qualifyingRatePct.toLocaleString("fr-CA")} % (taux + 2 pts, min 5,25 %)`} />
          <Stat label="Frais de clôture (ordre de grandeur)" value={fmtPrice(closing)} sub={`droits de mutation ${fmtPrice(duty)}${isMtl ? " (barème Montréal)" : ""} + notaire ~1 500 $ + inspection ~1 000 $`} />
        </div>
        {r.warnings.map((w) => <Notice key={w} tone="warn">{w}</Notice>)}
        <Notice>Calcul illustratif à partir de vos hypothèses (taux composé semestriellement, barème d'assurance prêt standard, mise de fonds minimale {fmtPct(minDownPayment(price) / price, 1, false)}). Ce n'est ni une offre ni un conseil financier : vérifiez les taux et conditions auprès d'un prêteur.</Notice>
        {!compact && (
          <details className="tv-card p-3 text-sm"><summary className="cursor-pointer font-semibold">Tableau d'amortissement annuel</summary>
            <table className="w-full mt-2 text-xs"><thead><tr className="text-ink-3 text-left"><th className="py-1 font-medium">Année</th><th className="py-1 font-medium text-right">Intérêts</th><th className="py-1 font-medium text-right">Capital</th><th className="py-1 font-medium text-right">Solde</th></tr></thead><tbody>{r.schedule.map((s) => <tr key={s.year} className="border-t border-line"><td className="py-1">{s.year}</td><td className="py-1 text-right tabular-nums">{fmtPrice(s.interest)}</td><td className="py-1 text-right tabular-nums">{fmtPrice(s.principal)}</td><td className="py-1 text-right tabular-nums">{fmtPrice(s.balance)}</td></tr>)}</tbody></table>
          </details>
        )}
      </div>
    </div>
  );
}