// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/MarketCard.tsx : « Prix et marché » — KPI (prix demandé, médiane des
//   comparables, fourchette 25–75 %), jauge de position (percentile), nuage
//   prix / kilométrage des comparables (ce véhicule en orange), PDSF d'origine
//   si connu, historique du prix demandé, méthodologie.
// -----------------------------------------------------------------------------
import { MarketAnalysis, VehicleDetail, fmtDate, fmtPrice } from "../api";
import { Ico } from "../components/Icons";
import { ComparaisonPrix } from "./synthese";
import { PriceCapsule } from "./VehicleHero";
import { Accordion, SectionCard, StatTile, NBSP } from "./ui";

function Scatter({ m, price, km }: { m: MarketAnalysis; price: number; km: number | null }) {
  const pts = m.points;
  if (pts.length < 5) return null;
  const W = 520, H = 220, PAD = { t: 16, r: 14, b: 28, l: 52 };
  const kms = pts.map((d) => d.km).concat(km != null ? [km] : []);
  const ps = pts.map((d) => d.p).concat([price]);
  const kMin = Math.min(...kms), kMax = Math.max(...kms), pMin = Math.min(...ps), pMax = Math.max(...ps);
  const x = (v: number) => PAD.l + (kMax > kMin ? (v - kMin) / (kMax - kMin) : 0.5) * (W - PAD.l - PAD.r);
  const y = (v: number) => H - PAD.b - (pMax > pMin ? (v - pMin) / (pMax - pMin) : 0.5) * (H - PAD.t - PAD.b);
  const fmtK = (v: number) => `${Math.round(v / 1000)} k`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="ak-scatter" role="img" aria-label="Nuage prix / kilométrage des véhicules comparables">
      <line x1={PAD.l} y1={H - PAD.b} x2={W - PAD.r} y2={H - PAD.b} className="axis" />
      <line x1={PAD.l} y1={PAD.t} x2={PAD.l} y2={H - PAD.b} className="axis" />
      <line x1={PAD.l} y1={y(m.median)} x2={W - PAD.r} y2={y(m.median)} className="median" />
      <text x={W - PAD.r} y={y(m.median) - 5} textAnchor="end" className="lbl">médiane {fmtPrice(m.median)}</text>
      {pts.map((d, i) => <circle key={i} cx={x(d.km)} cy={y(d.p)} r={3.5} className="dot" />)}
      {km != null && (
        <g>
          <circle cx={x(km)} cy={y(price)} r={7} className="me" />
          <text x={x(km)} y={y(price) - 12} textAnchor="middle" className="lbl me-lbl">ce véhicule</text>
        </g>
      )}
      <text x={PAD.l} y={H - 8} className="lbl">{fmtK(kMin)} km</text>
      <text x={W - PAD.r} y={H - 8} textAnchor="end" className="lbl">{fmtK(kMax)} km</text>
      <text x={PAD.l - 6} y={y(pMax) + 4} textAnchor="end" className="lbl">{fmtK(pMax)} $</text>
      <text x={PAD.l - 6} y={y(pMin) + 4} textAnchor="end" className="lbl">{fmtK(pMin)} $</text>
    </svg>
  );
}

export default function MarketCard({ v, cmp }: { v: VehicleDetail; cmp: ComparaisonPrix | null }) {
  if (v.price == null) return null;
  const m = v.market;
  const hist = (v.price_history ?? []).filter((h) => h.price != null);
  const msrp = typeof v.details?.msrp === "number" ? (v.details.msrp as number) : null;
  const jours = v.first_seen ? Math.max(0, Math.round((Date.now() / 1000 - v.first_seen) / 86400)) : null;
  return (
    <SectionCard id="prix" title="Prix et marché" icon={<Ico name="scale" size={18} />} aside={cmp && <PriceCapsule cmp={cmp} short />}>
      {m && m.n >= 3 ? (
        <>
          <div className="ak-kpis cols-3">
            <StatTile accent value={fmtPrice(v.price)} label="Prix demandé" />
            <StatTile value={fmtPrice(m.median)} label={`Médiane de ${m.n} comparables`} />
            <StatTile value={`${fmtPrice(m.p25)} – ${fmtPrice(m.p75)}`} label="Fourchette 25–75 %" />
          </div>
          <div className="ak-gauge">
            <svg viewBox="0 0 320 44" role="img" aria-label={`${m.percentile} % des comparables sont moins chers`}>
              <rect className="ak-gauge-track" x="8" y="18" width="304" height="8" rx="4" />
              <rect className="ak-gauge-box" x={8 + 304 * 0.25} y="16" width={304 * 0.5} height="12" rx="4" />
              <circle className="ak-gauge-me" cx={8 + 304 * Math.max(0, Math.min(100, m.percentile)) / 100} cy="22" r="7" />
              <text className="ak-gauge-txt me" x={8 + 304 * Math.max(0, Math.min(100, m.percentile)) / 100} y="42"
                    textAnchor={m.percentile < 18 ? "start" : m.percentile > 82 ? "end" : "middle"}>{m.percentile}{NBSP}% des comparables sont moins chers</text>
            </svg>
            <div className="ak-gauge-lbls"><span className="good">moins cher · {fmtPrice(m.min)}</span><span className="bad">plus cher · {fmtPrice(m.max)}</span></div>
          </div>
          <Scatter m={m} price={v.price} km={v.mileage_km} />
          <div className="ak-meta">
            <span><b>{m.n}</b> {v.make} {v.model.split(" ")[0]}{v.year ? ` ${v.year - 1}–${v.year + 1}` : ""} en vente au Québec</span>
            {msrp != null && msrp > 0 && <span>PDSF d'origine <b>{fmtPrice(msrp)}</b> ({Math.round((1 - v.price / msrp) * 100)}{NBSP}% de moins)</span>}
            {jours != null && jours > 0 && <span><b>{jours}</b> jour{jours > 1 ? "s" : ""} en vente (observé)</span>}
          </div>
        </>
      ) : (
        <>
          <div className="ak-kpis cols-3">
            <StatTile accent value={fmtPrice(v.price)} label="Prix demandé" />
            {msrp != null && msrp > 0 && <StatTile value={fmtPrice(msrp)} label="PDSF d'origine (neuf)" />}
            {jours != null && jours > 0 && <StatTile value={jours} label="Jours en vente (observé)" />}
          </div>
          <p className="ak-fine meth">Pas assez de {v.make} {v.model.split(" ")[0]} comparables en vente pour situer ce prix.</p>
        </>
      )}
      {hist.length >= 2 && (
        <>
          <h3 className="ak-card-sub ak-subtitle">Historique du prix demandé</h3>
          <ul className="ak-tl">
            {hist.slice(0, 8).map((h, i) => {
              const prev = hist[i + 1];
              const cls = prev && prev.price != null ? (h.price! < prev.price ? "baisse" : h.price! > prev.price ? "hausse" : "") : "";
              return (
                <li key={h.ts} className={cls}>
                  <span className="ak-tl-date">{fmtDate(h.ts)}</span>
                  {prev && prev.price != null && prev.price !== h.price
                    ? <>{h.price! < prev.price ? "Baissé" : "Monté"} de {fmtPrice(prev.price)} à <b>{fmtPrice(h.price!)}</b></>
                    : prev ? <>Prix inchangé : <b>{fmtPrice(h.price!)}</b></> : <>Premier prix observé : <b>{fmtPrice(h.price!)}</b></>}
                </li>
              );
            })}
          </ul>
        </>
      )}
      <Accordion title="Méthodologie" small>
        <p>
          Comparables = véhicules de même marque et modèle, année ±1, en vente au Québec dans les sources Auto-Ka, doublons
          (même NIV) exclus. La médiane et la fourchette 25–75 % sont recalculées à chaque affichage ; le percentile indique
          la part des comparables affichés moins cher. L'état du véhicule, les options et l'historique d'entretien ne sont pas
          pris en compte : c'est un repère, pas une évaluation. Le PDSF provient de la fiche constructeur quand il est connu.
        </p>
      </Accordion>
    </SectionCard>
  );
}