// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/MarketPriceCard.tsx : « Prix et marché » — juste valeur estimée
//   (fairvalue.py) : valeur, fourchette, écart, confiance, histogramme du
//   segment (ce loyer en orange, juste valeur en tiret), méthodologie en
//   accordéon. Données : Res<FairValueDetail> (squelette / vide / erreur).
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { FairValueDetail, Listing, fmtPrice } from "../api";
import { IcoScale } from "../components/Icons";
import { PriceCapsule } from "./PropertyHero";
import { ComparaisonPrix } from "./synthese";
import { Accordion, ErrorState, SectionCard, SkeletonLines, StatTile, NBSP } from "./ui";
import { Res } from "./useFicheData";

const CONF = { fort: "Confiance forte", moyen: "Confiance moyenne", faible: "Estimation indicative" } as const;

function Histo({ d, price }: { d: FairValueDetail; price: number }) {
  const bins = d.histogram;
  if (!bins || bins.length < 4) return null;
  const W = 320, H = 92, top = 18, bottom = 16;
  const lo = bins[0].x0, hi = bins[bins.length - 1].x1;
  if (hi <= lo) return null;
  const max = Math.max(...bins.map((b) => b.n), 1);
  const x = (v: number) => ((Math.min(Math.max(v, lo), hi) - lo) / (hi - lo)) * W;
  const bw = W / bins.length;
  const plotH = H - top - bottom;
  const priceX = x(price), fvX = x(d.fv);
  const close = Math.abs(priceX - fvX) < 64;
  const anchor = (px: number) => (px < 56 ? "start" : px > W - 56 ? "end" : "middle");
  return (
    <svg className="lk-histo" viewBox={`0 0 ${W} ${H}`} role="img"
         aria-label={`Position du loyer (${fmtPrice(price)}) parmi ${d.segment_n} annonces comparables`}>
      {bins.map((b, i) => {
        const h = Math.max(1.5, (b.n / max) * plotH);
        const on = price >= b.x0 && price < b.x1;
        return (
          <rect key={i} className={`lk-histo-bar ${on ? "on" : ""}`} x={i * bw + 1} y={H - bottom - h}
                rx="2" width={Math.max(1, bw - 2)} height={h}>
            <title>{`${b.x0} $ – ${b.x1} $ : ${b.n} annonce${b.n > 1 ? "s" : ""}`}</title>
          </rect>
        );
      })}
      <rect x={x(d.fv_low)} y={H - bottom} width={Math.max(2, x(d.fv_high) - x(d.fv_low))} height="3" rx="1.5" fill="#c9cac4" />
      <line x1={fvX} x2={fvX} y1={top - 2} y2={H - bottom} stroke="#4d5551" strokeWidth="1.5" strokeDasharray="3 3" />
      {!close && <text x={fvX} y={top - 7} textAnchor={anchor(fvX)} className="lk-histo-lbl fv">Juste valeur</text>}
      <line x1={priceX} x2={priceX} y1={top - 2} y2={H - bottom} stroke="#141814" strokeWidth="2" />
      <text x={priceX} y={close ? top - 7 : H - 4} textAnchor={anchor(priceX)} className="lk-histo-lbl">Ce loyer{close ? " / juste valeur" : ""}</text>
      <text x="1" y={H - 4} className="lk-histo-axis" textAnchor="start">{lo} $</text>
      <text x={W - 1} y={H - 4} className="lk-histo-axis" textAnchor="end">{hi} $</text>
    </svg>
  );
}

export default function MarketPriceCard({ l, fv, cmp, onRetry }: {
  l: Listing; fv: Res<FairValueDetail>; cmp: ComparaisonPrix | null; onRetry: () => void;
}) {
  if (l.price == null) return null;
  const d = fv.status === "ok" ? fv.data : null;
  return (
    <SectionCard id="prix" title="Prix et marché" icon={<IcoScale size={18} />}
                 aside={cmp && <PriceCapsule cmp={cmp} short />}>
      {fv.status === "loading" && <SkeletonLines n={4} />}
      {fv.status === "error" && <ErrorState onRetry={onRetry}>Analyse de prix temporairement indisponible.</ErrorState>}
      {(fv.status === "na" || (d && d.verdict == null)) && !d && (
        <p className="lk-fine meth">Pas d'analyse de prix pour cette annonce (loyer absent ou segment sans comparables).</p>
      )}
      {d && (
        <>
          <div className="lk-kpis cols-3">
            <StatTile accent value={fmtPrice(l.price)} label="Loyer demandé" />
            <StatTile value={fmtPrice(d.fv)} label="Juste valeur estimée" />
            <StatTile value={`${fmtPrice(d.fv_low)} – ${fmtPrice(d.fv_high)}`} label="Fourchette estimée" />
          </div>
          {d.verdict == null && (
            <p className="lk-note info">
              {CONF[d.confidence]} — pas assez de comparables fiables pour classer ce loyer.
            </p>
          )}
          <Histo d={d} price={l.price} />
          <div className="lk-meta">
            <span>{CONF[d.confidence]}</span>
            <span><b>{d.segment_n.toLocaleString("fr-CA")}</b> annonces comparables</span>
            {d.comps > 0 && <span><b>{d.comps}</b> voisines retenues</span>}
          </div>
          <Accordion title="Méthodologie de la juste valeur" small>
            <p>
              Estimation indicative recalculée en continu à partir des annonces comparables du marché
              (même segment{NBSP}: nombre de chambres, ville, période), méthode {d.method}, modèle {d.model_version}.
              Ce n'est pas une évaluation officielle.{" "}
              <Link to="/juste-valeur">Comment est calculée la juste valeur ?</Link>
            </p>
          </Accordion>
        </>
      )}
    </SectionCard>
  );
}