// -----------------------------------------------------------------------------
// Lou-Ka — Location court terme
// components/CtPriceAnalysis.tsx : bloc « Analyse du prix / nuit » (fiche CT)
//   Position du tarif dans la distribution des hébergements comparables
//   (segment : type + capacité + région touristique, calculé par l'API).
// -----------------------------------------------------------------------------
import { CtPriceContext, fmtNight } from "../ctapi";

export function ctDealBadge(p: CtPriceContext | null) {
  if (!p || p.deviation == null || p.verdict == null) return null;
  const pct = Math.round(Math.abs(p.deviation) * 100);
  if (p.verdict === "sous")
    return { cls: "deal-good", txt: `≈ ${pct} % sous le prix médian du segment` };
  if (p.verdict === "dessus")
    return { cls: "deal-high", txt: `≈ ${pct} % au-dessus du prix médian` };
  return { cls: "deal-ok", txt: "Dans les prix du segment" };
}

function Histo({ p, price }: { p: CtPriceContext; price: number }) {
  const bins = p.histogram;
  if (!bins || bins.length < 4) return null;
  const W = 320, H = 96, 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), medX = x(p.median);
  const close = Math.abs(priceX - medX) < 64;
  const lblAnchor = (px: number) => (px < 56 ? "start" : px > W - 56 ? "end" : "middle");
  return (
    <svg className="fv-histo" viewBox={`0 0 ${W} ${H}`} role="img"
         aria-label={`Position du prix (${price} $/nuit) parmi ${p.n} hébergements comparables`}>
      {bins.map((b, i) => {
        const h = Math.max(1.5, (b.n / max) * plotH);
        const inBin = price >= b.x0 && price < b.x1;
        return (
          <rect key={i} x={i * bw + 1} y={H - bottom - h} rx="2"
                width={Math.max(1, bw - 2)} height={h}
                fill={inBin ? "var(--accent, #ff6a00)" : "rgba(204, 85, 0, 0.28)"}>
            <title>{`${b.x0} $ – ${b.x1} $ : ${b.n} hébergement${b.n > 1 ? "s" : ""}`}</title>
          </rect>
        );
      })}
      {/* fourchette interquartile (bande) */}
      <rect x={x(p.p25)} y={H - bottom} width={Math.max(2, x(p.p75) - x(p.p25))}
            height="3.5" rx="1.5" fill="rgba(204, 85, 0, 0.45)" />
      {/* marqueur médiane */}
      <line x1={medX} x2={medX} y1={top - 2} y2={H - bottom}
            stroke="var(--accent-deep, #cc5500)" strokeWidth="1.6" strokeDasharray="3 3" />
      {!close && (
        <text x={medX} y={top - 7} textAnchor={lblAnchor(medX)}
              className="fv-histo-lbl fv-histo-lbl-fv">Médiane</text>
      )}
      {/* marqueur du prix demandé */}
      <line x1={priceX} x2={priceX} y1={top - 2} y2={H - bottom}
            stroke="var(--ink, #141814)" strokeWidth="2" />
      <text x={priceX} y={close ? top - 7 : H - 4} textAnchor={lblAnchor(priceX)}
            className="fv-histo-lbl">Ce prix{close ? " / médiane" : ""}</text>
      <text x="1" y={H - 4} className="fv-histo-axis" textAnchor="start">{lo} $</text>
      <text x={W - 1} y={H - 4} className="fv-histo-axis" textAnchor="end">{hi} $</text>
    </svg>
  );
}

export default function CtPriceAnalysis({ p, price }:
    { p: CtPriceContext | null; price: number | null }) {
  if (!p || price == null) return null;
  const badge = ctDealBadge(p);
  return (
    <section className="f-bloc f-fairvalue" id="analyse-prix">
      <h2>Analyse du prix Lou-Ka</h2>
      <div className="fv-head">
        <div>
          <div className="fv-value">{fmtNight(p.median)} <small>/ nuit</small></div>
          <div className="fv-range">
            Prix médian du segment · 50 % des prix entre {fmtNight(p.p25)} et {fmtNight(p.p75)}
          </div>
        </div>
        {badge && <div className={`fv-badge ${badge.cls}`}>{badge.txt}</div>}
      </div>
      <Histo p={p} price={price} />
      <div className="fv-meta">
        <span>Segment : <b>{p.segment}</b></span>
        <span>{p.n.toLocaleString("fr-CA")} hébergements comparables</span>
        <span>Moins cher que {100 - p.percentile} % du segment</span>
      </div>
      <p className="fine">
        Comparaison indicative des tarifs affichés (« à partir de ») par les
        sources pour des hébergements du même type dans la même région — les
        prix réels varient selon les dates et la durée du séjour.
      </p>
    </section>
  );
}