// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Taux.tsx : /taux-hypothecaires — Mortgage Intelligence.
//   Vue marché (meilleur/médian/variations), comparateur par banque avec
//   nature du taux (affiché vs spécial) et fraîcheur, historique, taux
//   préférentiels, santé des sources. Aucun taux inventé : tout vient des
//   pages officielles des institutions, avec provenance.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import {
  MortgageBest, MortgageIntelligence, MortgageProviderHealth,
  fetchMortgageBest, fetchMortgageIntelligence, fetchMortgageProviders,
  fmtRate,
} from "../api";
import TauxHistorique from "../components/TauxHistorique";

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: "affiché", special: "offre spéciale" };
const INSURED_FR: Record<string, string> = {
  insured: "assuré", insurable: "assurable", uninsured: "non assuré", unknown: "",
};

const termeLabel = (m: number) => TERMES.find(([t]) => t === m)?.[1] ?? `${m} mois`;
const freshness = (min: number) =>
  min < 60 ? `il y a ${min} min` : min < 48 * 60
    ? `il y a ${Math.round(min / 60)} h` : `il y a ${Math.round(min / 1440)} j`;
const varTxt = (v: number | null) =>
  v == null ? "—" : v === 0 ? "stable"
    : `${v > 0 ? "▲ +" : "▼ "}${v.toFixed(2).replace(".", ",")} pt`;

export default function TauxPage() {
  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 = "Taux hypothécaires au Canada — comparateur en direct | Immo-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>Taux hypothécaires en direct</h1>
        <p>
          Les taux réellement publiés par les grandes institutions canadiennes
          (banques, Desjardins, prêteurs virtuels et monolines), collectés en
          continu par Immo-Ka. Chaque taux indique sa <b>nature</b> (affiché ou
          offre spéciale), sa <b>source officielle</b> et sa <b>fraîcheur</b> —
          jamais de taux inventé ni périmé sans avertissement.
        </p>
      </header>

      {intel && intel.products.length > 0 && (
        <section className="f-bloc">
          <h2>Vue d'ensemble du marché</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" ? "Fixe" : "Variable"} {termeLabel(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">
                  médiane {fmtRate(p.median)} · 30 j : {varTxt(p.var_30d)}
                </span>
              </button>
            ))}
          </div>
          {intel.prime_rates.length > 0 && (
            <p className="fine">
              Taux préférentiels :{" "}
              {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>Comparer les 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">Fixe</option>
              <option value="variable">Variable</option>
            </select>
          </label>
          <label>
            <span>Terme</span>
            <select value={term} onChange={(e) => setTerm(Number(e.target.value))}>
              {TERMES.map(([m, l]) => <option key={m} value={m}>{l}</option>)}
            </select>
          </label>
        </div>

        {best == null ? (
          <p className="fine">Aucun taux courant pour ce produit — essayez un autre terme.</p>
        ) : (
          <>
            <div className="rooms-wrap">
              <table className="rooms mtg-comp">
                <thead>
                  <tr><th>Institution</th><th>Produit</th><th>Taux</th><th>Nature</th><th>Fraîcheur</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">meilleur</span>}</td>
                      <td>{r.product_name}</td>
                      <td><b>{fmtRate(r.rate)}</b>{r.apr != null ? ` (TAP ${fmtRate(r.apr)})` : ""}</td>
                      <td>
                        {KIND_FR[r.kind] ?? r.kind}
                        {INSURED_FR[r.insured_status] ? ` · ${INSURED_FR[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">officielle ↗</a>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="fine">
              Un seul produit comparable par institution (l'offre spéciale prime
              sur le taux affiché). Les produits incomparables — assuré vs non
              assuré, affiché vs spécial — ne sont jamais mélangés dans un même
              classement sans l'indiquer.
            </p>
          </>
        )}
      </section>

      <section className="f-bloc">
        <h2>Évolution — {rateType === "fixed" ? "fixe" : "variable"} {termeLabel(term)}</h2>
        <TauxHistorique rateType={rateType} termMonths={term} />
      </section>

      {health.length > 0 && (
        <section className="f-bloc">
          <h2>Fraîcheur des sources</h2>
          <div className="taux-sante">
            {health.map((h) => (
              <span key={h.provider}
                className={`taux-src taux-src-${h.level.toLowerCase()}`}
                title={`${h.current_products} produit(s) courant(s) — dernière collecte ${freshness(h.age_minutes)}`}>
                {h.institution}
              </span>
            ))}
          </div>
          <p className="fine">
            Vert : collecte récente réussie · jaune : donnée conservée mais
            vieillissante · rouge : source en erreur. En cas d'échec d'une
            collecte, les derniers taux valides restent affichés avec leur date.
          </p>
        </section>
      )}

      <p className="fine">
        Informations indicatives seulement, sans garantie — les conditions
        réelles dépendent de votre dossier. Immo-Ka n'est ni un prêteur ni un
        courtier hypothécaire.
      </p>
    </div>
  );
}