// Vrai-Prix — fiche d'une propriété à vendre : toute l'information de l'annonce,
// la mesure Vrai-Prix déjà calculée, le portrait du rôle et l'accès à l'atelier.
// Ordre du DOM = ordre visuel, identique mobile et desktop (standard Groupe Ka) :
// galerie → prix/adresse/caractéristiques → description → inclusions → détails
// → analyses (Vrai-Prix, historique de prix) → registre → voisines.
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useLang } from "@/components/LangContext";
import { RangeBar } from "@/components/MetricViz";
import ListingCardView, { groupLabel, RatioPill } from "./ListingCardView";
import { dateFr, epochDate, m2, money, num, pct, sqftToM2 } from "./fmt";
import type { EvalRow, ListingCard, PricePoint, TypeGroupKey } from "@/lib/immoka";

export interface ListingPageData {
  listing: {
    uid: string;
    source: string;
    url: string | null;
    title: string | null;
    address: string | null;
    sector: string | null;
    city: string | null;
    region: string | null;
    propertyType: string | null;
    price: number;
    bedrooms: number | null;
    bathrooms: number | null;
    powderRooms: number | null;
    areaSqft: number | null;
    lotSqft: number | null;
    yearBuilt: number | null;
    mls: string | null;
    brokerName: string | null;
    agency: string | null;
    description: string | null;
    lat: number | null;
    lng: number | null;
    firstSeen: number | null;
    lastSeen: number | null;
  };
  group: TypeGroupKey;
  images: string[];
  features: string[];
  details: Record<string, unknown>;
  priceLog: PricePoint[];
  eval: EvalRow | null;
  unit: {
    id: string;
    adresse: string | null;
    apt: string | null;
    municipalite: string | null;
    typeProp: string;
    anneeConstruction: number | null;
    aireEtagesM2: number | null;
    superficieTerrainM2: number | null;
    nbEtages: number | null;
    nbLogements: number | null;
    genreConstruction: string | null;
    lienPhysique: string | null;
    valeurTerrain: number | null;
    valeurBatiment: number | null;
    valeurRole: number | null;
    est2026: number | null;
    p10: number | null;
    p90: number | null;
    history: { year: number; value: number | null }[];
  } | null;
  nearby: ListingCard[];
  /** analyse IA du bâtiment déjà complétée (chantier Coût) — null si aucune */
  aiSummary?: { analysisId: string; version: number; confidence: number | null; rcn: number | null; costValue: number | null; structure: string | null; foundation: string | null; roof: string | null; quality: string | null; condition: string | null; completedAt: string | null } | null;
}

const SOURCE_LABELS: Record<string, string> = {
  remax_quebec: "RE/MAX Québec",
  duproprio: "DuProprio",
  kijiji: "Kijiji",
  via_capitale: "Via Capitale",
  sutton: "Sutton",
  lespac: "LesPAC",
  fb_marketplace: "Facebook Marketplace",
  proprio_direct: "Proprio Direct",
  royal_lepage: "Royal LePage",
  engel_volkers: "Engel & Völkers",
  sothebys_quebec: "Sotheby's",
  pmml: "PMML",
};
const sourceLabel = (s: string) => SOURCE_LABELS[s] ?? s.replace(/_/g, " ").replace(/\bag\b/g, "").trim();

const HIDDEN_DETAIL_KEYS = new Set(["img_audited", "transaction", "pieces", "remarques_proprio", "prix_pi2", "prix_m2"]);

function Sect({ num: n, kicker, title }: { num: string; kicker: string; title: string }) {
  return (
    <header className="sec">
      <span className="sec-num">
        {n} — {kicker}
      </span>
      <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">{title}</h2>
    </header>
  );
}

function Chip({ k, v }: { k: string; v: string | number | null | undefined }) {
  return (
    <div className="kv-cell">
      <p className="k">{k}</p>
      <p className="v break-words">{v == null || v === "" ? "—" : v}</p>
    </div>
  );
}

/* --------------------------------- galerie --------------------------------- */
function Gallery({ images, alt }: { images: string[]; alt: string }) {
  const [i, setI] = useState(0);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
      if (e.key === "ArrowRight") setI((x) => (x + 1) % images.length);
      if (e.key === "ArrowLeft") setI((x) => (x - 1 + images.length) % images.length);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, images.length]);

  if (!images.length)
    return (
      <div className="vp-mono flex aspect-[16/7] w-full items-center justify-center border border-[var(--line)] bg-surface-2 text-[11px] uppercase tracking-[0.1em] text-ink-3">
        Aucune photo
      </div>
    );
  const cur = images[Math.min(i, images.length - 1)];
  return (
    <div>
      <div className="grid gap-2 md:grid-cols-[3fr_1fr]">
        <button type="button" onClick={() => setOpen(true)} className="relative block aspect-[16/10] w-full overflow-hidden bg-surface-2 md:aspect-auto md:h-[440px]">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={cur} alt={alt} referrerPolicy="no-referrer" className="h-full w-full object-cover" />
          <span className="vp-mono absolute bottom-2 right-2 bg-ink/80 px-2 py-1 text-[10px] text-paper">
            {i + 1} / {images.length}
          </span>
        </button>
        <div className="flex gap-2 overflow-x-auto md:h-[440px] md:flex-col md:overflow-y-auto">
          {images.slice(0, 40).map((src, k) => (
            <button
              key={src + k}
              type="button"
              onClick={() => setI(k)}
              className={`relative aspect-[4/3] w-24 shrink-0 overflow-hidden border-2 md:w-full ${k === i ? "border-accent" : "border-transparent"}`}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={src} alt="" loading="lazy" referrerPolicy="no-referrer" className="h-full w-full object-cover" />
            </button>
          ))}
        </div>
      </div>
      {open && (
        <div className="vp-dark fixed inset-0 z-[var(--z-modal,900)] flex flex-col" role="dialog" aria-modal="true">
          <div className="flex h-12 shrink-0 items-center justify-between px-4">
            <span className="vp-mono text-[11px] uppercase tracking-[0.1em]">
              {i + 1} / {images.length}
            </span>
            <button type="button" onClick={() => setOpen(false)} className="vp-mono h-10 w-10 text-[16px]" aria-label="Fermer">
              ✕
            </button>
          </div>
          <div className="relative flex flex-1 items-center justify-center overflow-hidden px-2 pb-4">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={cur} alt={alt} referrerPolicy="no-referrer" className="max-h-full max-w-full object-contain" />
            <button type="button" onClick={() => setI((x) => (x - 1 + images.length) % images.length)} className="vp-mono absolute left-2 top-1/2 h-12 w-12 -translate-y-1/2 bg-ink/60 text-[20px]" aria-label="Précédente">
              ‹
            </button>
            <button type="button" onClick={() => setI((x) => (x + 1) % images.length)} className="vp-mono absolute right-2 top-1/2 h-12 w-12 -translate-y-1/2 bg-ink/60 text-[20px]" aria-label="Suivante">
              ›
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------------------- historique de prix ---------------------------- */
function PriceHistory({ log, current, lastSeen, fr, lang }: { log: PricePoint[]; current: number; lastSeen: number | null; fr: boolean; lang: string }) {
  const pts = [...log];
  if (!pts.length || pts[pts.length - 1].price !== current) pts.push({ ts: lastSeen ?? pts[pts.length - 1]?.ts ?? 0, price: current });
  // déduplique les prix consécutifs identiques
  const series = pts.filter((p, i) => i === 0 || p.price !== pts[i - 1].price);
  if (series.length < 2)
    return <p className="text-[13px] text-ink-3">{fr ? "Aucun changement de prix observé depuis la première capture." : "No price change observed since first capture."}</p>;
  const first = series[0].price;
  return (
    <ol className="space-y-1.5">
      {series.map((p, i) => {
        const prev = i > 0 ? series[i - 1].price : null;
        const d = prev ? ((p.price - prev) / prev) * 100 : null;
        return (
          <li key={p.ts} className="flex flex-wrap items-baseline gap-x-4 border-b border-[var(--line-soft)] py-1.5 text-[13.5px]">
            <span className="vp-mono w-28 text-[11px] uppercase tracking-[0.05em] text-ink-3">{epochDate(p.ts, lang)}</span>
            <span className="vp-display font-bold">{money(p.price, lang)}</span>
            {d != null && <span className={`vp-mono text-[11px] ${d < 0 ? "text-[var(--danger)]" : "text-ink-2"}`}>{pct(d, lang, 1)}</span>}
          </li>
        );
      })}
      <li className="vp-mono pt-1 text-[10.5px] uppercase tracking-[0.05em] text-ink-3">
        {fr ? "Cumul depuis la mise en marché" : "Since listing"} : {pct(((current - first) / first) * 100, lang, 1)}
      </li>
    </ol>
  );
}

/* ------------------------------- composant -------------------------------- */
export default function ListingView({ data }: { data: ListingPageData }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const l = data.listing;
  const e = data.eval;
  const u = data.unit;
  const area = sqftToM2(l.areaSqft);
  const lot = sqftToM2(l.lotSqft);
  const ppm2 = area ? Math.round(l.price / area) : null;
  const where = [l.sector, l.city].filter(Boolean).join(" · ");
  const alt = [l.address, l.city].filter(Boolean).join(", ");

  const detailEntries = Object.entries(data.details).filter(
    ([k, v]) => !HIDDEN_DETAIL_KEYS.has(k) && (typeof v === "string" || typeof v === "number") && String(v).trim() !== ""
  ) as [string, string | number][];
  const pieces = Array.isArray(data.details.pieces) ? (data.details.pieces as Record<string, string>[]) : [];
  const remarques = typeof data.details.remarques_proprio === "string" ? (data.details.remarques_proprio as string) : null;

  const methods: { key: string; fr: string; en: string; v: number | null; main?: boolean }[] = e
    ? [
        { key: "est", fr: "Vrai-Prix — hybride 65/35 (mesure principale)", en: "Vrai-Prix — 65/35 hybrid (main measure)", v: e.est, main: true },
        { key: "model", fr: "Modèle hédonique (LightGBM)", en: "Hedonic model (LightGBM)", v: e.model_est },
        { key: "comps", fr: "Comparables ajustés (moteur)", en: "Adjusted comparables (engine)", v: e.comps_est },
        { key: "cost", fr: "Méthode du coût calibrée", en: "Calibrated cost approach", v: e.cost_est },
        { key: "role", fr: "Rôle indexé (ratios IAAO)", en: "Indexed assessment (IAAO ratios)", v: e.role_est },
        { key: "ens", fr: "Ensemble (médiane des méthodes)", en: "Ensemble (median of methods)", v: e.ens_est },
      ]
    : [];

  return (
    <div className="space-y-12 py-8">
      {/* ================= fil d'Ariane ================= */}
      <nav className="vp-mono flex flex-wrap items-center gap-2 border-b-2 border-ink pb-2.5 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>
        <span className="truncate">{l.uid}</span>
      </nav>

      {/* ================= 1. galerie ================= */}
      <section className="rise">
        <Gallery images={data.images} alt={alt} />
      </section>

      {/* ================= 2. prix + adresse + caractéristiques ================= */}
      <section className="grid gap-x-12 gap-y-8 lg:grid-cols-[1.5fr_1fr]">
        <div className="min-w-0">
          <p className="vp-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
            {groupLabel(data.group, fr)}
            {l.propertyType && l.propertyType !== groupLabel(data.group, fr) ? ` · ${l.propertyType}` : ""}
            {" · "}
            {sourceLabel(l.source)}
            {l.mls ? ` · MLS ${l.mls}` : ""}
          </p>
          <h1 className="vp-display mt-2 text-[clamp(20px,2.8vw,28px)] font-bold uppercase leading-tight tracking-[-0.02em]">
            {l.address || l.title || (fr ? "Propriété à vendre" : "Property for sale")}
            {where ? <span className="text-ink-3"> · {where}</span> : null}
          </h1>
          <p className="klabel mt-5">{fr ? "Prix demandé" : "Asking price"}</p>
          <p className="vp-display mt-1 text-[clamp(44px,8vw,84px)] font-bold leading-none tracking-[-0.045em]">{money(l.price, lang)}</p>
          <div className="mt-3 flex flex-wrap items-center gap-3">
            <RatioPill ratio={e?.ratio ?? null} fr={fr} size="md" />
            {e?.est != null && (
              <span className="vp-mono text-[11px] uppercase tracking-[0.06em] text-ink-2">
                {fr ? "Mesure Vrai-Prix" : "Vrai-Prix measure"} <b className="text-ink">{money(e.est, lang)}</b>
                {e.confidence ? ` · ${fr ? "confiance" : "confidence"} ${e.confidence}` : ""}
              </span>
            )}
          </div>
          <p className="vp-mono mt-4 text-[11px] uppercase tracking-[0.06em] text-ink-2">
            {[
              l.bedrooms != null ? `${l.bedrooms} ${fr ? "chambres" : "bedrooms"}` : null,
              l.bathrooms != null ? `${l.bathrooms} ${fr ? "salles de bain" : "bathrooms"}` : null,
              l.powderRooms ? `${l.powderRooms} ${fr ? "salle d'eau" : "powder room"}` : null,
              area ? `${num(area, lang)} m² (${num(l.areaSqft, lang)} pi²)` : null,
              ppm2 ? `${num(ppm2, lang)} $/m²` : null,
              lot ? `${fr ? "terrain" : "lot"} ${num(lot, lang)} m²` : null,
              l.yearBuilt ? `${fr ? "constr." : "built"} ${l.yearBuilt}` : null,
            ]
              .filter((x): x is string => x != null)
              .join("  ·  ")}
          </p>
          <div className="mt-7 flex flex-wrap gap-2.5">
            <Link href={`/a-vendre/${encodeURIComponent(l.uid)}/evaluer`} className="btn btn-accent">
              {fr ? "Faire mon évaluation" : "Build my valuation"} →
            </Link>
            {u && (
              <Link href={`/estimation/${encodeURIComponent(u.id)}`} className="btn btn-ghost">
                {fr ? "Rapport de valeur Vrai-Prix" : "Vrai-Prix value report"}
              </Link>
            )}
            <Link href={`/a-vendre/${encodeURIComponent(l.uid)}/analyse-cout`} className="btn btn-ghost" title={fr ? "Des photos à la méthode du coût — Claude Sonnet 5" : "From photos to the cost approach — Claude Sonnet 5"}>
              {data.aiSummary ? (fr ? "Coût IA disponible" : "AI cost available") : fr ? "Analyser le coût avec l'IA" : "Analyse the cost with AI"} →
            </Link>
            {u && (
              <Link href={`/cout?property=${encodeURIComponent(u.id)}`} className="btn btn-ghost">
                {fr ? "Voir la méthode du coût" : "See the cost approach"} →
              </Link>
            )}
            {l.url && (
              <a href={l.url} target="_blank" rel="noopener noreferrer nofollow" className="btn btn-ghost">
                {fr ? "Annonce originale" : "Original listing"} ↗
              </a>
            )}
          </div>
        </div>
        <aside className="lg:border-l lg:border-[var(--line)] lg:pl-10">
          <dl className="grid grid-cols-2 gap-x-6 lg:grid-cols-1">
            {e?.est != null && (
              <div className="border-t border-[var(--line)] py-3">
                <dt className="klabel">{fr ? "Estimation Vrai-Prix" : "Vrai-Prix estimate"}</dt>
                <dd className="vp-display mt-0.5 text-[22px] font-bold tracking-[-0.02em]">{money(e.est, lang)}</dd>
                <dd className="vp-mono text-[10.5px] uppercase tracking-[0.05em] text-ink-3">
                  {money(e.low, lang)} – {money(e.high, lang)}
                </dd>
              </div>
            )}
            {e?.diff != null && (
              <div className="border-t border-[var(--line)] py-3">
                <dt className="klabel">{fr ? "Prix demandé − estimation" : "Asking − estimate"}</dt>
                <dd className={`vp-display mt-0.5 text-[22px] font-bold tracking-[-0.02em] ${e.diff > 0 ? "text-ink" : "text-[var(--danger)]"}`}>
                  {e.diff >= 0 ? "+" : "−"}
                  {money(Math.abs(e.diff), lang)}
                </dd>
              </div>
            )}
            {(u?.valeurRole ?? e?.valeur_role) != null && (
              <div className="border-t border-[var(--line)] py-3">
                <dt className="klabel">{fr ? "Évaluation municipale (rôle)" : "Municipal assessment (roll)"}</dt>
                <dd className="vp-display mt-0.5 text-[22px] font-bold tracking-[-0.02em] text-ink-2">{money(u?.valeurRole ?? e?.valeur_role, lang)}</dd>
                {(u?.valeurRole ?? e?.valeur_role)! > 0 && (
                  <dd className="vp-mono text-[10.5px] uppercase tracking-[0.05em] text-ink-3">
                    {fr ? "prix / rôle" : "price / roll"} {(l.price / (u?.valeurRole ?? e?.valeur_role)!).toLocaleString(fr ? "fr-CA" : "en-CA", { maximumFractionDigits: 2 })}
                  </dd>
                )}
              </div>
            )}
            <div className="border-t border-[var(--line)] py-3">
              <dt className="klabel">{fr ? "En marché depuis" : "On market since"}</dt>
              <dd className="vp-display mt-0.5 text-[16px] font-bold tracking-[-0.02em]">{epochDate(l.firstSeen, lang)}</dd>
              <dd className="vp-mono text-[10.5px] uppercase tracking-[0.05em] text-ink-3">
                {fr ? "vu le" : "seen"} {epochDate(l.lastSeen, lang)}
              </dd>
            </div>
            {(l.brokerName || l.agency) && (
              <div className="border-t border-[var(--line)] py-3">
                <dt className="klabel">{fr ? "Courtier / vendeur" : "Broker / seller"}</dt>
                <dd className="mt-0.5 text-[13.5px] font-semibold">{l.brokerName || "—"}</dd>
                {l.agency && l.agency !== l.brokerName && <dd className="text-[12px] text-ink-2">{l.agency}</dd>}
              </div>
            )}
          </dl>
        </aside>
      </section>

      {/* ================= 3. description ================= */}
      {(l.description || remarques) && (
        <section>
          <Sect num="01" kicker={fr ? "Annonce" : "Listing"} title={fr ? "Description" : "Description"} />
          <div className="mt-5 max-w-3xl whitespace-pre-line text-[14.5px] leading-relaxed text-ink-2">{l.description || remarques}</div>
          {l.description && remarques && remarques !== l.description && (
            <div className="mt-4 max-w-3xl whitespace-pre-line border-l-2 border-accent pl-4 text-[13.5px] leading-relaxed text-ink-2">{remarques}</div>
          )}
        </section>
      )}

      {/* ================= 4. inclusions / caractéristiques ================= */}
      {data.features.length > 0 && (
        <section>
          <Sect num="02" kicker={fr ? "Annonce" : "Listing"} title={fr ? "Caractéristiques et inclusions" : "Features and inclusions"} />
          <ul className="mt-5 grid gap-x-8 gap-y-1.5 text-[13.5px] sm:grid-cols-2 lg:grid-cols-3">
            {data.features.map((f, i) => (
              <li key={i} className="flex gap-2 border-b border-[var(--line-soft)] py-1.5">
                <span aria-hidden="true" className="mt-[7px] inline-block h-[5px] w-[5px] shrink-0 bg-accent" />
                <span>{f}</span>
              </li>
            ))}
          </ul>
        </section>
      )}

      {/* ================= 5. détails structurés ================= */}
      {(detailEntries.length > 0 || pieces.length > 0) && (
        <section>
          <Sect num="03" kicker={fr ? "Annonce" : "Listing"} title={fr ? "Détails pratiques" : "Practical details"} />
          {detailEntries.length > 0 && (
            <div className="mt-5 grid grid-cols-2 gap-x-6 gap-y-3 md:grid-cols-3 lg:grid-cols-4">
              {detailEntries.map(([k, v]) => (
                <Chip key={k} k={k.replace(/_/g, " ")} v={v} />
              ))}
            </div>
          )}
          {pieces.length > 0 && (
            <div className="src-wrap mt-6">
              <table className="src-table">
                <thead>
                  <tr>
                    <th>{fr ? "Pièce" : "Room"}</th>
                    <th>{fr ? "Niveau" : "Level"}</th>
                    <th>{fr ? "Dimensions" : "Dimensions"}</th>
                    <th>{fr ? "Revêtement" : "Flooring"}</th>
                  </tr>
                </thead>
                <tbody>
                  {pieces.map((p, i) => (
                    <tr key={i}>
                      <td className="font-semibold">{p.nom ?? p.name ?? "—"}</td>
                      <td>{p.niveau ?? p.level ?? "—"}</td>
                      <td className="vp-mono text-[12px]">{p.dimensions ?? "—"}</td>
                      <td>{p.revetement ?? p.flooring ?? "—"}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      )}

      {/* ================= 6. analyses : mesure Vrai-Prix ================= */}
      <section>
        <Sect num="04" kicker={fr ? "Analyse" : "Analysis"} title={fr ? "La mesure Vrai-Prix face au prix demandé" : "The Vrai-Prix measure vs. the asking price"} />
        {e?.est ? (
          <div className="mt-6 grid gap-x-12 gap-y-8 lg:grid-cols-[1.4fr_1fr]">
            <div>
              <p className="klabel mb-1">{fr ? "Intervalle de confiance (P10-P90) et prix demandé" : "Confidence interval (P10-P90) and asking price"}</p>
              <RangeBar low={e.low ?? e.est} estimate={e.est} high={e.high ?? e.est} role={l.price} lang={lang} />
              <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">
                {fr ? "Le repère « rôle » de la barre marque ici le prix demandé." : "The “roll” marker on the bar shows the asking price here."}
              </p>
              <div className="src-wrap mt-6">
                <table className="src-table">
                  <thead>
                    <tr>
                      <th>{fr ? "Méthode" : "Method"}</th>
                      <th className="text-right">{fr ? "Valeur" : "Value"}</th>
                      <th className="text-right">{fr ? "vs prix demandé" : "vs asking"}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {methods.map((m) => (
                      <tr key={m.key} className={m.main ? "font-bold" : ""}>
                        <td>{fr ? m.fr : m.en}</td>
                        <td className="vp-mono text-right">{money(m.v, lang)}</td>
                        <td className={`vp-mono text-right ${m.v != null && m.v < l.price ? "text-[var(--danger)]" : ""}`}>
                          {m.v != null ? pct((m.v / l.price - 1) * 100, lang, 1) : "—"}
                        </td>
                      </tr>
                    ))}
                    <tr className="bg-surface-2">
                      <td>{fr ? "Prix demandé" : "Asking price"}</td>
                      <td className="vp-mono text-right">{money(l.price, lang)}</td>
                      <td className="vp-mono text-right">—</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p className="mt-4 max-w-3xl text-[13px] leading-relaxed text-ink-2">
                {fr
                  ? "Rappel : l'écart entre la mesure et le prix demandé additionne l'erreur du modèle ET la stratégie d'affichage du vendeur. Le prix demandé n'est pas la valeur marchande ; seule la vente la révèle."
                  : "Reminder: the gap between the measure and the asking price adds up the model's error AND the seller's pricing strategy. The asking price is not market value; only the sale reveals it."}
              </p>
            </div>
            <div className="lg:border-l lg:border-[var(--line)] lg:pl-10">
              <p className="klabel">{fr ? "Historique du prix demandé" : "Asking price history"}</p>
              <div className="mt-3">
                <PriceHistory log={data.priceLog} current={l.price} lastSeen={l.lastSeen} fr={fr} lang={lang} />
              </div>
              <p className="klabel mt-8">{fr ? "Jumelage au rôle" : "Match to the roll"}</p>
              <p className="mt-1 text-[13px] text-ink-2">
                {u
                  ? fr
                    ? `Unité ${u.id} (${u.adresse ?? "—"}) jumelée à ${e.match_m != null ? `${num(e.match_m, lang, 1)} m` : "—"} de l'annonce · ${e.n_comps ?? 0} comparables du moteur · évaluée le ${e.evaluated_at ?? "—"}.`
                    : `Unit ${u.id} (${u.adresse ?? "—"}) matched ${e.match_m != null ? `${num(e.match_m, lang, 1)} m` : "—"} from the listing · ${e.n_comps ?? 0} engine comparables · valued on ${e.evaluated_at ?? "—"}.`
                  : fr
                    ? "Aucune unité du rôle à moins de 250 m."
                    : "No assessment unit within 250 m."}
              </p>
              <Link href={`/a-vendre/${encodeURIComponent(l.uid)}/evaluer`} className="btn btn-primary mt-6">
                {fr ? "Choisir mes comparables et comparer" : "Pick my comparables and compare"} →
              </Link>
            </div>
          </div>
        ) : (
          <div className="mt-6 max-w-3xl text-[14px] leading-relaxed text-ink-2">
            <p>
              {fr
                ? "Cette annonce n'a pas de mesure Vrai-Prix : aucune unité du rôle d'évaluation n'a pu être jumelée à moins de 250 m de ses coordonnées (ou l'annonce n'est pas géolocalisée)."
                : "This listing has no Vrai-Prix measure: no assessment unit could be matched within 250 m of its coordinates (or the listing is not geolocated)."}
            </p>
            {l.lat != null && (
              <Link href={`/a-vendre/${encodeURIComponent(l.uid)}/evaluer`} className="btn btn-primary mt-5">
                {fr ? "Faire quand même mon évaluation par comparables" : "Build my valuation from comparables anyway"} →
              </Link>
            )}
          </div>
        )}
      </section>

      {/* ================= 6b. analyse technique IA (si déjà calculée) ================= */}
      {data.aiSummary && (
        <section>
          <Sect num="04b" kicker={fr ? "Analyse IA" : "AI analysis"} title={fr ? "Analyse technique IA du bâtiment" : "AI technical analysis of the building"} />
          <p className="vp-mono mt-3 text-[10.5px] uppercase tracking-[0.06em] text-ink-3">
            Claude Sonnet 5 · v{data.aiSummary.version}{data.aiSummary.confidence != null ? ` · ${fr ? "confiance" : "confidence"} ${Math.round(data.aiSummary.confidence)} %` : ""}{data.aiSummary.completedAt ? ` · ${dateFr(data.aiSummary.completedAt, lang)}` : ""}
          </p>
          <div className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 md:grid-cols-3 lg:grid-cols-6">
            <Chip k={fr ? "Structure" : "Structure"} v={data.aiSummary.structure?.replace(/_/g, " ")} />
            <Chip k={fr ? "Fondation" : "Foundation"} v={data.aiSummary.foundation?.replace(/_/g, " ")} />
            <Chip k={fr ? "Toiture" : "Roof"} v={data.aiSummary.roof?.replace(/_/g, " ")} />
            <Chip k={fr ? "Qualité" : "Quality"} v={data.aiSummary.quality} />
            <Chip k={fr ? "Condition" : "Condition"} v={data.aiSummary.condition?.replace(/_/g, " ")} />
            <Chip k={fr ? "RCN estimé" : "Estimated RCN"} v={money(data.aiSummary.rcn, lang)} />
          </div>
          <p className="mt-3 text-[13px] text-ink-2">
            {fr ? "Inféré par IA à partir des photos et de l'annonce, puis chiffré par le moteur déterministe de la méthode du coût — estimation indicative." : "AI-inferred from the photos and listing, then costed by the deterministic cost-approach engine — indicative estimate."}
            {data.aiSummary.costValue != null ? ` ${fr ? "Indication par le coût" : "Cost approach indication"} : ${money(data.aiSummary.costValue, lang)}.` : ""}
          </p>
          <Link href={`/a-vendre/${encodeURIComponent(l.uid)}/analyse-cout`} className="vp-mono mt-3 inline-block text-[11px] font-bold uppercase tracking-[0.08em] text-accent">
            {fr ? "Voir le profil complet" : "See the full profile"} →
          </Link>
        </section>
      )}

      {/* ================= 7. registre (unité jumelée) ================= */}
      {u && (
        <section>
          <Sect num="05" kicker={fr ? "Registre officiel" : "Official record"} title={fr ? "Portrait au rôle d'évaluation" : "Assessment roll portrait"} />
          <div className="mt-5 grid grid-cols-2 gap-x-6 gap-y-3 md:grid-cols-4">
            <Chip k={fr ? "Adresse au rôle" : "Address on roll"} v={`${u.adresse ?? "—"}${u.apt ? ` app. ${u.apt}` : ""}`} />
            <Chip k={fr ? "Municipalité" : "Municipality"} v={u.municipalite} />
            <Chip k={fr ? "Type (rôle)" : "Type (roll)"} v={u.typeProp} />
            <Chip k={fr ? "Année de construction" : "Year built"} v={u.anneeConstruction} />
            <Chip k={fr ? "Aire d'étages" : "Floor area"} v={m2(u.aireEtagesM2, lang)} />
            <Chip k={fr ? "Terrain" : "Lot"} v={m2(u.superficieTerrainM2, lang)} />
            <Chip k={fr ? "Étages × logements" : "Storeys × dwellings"} v={`${u.nbEtages ?? "—"} × ${u.nbLogements ?? "—"}`} />
            <Chip k={fr ? "Genre / lien" : "Style / link"} v={[u.genreConstruction, u.lienPhysique].filter(Boolean).join(" · ")} />
            <Chip k={fr ? "Valeur terrain (rôle)" : "Land value (roll)"} v={money(u.valeurTerrain, lang)} />
            <Chip k={fr ? "Valeur bâtiment (rôle)" : "Building value (roll)"} v={money(u.valeurBatiment, lang)} />
            <Chip k={fr ? "Valeur au rôle" : "Assessed value"} v={money(u.valeurRole, lang)} />
            <Chip k={fr ? "Modèle hédonique 2026" : "Hedonic model 2026"} v={money(u.est2026, lang)} />
          </div>
          {area && u.aireEtagesM2 && Math.abs(area - u.aireEtagesM2) / u.aireEtagesM2 > 0.25 && (
            <p className="mt-4 max-w-3xl border-l-2 border-[var(--amber,#c98a1b)] pl-4 text-[13px] leading-relaxed text-ink-2">
              {fr
                ? `Attention : la superficie annoncée (${num(area, lang)} m²) s'écarte de plus de 25 % de l'aire d'étages au rôle (${num(u.aireEtagesM2, lang)} m²). Le rôle mesure l'aire brute des étages hors sous-sol ; l'annonce peut inclure le sous-sol aménagé ou le terrain — ou le jumelage peut être imparfait (condos empilés).`
                : `Note: the advertised area (${num(area, lang)} m²) differs by more than 25% from the roll's floor area (${num(u.aireEtagesM2, lang)} m²). The roll measures gross floor area excluding basement; the listing may include a finished basement or the lot — or the match may be imperfect (stacked condos).`}
            </p>
          )}
          <Link href={`/estimation/${encodeURIComponent(u.id)}`} className="vp-mono mt-4 inline-block text-[11px] font-bold uppercase tracking-[0.08em] text-accent">
            {fr ? "Voir le rapport de valeur complet de cette unité" : "See this unit's full value report"} →
          </Link>
        </section>
      )}

      {/* ================= 8. voisines à vendre ================= */}
      {data.nearby.length > 0 && (
        <section>
          <Sect num={u ? "06" : "05"} kicker={fr ? "Marché actif" : "Active market"} title={fr ? "À vendre à proximité (même catégorie)" : "For sale nearby (same category)"} />
          <div className="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {data.nearby.map((c) => (
              <ListingCardView key={c.uid} c={c} fr={fr} compact />
            ))}
          </div>
        </section>
      )}

      <p className="vp-mono border-t border-[var(--line)] pt-3 text-[10px] uppercase tracking-[0.05em] text-ink-3">
        {fr
          ? `Annonce ${l.uid} — copie Immo-Ka, capturée le ${epochDate(l.lastSeen, lang)}. Photos, textes et prix appartiennent au vendeur ou au courtier ; ils sont reproduits à titre informatif. Estimations Vrai-Prix : statistiques, non certifiées (OEAQ).`
          : `Listing ${l.uid} — Immo-Ka copy, captured ${epochDate(l.lastSeen, lang)}. Photos, texts and prices belong to the seller or broker; reproduced for information purposes. Vrai-Prix estimates: statistical, not certified (OEAQ).`}
        {e?.evaluated_at ? ` · ${fr ? "évaluée le" : "valued on"} ${dateFr(e.evaluated_at, lang)}` : ""}
      </p>
    </div>
  );
}