// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/Financing.tsx : “Finance this home” (listing page) —
//   Canadian mortgage calculator plugged into the REAL observed rates
//   (immoka/mortgage). Semi-annual compounding for fixed rates, CMHC shown
//   separately, stress test, per-bank comparator, rate history. Every rate
//   shows its provenance and freshness.
// -----------------------------------------------------------------------------
import { useEffect, useMemo, useRef, useState } from "react";
import { Link } from "react-router-dom";
import {
  MortgageBest, MortgageCalc, calculateMortgage, fetchMortgageBest,
  fmtPrice, fmtRate,
} from "../api";
import RateHistory from "./RateHistory";

const FREQS: [string, string][] = [
  ["monthly", "Monthly"],
  ["semimonthly", "Semi-monthly (24/yr)"],
  ["biweekly", "Bi-weekly"],
  ["accelerated-biweekly", "Accelerated bi-weekly"],
  ["weekly", "Weekly"],
  ["accelerated-weekly", "Accelerated weekly"],
];
const TERMS: [number, string][] = [
  [12, "1 year"], [24, "2 years"], [36, "3 years"], [48, "4 years"],
  [60, "5 years"], [84, "7 years"], [120, "10 years"],
];
const KIND_EN: Record<string, string> = {
  posted: "posted rate", special: "special offer",
};
const INSURED_EN: Record<string, string> = {
  insured: "insured", insurable: "insurable", uninsured: "uninsured",
  unknown: "",
};

const nf = (n: number) => n.toLocaleString("en-CA", { maximumFractionDigits: 0 });
const money = (n: number | null | undefined) =>
  n == null ? "—" : "$" + n.toLocaleString("en-CA", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

/** Readable freshness of a rate observation. */
function freshness(ageMinutes: number): string {
  if (ageMinutes < 60) return `${ageMinutes} min ago`;
  if (ageMinutes < 48 * 60) return `${Math.round(ageMinutes / 60)} h ago`;
  return `${Math.round(ageMinutes / 1440)} d ago`;
}

export default function Financing({ price: askingPrice }:
    { price: number | null }) {
  const [price, setPrice] = useState<number>(askingPrice ?? 0);
  const [down, setDown] = useState<number>(Math.round((askingPrice ?? 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 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));

  // debounced recompute: the rates come from the engine, never the browser
  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("Rates momentarily unavailable — try again later."));
    }, 350);
    return () => window.clearTimeout(timer.current);
  }, [price, down, amort, term, rateType, freq]);

  // per-bank comparator (same type/term as the scenario)
  useEffect(() => {
    setBest(null);
    fetchMortgageBest(rateType, term).then(setBest).catch(() => setBest(null));
  }, [rateType, term]);

  const monthlyCost = useMemo(() => {
    if (!res) return null;
    const parts: { k: string; v: number }[] = [
      { k: "Mortgage payment (monthly equivalent)", v: res.payment_monthly_equivalent },
    ];
    return { parts, total: parts.reduce((s, p) => s + p.v, 0) };
  }, [res]);

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

  return (
    <section className="f-bloc f-mtg" id="financing">
      <h2>Finance this home</h2>
      <p className="mtg-intro">
        Simulation using the <b>real rates published by Canadian banks</b>,
        collected continuously by House-Ka — semi-annual compounding (the
        Canadian standard) for fixed rates.{" "}
        <Link to="/rates">See all rates ↗</Link>
      </p>

      <div className="mtg-form">
        <label>
          <span>Price</span>
          <input type="number" inputMode="numeric" min={1} value={price || ""}
            onChange={(e) => setPrice(Number(e.target.value) || 0)} />
        </label>
        <label>
          <span>Down payment ($)</span>
          <input type="number" inputMode="numeric" min={0} value={down || ""}
            onChange={(e) => setDown(Number(e.target.value) || 0)} />
        </label>
        <label>
          <span>Down payment (%)</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>Amortization</span>
          <select value={amort} onChange={(e) => setAmort(Number(e.target.value))}>
            {[10, 15, 20, 25, 30].map((a) => <option key={a} value={a}>{a} years</option>)}
          </select>
        </label>
        <label>
          <span>Term</span>
          <select value={term} onChange={(e) => setTerm(Number(e.target.value))}>
            {TERMS.map(([m, l]) => <option key={m} value={m}>{l}</option>)}
          </select>
        </label>
        <label>
          <span>Rate type</span>
          <select value={rateType}
            onChange={(e) => setRateType(e.target.value as "fixed" | "variable")}>
            <option value="fixed">Fixed</option>
            <option value="variable">Variable</option>
          </select>
        </label>
        <label>
          <span>Frequency</span>
          <select value={freq} onChange={(e) => setFreq(e.target.value)}>
            {FREQS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
          </select>
        </label>
      </div>

      {err && <p className="mtg-err">{err}</p>}

      {res && (
        <>
          <div className="mtg-resultat">
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Payment</span>
              <span className="mtg-kpi-v">{money(res.payment)}</span>
              <span className="mtg-kpi-sub">
                {FREQS.find(([v]) => v === freq)?.[1].toLowerCase()}
                {freq !== "monthly" && ` · equiv. ${money(res.payment_monthly_equivalent)}/month`}
              </span>
            </div>
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Rate used</span>
              <span className="mtg-kpi-v">{fmtRate(res.inputs.rate)}</span>
              {src && (
                <span className="mtg-kpi-sub">
                  {src.institution} — {src.product_name}{" "}
                  ({KIND_EN[src.kind] ?? src.kind}
                  {INSURED_EN[src.insured_status ?? "unknown"]
                    ? `, ${INSURED_EN[src.insured_status ?? "unknown"]}` : ""})
                </span>
              )}
            </div>
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Mortgage</span>
              <span className="mtg-kpi-v">{fmtPrice(res.principal)}</span>
              <span className="mtg-kpi-sub">
                down payment {fmtPrice(res.inputs.down_payment)} ({res.inputs.down_payment_pct.toLocaleString("en-CA")}%)
              </span>
            </div>
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Stress test</span>
              <span className="mtg-kpi-v">{money(res.qualifying.payment)}</span>
              <span className="mtg-kpi-sub">qualifying at {fmtRate(res.qualifying.rate)}</span>
            </div>
          </div>

          {src && (
            <p className="mtg-source fine">
              Rate observed at <b>{src.institution}</b> {freshness(src.age_minutes)}
              {src.stale && " ⚠ data older than 24 h"} ·{" "}
              {src.source_url && (
                <a href={src.source_url} target="_blank" rel="noopener noreferrer">
                  official source ↗
                </a>
              )}
            </p>
          )}

          {ins && ins.required && (
            <div className={`mtg-schl ${ins.eligible ? "" : "mtg-schl-no"}`}>
              <b>Mortgage default insurance (CMHC)</b>
              {ins.eligible ? (
                <ul>
                  <li>Premium: <b>{fmtPrice(ins.premium)}</b> ({ins.premium_rate.toLocaleString("en-CA")}% of the loan, added to the mortgage)</li>
                  <li>Loan-to-value ratio: {ins.ltv?.toLocaleString("en-CA")}%</li>
                  <li>Provincial sales tax on the premium may apply and is due at closing.</li>
                </ul>
              ) : null}
              {ins.issues.map((i, k) => <p className="mtg-issue" key={k}>⚠ {i}</p>)}
            </div>
          )}

          {monthlyCost && (
            <details className="mtg-detail">
              <summary>Estimated real monthly cost</summary>
              <div className="dtable">
                {monthlyCost.parts.map((p) => (
                  <div className="drow" key={p.k}><span>{p.k}</span><b>{money(p.v)}</b></div>
                ))}
                <div className="drow mtg-total"><span>Estimated total</span><b>{money(monthlyCost.total)}</b></div>
              </div>
              <p className="fine">
                Property taxes, heating, electricity, home insurance and condo
                fees are extra.
              </p>
            </details>
          )}

          <details className="mtg-detail">
            <summary>What if rates rise? (stress test)</summary>
            <div className="dtable">
              {res.stress.map((s) => (
                <div className="drow" key={s.bump}>
                  <span>{s.bump === 0 ? "Current rate" : `+${s.bump} point${s.bump > 1 ? "s" : ""}`} — {fmtRate(s.rate)}</span>
                  <b>{money(s.payment)}</b>
                </div>
              ))}
            </div>
            <p className="fine">{res.qualifying.note}</p>
          </details>

          <details className="mtg-detail">
            <summary>At renewal ({TERMS.find(([m]) => m === term)?.[1]})</summary>
            <p className="fine">
              Balance remaining at maturity: <b>{fmtPrice(res.renewal.balance_at_renewal)}</b>{" "}
              (remaining amortization {res.renewal.remaining_amortization_years} years).
              Interest paid during the term: {fmtPrice(res.term.interest_paid)}.
            </p>
            <div className="dtable">
              {res.renewal.scenarios.map((s) => (
                <div className="drow" key={s.bump}>
                  <span>Renewed at {fmtRate(s.rate)} ({s.bump >= 0 ? "+" : ""}{s.bump} pt)</span>
                  <b>{money(s.payment)}</b>
                </div>
              ))}
            </div>
          </details>

          {best && best.per_institution.length > 1 && (
            <details className="mtg-detail">
              <summary>Compare the banks ({best.institutions_count} institutions)</summary>
              <div className="rooms-wrap">
                <table className="rooms mtg-comp">
                  <thead>
                    <tr><th>Institution</th><th>Rate</th><th>Kind</th><th>Payment</th><th>Freshness</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 ? ` (APR ${fmtRate(r.apr)})` : ""}</td>
                        <td>
                          {KIND_EN[r.kind]}
                          {INSURED_EN[r.insured_status] ? ` · ${INSURED_EN[r.insured_status]}` : ""}
                        </td>
                        <td>{res.principal > 0 ? money(estimatePayment(res, r.rate)) : "—"}</td>
                        <td className={r.stale ? "mtg-stale" : ""}>{freshness(r.age_minutes)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p className="fine">
                Comparable products only (same type, same term) — a posted rate
                and a special offer are not the same thing, hence the Kind
                column. Payments estimated on your scenario.
              </p>
            </details>
          )}

          <details className="mtg-detail">
            <summary>Rate history ({rateType} {TERMS.find(([m]) => m === term)?.[1]})</summary>
            <RateHistory rateType={rateType} termMonths={term} />
          </details>

          <details className="mtg-detail">
            <summary>Year-by-year amortization</summary>
            <div className="rooms-wrap">
              <table className="rooms">
                <thead>
                  <tr><th>Year</th><th>Interest</th><th>Principal</th><th>Balance</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 className="fine">
                With the accelerated frequency chosen, the loan is paid off in{" "}
                <b>{res.payoff_years} years</b> instead of {res.inputs.amortization_years}.
              </p>
            )}
          </details>
        </>
      )}

      <p className="fine">
        Indicative tool only — neither a financing offer nor a pre-approval.
        The rates shown are those published by the institutions (source and
        freshness indicated); confirm with the bank or a mortgage broker.
      </p>
    </section>
  );
}

/** Estimated payment at another bank's rate, same scenario (frontend
 *  approximation via the annuity factor — the scenario's official numbers
 *  always come from the engine). */
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 pay = (pct: number) => {
    if (frequency.startsWith("accelerated")) {
      const m = pay0(pct, 12);
      return Math.round((m / (frequency === "accelerated-biweekly" ? 2 : 4)) * 100) / 100;
    }
    return pay0(pct, f);
  };
  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;
  };
  return pay(rate);
}