// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Rates.tsx : /rates — Mortgage Intelligence.
//   Market view (best/median/variations), per-bank comparator with rate kind
//   (posted vs special) and freshness, history, prime rates, source health.
//   No invented rates: everything comes from the institutions' official
//   pages, with provenance.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import {
  MortgageBest, MortgageIntelligence, MortgageProviderHealth,
  fetchMortgageBest, fetchMortgageIntelligence, fetchMortgageProviders,
  fmtRate,
} from "../api";
import RateHistory from "../components/RateHistory";

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", special: "special offer" };
const INSURED_EN: Record<string, string> = {
  insured: "insured", insurable: "insurable", uninsured: "uninsured", unknown: "",
};

const termLabel = (m: number) => TERMS.find(([t]) => t === m)?.[1] ?? `${m} months`;
const freshness = (min: number) =>
  min < 60 ? `${min} min ago` : min < 48 * 60
    ? `${Math.round(min / 60)} h ago` : `${Math.round(min / 1440)} d ago`;
const varTxt = (v: number | null) =>
  v == null ? "—" : v === 0 ? "stable"
    : `${v > 0 ? "▲ +" : "▼ "}${v.toFixed(2)} pt`;

export default function RatesPage() {
  const [intel, setIntel] = useState<MortgageIntelligence | null>(null);
  const [rateType, setRateType] = useState<"fixed" | "variable">("fixed");
  const [term, setTerm] = useState(60);
  const [best, setBest] = useState<MortgageBest | null>(null);
  const [health, setHealth] = useState<MortgageProviderHealth[]>([]);

  useEffect(() => {
    document.title = "Mortgage rates in Canada — live comparator | House-Ka";
    fetchMortgageIntelligence().then(setIntel).catch(() => setIntel(null));
    fetchMortgageProviders().then((r) => setHealth(r.providers)).catch(() => {});
  }, []);

  useEffect(() => {
    setBest(null);
    fetchMortgageBest(rateType, term).then(setBest).catch(() => setBest(null));
  }, [rateType, term]);

  return (
    <div className="container taux-page">
      <header className="taux-head">
        <h1>Live mortgage rates</h1>
        <p>
          The rates actually published by the big Canadian institutions
          (banks, Desjardins, virtual lenders and monolines), collected
          continuously by House-Ka. Every rate shows its <b>kind</b> (posted or
          special offer), its <b>official source</b> and its <b>freshness</b> —
          never an invented rate, never a stale one without a warning.
        </p>
      </header>

      {intel && intel.products.length > 0 && (
        <section className="f-bloc">
          <h2>Market overview</h2>
          <div className="taux-grid">
            {intel.products.map((p) => (
              <button
                key={`${p.rate_type}-${p.term_months}`}
                className={`taux-card ${p.rate_type === rateType && p.term_months === term ? "on" : ""}`}
                onClick={() => { setRateType(p.rate_type as "fixed" | "variable"); setTerm(p.term_months); }}
              >
                <span className="taux-card-k">
                  {p.rate_type === "fixed" ? "Fixed" : "Variable"} {termLabel(p.term_months)}
                </span>
                <span className="taux-card-v">{fmtRate(p.best)}</span>
                <span className="taux-card-sub">{p.best_institution}</span>
                <span className="taux-card-sub">
                  median {fmtRate(p.median)} · 30 d: {varTxt(p.var_30d)}
                </span>
              </button>
            ))}
          </div>
          {intel.prime_rates.length > 0 && (
            <p className="fine">
              Prime rates:{" "}
              {intel.prime_rates.map((p, i) => (
                <span key={i}>
                  {i > 0 && " · "}
                  {p.institution} <b>{fmtRate(p.rate)}</b>
                </span>
              ))}
            </p>
          )}
        </section>
      )}

      <section className="f-bloc">
        <h2>Compare the institutions</h2>
        <div className="taux-filtres">
          <label>
            <span>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>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>
        </div>

        {best == null ? (
          <p className="fine">No current rate for this product — try another term.</p>
        ) : (
          <>
            <div className="rooms-wrap">
              <table className="rooms mtg-comp">
                <thead>
                  <tr><th>Institution</th><th>Product</th><th>Rate</th><th>Kind</th><th>Freshness</th><th>Source</th></tr>
                </thead>
                <tbody>
                  {best.per_institution.map((r, i) => (
                    <tr key={r.provider} className={i === 0 ? "taux-best" : ""}>
                      <td>{r.institution}{i === 0 && <span className="taux-badge">best</span>}</td>
                      <td>{r.product_name}</td>
                      <td><b>{fmtRate(r.rate)}</b>{r.apr != null ? ` (APR ${fmtRate(r.apr)})` : ""}</td>
                      <td>
                        {KIND_EN[r.kind] ?? r.kind}
                        {INSURED_EN[r.insured_status] ? ` · ${INSURED_EN[r.insured_status]}` : ""}
                      </td>
                      <td className={r.stale ? "mtg-stale" : ""}>{freshness(r.age_minutes)}</td>
                      <td>
                        {r.source_url && (
                          <a href={r.source_url} target="_blank" rel="noopener noreferrer">official ↗</a>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="fine">
              One comparable product per institution (the special offer wins
              over the posted rate). Incomparable products — insured vs
              uninsured, posted vs special — are never mixed in the same
              ranking without saying so.
            </p>
          </>
        )}
      </section>

      <section className="f-bloc">
        <h2>Trend — {rateType} {termLabel(term)}</h2>
        <RateHistory rateType={rateType} termMonths={term} />
      </section>

      {health.length > 0 && (
        <section className="f-bloc">
          <h2>Source freshness</h2>
          <div className="taux-sante">
            {health.map((h) => (
              <span key={h.provider}
                className={`taux-src taux-src-${h.level.toLowerCase()}`}
                title={`${h.current_products} current product(s) — last collection ${freshness(h.age_minutes)}`}>
                {h.institution}
              </span>
            ))}
          </div>
          <p className="fine">
            Green: recent successful collection · yellow: data kept but aging ·
            red: source in error. When a collection fails, the last valid rates
            stay displayed with their date.
          </p>
        </section>
      )}

      <p className="fine">
        Indicative information only, without guarantee — actual conditions
        depend on your file. House-Ka is neither a lender nor a mortgage
        broker.
      </p>
    </div>
  );
}