// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/PriceAnalysis.tsx: "Rent-Ka price analysis" block (detail page)
//   Estimated fair value + range + deviation + confidence + mini histogram
//   of the rent's position in the market segment distribution.
//   Indicative estimate computed over comparable listings (fairvalue.py).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { FairValueDetail, fetchFairValue, fmtPrice } from "../api";
import FairValueBadge, { fmtDeviation } from "./FairValueBadge";

const CONF_LABEL = { fort: "High confidence", moyen: "Medium confidence",
                     faible: "Indicative estimate" } as const;

/** Mini histogram: segment rent distribution, text markers for "this
 *  rent" and the fair value (never colour alone). */
function MiniHisto({ d, price }: { d: FairValueDetail; price: number }) {
  const bins = d.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), fvX = x(d.fv);
  // spread the labels if both markers are close
  const close = Math.abs(priceX - fvX) < 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 of the rent (${fmtPrice(price)}) among ${d.segment_n} comparable listings`}>
      {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, #2456e6)" : "rgba(204, 85, 0, 0.28)"}>
            <title>{`$${b.x0} – $${b.x1}: ${b.n} listing${b.n > 1 ? "s" : ""}`}</title>
          </rect>
        );
      })}
      {/* fair-value range (band) */}
      <rect x={x(d.fv_low)} y={H - bottom} width={Math.max(2, x(d.fv_high) - x(d.fv_low))}
            height="3.5" rx="1.5" fill="rgba(204, 85, 0, 0.45)" />
      {/* fair-value marker */}
      <line x1={fvX} x2={fvX} y1={top - 2} y2={H - bottom} stroke="var(--accent-deep, #1738a8)"
            strokeWidth="1.6" strokeDasharray="3 3" />
      {!close && (
        <text x={fvX} y={top - 7} textAnchor={lblAnchor(fvX)}
              className="fv-histo-lbl fv-histo-lbl-fv">Fair value</text>
      )}
      {/* asking-rent marker */}
      <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">This rent{close ? " / fair value" : ""}</text>
      {/* axis bounds */}
      <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 PriceAnalysis({ uid, price }: { uid: string; price: number | null }) {
  const [d, setD] = useState<FairValueDetail | null>(null);
  useEffect(() => {
    setD(null);
    fetchFairValue(uid).then(setD).catch(() => setD(null));
  }, [uid]);
  if (!d || price == null) return null;

  const pct = fmtDeviation(d.deviation);
  return (
    <section className="f-bloc f-fairvalue" id="analyse-prix">
      <h2>Rent-Ka price analysis</h2>
      <div className="fv-head">
        <div>
          <div className="fv-value">{fmtPrice(d.fv)} <small>/ month</small></div>
          <div className="fv-range">
            Estimated fair value · range {fmtPrice(d.fv_low)} – {fmtPrice(d.fv_high)}
          </div>
        </div>
        <FairValueBadge verdict={d.verdict} deviation={d.deviation} />
      </div>
      {d.verdict == null && (
        <p className="fine">
          {CONF_LABEL[d.confidence]} — not enough reliable comparables to
          classify this rent; the estimate is provided as an indication.
        </p>
      )}
      <MiniHisto d={d} price={price} />
      <div className="fv-meta">
        {pct && <span>Deviation: <b>{pct}</b> vs fair value</span>}
        <span>{CONF_LABEL[d.confidence]}</span>
        <span>{d.segment_n.toLocaleString("en-CA")} comparable listings</span>
        {d.comps > 0 && <span>{d.comps} neighbours kept</span>}
      </div>
      <p className="fine">
        Indicative estimate computed continuously from comparable market
        listings — not an official appraisal.{" "}
        <Link to="/fair-value">How is fair value calculated?</Link>
      </p>
    </section>
  );
}