// Vrai-Prix — atelier « mon évaluation » d'une propriété à vendre.
/**
 * Quatre temps, comme un rapport d'évaluation par comparaison directe :
 *  01 bassin — ventes réelles (et annonces actives) autour du sujet, l'utilisateur
 *     coche celles qu'il juge comparables (les 12 du moteur sont signalées) ;
 *  02 grille — ajustements en dollars (marché, superficie, âge, + libres),
 *     pré-remplis avec les formules du moteur mais entièrement modifiables ;
 *  03 réconciliation — médiane, moyenne, moyennes pondérées ; valeur conclue ;
 *  04 comparaison — face à la mesure Vrai-Prix déjà calculée (hybride, hédonique,
 *     comparables, coût, rôle indexé, ensemble), au prix demandé et au rôle.
 * Tout est conservé sur l'appareil (localStorage) — aucun envoi au serveur.
 */
"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useLang } from "@/components/LangContext";
import RadarMap, { type RadarComp } from "@/components/RadarMap";
import { TYPE_MATCH } from "@/lib/engine";
import type { CompCandidate, CompsPayload } from "@/lib/comps";
import type { TypeGroupKey } from "@/lib/immoka";
import { groupLabel } from "./ListingCardView";
import { dateFr, mean, median, money, num, pct, round100, signedMoney, sqftToM2, weightedMean, weightedMedian } from "./fmt";

/* ---------------------------------- types --------------------------------- */
export interface WorkbenchHead {
  uid: string;
  address: string | null;
  city: string | null;
  propertyType: string | null;
  group: TypeGroupKey;
  price: number;
  image: string | null;
  bedrooms: number | null;
  bathrooms: number | null;
  areaSqft: number | null;
  lotSqft: number | null;
  yearBuilt: number | null;
  geolocated: boolean;
  eval: {
    est: number | null;
    low: number | null;
    high: number | null;
    confidence: string | null;
    modelEst: number | null;
    compsEst: number | null;
    costEst: number | null;
    roleEst: number | null;
    ensEst: number | null;
    valeurRole: number | null;
    nComps: number | null;
    unitId: string | null;
    evaluatedAt: string | null;
  } | null;
}

interface Extra {
  id: string;
  label: string;
  amount: number;
}
interface CompState {
  adjTime: number;
  adjArea: number;
  adjAge: number;
  extras: Extra[];
  weight: number; // 1..5
  rev?: number; // incrémenté à chaque « ↺ moteur » → remonte les champs (key)
}
type Method = "median" | "mean" | "wmean" | "wmedian";
interface Params {
  months: number;
  radiusKm: number;
  includeListings: boolean;
  sameType: boolean;
}
interface Saved {
  v: 1;
  params: Params;
  selected: string[];
  states: Record<string, CompState>;
  snap: Record<string, CompCandidate>;
  method: Method;
  rangePct: number;
  finalValue: number | null;
}

const DEFAULT_PARAMS: Params = { months: 24, radiusKm: 3, includeListings: true, sameType: true };
const key = (uid: string) => `vrai-prix-avendre:${uid}`;

const adjustedOf = (c: CompCandidate, s: CompState) =>
  c.amount + s.adjTime + s.adjArea + s.adjAge + s.extras.reduce((a, e) => a + (Number.isFinite(e.amount) ? e.amount : 0), 0);
const grossAdjPct = (c: CompCandidate, s: CompState) =>
  ((Math.abs(s.adjTime) + Math.abs(s.adjArea) + Math.abs(s.adjAge) + s.extras.reduce((a, e) => a + Math.abs(e.amount || 0), 0)) / c.amount) * 100;

const fmtDist = (m: number) => (m < 1000 ? `${m} m` : `${(m / 1000).toFixed(1).replace(".", ",")} km`);

/* ------------------------------- sous-blocs -------------------------------- */
function Sect({ num: n, kicker, title, right }: { num: string; kicker: string; title: string; right?: React.ReactNode }) {
  return (
    <header className="sec">
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <span className="sec-num">
          {n} — {kicker}
        </span>
        {right}
      </div>
      <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{title}</h2>
    </header>
  );
}

/** Champ monétaire : texte libre pendant la saisie ; remonté par `key` quand le parent réinitialise. */
function MoneyInput({ value, onChange, hint, label }: { value: number; onChange: (v: number) => void; hint?: string; label: string }) {
  const [txt, setTxt] = useState(() => String(Math.round(value)));
  return (
    <label className="block">
      <span className="klabel">{label}</span>
      <input
        value={txt}
        inputMode="numeric"
        onChange={(e) => {
          const t = e.target.value.replace(/[^\d-]/g, "");
          setTxt(t);
          const n = Number(t);
          if (Number.isFinite(n) && t !== "" && t !== "-") onChange(n);
          if (t === "") onChange(0);
        }}
        className="vp-input vp-mono mt-0.5 text-[13px]"
      />
      {hint && <span className="vp-mono mt-0.5 block text-[9.5px] uppercase tracking-[0.05em] text-ink-3">{hint}</span>}
    </label>
  );
}

/** Graphique à points : chaque repère sur sa ligne, échelle commune, ma valeur en trait vertical. */
function DotPlot({
  rows,
  me,
  lang,
}: {
  rows: { key: string; label: string; value: number | null; band?: [number, number] | null; tone: "me" | "main" | "method" | "ask" | "role" }[];
  me: number | null;
  lang: string;
}) {
  const vals = rows.flatMap((r) => [r.value, r.band?.[0], r.band?.[1]]).filter((v): v is number => v != null && Number.isFinite(v));
  if (!vals.length) return null;
  const lo = Math.min(...vals) * 0.96;
  const hi = Math.max(...vals) * 1.04;
  const W = 760;
  const L = 250;
  const R = 24;
  const RH = 30;
  const H = rows.length * RH + 28;
  const x = (v: number) => L + ((v - lo) / (hi - lo)) * (W - L - R);
  const ticks = 4;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img" aria-label="Comparaison des valeurs">
      {Array.from({ length: ticks + 1 }, (_, i) => lo + ((hi - lo) * i) / ticks).map((v, i) => (
        <g key={i}>
          <line x1={x(v)} y1={4} x2={x(v)} y2={H - 22} stroke="var(--line)" strokeWidth="1" />
          <text x={x(v)} y={H - 8} textAnchor="middle" fontSize="9.5" fontFamily="var(--font-jetbrains), monospace" fill="var(--ink-3)">
            {new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", { notation: "compact", maximumFractionDigits: 0 }).format(v)} $
          </text>
        </g>
      ))}
      {me != null && Number.isFinite(me) && <line x1={x(me)} y1={2} x2={x(me)} y2={H - 22} stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="4 4" />}
      {rows.map((r, i) => {
        const y = i * RH + RH / 2 + 4;
        const color = r.tone === "me" ? "var(--accent)" : r.tone === "ask" ? "var(--danger)" : r.tone === "role" ? "var(--ink-3)" : "var(--ink)";
        return (
          <g key={r.key}>
            <text x={0} y={y + 4} fontSize={r.tone === "me" || r.tone === "main" ? 11.5 : 10.5} fontWeight={r.tone === "me" || r.tone === "main" ? 700 : 500} fontFamily="var(--font-space-grotesk), sans-serif" fill={color}>
              {r.label.length > 40 ? r.label.slice(0, 39) + "…" : r.label}
            </text>
            <line x1={L} y1={y} x2={W - R} y2={y} stroke="var(--line-soft)" strokeWidth="1" />
            {r.band && r.band[1] > r.band[0] && <rect x={x(r.band[0])} y={y - 6} width={Math.max(2, x(r.band[1]) - x(r.band[0]))} height={12} fill={color} opacity={0.14} />}
            {r.value != null && Number.isFinite(r.value) && (
              <>
                {r.tone === "me" ? (
                  <rect x={x(r.value) - 7} y={y - 7} width={14} height={14} transform={`rotate(45 ${x(r.value)} ${y})`} fill={color} stroke="var(--paper)" strokeWidth="1.5" />
                ) : (
                  <circle cx={x(r.value)} cy={y} r={r.tone === "main" ? 6.5 : 5} fill={r.tone === "ask" ? "var(--paper)" : color} stroke={color} strokeWidth={2} />
                )}
                <text x={x(r.value) + (x(r.value) > W - 120 ? -12 : 12)} y={y + 4} textAnchor={x(r.value) > W - 120 ? "end" : "start"} fontSize="10.5" fontWeight="700" fontFamily="var(--font-jetbrains), monospace" fill={color}>
                  {money(r.value, lang)}
                </text>
              </>
            )}
          </g>
        );
      })}
    </svg>
  );
}

/* --------------------------------- atelier --------------------------------- */
export default function EvalWorkbench({ head }: { head: WorkbenchHead }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const [params, setParams] = useState<Params>(DEFAULT_PARAMS);
  const [data, setData] = useState<CompsPayload | null>(null);
  // la réponse (ou l'erreur) porte la clé de la requête qui l'a produite :
  // « en chargement » = la requête courante n'est pas encore servie
  const reqKey = `${head.uid}|${params.months}|${params.radiusKm}|${params.includeListings ? 1 : 0}`;
  const [dataKey, setDataKey] = useState<string | null>(null);
  const [errState, setErrState] = useState<{ key: string; msg: string } | null>(null);
  const error = errState?.key === reqKey ? errState.msg : null;
  const [selected, setSelected] = useState<string[]>([]);
  const [states, setStates] = useState<Record<string, CompState>>({});
  const [snap, setSnap] = useState<Record<string, CompCandidate>>({});
  const [method, setMethod] = useState<Method>("wmedian");
  const [rangePct, setRangePct] = useState(8);
  const [finalValue, setFinalValue] = useState<number | null>(null);
  const [finalTxt, setFinalTxt] = useState("");
  const [hover, setHover] = useState<string | null>(null);
  const [sortBy, setSortBy] = useState<"weight" | "distance" | "date" | "price">("weight");
  const [showAll, setShowAll] = useState(false);
  const [ready, setReady] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  /* --- restauration locale --- */
  useEffect(() => {
    const id = setTimeout(() => {
      try {
        const raw = window.localStorage.getItem(key(head.uid));
        if (raw) {
          const s = JSON.parse(raw) as Saved;
          if (s.v === 1) {
            setParams({ ...DEFAULT_PARAMS, ...s.params });
            setSelected(s.selected ?? []);
            setStates(s.states ?? {});
            setSnap(s.snap ?? {});
            setMethod(s.method ?? "wmedian");
            setRangePct(s.rangePct ?? 8);
            setFinalValue(s.finalValue ?? null);
            if (s.finalValue != null) setFinalTxt(String(Math.round(s.finalValue)));
          }
        }
      } catch {}
      setReady(true);
    }, 0);
    return () => clearTimeout(id);
  }, [head.uid]);

  /* --- sauvegarde locale (débouncée) --- */
  useEffect(() => {
    if (!ready) return;
    const id = setTimeout(() => {
      try {
        const s: Saved = { v: 1, params, selected, states, snap, method, rangePct, finalValue };
        window.localStorage.setItem(key(head.uid), JSON.stringify(s));
      } catch {}
    }, 300);
    return () => clearTimeout(id);
  }, [ready, params, selected, states, snap, method, rangePct, finalValue, head.uid]);

  /* --- bassin de comparables --- */
  useEffect(() => {
    if (!ready || !head.geolocated) return;
    abortRef.current?.abort();
    const ctl = new AbortController();
    abortRef.current = ctl;
    const key = `${head.uid}|${params.months}|${params.radiusKm}|${params.includeListings ? 1 : 0}`;
    const qs = new URLSearchParams({
      uid: head.uid,
      months: String(params.months),
      radius: String(params.radiusKm),
      listings: params.includeListings ? "1" : "0",
      limit: "80",
    });
    fetch(`/api/avendre/comps?${qs}`, { signal: ctl.signal })
      .then(async (r) => {
        if (!r.ok) throw new Error((await r.json()).error ?? r.statusText);
        return r.json() as Promise<CompsPayload>;
      })
      .then((d) => {
        if (ctl.signal.aborted) return;
        setData(d);
        setDataKey(key);
      })
      .catch((e) => {
        if (ctl.signal.aborted) return;
        setErrState({ key, msg: String(e.message ?? e) });
      });
    return () => ctl.abort();
  }, [ready, head.uid, head.geolocated, params.months, params.radiusKm, params.includeListings]);

  const loading = head.geolocated && ready && dataKey !== reqKey && error == null;
  const subject = data?.subject ?? null;
  const subjArea = subject?.floorArea ?? sqftToM2(head.areaSqft);

  const pool = useMemo(() => {
    if (!data) return [] as CompCandidate[];
    let list = data.comps;
    if (params.sameType && subject) {
      const types = TYPE_MATCH[subject.typeProp] ?? TYPE_MATCH.autre;
      list = list.filter((c) => c.kind === "listing" || (c.propertyType != null && types.includes(c.propertyType)));
    }
    const sorted = [...list];
    sorted.sort((a, b) => {
      if (sortBy === "distance") return a.distanceM - b.distanceM;
      if (sortBy === "date") return b.date.localeCompare(a.date);
      if (sortBy === "price") return a.amount - b.amount;
      return Number(b.engineUsed) - Number(a.engineUsed) || b.weight - a.weight;
    });
    return sorted;
  }, [data, params.sameType, sortBy, subject]);

  const visible = showAll ? pool : pool.slice(0, 30);
  const maxW = useMemo(() => Math.max(1e-6, ...pool.map((c) => c.weight)), [pool]);

  const compOf = useCallback((id: string): CompCandidate | undefined => data?.comps.find((c) => c.id === id) ?? snap[id], [data, snap]);

  const toggle = (c: CompCandidate) => {
    setSelected((prev) => (prev.includes(c.id) ? prev.filter((x) => x !== c.id) : [...prev, c.id]));
    setSnap((prev) => (prev[c.id] ? prev : { ...prev, [c.id]: c }));
    setStates((prev) =>
      prev[c.id] ? prev : { ...prev, [c.id]: { adjTime: c.adjTime, adjArea: c.adjArea, adjAge: c.adjAge, extras: [], weight: c.engineUsed ? 4 : 3 } }
    );
  };
  const takeEngine = () => {
    if (!data) return;
    const eng = data.comps.filter((c) => c.engineUsed);
    setSelected(eng.map((c) => c.id));
    setSnap((prev) => ({ ...prev, ...Object.fromEntries(eng.map((c) => [c.id, c])) }));
    setStates((prev) => ({
      ...prev,
      ...Object.fromEntries(eng.map((c) => [c.id, prev[c.id] ?? { adjTime: c.adjTime, adjArea: c.adjArea, adjAge: c.adjAge, extras: [], weight: 4 }])),
    }));
  };
  const clearAll = () => setSelected([]);
  const resetAll = () => {
    setSelected([]);
    setStates({});
    setSnap({});
    setMethod("wmedian");
    setRangePct(8);
    setFinalValue(null);
    setFinalTxt("");
    setParams(DEFAULT_PARAMS);
    try {
      window.localStorage.removeItem(key(head.uid));
    } catch {}
  };
  const patchState = (id: string, patch: Partial<CompState>) => setStates((prev) => ({ ...prev, [id]: { ...prev[id], ...patch } }));

  /* --- réconciliation --- */
  const chosen = selected.map((id) => ({ c: compOf(id), s: states[id] })).filter((x): x is { c: CompCandidate; s: CompState } => !!x.c && !!x.s);
  const adjusted = chosen.map(({ c, s }) => adjustedOf(c, s));
  const weights = chosen.map(({ s }) => s.weight);
  const indications: Record<Method, number | null> = {
    median: median(adjusted),
    mean: mean(adjusted),
    wmean: weightedMean(adjusted, weights),
    wmedian: weightedMedian(adjusted, weights),
  };
  const indication = indications[method];
  const myValue = finalValue ?? (indication != null ? round100(indication) : null);
  const dispersion = (() => {
    if (adjusted.length < 2 || indication == null || indication <= 0) return null;
    const dev = adjusted.map((v) => Math.abs(v - indication) / indication).sort((a, b) => a - b);
    return dev[Math.floor(dev.length / 2)] * 100;
  })();
  const avgGross = chosen.length ? chosen.reduce((a, { c, s }) => a + grossAdjPct(c, s), 0) / chosen.length : null;
  const engineOverlap = chosen.filter(({ c }) => c.engineUsed).length;

  /* --- repères de comparaison --- */
  const ev = head.eval;
  const vpMain = ev?.est ?? data?.engine.estimate ?? null;
  const vpLow = ev?.low ?? data?.engine.low ?? null;
  const vpHigh = ev?.high ?? data?.engine.high ?? null;
  const rows = [
    { key: "me", label: fr ? "Ma valeur conclue" : "My concluded value", value: myValue, band: myValue != null ? ([myValue * (1 - rangePct / 100), myValue * (1 + rangePct / 100)] as [number, number]) : null, tone: "me" as const },
    { key: "vp", label: fr ? "Vrai-Prix — hybride (mesure principale)" : "Vrai-Prix — hybrid (main measure)", value: vpMain, band: vpLow != null && vpHigh != null ? ([vpLow, vpHigh] as [number, number]) : null, tone: "main" as const },
    { key: "model", label: fr ? "Modèle hédonique" : "Hedonic model", value: ev?.modelEst ?? data?.engine.modelEstimate ?? null, tone: "method" as const },
    { key: "comps", label: fr ? "Comparables du moteur" : "Engine comparables", value: ev?.compsEst ?? data?.engine.compsEstimate ?? null, tone: "method" as const },
    { key: "cost", label: fr ? "Méthode du coût" : "Cost approach", value: ev?.costEst ?? null, tone: "method" as const },
    { key: "role_idx", label: fr ? "Rôle indexé (IAAO)" : "Indexed roll (IAAO)", value: ev?.roleEst ?? null, tone: "method" as const },
    { key: "ens", label: fr ? "Ensemble des méthodes" : "Ensemble of methods", value: ev?.ensEst ?? null, tone: "method" as const },
    { key: "ask", label: fr ? "Prix demandé" : "Asking price", value: head.price, tone: "ask" as const },
    { key: "role", label: fr ? "Valeur au rôle" : "Assessed value", value: ev?.valeurRole ?? null, tone: "role" as const },
  ].filter((r) => r.value != null || r.key === "me");

  const diffPct = (v: number | null) => (v != null && myValue != null && v > 0 ? ((myValue - v) / v) * 100 : null);
  const inBand = myValue != null && vpLow != null && vpHigh != null ? myValue >= vpLow && myValue <= vpHigh : null;

  const radarComps: RadarComp[] = visible.map((c) => ({
    id: c.id,
    lat: c.lat,
    lng: c.lng,
    label: `${c.street ?? "—"}${c.city ? `, ${c.city}` : ""}${c.kind === "listing" ? (fr ? " (en vente)" : " (for sale)") : ""}`,
    price: money(c.amount, lang),
    adjusted: money(states[c.id] ? adjustedOf(c, states[c.id]) : c.adjustedPrice, lang),
    date: dateFr(c.date, lang),
    distanceM: c.distanceM,
    weight: selected.includes(c.id) ? 1 : (c.weight / maxW) * 0.5,
  }));

  const step = (n: number, done: boolean, label: string) => (
    <span className={`vp-mono flex items-center gap-1.5 text-[10px] uppercase tracking-[0.08em] ${done ? "text-ink" : "text-ink-3"}`}>
      <span className={`inline-flex h-5 w-5 items-center justify-center border text-[10px] font-bold ${done ? "border-ink bg-ink text-paper" : "border-[var(--line-strong)]"}`}>{n}</span>
      {label}
    </span>
  );

  return (
    <div className="space-y-12 py-8">
      {/* ================= masthead ================= */}
      <section className="rise">
        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b-2 border-ink pb-2.5">
          <nav className="vp-mono flex min-w-0 flex-wrap items-center gap-2 text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
            <Link href="/" className="text-ink-2 hover:text-accent-deep">
              Vrai&nbsp;Prix
            </Link>
            <span aria-hidden="true">/</span>
            <Link href="/a-vendre" className="text-ink-2 hover:text-accent-deep">
              {fr ? "À vendre" : "For sale"}
            </Link>
            <span aria-hidden="true">/</span>
            <Link href={`/a-vendre/${encodeURIComponent(head.uid)}`} className="truncate text-ink-2 hover:text-accent-deep">
              {fr ? "Fiche" : "Listing"}
            </Link>
            <span aria-hidden="true">/</span>
            <span>{fr ? "Mon évaluation" : "My valuation"}</span>
          </nav>
          <div className="flex flex-wrap gap-4 print:hidden">
            {step(1, selected.length > 0, fr ? `Comparables (${selected.length})` : `Comparables (${selected.length})`)}
            {step(2, selected.length > 0, fr ? "Ajustements" : "Adjustments")}
            {step(3, myValue != null, fr ? "Réconciliation" : "Reconciliation")}
            {step(4, myValue != null, fr ? "Comparaison" : "Comparison")}
          </div>
        </div>
        <div className="mt-6 grid gap-x-10 gap-y-6 lg:grid-cols-[1fr_260px]">
          <div className="min-w-0">
            <span className="kicker">{fr ? "Atelier — mode exercice" : "Workshop — exercise mode"}</span>
            <h1 className="vp-display mt-2 text-[clamp(22px,3.2vw,34px)] font-bold uppercase leading-tight tracking-[-0.025em]">
              {fr ? "Mon évaluation" : "My valuation"} <span className="text-ink-3">·</span> {head.address || head.propertyType || "—"}
              {head.city ? <span className="text-ink-3"> · {head.city}</span> : null}
            </h1>
            <p className="vp-mono mt-3 text-[11px] uppercase tracking-[0.06em] text-ink-2">
              {[
                groupLabel(head.group, fr),
                `${fr ? "prix demandé" : "asking"} ${money(head.price, lang)}`,
                subjArea ? `${num(subjArea, lang)} m²` : null,
                (subject?.yearBuilt ?? head.yearBuilt) ? `${fr ? "constr." : "built"} ${subject?.yearBuilt ?? head.yearBuilt}` : null,
                subject?.landArea ? `${fr ? "terrain" : "lot"} ${num(subject.landArea, lang)} m²` : null,
                head.bedrooms != null ? `${head.bedrooms} ${fr ? "ch." : "bd"}` : null,
              ]
                .filter(Boolean)
                .join("  ·  ")}
            </p>
            {subject && (
              <p className="mt-2 text-[12.5px] text-ink-3">
                {subject.fromUnit
                  ? fr
                    ? `Caractéristiques du sujet lues au rôle d'évaluation (unité ${subject.unitId}) : type ${subject.typeProp}, aire d'étages, terrain, année.`
                    : `Subject characteristics read from the assessment roll (unit ${subject.unitId}): type ${subject.typeProp}, floor area, lot, year.`
                  : fr
                    ? "Aucune unité du rôle jumelée : les caractéristiques du sujet viennent de l'annonce (superficie et année déclarées par le vendeur)."
                    : "No roll unit matched: subject characteristics come from the listing (area and year declared by the seller)."}
              </p>
            )}
            <div className="mt-5 flex flex-wrap gap-2.5 print:hidden">
              <Link href={`/a-vendre/${encodeURIComponent(head.uid)}`} className="btn btn-ghost">
                ← {fr ? "Fiche de la propriété" : "Property listing"}
              </Link>
              <button type="button" className="btn btn-ghost" onClick={() => window.print()}>
                {fr ? "Imprimer / PDF" : "Print / PDF"}
              </button>
              <button type="button" className="btn btn-ghost" onClick={resetAll}>
                ↺ {fr ? "Réinitialiser l'atelier" : "Reset workshop"}
              </button>
            </div>
          </div>
          {head.image && (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={head.image} alt="" referrerPolicy="no-referrer" className="aspect-[4/3] w-full border border-[var(--line)] object-cover" />
          )}
        </div>
      </section>

      {!head.geolocated && (
        <p className="border-l-2 border-[var(--danger)] pl-4 text-[14px] text-ink-2">
          {fr ? "Cette annonce n'est pas géolocalisée : impossible de chercher des comparables autour d'elle." : "This listing is not geolocated: comparables cannot be searched around it."}
        </p>
      )}

      {/* ================= 01 — bassin ================= */}
      <section>
        <Sect
          num="01"
          kicker={fr ? "Sélection" : "Selection"}
          title={fr ? "Choisir mes comparables" : "Choose my comparables"}
          right={
            <span className="vp-mono text-[10px] uppercase tracking-[0.08em] text-ink-3">
              {data ? `${pool.length} ${fr ? "candidats" : "candidates"} · ${data.comps.filter((c) => c.engineUsed).length} ${fr ? "retenus par le moteur" : "kept by the engine"}` : ""}
            </span>
          }
        />
        <p className="mt-3 max-w-3xl text-[13.5px] leading-relaxed text-ink-2">
          {fr
            ? "Ventes réelles publiées autour du sujet (et, si vous le souhaitez, annonces actives voisines — des prix demandés, pas des ventes). Cochez les propriétés que VOUS jugez comparables : même marché, même type, superficie et âge voisins, vente récente. Le moteur signale ses 12 choix, mais c'est votre jugement qui compte ici."
            : "Published real sales around the subject (and, optionally, nearby active listings — asking prices, not sales). Tick the properties YOU judge comparable: same market, same type, similar size and age, recent sale. The engine flags its 12 picks, but your judgment is what matters here."}
        </p>

        <div className="mt-5 grid gap-4 print:hidden sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_1fr_auto]">
          <label className="block">
            <span className="klabel">{fr ? "Rayon de recherche" : "Search radius"}</span>
            <select value={params.radiusKm} onChange={(e) => setParams({ ...params, radiusKm: Number(e.target.value) })} className="vp-input mt-1 cursor-pointer">
              {[1, 2, 3, 5, 10, 20].map((k) => (
                <option key={k} value={k}>
                  {k} km
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="klabel">{fr ? "Ventes depuis" : "Sales since"}</span>
            <select value={params.months} onChange={(e) => setParams({ ...params, months: Number(e.target.value) })} className="vp-input mt-1 cursor-pointer">
              {[12, 24, 36, 60].map((m) => (
                <option key={m} value={m}>
                  {m} {fr ? "mois" : "months"}
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="klabel">{fr ? "Trier par" : "Sort by"}</span>
            <select value={sortBy} onChange={(e) => setSortBy(e.target.value as typeof sortBy)} className="vp-input mt-1 cursor-pointer">
              <option value="weight">{fr ? "Pertinence (poids moteur)" : "Relevance (engine weight)"}</option>
              <option value="distance">{fr ? "Distance" : "Distance"}</option>
              <option value="date">{fr ? "Date (récentes d'abord)" : "Date (newest first)"}</option>
              <option value="price">{fr ? "Prix" : "Price"}</option>
            </select>
          </label>
          <div className="flex flex-col justify-end gap-1.5 text-[13px]">
            <label className="flex items-center gap-2">
              <input type="checkbox" checked={params.sameType} onChange={(e) => setParams({ ...params, sameType: e.target.checked })} className="h-4 w-4 accent-[var(--accent)]" />
              {fr ? "Même famille de type" : "Same type family"}
            </label>
            <label className="flex items-center gap-2">
              <input type="checkbox" checked={params.includeListings} onChange={(e) => setParams({ ...params, includeListings: e.target.checked })} className="h-4 w-4 accent-[var(--accent)]" />
              {fr ? "Inclure les annonces actives" : "Include active listings"}
            </label>
          </div>
          <div className="flex flex-col justify-end gap-2">
            <button type="button" className="btn btn-primary whitespace-nowrap" onClick={takeEngine} disabled={!data}>
              {fr ? "Reprendre les 12 du moteur" : "Take the engine's 12"}
            </button>
            <button type="button" className="btn btn-ghost whitespace-nowrap" onClick={clearAll} disabled={!selected.length}>
              {fr ? "Tout retirer" : "Clear all"}
            </button>
          </div>
        </div>

        {error && <p className="mt-4 text-[13px] text-[var(--danger)]">{error}</p>}

        <div className="mt-6 grid gap-8 lg:grid-cols-[minmax(0,420px)_1fr]">
          {subject && (
            <div className="border border-[var(--line)]">
              <RadarMap subject={{ lat: subject.lat, lng: subject.lng, label: head.address ?? head.uid }} comps={radarComps} highlight={hover} onHover={setHover} />
              <p className="vp-mono border-t border-[var(--line)] px-3 py-2 text-[9.5px] uppercase tracking-[0.06em] text-ink-3">
                {fr ? "Gros cercles = comparables cochés. Survolez une ligne du tableau pour la repérer." : "Large circles = ticked comparables. Hover a table row to locate it."}
              </p>
            </div>
          )}
          <div className={`src-wrap ${loading ? "opacity-60" : ""}`}>
            <table className="src-table">
              <thead>
                <tr>
                  <th></th>
                  <th>#</th>
                  <th>{fr ? "Propriété" : "Property"}</th>
                  <th>{fr ? "Date" : "Date"}</th>
                  <th className="text-right">{fr ? "Prix" : "Price"}</th>
                  <th className="text-right">{fr ? "Dist." : "Dist."}</th>
                  <th className="text-right">m²</th>
                  <th className="text-right">{fr ? "Année" : "Year"}</th>
                  <th>{fr ? "Type" : "Type"}</th>
                </tr>
              </thead>
              <tbody>
                {visible.map((c, i) => {
                  const on = selected.includes(c.id);
                  return (
                    <tr
                      key={c.id}
                      onMouseEnter={() => setHover(c.id)}
                      onMouseLeave={() => setHover(null)}
                      onClick={() => toggle(c)}
                      className={`cursor-pointer ${on ? "bg-[var(--accent-soft)]" : ""} ${hover === c.id ? "outline outline-1 outline-[var(--accent)]" : ""}`}
                    >
                      <td>
                        <input type="checkbox" checked={on} onChange={() => toggle(c)} onClick={(e) => e.stopPropagation()} className="h-4 w-4 accent-[var(--accent)]" aria-label={fr ? "Retenir ce comparable" : "Keep this comparable"} />
                      </td>
                      <td className="vp-mono text-[11px] text-ink-3">{i + 1}</td>
                      <td>
                        <p className="font-semibold leading-snug">{c.street ?? "—"}</p>
                        <p className="vp-mono text-[10px] uppercase tracking-[0.05em] text-ink-3">
                          {c.city ?? ""}
                          {c.engineUsed ? <span className="ml-2 border border-ink px-1 text-ink">{fr ? "moteur" : "engine"}</span> : null}
                          {c.kind === "listing" ? <span className="ml-2 border border-[var(--danger)] px-1 text-[var(--danger)]">{fr ? "en vente" : "for sale"}</span> : null}
                        </p>
                      </td>
                      <td className="vp-mono whitespace-nowrap text-[12px]">{c.kind === "listing" ? (fr ? "actuel" : "current") : dateFr(c.date, lang)}</td>
                      <td className="vp-mono whitespace-nowrap text-right font-bold">{money(c.amount, lang)}</td>
                      <td className="vp-mono whitespace-nowrap text-right text-[12px]">{fmtDist(c.distanceM)}</td>
                      <td className="vp-mono text-right text-[12px]">{c.floorArea ? num(c.floorArea, lang) : "—"}</td>
                      <td className="vp-mono text-right text-[12px]">{c.yearBuilt ?? "—"}</td>
                      <td className="text-[12px] text-ink-2">{c.propertyType ?? "—"}</td>
                    </tr>
                  );
                })}
                {!loading && data && visible.length === 0 && (
                  <tr>
                    <td colSpan={9} className="text-center text-ink-3">
                      {fr ? "Aucun candidat avec ces critères — élargissez le rayon ou la fenêtre." : "No candidate with these criteria — widen the radius or window."}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
            {pool.length > visible.length && (
              <button type="button" className="btn btn-ghost mt-3 w-full print:hidden" onClick={() => setShowAll(true)}>
                {fr ? `Voir les ${pool.length - visible.length} autres candidats` : `Show the ${pool.length - visible.length} other candidates`}
              </button>
            )}
          </div>
        </div>
      </section>

      {/* ================= 02 — ajustements ================= */}
      <section>
        <Sect num="02" kicker={fr ? "Grille" : "Grid"} title={fr ? "Ajuster chaque comparable au sujet" : "Adjust each comparable to the subject"} />
        <p className="mt-3 max-w-3xl text-[13.5px] leading-relaxed text-ink-2">
          {fr
            ? "On ajuste le comparable vers le sujet : si le comparable est plus petit, on ajoute ; s'il est meilleur, on retire. Les trois ajustements du moteur sont pré-remplis (marché = indice mensuel du type ; superficie = 50 % du $/m² marginal, borné à ±25 % ; âge = 0,5 %/an, borné à ±10 %). Modifiez-les, ajoutez les vôtres (garage, terrain, état, vue…) et pondérez de 1 à 5."
            : "Comparables are adjusted toward the subject: smaller comparable → add; better comparable → subtract. The engine's three adjustments are prefilled (market = monthly type index; area = 50% of marginal $/m², capped ±25%; age = 0.5%/yr, capped ±10%). Edit them, add your own (garage, lot, condition, view…) and weight 1 to 5."}
        </p>
        {chosen.length === 0 ? (
          <p className="mt-6 border border-dashed border-[var(--line-strong)] p-6 text-center text-[13.5px] text-ink-3">
            {fr ? "Cochez au moins un comparable ci-dessus pour ouvrir la grille." : "Tick at least one comparable above to open the grid."}
          </p>
        ) : (
          <div className="mt-6 space-y-5">
            {chosen.map(({ c, s }, i) => {
              const adj = adjustedOf(c, s);
              const gross = grossAdjPct(c, s);
              return (
                <article key={c.id} className="border border-[var(--line)] bg-surface p-4 sm:p-5">
                  <header className="flex flex-wrap items-baseline justify-between gap-2 border-b border-[var(--line)] pb-3">
                    <div className="min-w-0">
                      <p className="vp-display text-[15px] font-bold uppercase tracking-[-0.01em]">
                        <span className="vp-mono mr-2 text-[11px] text-accent">C{i + 1}</span>
                        {c.street ?? "—"}
                        {c.city ? <span className="text-ink-3"> · {c.city}</span> : null}
                      </p>
                      <p className="vp-mono mt-0.5 text-[10px] uppercase tracking-[0.05em] text-ink-3">
                        {c.kind === "listing" ? (fr ? "annonce active — prix demandé" : "active listing — asking price") : `${fr ? "vendu le" : "sold"} ${dateFr(c.date, lang)}`} · {fmtDist(c.distanceM)}
                        {c.floorArea ? ` · ${num(c.floorArea, lang)} m²` : ""}
                        {c.yearBuilt ? ` · ${c.yearBuilt}` : ""}
                        {c.propertyType ? ` · ${c.propertyType}` : ""}
                        {c.engineUsed ? ` · ${fr ? "retenu par le moteur" : "kept by the engine"}` : ""}
                        {c.idProvinc ? (
                          <>
                            {" · "}
                            <Link href={`/estimation/${encodeURIComponent(c.idProvinc)}`} className="text-accent underline-offset-2 hover:underline">
                              {fr ? "fiche" : "record"}
                            </Link>
                          </>
                        ) : null}
                        {c.uid ? (
                          <>
                            {" · "}
                            <Link href={`/a-vendre/${encodeURIComponent(c.uid)}`} className="text-accent underline-offset-2 hover:underline">
                              {fr ? "annonce" : "listing"}
                            </Link>
                          </>
                        ) : null}
                      </p>
                    </div>
                    <div className="flex items-center gap-2 print:hidden">
                      <button type="button" className="vp-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-2 hover:text-accent-deep" onClick={() => patchState(c.id, { adjTime: c.adjTime, adjArea: c.adjArea, adjAge: c.adjAge, extras: [], rev: (s.rev ?? 0) + 1 })}>
                        ↺ {fr ? "moteur" : "engine"}
                      </button>
                      <button type="button" className="vp-mono text-[10.5px] uppercase tracking-[0.08em] text-[var(--danger)]" onClick={() => setSelected((p) => p.filter((x) => x !== c.id))}>
                        ✕ {fr ? "retirer" : "remove"}
                      </button>
                    </div>
                  </header>
                  <div className="mt-4 grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_1fr_1.2fr]">
                    <div>
                      <p className="klabel">{c.kind === "listing" ? (fr ? "Prix demandé" : "Asking price") : fr ? "Prix de vente" : "Sale price"}</p>
                      <p className="vp-display mt-1 text-[20px] font-bold tracking-[-0.02em]">{money(c.amount, lang)}</p>
                      {c.valeurRole ? <p className="vp-mono text-[9.5px] uppercase tracking-[0.05em] text-ink-3">{fr ? "rôle" : "roll"} {money(c.valeurRole, lang)}</p> : null}
                    </div>
                    <MoneyInput
                      key={`t${s.rev ?? 0}`}
                      label={fr ? "Ajust. marché ($)" : "Market adj. ($)"}
                      value={s.adjTime}
                      onChange={(v) => patchState(c.id, { adjTime: v })}
                      hint={`${fr ? "moteur" : "engine"} ${signedMoney(c.adjTime, lang)} · ${c.kind === "listing" ? (fr ? "actuel" : "current") : `${num(c.monthsAgo, lang)} ${fr ? "mois" : "mo"}`}`}
                    />
                    <MoneyInput
                      key={`a${s.rev ?? 0}`}
                      label={fr ? "Ajust. superficie ($)" : "Area adj. ($)"}
                      value={s.adjArea}
                      onChange={(v) => patchState(c.id, { adjArea: v })}
                      hint={`${fr ? "moteur" : "engine"} ${signedMoney(c.adjArea, lang)}${subjArea && c.floorArea ? ` · Δ ${subjArea - c.floorArea >= 0 ? "+" : "−"}${num(Math.abs(subjArea - c.floorArea), lang)} m²` : ""}`}
                    />
                    <MoneyInput
                      key={`g${s.rev ?? 0}`}
                      label={fr ? "Ajust. âge ($)" : "Age adj. ($)"}
                      value={s.adjAge}
                      onChange={(v) => patchState(c.id, { adjAge: v })}
                      hint={`${fr ? "moteur" : "engine"} ${signedMoney(c.adjAge, lang)}${(subject?.yearBuilt ?? head.yearBuilt) && c.yearBuilt ? ` · Δ ${(subject?.yearBuilt ?? head.yearBuilt)! - c.yearBuilt} ${fr ? "ans" : "yrs"}` : ""}`}
                    />
                    <div className="border-l-2 border-accent pl-4">
                      <p className="klabel">{fr ? "Prix ajusté" : "Adjusted price"}</p>
                      <p className="vp-display mt-1 text-[24px] font-bold tracking-[-0.02em]">{money(adj, lang)}</p>
                      <p className={`vp-mono text-[9.5px] uppercase tracking-[0.05em] ${gross > 25 ? "text-[var(--danger)]" : "text-ink-3"}`}>
                        {fr ? "ajust. brut" : "gross adj."} {pct(gross, lang, 1, false)}
                        {gross > 25 ? (fr ? " — comparable faible" : " — weak comparable") : ""}
                      </p>
                    </div>
                  </div>
                  {/* ajustements libres */}
                  <div className="mt-4 grid gap-x-6 gap-y-3 sm:grid-cols-[1fr_auto]">
                    <div className="space-y-2">
                      {s.extras.map((x) => (
                        <div key={x.id} className="grid grid-cols-[1fr_140px_auto] items-end gap-3">
                          <label className="block">
                            <span className="klabel">{fr ? "Ajustement libre" : "Custom adjustment"}</span>
                            <input value={x.label} onChange={(e) => patchState(c.id, { extras: s.extras.map((y) => (y.id === x.id ? { ...y, label: e.target.value } : y)) })} placeholder={fr ? "ex. garage, piscine, état, vue…" : "e.g. garage, pool, condition, view…"} className="vp-input mt-0.5 text-[13px]" />
                          </label>
                          <MoneyInput label="$" value={x.amount} onChange={(v) => patchState(c.id, { extras: s.extras.map((y) => (y.id === x.id ? { ...y, amount: v } : y)) })} />
                          <button type="button" className="vp-mono pb-2 text-[11px] text-[var(--danger)] print:hidden" onClick={() => patchState(c.id, { extras: s.extras.filter((y) => y.id !== x.id) })} aria-label={fr ? "Supprimer" : "Delete"}>
                            ✕
                          </button>
                        </div>
                      ))}
                      <button type="button" className="vp-mono text-[10.5px] font-bold uppercase tracking-[0.08em] text-accent print:hidden" onClick={() => patchState(c.id, { extras: [...s.extras, { id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`, label: "", amount: 0 }] })}>
                        + {fr ? "ajouter un ajustement" : "add an adjustment"}
                      </button>
                    </div>
                    <div>
                      <p className="klabel">{fr ? "Poids (1-5)" : "Weight (1-5)"}</p>
                      <div className="mt-1 flex gap-1">
                        {[1, 2, 3, 4, 5].map((w) => (
                          <button key={w} type="button" onClick={() => patchState(c.id, { weight: w })} className={`vp-mono h-8 w-8 border text-[12px] font-bold ${s.weight === w ? "border-ink bg-ink text-paper" : "border-[var(--line-strong)] text-ink-2"}`} aria-pressed={s.weight === w}>
                            {w}
                          </button>
                        ))}
                      </div>
                    </div>
                  </div>
                </article>
              );
            })}
            <p className="vp-mono overflow-x-auto whitespace-nowrap border-l-2 border-accent bg-surface px-3 py-2 text-[11.5px] text-ink">
              {fr ? "prix ajusté = prix + ajust. marché + ajust. superficie + ajust. âge + Σ ajustements libres" : "adjusted price = price + market adj. + area adj. + age adj. + Σ custom adjustments"}
            </p>
          </div>
        )}
      </section>

      {/* ================= 03 — réconciliation ================= */}
      <section>
        <Sect num="03" kicker={fr ? "Conclusion" : "Conclusion"} title={fr ? "Réconcilier ma valeur" : "Reconcile my value"} />
        {chosen.length === 0 ? (
          <p className="mt-6 text-[13.5px] text-ink-3">{fr ? "La réconciliation s'ouvre dès qu'un comparable est retenu." : "Reconciliation opens as soon as one comparable is kept."}</p>
        ) : (
          <div className="mt-6 grid gap-x-12 gap-y-8 lg:grid-cols-[1.3fr_1fr]">
            <div>
              <p className="klabel">{fr ? "Indications de valeur selon la règle de réconciliation" : "Value indications by reconciliation rule"}</p>
              <div className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-4">
                {(
                  [
                    ["median", fr ? "Médiane" : "Median"],
                    ["mean", fr ? "Moyenne" : "Mean"],
                    ["wmean", fr ? "Moyenne pondérée" : "Weighted mean"],
                    ["wmedian", fr ? "Médiane pondérée" : "Weighted median"],
                  ] as [Method, string][]
                ).map(([k, label]) => (
                  <button key={k} type="button" onClick={() => setMethod(k)} aria-pressed={method === k} className={`border p-3 text-left ${method === k ? "border-ink bg-ink text-paper" : "border-[var(--line)] bg-surface hover:border-[var(--line-strong)]"}`}>
                    <p className={`vp-mono text-[9.5px] uppercase tracking-[0.08em] ${method === k ? "text-paper/70" : "text-ink-3"}`}>{label}</p>
                    <p className="vp-display mt-1 text-[17px] font-bold tracking-[-0.02em]">{indications[k] != null ? money(round100(indications[k]!), lang) : "—"}</p>
                  </button>
                ))}
              </div>
              <div className="mt-6 grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4">
                <div className="kv-cell">
                  <p className="k">{fr ? "Comparables" : "Comparables"}</p>
                  <p className="v">
                    {chosen.length} <span className="text-ink-3">({engineOverlap} {fr ? "du moteur" : "engine"})</span>
                  </p>
                </div>
                <div className="kv-cell">
                  <p className="k">{fr ? "Étendue ajustée" : "Adjusted range"}</p>
                  <p className="v text-[12.5px]">
                    {money(Math.min(...adjusted), lang)} – {money(Math.max(...adjusted), lang)}
                  </p>
                </div>
                <div className="kv-cell">
                  <p className="k">{fr ? "Dispersion médiane" : "Median dispersion"}</p>
                  <p className="v">{dispersion != null ? `±${pct(dispersion, lang, 1, false)}` : "—"}</p>
                </div>
                <div className="kv-cell">
                  <p className="k">{fr ? "Ajust. brut moyen" : "Avg gross adj."}</p>
                  <p className={`v ${avgGross != null && avgGross > 25 ? "text-[var(--danger)]" : ""}`}>{avgGross != null ? pct(avgGross, lang, 1, false) : "—"}</p>
                </div>
              </div>
              <p className="mt-4 max-w-2xl text-[13px] leading-relaxed text-ink-2">
                {fr
                  ? "La médiane résiste aux valeurs extrêmes ; la moyenne pondérée laisse parler votre confiance dans chaque comparable. Le rapport final ne retient qu'UNE valeur conclue, arrondie, avec une fourchette qui reflète la dispersion observée."
                  : "The median resists outliers; the weighted mean lets your confidence in each comparable speak. The final report keeps ONE concluded value, rounded, with a range reflecting the observed dispersion."}
              </p>
            </div>
            <div className="lg:border-l lg:border-[var(--line)] lg:pl-10">
              <label className="block">
                <span className="klabel">{fr ? "Ma valeur conclue ($)" : "My concluded value ($)"}</span>
                <input
                  value={finalTxt !== "" ? finalTxt : myValue != null ? String(Math.round(myValue)) : ""}
                  inputMode="numeric"
                  onChange={(e) => {
                    const t = e.target.value.replace(/\D/g, "");
                    setFinalTxt(t);
                    setFinalValue(t ? Number(t) : null);
                  }}
                  className="vp-input vp-display mt-1 text-[32px] font-bold tracking-[-0.03em]"
                />
              </label>
              <button
                type="button"
                className="vp-mono mt-2 text-[10.5px] font-bold uppercase tracking-[0.08em] text-accent print:hidden"
                onClick={() => {
                  setFinalValue(null);
                  setFinalTxt("");
                }}
              >
                ↺ {fr ? "reprendre l'indication" : "take the indication"} ({indication != null ? money(round100(indication), lang) : "—"})
              </button>
              <label className="mt-6 block">
                <span className="klabel">
                  {fr ? "Fourchette" : "Range"} ±{rangePct} %
                </span>
                <input type="range" min={1} max={30} value={rangePct} onChange={(e) => setRangePct(Number(e.target.value))} className="mt-2 w-full accent-[var(--accent)]" />
              </label>
              {myValue != null && (
                <p className="vp-mono mt-2 text-[11px] uppercase tracking-[0.05em] text-ink-2">
                  {money(round100(myValue * (1 - rangePct / 100)), lang)} – {money(round100(myValue * (1 + rangePct / 100)), lang)}
                  {subjArea ? ` · ${num(Math.round(myValue / subjArea), lang)} $/m²` : ""}
                </p>
              )}
              {dispersion != null && (
                <button type="button" className="vp-mono mt-2 text-[10px] uppercase tracking-[0.08em] text-ink-3 print:hidden" onClick={() => setRangePct(Math.max(1, Math.min(30, Math.round(dispersion))))}>
                  {fr ? "→ aligner sur la dispersion" : "→ align on dispersion"} (±{Math.round(dispersion)} %)
                </button>
              )}
            </div>
          </div>
        )}
      </section>

      {/* ================= 04 — comparaison ================= */}
      <section>
        <Sect num="04" kicker={fr ? "Confrontation" : "Confrontation"} title={fr ? "Ma valeur face à la mesure Vrai-Prix" : "My value vs. the Vrai-Prix measure"} />
        {myValue == null ? (
          <p className="mt-6 text-[13.5px] text-ink-3">{fr ? "Concluez une valeur pour la comparer." : "Conclude a value to compare it."}</p>
        ) : (
          <div className="mt-6 space-y-8">
            <div className="border border-[var(--line)] bg-surface p-3 sm:p-5">
              <DotPlot rows={rows} me={myValue} lang={lang} />
              <p className="vp-mono mt-1 text-[9.5px] uppercase tracking-[0.06em] text-ink-3">
                {fr ? "Bandes : ma fourchette (bleu) et l'intervalle P10-P90 de Vrai-Prix (encre). Trait pointillé : ma valeur." : "Bands: my range (blue) and the Vrai-Prix P10-P90 interval (ink). Dashed line: my value."}
              </p>
            </div>
            <div className="grid gap-x-12 gap-y-8 lg:grid-cols-[1.2fr_1fr]">
              <div className="src-wrap">
                <table className="src-table">
                  <thead>
                    <tr>
                      <th>{fr ? "Repère" : "Benchmark"}</th>
                      <th className="text-right">{fr ? "Valeur" : "Value"}</th>
                      <th className="text-right">{fr ? "Ma valeur − repère" : "My value − benchmark"}</th>
                      <th className="text-right">%</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rows
                      .filter((r) => r.key !== "me")
                      .map((r) => {
                        const d = r.value != null ? myValue - r.value : null;
                        const p = diffPct(r.value);
                        return (
                          <tr key={r.key} className={r.tone === "main" ? "font-bold" : ""}>
                            <td>{r.label}</td>
                            <td className="vp-mono text-right">{money(r.value, lang)}</td>
                            <td className={`vp-mono text-right ${d != null && d < 0 ? "text-[var(--danger)]" : ""}`}>{d != null ? signedMoney(d, lang) : "—"}</td>
                            <td className={`vp-mono text-right ${p != null && p < 0 ? "text-[var(--danger)]" : ""}`}>{pct(p, lang, 1)}</td>
                          </tr>
                        );
                      })}
                  </tbody>
                </table>
              </div>
              <div className="space-y-4 text-[14px] leading-relaxed text-ink-2 lg:border-l lg:border-[var(--line)] lg:pl-10">
                <p className="klabel">{fr ? "Lecture" : "Reading"}</p>
                {vpMain != null && (
                  <p>
                    {fr ? (
                      <>
                        Votre valeur conclue (<b className="text-ink">{money(myValue, lang)}</b>) est{" "}
                        <b className="text-ink">{pct(diffPct(vpMain), lang, 1)}</b> par rapport à la mesure principale Vrai-Prix ({money(vpMain, lang)}
                        {ev?.confidence ? `, confiance ${ev.confidence}` : ""}).{" "}
                        {inBand === true ? "Elle se situe DANS l'intervalle P10-P90 de Vrai-Prix : les deux lectures sont compatibles." : inBand === false ? "Elle se situe HORS de l'intervalle P10-P90 de Vrai-Prix : l'écart mérite d'être expliqué (comparables différents, ajustements, superficie retenue)." : ""}
                      </>
                    ) : (
                      <>
                        Your concluded value (<b className="text-ink">{money(myValue, lang)}</b>) is <b className="text-ink">{pct(diffPct(vpMain), lang, 1)}</b> relative to the main Vrai-Prix measure ({money(vpMain, lang)}
                        {ev?.confidence ? `, confidence ${ev.confidence}` : ""}).{" "}
                        {inBand === true ? "It lies WITHIN the Vrai-Prix P10-P90 interval: both readings are compatible." : inBand === false ? "It lies OUTSIDE the Vrai-Prix P10-P90 interval: the gap deserves an explanation (different comparables, adjustments, retained area)." : ""}
                      </>
                    )}
                  </p>
                )}
                <p>
                  {fr ? (
                    <>
                      Face au prix demandé ({money(head.price, lang)}), votre évaluation suggère un affichage{" "}
                      <b className="text-ink">{myValue < head.price ? `au-dessus de la valeur de ${pct(((head.price - myValue) / myValue) * 100, lang, 1, false)}` : `en dessous de la valeur de ${pct(((myValue - head.price) / myValue) * 100, lang, 1, false)}`}</b>. Rappel : un prix demandé n&apos;est pas une valeur — le marché tranche à la vente.
                    </>
                  ) : (
                    <>
                      Against the asking price ({money(head.price, lang)}), your valuation suggests a listing{" "}
                      <b className="text-ink">{myValue < head.price ? `priced ${pct(((head.price - myValue) / myValue) * 100, lang, 1, false)} above value` : `priced ${pct(((myValue - head.price) / myValue) * 100, lang, 1, false)} below value`}</b>. Reminder: an asking price is not a value — the market decides at the sale.
                    </>
                  )}
                </p>
                <p>
                  {fr
                    ? `${engineOverlap} de vos ${chosen.length} comparables font partie des ${ev?.nComps ?? data?.engine.nComps ?? 12} retenus par le moteur${chosen.some(({ c }) => c.kind === "listing") ? " ; vous avez aussi retenu des annonces actives (prix demandés, non des ventes — à pondérer avec prudence)" : ""}.`
                    : `${engineOverlap} of your ${chosen.length} comparables are among the ${ev?.nComps ?? data?.engine.nComps ?? 12} kept by the engine${chosen.some(({ c }) => c.kind === "listing") ? "; you also kept active listings (asking prices, not sales — weight with caution)" : ""}.`}
                </p>
                {ev?.evaluatedAt && (
                  <p className="vp-mono text-[10px] uppercase tracking-[0.05em] text-ink-3">
                    {fr ? "Mesure Vrai-Prix calculée le" : "Vrai-Prix measure computed on"} {ev.evaluatedAt}
                    {ev.unitId ? ` · ${fr ? "unité" : "unit"} ${ev.unitId}` : ""}
                  </p>
                )}
                {!ev && (
                  <p className="vp-mono text-[10px] uppercase tracking-[0.05em] text-ink-3">
                    {fr ? "Aucune mesure stockée pour cette annonce : repère Vrai-Prix calculé à la volée (comparables du moteur seulement)." : "No stored measure for this listing: Vrai-Prix benchmark computed on the fly (engine comparables only)."}
                  </p>
                )}
              </div>
            </div>
          </div>
        )}
      </section>

      <p className="vp-mono border-t border-[var(--line)] pt-3 text-[10px] uppercase tracking-[0.05em] text-ink-3">
        {fr
          ? "Atelier d'évaluation — vos choix restent sur cet appareil. Ni la mesure Vrai-Prix ni votre évaluation ne constituent une évaluation professionnelle certifiée (OEAQ)."
          : "Valuation workshop — your choices stay on this device. Neither the Vrai-Prix measure nor your valuation is a certified professional appraisal (OEAQ)."}
      </p>
    </div>
  );
}

// utilitaires exposés pour les tests
export { adjustedOf, grossAdjPct };