// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/MarketPriceCard.tsx : « Prix et marché » — estimation Vrai-Prix
//   (valeur, fourchette, confiance) avec jauge SVG (fourchette, estimation,
//   prix demandé), écart en %, prix au pi², rôle d'évaluation foncière
//   (terrain + bâtiment, année, écart), historique du prix demandé observé par
//   Immo-Ka et temps sur le marché, méthodologie en accordéon. Toutes les
//   données arrivent avec l'annonce : aucun chargement différé.
// -----------------------------------------------------------------------------
import { Listing, fmtDate, fmtPrice } from "../api";
import { Ico } from "../components/Icons";
import { PriceCapsule } from "./PropertyHero";
import { ComparaisonPrix, estLocation, evaluationMunicipale } from "./synthese";
import { Accordion, SectionCard, StatTile, NBSP } from "./ui";

const CONF: Record<string, string> = { A: "Confiance élevée", B: "Confiance bonne", C: "Confiance moyenne", D: "Estimation indicative" };

function Gauge({ lo, hi, est, ask }: { lo: number; hi: number; est: number; ask: number | null }) {
  const W = 320, H = 54;
  const min = Math.min(lo, ask ?? lo) * 0.97, max = Math.max(hi, ask ?? hi) * 1.03;
  const x = (v: number) => 8 + ((Math.min(Math.max(v, min), max) - min) / (max - min)) * (W - 16);
  const anchor = (px: number) => (px < 56 ? "start" : px > W - 56 ? "end" : "middle");
  return (
    <div className="ik-gauge">
      <svg viewBox={`0 0 ${W} ${H}`} role="img"
           aria-label={`Fourchette Vrai-Prix de ${fmtPrice(lo)} à ${fmtPrice(hi)}, estimation ${fmtPrice(est)}${ask != null ? `, prix demandé ${fmtPrice(ask)}` : ""}`}>
        <rect className="ik-gauge-track" x="8" y="24" width={W - 16} height="8" rx="4" />
        <rect className="ik-gauge-box" x={x(lo)} y="22" width={Math.max(4, x(hi) - x(lo))} height="12" rx="4" />
        <line className="ik-gauge-med" x1={x(est)} x2={x(est)} y1="16" y2="40" />
        <text className="ik-gauge-txt" x={x(est)} y="11" textAnchor={anchor(x(est))}>estimation {fmtPrice(est)}</text>
        {ask != null && (
          <>
            <circle className="ik-gauge-me" cx={x(ask)} cy="28" r="6.5" />
            <text className="ik-gauge-txt me" x={x(ask)} y="52" textAnchor={anchor(x(ask))}>prix demandé {fmtPrice(ask)}</text>
          </>
        )}
      </svg>
      <div className="ik-gauge-lbls"><span>{fmtPrice(lo)}</span><span>{fmtPrice(hi)}</span></div>
    </div>
  );
}

export default function MarketPriceCard({ l, cmp }: { l: Listing; cmp: ComparaisonPrix | null }) {
  if (l.price == null) return null;
  const location = estLocation(l);
  const vp = l.vraiprix && l.vraiprix.value != null && !location ? l.vraiprix : null;
  const ev = evaluationMunicipale(l);
  const hist = (l.price_history ?? []).filter((h) => h.price != null);
  const pi2 = l.area_sqft != null && l.area_sqft > 200 && !location ? Math.round(l.price / l.area_sqft) : null;
  const evPct = ev && !location ? Math.round(((l.price - ev.total) / ev.total) * 100) : null;
  const jours = l.days_on_market ?? null;

  return (
    <SectionCard id="prix" title="Prix et marché" icon={<Ico name="scale" size={18} />}
                 aside={cmp && <PriceCapsule cmp={cmp} short />}>
      {vp ? (
        <>
          <div className="ik-kpis cols-3">
            <StatTile accent value={fmtPrice(l.price)} label="Prix demandé" />
            <StatTile value={fmtPrice(vp.value)} label="Estimation Vrai-Prix" />
            <StatTile value={vp.low != null && vp.high != null ? `${fmtPrice(vp.low)} – ${fmtPrice(vp.high)}` : "—"} label="Fourchette estimée" />
          </div>
          {vp.low != null && vp.high != null && vp.high > vp.low && (
            <Gauge lo={vp.low} hi={vp.high} est={vp.value as number} ask={cmp ? l.price : null} />
          )}
          {!cmp && (
            <p className="ik-note info">Prix demandé trop éloigné de l'estimation pour être comparé (type de bien ou annonce atypique).</p>
          )}
          <div className="ik-meta">
            <span>{(vp.confidence && CONF[vp.confidence]) || "Estimation automatisée"}{vp.confidence ? ` (${vp.confidence})` : ""}</span>
            {pi2 != null && <span><b>{pi2.toLocaleString("fr-CA")}{NBSP}$</b> par pi² habitable</span>}
            {jours != null && jours > 0 && <span><b>{jours}</b> jour{jours > 1 ? "s" : ""} sur le marché (observé)</span>}
          </div>
        </>
      ) : (
        <>
          <div className="ik-kpis cols-3">
            <StatTile accent value={fmtPrice(l.price)} label={location ? "Loyer mensuel" : "Prix demandé"} />
            {pi2 != null && <StatTile value={`${pi2.toLocaleString("fr-CA")}${NBSP}$`} label="Par pi² habitable" />}
            {jours != null && jours > 0 && <StatTile value={jours} label="Jours sur le marché (observé)" />}
          </div>
          {!location && <p className="ik-fine meth">Pas d'estimation Vrai-Prix pour cette annonce (adresse non appariée au rôle ou type de bien non couvert).</p>}
        </>
      )}

      {ev && !location && (
        <div className="ik-role">
          <h3 className="ik-card-sub ik-subtitle">Rôle d'évaluation foncière{ev.annee ? ` · ${ev.annee}` : ""}</h3>
          <div className="ik-kpis cols-3">
            <StatTile value={fmtPrice(ev.total)} label="Évaluation municipale" anim={false} />
            {ev.terrain != null && <StatTile value={fmtPrice(ev.terrain)} label="Terrain" anim={false} />}
            {ev.batiment != null && <StatTile value={fmtPrice(ev.batiment)} label="Bâtiment" anim={false} />}
          </div>
          {evPct != null && Math.abs(evPct) <= 300 && (
            <p className="ik-fine" style={{ marginTop: 8 }}>
              Prix demandé <b>{Math.abs(evPct)}{NBSP}% {evPct >= 0 ? "au-dessus" : "sous"}</b> l'évaluation municipale — le rôle triennal
              reflète la valeur au 1ᵉʳ juillet de l'année de référence, pas le marché actuel.
            </p>
          )}
        </div>
      )}

      {hist.length >= 2 && (
        <>
          <h3 className="ik-card-sub ik-subtitle">Historique du prix demandé</h3>
          <ul className="ik-tl">
            {hist.slice(0, 6).map((h, i) => {
              const prev = hist[i + 1];
              const cls = prev && prev.price != null ? (h.price! < prev.price ? "baisse" : "hausse") : "";
              return (
                <li key={h.ts} className={cls}>
                  <span className="ik-tl-date">{fmtDate(h.ts)}</span>
                  {prev && prev.price != null
                    ? <>{h.price! < prev.price ? "Baissé" : "Monté"} de {fmtPrice(prev.price)} à <b>{fmtPrice(h.price!)}</b></>
                    : <>Premier prix observé : <b>{fmtPrice(h.price!)}</b></>}
                </li>
              );
            })}
          </ul>
        </>
      )}

      <Accordion title="Méthodologie" small>
        <p>
          L'estimation Vrai-Prix (service Groupe KA) est produite par un modèle statistique fondé sur les ventes
          comparables récentes, les caractéristiques du bien et le rôle d'évaluation foncière ; la fourchette exprime
          l'incertitude du modèle et la lettre de confiance (A à D) sa fiabilité. Ce n'est pas une évaluation
          agréée. L'historique de prix et le temps sur le marché sont ceux observés par les synchronisations
          Immo-Ka (première observation, pas la date d'inscription à la source).
          {vp && <> <a href={vp.url} target="_blank" rel="noopener noreferrer">Analyse détaillée sur Vrai-Prix ↗</a></>}
        </p>
      </Accordion>
    </SectionCard>
  );
}