// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/FinancingCard.tsx : « Financement et coût de propriété » — calculateur
//   hypothécaire canadien branché sur les taux RÉELS observés (immoka/mortgage :
//   composition semestrielle pour les fixes, SCHL, test de résistance,
//   renouvellement, comparateur par banque, historique du taux, amortissement),
//   puis COÛT DE PROPRIÉTÉ MENSUEL : versement + taxes municipales/scolaires
//   publiées + copropriété + électricité (estimation Hydro-Québec quand elle
//   existe), chaque poste étiqueté (publié / estimé / inconnu). Reprend toute
//   la logique de l'ancien composant Financement, en accordéons compacts.
// -----------------------------------------------------------------------------
import { useEffect, useMemo, useRef, useState } from "react";
import { Link } from "react-router-dom";
import {
  HydroEstimate, Listing, MortgageBest, MortgageCalc, calculateMortgage, fetchHydro, fetchMortgageBest,
  fmtPrice, fmtRate,
} from "../api";
import { Ico } from "../components/Icons";
import TauxHistorique from "../components/TauxHistorique";
import { estLocation, fraisCoproMensuels, taxesAnnuelles } from "./synthese";
import { Accordion, ErrorState, SectionCard, StatTile, NBSP } from "./ui";
import { Res } from "./useFicheData";

const FREQS: [string, string][] = [
  ["monthly", "Mensuel"], ["semimonthly", "Bimensuel (24/an)"], ["biweekly", "Aux 2 semaines"],
  ["accelerated-biweekly", "Aux 2 semaines accéléré"], ["weekly", "Hebdomadaire"], ["accelerated-weekly", "Hebdomadaire accéléré"],
];
const TERMES: [number, string][] = [[12, "1 an"], [24, "2 ans"], [36, "3 ans"], [48, "4 ans"], [60, "5 ans"], [84, "7 ans"], [120, "10 ans"]];
const KIND_FR: Record<string, string> = { posted: "taux affiché", special: "offre spéciale" };
const INSURED_FR: Record<string, string> = { insured: "assuré", insurable: "assurable", uninsured: "non assuré", unknown: "" };

const nf = (n: number) => n.toLocaleString("fr-CA", { maximumFractionDigits: 0 });
const money = (n: number | null | undefined) =>
  n == null ? "—" : `${n.toLocaleString("fr-CA", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} $`;
const freshness = (m: number) => (m < 60 ? `il y a ${m} min` : m < 48 * 60 ? `il y a ${Math.round(m / 60)} h` : `il y a ${Math.round(m / 1440)} j`);

/** Versement estimé au taux d'une autre banque, même scénario (approximation
 *  frontend par facteur d'annuité — les chiffres officiels du scénario viennent
 *  toujours du moteur). */
function estimatePayment(res: MortgageCalc, rate: number): number {
  const { amortization_years, frequency, compounding } = res.inputs;
  const f = ({ monthly: 12, semimonthly: 24, biweekly: 26, "accelerated-biweekly": 26, weekly: 52, "accelerated-weekly": 52 } as Record<string, number>)[frequency] ?? 12;
  const per = (pct: number, k: number) =>
    compounding === "monthly" ? Math.pow(1 + pct / 100 / 12, 12 / k) - 1 : Math.pow(1 + pct / 100 / 2, 2 / k) - 1;
  const pay0 = (pct: number, k: number) => {
    const i = per(pct, k);
    const n = Math.round(amortization_years * k);
    return Math.round(((res.principal * i) / (1 - Math.pow(1 + i, -n))) * 100) / 100;
  };
  if (frequency.startsWith("accelerated")) {
    const m = pay0(rate, 12);
    return Math.round((m / (frequency === "accelerated-biweekly" ? 2 : 4)) * 100) / 100;
  }
  return pay0(rate, f);
}

export default function FinancingCard({ l, hydro }: { l: Listing; hydro: Res<HydroEstimate> }) {
  const prix = l.price;
  const [price, setPrice] = useState<number>(prix ?? 0);
  const [down, setDown] = useState<number>(Math.round((prix ?? 0) * 0.2));
  const [amort, setAmort] = useState(25);
  const [term, setTerm] = useState(60);
  const [rateType, setRateType] = useState<"fixed" | "variable">("fixed");
  const [freq, setFreq] = useState("monthly");
  const [res, setRes] = useState<MortgageCalc | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [best, setBest] = useState<MortgageBest | null>(null);
  const [h, setH] = useState<HydroEstimate | null>(null);
  const [busy, setBusy] = useState(false);
  const timer = useRef<number>();

  const downPct = price > 0 ? (down / price) * 100 : 0;
  const setDownPct = (pct: number) => setDown(Math.round((price * Math.min(99, Math.max(0, pct))) / 100));

  // recalcul débobiné : les taux viennent du moteur, jamais du navigateur
  useEffect(() => {
    if (!price || price <= 0 || down < 0 || down >= price) { setRes(null); return; }
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(() => {
      calculateMortgage({ price, down_payment: down, amortization_years: amort, term_months: term, frequency: freq, rate_type: rateType })
        .then((r) => { setRes(r); setErr(null); })
        .catch(() => setErr("Taux momentanément indisponibles — réessayez plus tard."));
    }, 350);
    return () => window.clearTimeout(timer.current);
  }, [price, down, amort, term, rateType, freq]);

  // comparateur par banque (mêmes type/terme que le scénario)
  useEffect(() => {
    setBest(null);
    fetchMortgageBest(rateType, term).then(setBest).catch(() => setBest(null));
  }, [rateType, term]);

  const taxes = taxesAnnuelles(l);
  const copro = fraisCoproMensuels(l);
  const hy = h ?? (hydro.status === "ok" ? hydro.data : null);
  const hydroVisible = hy && (hy.disponible || hy.en_attente || !/captcha|configuré|incomplète/.test(hy.raison || ""));
  const lancerHydro = () => {
    setBusy(true);
    fetchHydro(l.address || l.title, { uid: l.uid, lat: l.lat, lng: l.lng }, true).then(setH).catch(() => {}).finally(() => setBusy(false));
  };

  const cout = useMemo(() => {
    if (!res) return null;
    const lignes: { poste: string; statut: "publié" | "estimé" | "inconnu"; montant: number | null }[] = [
      { poste: "Versement hypothécaire (équiv. mensuel)", statut: "estimé", montant: res.payment_monthly_equivalent },
      { poste: "Taxes municipales et scolaires", statut: taxes ? "publié" : "inconnu", montant: taxes ? Math.round(taxes.total / 12) : null },
    ];
    if (copro != null || /condo|copropri/i.test(l.property_type || ""))
      lignes.push({ poste: "Frais de copropriété", statut: copro != null ? "publié" : "inconnu", montant: copro });
    lignes.push({ poste: "Électricité (Hydro-Québec)", statut: hy?.disponible ? "estimé" : "inconnu", montant: hy?.disponible ? Math.round(hy.cout_mensuel!) : null });
    lignes.push({ poste: "Assurance habitation", statut: "inconnu", montant: null });
    const total = lignes.reduce((s, x) => s + (x.montant ?? 0), 0);
    const inconnus = lignes.filter((x) => x.montant == null).map((x) => x.poste.toLowerCase());
    return { lignes, total, inconnus };
  }, [res, taxes, copro, hy, l.property_type]);

  if (prix == null || prix <= 0 || estLocation(l)) return null;
  const src = res?.rate_source ?? null;
  const ins = res?.insurance;

  return (
    <SectionCard id="financement" title="Financement et coût de propriété" icon={<Ico name="bank" size={18} />}
                 sub="Taux réels publiés par les banques canadiennes, collectés en continu par Immo-Ka">
      <div className="ik-form">
        <label><span>Prix</span>
          <input type="number" inputMode="numeric" min={1} value={price || ""} onChange={(e) => setPrice(Number(e.target.value) || 0)} /></label>
        <label><span>Mise de fonds ($)</span>
          <input type="number" inputMode="numeric" min={0} value={down || ""} onChange={(e) => setDown(Number(e.target.value) || 0)} /></label>
        <label><span>Mise de fonds (%)</span>
          <input type="number" inputMode="decimal" min={0} max={99} step={1} value={downPct ? Math.round(downPct * 10) / 10 : ""}
                 onChange={(e) => setDownPct(Number(e.target.value) || 0)} /></label>
        <label><span>Amortissement</span>
          <select value={amort} onChange={(e) => setAmort(Number(e.target.value))}>
            {[10, 15, 20, 25, 30].map((a) => <option key={a} value={a}>{a} ans</option>)}
          </select></label>
        <label><span>Terme</span>
          <select value={term} onChange={(e) => setTerm(Number(e.target.value))}>
            {TERMES.map(([m, t]) => <option key={m} value={m}>{t}</option>)}
          </select></label>
        <label><span>Type de taux</span>
          <select value={rateType} onChange={(e) => setRateType(e.target.value as "fixed" | "variable")}>
            <option value="fixed">Fixe</option><option value="variable">Variable</option>
          </select></label>
        <label><span>Fréquence</span>
          <select value={freq} onChange={(e) => setFreq(e.target.value)}>
            {FREQS.map(([v, t]) => <option key={v} value={v}>{t}</option>)}
          </select></label>
      </div>

      {err && <ErrorState>{err}</ErrorState>}

      {res && (
        <>
          <div className="ik-kpis" style={{ marginTop: 12 }}>
            <StatTile accent value={money(res.payment)} label={<>{FREQS.find(([v]) => v === freq)?.[1]}{freq !== "monthly" && <> · équiv. {money(res.payment_monthly_equivalent)}/mois</>}</>} anim={false} />
            <StatTile value={fmtRate(res.inputs.rate)} label={src ? `${src.institution} — ${KIND_FR[src.kind] ?? src.kind}${INSURED_FR[src.insured_status ?? "unknown"] ? `, ${INSURED_FR[src.insured_status ?? "unknown"]}` : ""}` : "Taux utilisé"} anim={false} />
            <StatTile value={fmtPrice(res.principal)} label={`Hypothèque · mise de fonds ${res.inputs.down_payment_pct.toLocaleString("fr-CA")}${NBSP}%`} anim={false} />
            <StatTile value={money(res.qualifying.payment)} label={`Test de résistance à ${fmtRate(res.qualifying.rate)}`} anim={false} />
          </div>
          {src && (
            <p className="ik-fine" style={{ marginTop: 8 }}>
              Taux observé chez <b>{src.institution}</b> {freshness(src.age_minutes)}{src.stale && " ⚠ donnée de plus de 24 h"}
              {src.source_url && <> · <a href={src.source_url} target="_blank" rel="noopener noreferrer">source officielle ↗</a></>}
              {" "}· <Link to="/taux-hypothecaires">Tous les taux</Link>
            </p>
          )}
          {ins && ins.required && (
            <div className={`ik-note ${ins.eligible ? "info" : "warn"}`}>
              <b>Assurance prêt hypothécaire (SCHL)</b>
              {ins.eligible && (
                <> — prime <b>{fmtPrice(ins.premium)}</b> ({ins.premium_rate.toLocaleString("fr-CA")}{NBSP}% du prêt, ajoutée à l'hypothèque),
                TVQ sur la prime <b>{money(ins.qc_tax)}</b> payable à la clôture, rapport prêt-valeur {ins.ltv?.toLocaleString("fr-CA")}{NBSP}%.</>
              )}
              {ins.issues.map((i, k) => <div key={k}>⚠ {i}</div>)}
            </div>
          )}

          {cout && (
            <>
              <h3 className="ik-card-sub ik-subtitle">Coût de propriété mensuel estimé</h3>
              <ul className="ik-cost">
                {cout.lignes.map((li) => (
                  <li key={li.poste}>
                    <span className="n">{li.poste}<span className={`ik-pill ${li.statut === "publié" ? "observed" : li.statut === "estimé" ? "estimated" : "unknown"}`}>{li.statut}</span></span>
                    <span className={`v ${li.montant == null ? "na" : ""}`}>{li.montant != null ? fmtPrice(li.montant) : "—"}</span>
                  </li>
                ))}
                <li className="total"><span className="n">Total estimé</span><span className="v">≈{NBSP}{fmtPrice(Math.round(cout.total))}{NBSP}/mois</span></li>
                <li className="annuel"><span className="n">soit sur 12 mois</span><span className="v">≈{NBSP}{fmtPrice(Math.round(cout.total * 12))}</span></li>
              </ul>
              {cout.inconnus.length > 0 && (
                <p className="ik-cost-note">Non chiffrables avec les données publiées : {cout.inconnus.join(", ")} — le total réel est plus élevé.</p>
              )}
              {taxes && (
                <p className="ik-cost-note">Taxes publiées par la source : {taxes.municipales != null ? `municipales ${fmtPrice(Math.round(taxes.municipales))}` : ""}{taxes.municipales != null && taxes.scolaires != null ? " · " : ""}{taxes.scolaires != null ? `scolaires ${fmtPrice(Math.round(taxes.scolaires))}` : ""} par année.</p>
              )}
              {hydroVisible && hy && (
                <div className="ik-note info" style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                  <Ico name="drop" size={16} />
                  {hy.disponible ? (
                    <span><b>Électricité : {fmtPrice(hy.cout_mensuel!)}{NBSP}/mois</b> (≈{NBSP}{fmtPrice(hy.cout_annuel!)}{NBSP}/an{hy.kwh_annuel ? `, ${hy.kwh_annuel.toLocaleString("fr-CA")} kWh` : ""}) — estimation Hydro-Québec fondée sur la consommation réelle de la propriété.</span>
                  ) : hy.en_attente ? (
                    <>
                      <span style={{ flex: 1 }}>Estimation Hydro-Québec du coût d'électricité disponible à la demande.</span>
                      <button type="button" className="ik-btn ik-btn-ghost" style={{ minHeight: 38 }} onClick={lancerHydro} disabled={busy}>
                        {busy ? "Estimation en cours…" : "Estimer"}
                      </button>
                    </>
                  ) : (
                    <span>Hydro-Québec n'a pas d'estimation pour cette adresse.</span>
                  )}
                </div>
              )}
            </>
          )}

          <Accordion title="Et si les taux montent ? (test de résistance)" small>
            <div className="ik-facts-rows" style={{ marginTop: 0 }}>
              {res.stress.map((s) => (
                <div className="ik-kv" key={s.bump}>
                  <span className="k">{s.bump === 0 ? "Taux actuel" : `+${s.bump} point${s.bump > 1 ? "s" : ""}`} — {fmtRate(s.rate)}</span>
                  <span className="v">{money(s.payment)}</span>
                </div>
              ))}
            </div>
            <p>{res.qualifying.note}</p>
          </Accordion>

          <Accordion title={`Au renouvellement (${TERMES.find(([m]) => m === term)?.[1]})`} small>
            <p>
              Solde restant à l'échéance : <b>{fmtPrice(res.renewal.balance_at_renewal)}</b> (amortissement résiduel {res.renewal.remaining_amortization_years} ans).
              Intérêts payés pendant le terme : {fmtPrice(res.term.interest_paid)}.
            </p>
            <div className="ik-facts-rows" style={{ marginTop: 0 }}>
              {res.renewal.scenarios.map((s) => (
                <div className="ik-kv" key={s.bump}>
                  <span className="k">Renouvelé à {fmtRate(s.rate)} ({s.bump >= 0 ? "+" : ""}{s.bump} pt)</span>
                  <span className="v">{money(s.payment)}</span>
                </div>
              ))}
            </div>
          </Accordion>

          {best && best.per_institution.length > 1 && (
            <Accordion title={`Comparer les banques (${best.institutions_count} institutions)`} small>
              <div className="ik-table-wrap">
                <table className="ik-table">
                  <thead><tr><th>Institution</th><th>Taux</th><th>Nature</th><th>Versement</th><th>Fraîcheur</th></tr></thead>
                  <tbody>
                    {best.per_institution.map((r) => (
                      <tr key={r.provider}>
                        <td>{r.source_url ? <a href={r.source_url} target="_blank" rel="noopener noreferrer">{r.institution}</a> : r.institution}</td>
                        <td><b>{fmtRate(r.rate)}</b>{r.apr != null ? ` (TAP ${fmtRate(r.apr)})` : ""}</td>
                        <td>{KIND_FR[r.kind]}{INSURED_FR[r.insured_status] ? ` · ${INSURED_FR[r.insured_status]}` : ""}</td>
                        <td>{res.principal > 0 ? money(estimatePayment(res, r.rate)) : "—"}</td>
                        <td style={r.stale ? { color: "var(--ik-warning)" } : undefined}>{freshness(r.age_minutes)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p>Produits comparables seulement (même type, même terme) — un taux « affiché » et une « offre spéciale » ne sont pas la même chose. Versements estimés sur votre scénario.</p>
            </Accordion>
          )}

          <Accordion title={`Historique du taux (${rateType === "fixed" ? "fixe" : "variable"} ${TERMES.find(([m]) => m === term)?.[1]})`} small>
            <TauxHistorique rateType={rateType} termMonths={term} />
          </Accordion>

          <Accordion title="Amortissement année par année" small>
            <div className="ik-table-wrap">
              <table className="ik-table">
                <thead><tr><th>Année</th><th>Intérêts</th><th>Capital</th><th>Solde</th></tr></thead>
                <tbody>
                  {res.annual.map((a) => (
                    <tr key={a.year}><td>{a.year}</td><td>{nf(a.interest)} $</td><td>{nf(a.principal)} $</td><td>{nf(a.balance)} $</td></tr>
                  ))}
                </tbody>
              </table>
            </div>
            {res.payoff_years < res.inputs.amortization_years && (
              <p>Avec la fréquence accélérée choisie, le prêt s'éteint en <b>{res.payoff_years} ans</b> au lieu de {res.inputs.amortization_years}.</p>
            )}
          </Accordion>
        </>
      )}

      <p className="ik-fine" style={{ marginTop: 10 }}>
        Outil indicatif seulement — ni offre de financement ni préapprobation. Les taux affichés sont ceux publiés par les
        institutions (source et fraîcheur indiquées) ; vérifiez auprès de la banque ou d'un courtier hypothécaire.
      </p>
    </SectionCard>
  );
}