// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * Pro forma interactif de l'investisseur — « avec les frais et tout le kit ».
 * Loyer moyen implicite qui justifie la valeur, cascade revenus → RNE,
 * financement hypothécaire canadien, cashflow par porte, DSCR, droits de
 * mutation et liquidités requises. Chaque hypothèse est ajustable en direct.
 */
"use client";
import { useState } from "react";
import { buildProforma, DEFAULT_PARAMS, tgaReference } from "@/lib/proforma";
import { useLang } from "./LangContext";

const fmt = (v: number, lang: string, frac = 0) =>
  new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    maximumFractionDigits: frac,
  }).format(v);

function Slider({
  label, value, min, max, step, unit, onChange,
}: {
  label: string; value: number; min: number; max: number; step: number;
  unit: string; onChange: (v: number) => void;
}) {
  return (
    <label className="flex flex-col gap-1">
      <span className="klabel flex items-baseline justify-between">
        {label}
        <span className="vp-display text-[14px] font-bold normal-case tracking-normal text-ink">
          {value.toLocaleString("fr-CA")} {unit}
        </span>
      </span>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="h-2 w-full cursor-pointer appearance-none rounded-full border-[1.5px] border-ink bg-surface-2 accent-[var(--green)]"
      />
    </label>
  );
}

function Row({ k, v, strong, neg }: { k: string; v: string; strong?: boolean; neg?: boolean }) {
  return (
    <div className={`flex items-baseline justify-between gap-3 py-1.5 ${strong ? "border-t-[1.5px] border-ink" : "border-t border-dashed border-[rgba(20,24,20,0.12)]"}`}>
      <span className={strong ? "vp-display text-[13.5px] font-bold uppercase" : "text-[13px] text-ink-2"}>{k}</span>
      <span className={`vp-mono text-[13px] font-bold ${neg ? "text-[var(--danger)]" : strong ? "text-ink" : "text-ink-2"}`}>{v}</span>
    </div>
  );
}

export default function Proforma({
  valeur, doors, valeurRole, municipalite,
}: {
  valeur: number; doors: number; valeurRole: number | null; municipalite: string | null;
}) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const [taux, setTaux] = useState(DEFAULT_PARAMS.tauxHypoPct);
  const [mise, setMise] = useState(DEFAULT_PARAMS.miseDeFondsPct);
  const [amort, setAmort] = useState(DEFAULT_PARAMS.amortAns);
  const [tga, setTga] = useState(tgaReference(doors));
  const [appr, setAppr] = useState(DEFAULT_PARAMS.appreciationPct);

  const pf = buildProforma(valeur, doors, valeurRole, municipalite, {
    tauxHypoPct: taux, miseDeFondsPct: mise, amortAns: amort, tgaPct: tga,
    appreciationPct: appr,
  });

  const DEP_FR: Record<string, string> = {
    taxesMunicipales: fr ? "Taxes municipales (≈1,1 % du rôle)" : "Municipal taxes (≈1.1% of roll)",
    taxeScolaire: fr ? "Taxe scolaire (≈0,1 % du rôle)" : "School tax (≈0.1% of roll)",
    assurances: fr ? "Assurances" : "Insurance",
    entretien: fr ? "Entretien et réparations (5 % RB)" : "Maintenance & repairs (5% GI)",
    gestion: fr ? "Gestion (4 % RB)" : "Management (4% GI)",
    deneigementPelouse: fr ? "Déneigement et pelouse" : "Snow & lawn",
    energieCommuns: fr ? "Énergie des espaces communs" : "Common-area energy",
    reserveRemplacement: fr ? "Réserve de remplacement" : "Replacement reserve",
  };

  return (
    <section>
      <span className="kicker">{fr ? "Approche revenu — interactif" : "Income approach — interactive"}</span>
      <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">
        {fr ? "Pro forma de l'investisseur" : "Investor pro forma"}
      </h2>
      <p className="mt-2 max-w-2xl text-[13.5px] text-ink-2">
        {fr
          ? `Quelle structure de revenus la valeur estimée suppose-t-elle ? Au TGA choisi, ce ${doors <= 6 ? "plex" : "immeuble"} doit générer un loyer moyen de `
          : `What income structure does the estimated value imply? At the chosen cap rate, this building must generate an average rent of `}
        <b className="vp-display text-green-deep">{fmt(pf.loyerMoyenMensuel, lang)}</b>
        {fr ? " par porte par mois. Ajustez les hypothèses — tout recalcule." : " per door per month. Adjust the assumptions — everything recomputes."}
      </p>

      {/* hypothèses ajustables */}
      <div className="vp-card mt-4 grid gap-x-8 gap-y-4 p-5 sm:grid-cols-2 lg:grid-cols-5">
        <Slider label={fr ? "Taux hypothécaire (5 ans)" : "Mortgage rate (5 yr)"} value={taux} min={2.5} max={8.5} step={0.05} unit="%" onChange={setTaux} />
        <Slider label={fr ? "Mise de fonds" : "Down payment"} value={mise} min={5} max={50} step={1} unit="%" onChange={setMise} />
        <Slider label={fr ? "Amortissement" : "Amortization"} value={amort} min={15} max={30} step={1} unit={fr ? "ans" : "yrs"} onChange={setAmort} />
        <Slider label={`TGA (${fr ? "réf. gabarit" : "size ref."} ${tgaReference(doors)} %)`} value={tga} min={3.5} max={8} step={0.05} unit="%" onChange={setTga} />
        <Slider label={fr ? "Appréciation annuelle" : "Annual appreciation"} value={appr} min={0} max={6} step={0.25} unit="%" onChange={setAppr} />
      </div>

      <div className="mt-4 grid items-start gap-4 lg:grid-cols-2">
        {/* état des résultats */}
        <div className="vp-card p-5 sm:p-6">
          <p className="klabel mb-2">{fr ? "État des résultats normalisé (annuel)" : "Normalized operating statement (annual)"}</p>
          <Row k={fr ? `Revenus bruts (${doors} portes × ${fmt(pf.loyerMoyenMensuel, lang)}/mois)` : `Gross income (${doors} doors × ${fmt(pf.loyerMoyenMensuel, lang)}/mo)`} v={fmt(pf.revenusBruts, lang)} />
          <Row k={fr ? `Vacance et mauvaises créances (${pf.params.vacancePct} %)` : `Vacancy & bad debt (${pf.params.vacancePct}%)`} v={fmt(pf.vacance, lang)} neg />
          <Row k={fr ? "Revenus effectifs" : "Effective income"} v={fmt(pf.revenusEffectifs, lang)} strong />
          {pf.depenses.map((d) => (
            <Row key={d.key} k={DEP_FR[d.key] ?? d.key} v={fmt(d.amount, lang)} neg />
          ))}
          <Row k={fr ? `Total des dépenses (${pf.ratioDepensesPct.toFixed(0)} % des RE)` : `Total expenses (${pf.ratioDepensesPct.toFixed(0)}% of EI)`} v={fmt(pf.totalDepenses, lang)} strong neg />
          <Row k={fr ? "Revenu net d'exploitation (RNE)" : "Net operating income (NOI)"} v={fmt(pf.rne, lang)} strong />
          <div className="vp-mono mt-3 flex flex-wrap gap-x-5 gap-y-1 border-t-[1.5px] border-dashed border-[rgba(20,24,20,0.14)] pt-2.5 text-[10.5px] uppercase tracking-[0.05em] text-ink-3">
            <span>TGA {fr ? "implicite" : "implied"} : <b className="text-ink">{pf.tgaImplicitePct.toFixed(2)} %</b></span>
            <span>MRB : <b className="text-ink">× {pf.mrb.toFixed(1)}</b></span>
            <span>{fr ? "RNE/porte" : "NOI/door"} : <b className="text-ink">{fmt(pf.rne / doors, lang)}</b></span>
          </div>
        </div>

        {/* financement + acquisition */}
        <div className="flex flex-col gap-4">
          <div className="vp-card p-5 sm:p-6">
            <p className="klabel mb-2">{fr ? "Financement" : "Financing"}</p>
            <Row k={fr ? `Hypothèque (${100 - pf.params.miseDeFondsPct} % de la valeur)` : `Mortgage (${100 - pf.params.miseDeFondsPct}% of value)`} v={fmt(pf.hypotheque, lang)} />
            <Row k={fr ? `Paiement mensuel (${pf.params.tauxHypoPct.toFixed(2)} %, ${pf.params.amortAns} ans)` : `Monthly payment (${pf.params.tauxHypoPct.toFixed(2)}%, ${pf.params.amortAns} yrs)`} v={fmt(pf.paiementMensuelHypo, lang)} />
            <Row k={fr ? "Service de la dette (annuel)" : "Debt service (annual)"} v={fmt(-pf.serviceDetteAnnuel, lang)} neg />
            <Row k={fr ? "Cashflow avant impôt" : "Pre-tax cashflow"} v={fmt(pf.cashflowAnnuel, lang)} strong neg={pf.cashflowAnnuel < 0} />
            <div className="mt-3 flex flex-wrap gap-2.5">
              <span className={`pill ${pf.dscr >= 1.2 ? "pill-conf-A" : pf.dscr >= 1.0 ? "pill-conf-C" : "pill-conf-D"}`}>
                DSCR {pf.dscr.toFixed(2)}
              </span>
              <span className={`pill ${pf.cashflowMensuelParPorte >= 0 ? "pill-conf-B" : "pill-conf-D"}`}>
                {fmt(pf.cashflowMensuelParPorte, lang)} / {fr ? "porte / mois" : "door / mo"}
              </span>
              <span className={`pill ${pf.cashOnCashPct >= 4 ? "pill-conf-A" : pf.cashOnCashPct >= 0 ? "pill-conf-C" : "pill-conf-D"}`}>
                {fr ? "Rend. liquidités" : "Cash-on-cash"} {pf.cashOnCashPct.toFixed(1)} %
              </span>
            </div>
          </div>
          <div className="vp-card border-ink bg-ink p-5 text-paper sm:p-6">
            <p className="klabel !text-lime mb-2">{fr ? "Liquidités requises — tout le kit" : "Cash required — the whole kit"}</p>
            <Row k={fr ? "Mise de fonds" : "Down payment"} v={fmt(pf.miseDeFonds, lang)} />
            <Row k={fr ? `Droits de mutation${(municipalite ?? "").toLowerCase().includes("montréal") ? " (barème Montréal)" : ""}` : "Transfer tax"} v={fmt(pf.droitsMutation, lang)} />
            <Row k={fr ? "Notaire" : "Notary"} v={fmt(pf.fraisNotaire, lang)} />
            <Row k={fr ? "Inspection" : "Inspection"} v={fmt(pf.fraisInspection, lang)} />
            <div className="mt-2 flex items-baseline justify-between border-t-[1.5px] border-lime pt-2">
              <span className="vp-display text-[14px] font-bold uppercase text-lime">{fr ? "Total à prévoir" : "Total to plan"}</span>
              <span className="vp-display text-[22px] font-bold text-lime">{fmt(pf.liquiditesRequises, lang)}</span>
            </div>
          </div>
        </div>
      </div>
      {/* projection 5 ans + marges de sécurité */}
      <div className="mt-4 grid items-start gap-4 lg:grid-cols-2">
        <div className="vp-card p-5 sm:p-6">
          <p className="klabel mb-2">
            {fr ? `Création de richesse — 5 ans (appréciation ${pf.params.appreciationPct} %/an)` : `Wealth creation — 5 years (${pf.params.appreciationPct}%/yr appreciation)`}
          </p>
          <Row k={fr ? "Capital remboursé — année 1" : "Principal paid — year 1"} v={fmt(pf.capitalAn1, lang)} />
          <Row k={fr ? "Intérêts — année 1" : "Interest — year 1"} v={fmt(-pf.interetsAn1, lang)} neg />
          <Row k={fr ? "Rendement global année 1 (cashflow + capital)" : "Total return year 1 (cashflow + principal)"} v={`${pf.rendementTotalAn1Pct.toFixed(1)} %`} strong />
          <Row k={fr ? "Valeur projetée à 5 ans" : "Projected value in 5 yrs"} v={fmt(pf.valeur5Ans, lang)} />
          <Row k={fr ? "Solde hypothécaire à 5 ans" : "Mortgage balance in 5 yrs"} v={fmt(-pf.soldeHypo5Ans, lang)} neg />
          <Row k={fr ? "Équité à 5 ans" : "Equity in 5 yrs"} v={fmt(pf.equite5Ans, lang)} strong />
          <Row k={fr ? "Gain total 5 ans (cashflows + capital + plus-value)" : "Total 5-yr gain (cashflows + principal + appreciation)"} v={fmt(pf.gainTotal5Ans, lang)} strong />
          <div className="mt-3">
            <span className={`pill ${pf.multipleLiquidites5Ans >= 1.8 ? "pill-conf-A" : pf.multipleLiquidites5Ans >= 1.2 ? "pill-conf-B" : "pill-conf-C"}`}>
              {fr ? "Multiple sur liquidités à 5 ans" : "5-yr equity multiple"} : × {pf.multipleLiquidites5Ans.toFixed(2)}
            </span>
          </div>
        </div>
        <div className="vp-card p-5 sm:p-6">
          <p className="klabel mb-2">{fr ? "Marges de sécurité et sensibilité" : "Safety margins & sensitivity"}</p>
          <Row k={fr ? "Loyer implicite / porte / mois" : "Implied rent / door / mo"} v={fmt(pf.loyerMoyenMensuel, lang)} />
          <Row k={fr ? "Loyer de point mort (cashflow = 0)" : "Breakeven rent (cashflow = 0)"} v={fmt(pf.loyerPointMort, lang)} />
          <Row
            k={fr ? "Marge de sécurité sur les loyers" : "Rent safety margin"}
            v={`${pf.margeSecuriteLoyerPct.toFixed(1)} %`}
            strong
            neg={pf.margeSecuriteLoyerPct < 0}
          />
          <Row
            k={fr ? "Taux hypothécaire de point mort" : "Breakeven mortgage rate"}
            v={pf.tauxPointMortPct != null ? `${pf.tauxPointMortPct.toFixed(2)} %` : fr ? "déjà négatif" : "already negative"}
            strong
          />
          <p className="klabel mb-1.5 mt-4">{fr ? "Cashflow selon le taux" : "Cashflow by rate"}</p>
          <div className="flex flex-wrap gap-2">
            {pf.sensibiliteTaux.map((sc) => (
              <span key={sc.tauxPct} className={`pill ${sc.cashflowAnnuel >= 0 ? "pill-conf-B" : "pill-conf-D"}`}>
                {sc.tauxPct.toFixed(2)} % → {fmt(sc.cashflowAnnuel, lang)}/{fr ? "an" : "yr"} · DSCR {sc.dscr.toFixed(2)}
              </span>
            ))}
          </div>
        </div>
      </div>

      <p className="vp-mono mt-3 text-[10px] uppercase tracking-[0.05em] text-ink-3">
        {fr
          ? "Pro forma indicatif à hypothèses normalisées (loyer implicite dérivé de la valeur estimée et du TGA — pas des baux réels). Taxes approximées depuis la valeur au rôle. Ne constitue pas un conseil financier."
          : "Indicative pro forma with normalized assumptions (implied rent derived from estimated value and cap rate — not actual leases). Taxes approximated from assessed value. Not financial advice."}
      </p>
    </section>
  );
}