// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Listing.tsx: listing detail page — mobile-first
//   DOM order = visual order, identical on mobile AND desktop (Groupe KA
//   "detail page section order" standard): gallery → price + market badge +
//   address + chips → CTA/PDF → description → amenities → practical details →
//   price analysis → location → KA Scores → nearby.
//   Mobile: stacked columns; desktop: 2-column grid (col A | col B).
//   Forbidden: reordering via `order` / `column-reverse` (v2 bug where blocks
//   without `order` jumped ahead of the gallery on mobile).
// -----------------------------------------------------------------------------
import { lazy, Suspense, useEffect, useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Listing, fetchListing, fetchSources, fmtAvailability, fmtDist, fmtPrice, registerSourceNames, sourceName } from "../api";
import SmartImg from "../components/SmartImg";
import FairValueBadge from "../components/FairValueBadge";
import PriceAnalysis from "../components/PriceAnalysis";
import HistoriqueLouka from "../components/HistoriqueLouka";
import ImmeubleBloc from "../components/ImmeubleBloc";
import GestionnaireBloc from "../components/GestionnaireBloc";
import HiverScore from "../components/HiverScore";
import { IcoAlert, IcoDoc } from "../components/Icons";
import AmenityIco from "../components/AmenityIco";
import KaScoresBlock from "../components/KaScoresBlock";
import { markSeen } from "../search/seen";

// 3D mini-map (Mapbox) — lazily loaded, like the big map.
const ListingMap3D = lazy(() => import("../components/ListingMap3D"));

// Icons and labels of nearby amenities (rentka/poi.py category keys)
const POI_META: Record<string, { icon: string; label: string }> = {
  epicerie: { icon: "🛒", label: "Grocery store" },
  depanneur: { icon: "🏪", label: "Convenience store" },
  pharmacie: { icon: "💊", label: "Pharmacy" },
  ecole: { icon: "🏫", label: "School" },
  garderie: { icon: "🧸", label: "Daycare" },
  parc: { icon: "🌳", label: "Park" },
  bus: { icon: "🚌", label: "Bus" },
  metro: { icon: "🚇", label: "Subway" },
  gym: { icon: "🏋️", label: "Gym" },
  cafe: { icon: "☕", label: "Café" },
  clinique: { icon: "🩺", label: "Clinic" },
  hopital: { icon: "🏥", label: "Hospital" },
  bibliotheque: { icon: "📚", label: "Library" },
};

// POI grouped into collapsible categories
const POI_GROUPES: { titre: string; icone: string; cats: string[] }[] = [
  { titre: "Groceries", icone: "🛒", cats: ["epicerie", "depanneur"] },
  { titre: "Transit", icone: "🚌", cats: ["bus", "metro"] },
  { titre: "School and family", icone: "🎓", cats: ["ecole", "garderie", "bibliotheque"] },
  { titre: "Health", icone: "🏥", cats: ["pharmacie", "clinique", "hopital"] },
  { titre: "Neighbourhood life", icone: "☕", cats: ["cafe", "parc", "gym"] },
];

const PETS_LABEL: Record<string, string> = {
  oui: "Pets allowed", non: "No pets", conditions: "Pets with conditions",
};

const NBSP = " ";

/** ≈ walking minutes (straight-line × detour factor 1.3, 4.8 km/h) */
const fmtMarche = (m: number): string =>
  `≈${NBSP}${Math.max(1, Math.round((m * 1.3) / 80))}${NBSP}min walk`;

/** Badges derived from structured details (confirmed inclusions ✓). */
function badgesConfirmes(l: Listing): string[] {
  const d = l.details ?? {};
  const out: string[] = [];
  const inc = d.inclusions ?? {};
  if (inc.heating) out.push("Heat included");
  if (inc.electricity) out.push("Electricity included");
  if (inc.hot_water) out.push("Hot water included");
  if (inc.internet) out.push("Internet included");
  const app = d.appliances ?? {};
  if (app.dishwasher) out.push("Dishwasher");
  if (app.washer_dryer) out.push("Washer-dryer");
  if (app.fridge && app.stove) out.push("Appliances");
  if (d.ac) out.push("Air conditioning");
  if (d.elevator) out.push("Elevator");
  if (d.balcony) out.push("Balcony");
  if (d.pool) out.push("Pool");
  if (d.gym) out.push("Gym");
  if (d.laundry) out.push("Laundry");
  if (d.storage) out.push("Storage");
  if (d.parking?.available)
    out.push(`Parking${d.parking.type ? ` ${d.parking.type}` : ""}${d.parking.included ? " included" : ""}`);
  if (l.furnished) out.push("Furnished");
  if (d.smoking === false) out.push("Non-smoking");
  return out;
}

// --- Full-screen lightbox: swipe between photos + pinch to zoom -------------
function Lightbox({ images, start, titre, onClose }:
                  { images: string[]; start: number; titre: string; onClose: () => void }) {
  const [idx, setIdx] = useState(start);
  const [scale, setScale] = useState(1);
  const [tx, setTx] = useState(0);
  const [ty, setTy] = useState(0);
  const track = useRef<HTMLDivElement>(null);
  const pointers = useRef(new Map<number, { x: number; y: number }>());
  const pinch = useRef<{ d: number; scale: number } | null>(null);
  const lastTap = useRef(0);

  useEffect(() => {   // initial position + page scroll lock
    track.current?.scrollTo({ left: start * track.current.clientWidth });
    document.body.style.overflow = "hidden";
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const resetZoom = () => { setScale(1); setTx(0); setTy(0); };
  const onScroll = () => {
    const el = track.current;
    if (el && scale === 1) {
      const i = Math.round(el.scrollLeft / el.clientWidth);
      if (i !== idx) { setIdx(i); resetZoom(); }
    }
  };
  const dist = () => {
    const [a, b] = [...pointers.current.values()];
    return Math.hypot(a.x - b.x, a.y - b.y);
  };
  const onPointerDown = (e: React.PointerEvent) => {
    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
    if (pointers.current.size === 2)
      pinch.current = { d: dist(), scale };
    if (pointers.current.size === 1) {   // double-tap = ×2.5 zoom / back to ×1
      const now = Date.now();
      if (now - lastTap.current < 300) {
        if (scale > 1) resetZoom(); else setScale(2.5);
      }
      lastTap.current = now;
    }
  };
  const onPointerMove = (e: React.PointerEvent) => {
    const prev = pointers.current.get(e.pointerId);
    if (!prev) return;
    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
    if (pointers.current.size === 2 && pinch.current) {
      const s = Math.min(4, Math.max(1, pinch.current.scale * (dist() / pinch.current.d)));
      setScale(s);
      if (s === 1) { setTx(0); setTy(0); }
    } else if (pointers.current.size === 1 && scale > 1) {
      setTx((v) => v + (e.clientX - prev.x));   // pan while zoomed
      setTy((v) => v + (e.clientY - prev.y));
    }
  };
  const onPointerUp = (e: React.PointerEvent) => {
    pointers.current.delete(e.pointerId);
    if (pointers.current.size < 2) pinch.current = null;
  };

  return (
    <div className="lightbox lightbox-v2" role="dialog" aria-modal="true"
         aria-label={`Photos — ${titre}`}>
      <button className="lightbox-close" aria-label="Close" onClick={onClose}>✕</button>
      <span className="carousel-count lightbox-count" aria-live="polite">
        {idx + 1}/{images.length}
      </span>
      <div
        className="lightbox-track" ref={track} onScroll={onScroll}
        style={scale > 1 ? { overflow: "hidden", touchAction: "none" } : undefined}
        onPointerDown={onPointerDown} onPointerMove={onPointerMove}
        onPointerUp={onPointerUp} onPointerCancel={onPointerUp}
      >
        {images.map((u, i) => (
          <div className="lightbox-cell" key={u}>
            <SmartImg
              src={u} original alt={`${titre} — photo ${i + 1} of ${images.length}`}
              draggable={false}
              style={i === idx && scale > 1
                ? { transform: `translate(${tx}px, ${ty}px) scale(${scale})` }
                : undefined}
            />
          </div>
        ))}
      </div>
      {scale === 1 && idx > 0 && (
        <button className="carousel-nav prev" aria-label="Previous photo"
                onClick={() => track.current?.scrollTo({
                  left: (idx - 1) * track.current.clientWidth, behavior: "smooth" })}>‹</button>
      )}
      {scale === 1 && idx < images.length - 1 && (
        <button className="carousel-nav next" aria-label="Next photo"
                onClick={() => track.current?.scrollTo({
                  left: (idx + 1) * track.current.clientWidth, behavior: "smooth" })}>›</button>
      )}
    </div>
  );
}

// --- Gallery with native swipe (scroll-snap) + counter + full screen --------
function Galerie({ images, titre, unitType }:
                 { images: string[]; titre: string; unitType?: string }) {
  const [idx, setIdx] = useState(0);
  const [zoom, setZoom] = useState(false);
  const track = useRef<HTMLDivElement>(null);

  const onScroll = () => {
    const el = track.current;
    if (el) setIdx(Math.round(el.scrollLeft / el.clientWidth));
  };
  const goto = (i: number) =>
    track.current?.scrollTo({ left: i * track.current.clientWidth, behavior: "smooth" });

  if (images.length === 0)
    return (
      <div className="carousel">
        <SmartImg src={null} fallbackLabel={unitType}
                  alt="No photo provided by the source" />
      </div>
    );

  return (
    <>
      <div className="carousel">
        <div className="carousel-track" ref={track} onScroll={onScroll}>
          {images.map((u, i) => (
            <SmartImg
              key={u} src={u} width_={800} fallbackLabel={unitType}
              loading={i === 0 ? "eager" : "lazy"} decoding="async"
              alt={`${titre} — photo ${i + 1} of ${images.length}`}
              onClick={() => setZoom(true)}
            />
          ))}
        </div>
        <span className="carousel-count" aria-live="polite">{idx + 1}/{images.length}</span>
        {idx > 0 && (
          <button className="carousel-nav prev" aria-label="Previous photo" onClick={() => goto(idx - 1)}>‹</button>
        )}
        {idx < images.length - 1 && (
          <button className="carousel-nav next" aria-label="Next photo" onClick={() => goto(idx + 1)}>›</button>
        )}
      </div>
      {images.length > 1 && (
        <div className="thumbs">
          {images.map((u, i) => (
            <button key={u} className={i === idx ? "on" : ""} onClick={() => goto(i)}
                    aria-label={`Photo ${i + 1}`}>
              <SmartImg src={u} width_={160} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
      {zoom && (
        <Lightbox images={images} start={idx} titre={titre}
                  onClose={() => setZoom(false)} />
      )}
    </>
  );
}

export default function ListingPage() {
  const { uid } = useParams<{ uid: string }>();
  const [l, setL] = useState<Listing | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchSources().then((r) => registerSourceNames(r.sources)).catch(() => {});
    if (!uid) return;
    fetchListing(uid).then(setL).catch((e) => setError(String(e)));
    markSeen(uid);   // dimmed "already seen" marker on the search map
    window.scrollTo(0, 0);
  }, [uid]);

  if (error)
    return (
      <div className="notice container">
        <div className="big"><IcoAlert size={40} /></div>
        <h2>Listing not found</h2>
        <p>{error}</p>
        <Link className="btn btn-primary" to="/">Back to rentals</Link>
      </div>
    );

  if (!l)
    return (
      <div className="container detail">
        <div className="fiche" aria-busy="true">
          <div className="skel"><div className="sk-img" /></div>
          <div className="skel"><div className="sk-line" /><div className="sk-line" /><div className="sk-line short" /></div>
        </div>
      </div>
    );

  const dg = l.digest ?? null;
  const f = dg?.faits;
  const conf = dg?.confiance ?? {};
  const confirmes = badgesConfirmes(l);
  const autres = l.amenities.filter(
    (a) => !confirmes.some((b) => b.toLowerCase().includes(a.toLowerCase())));
  const inc = l.details?.inclusions ?? {};
  const zeroFrais = inc.heating && inc.electricity && inc.hot_water;

  const enLigneDepuis = l.first_seen
    ? Math.max(0, Math.round((Date.now() / 1000 - l.first_seen) / 86400)) : null;
  const hist = (l.price_history ?? []).filter((h) => h.price != null);
  const baissePrix = hist.length >= 2 && hist[0].price !== hist[1].price
    ? { de: hist[1].price!, a: hist[0].price! } : null;

  const updated = l.updated_at
    ? new Date(l.updated_at * 1000).toLocaleDateString("en-CA", {
        day: "numeric", month: "long", year: "numeric" }) : null;

  // key chips (only high-confidence facts extracted from text)
  const chips: string[] = [];
  if (l.unit_type) chips.push(l.unit_type);
  const dispo = fmtAvailability(l.availability_date);
  if (dispo) chips.push(dispo === "Now" ? "Available now" : `Available ${dispo}`);
  if (l.furnished) chips.push("Furnished");
  if (l.pets) chips.push(PETS_LABEL[l.pets] ?? l.pets);
  if (l.area_sqft) chips.push(`${Math.round(l.area_sqft).toLocaleString("en-CA")}${NBSP}sq ft`);
  if (f?.nb_occupants_total && conf.nb_occupants_total !== "faible")
    chips.push(`${f.nb_occupants_total} occupants`);
  if (f?.salle_de_bain && conf.salle_de_bain !== "faible")
    chips.push(`${f.salle_de_bain === "commune" ? "Shared" : "Private"} bathroom`);
  if (l.details?.floor != null) chips.push(`Floor ${l.details.floor}`);

  const pois = l.poi ?? [];

  return (
    <div className="container detail">
      <nav className="crumbs" aria-label="Breadcrumb">
        <Link to="/">Rentals</Link> ›
        {l.city && <span>{l.city}</span>} ›
        <span>{l.title || l.address}</span>
      </nav>

      <div className="fiche">
        {/* ------- left column (desktop): gallery, price, description, -------
             ------- amenities, practical — DOM order IS the visual order ------ */}
        <div className="f-col">
          <section className="f-bloc f-galerie" aria-label="Photos">
            <Galerie images={l.images ?? []} titre={l.title || l.address}
                     unitType={l.unit_type || undefined} />
          </section>

          <section className="f-bloc f-hero">
            <div className="price">
              {fmtPrice(l.price, l.price_label)} {l.price != null && <small>/{NBSP}month</small>}
            </div>
            {l.fv_verdict && (
              <div><FairValueBadge verdict={l.fv_verdict} deviation={l.fv_deviation} /></div>
            )}
            <h1>{l.title || l.address}</h1>
            <div className="loc">
              {[l.address !== l.title ? l.address : "", l.sector, l.city].filter(Boolean).join(" · ")}
            </div>
            <div className="chips-scroll" role="list" aria-label="Key features">
              {chips.map((c) => (
                <span className="chip-key" role="listitem" key={c}>
                  <AmenityIco label={c} size={14} fallback="spark" /> {c}
                </span>
              ))}
            </div>
            <nav className="ancres" aria-label="Page sections">
              <a href="#description">Description</a>
              <a href="#analyse-prix">Price</a>
              <a href="#inclusions">Amenities</a>
              {l.lat != null && l.lng != null && <a href="#emplacement">Map</a>}
              <a href="#proximite">Nearby</a>
            </nav>
            <a className="cta cta-desktop" href={`/gateway/${encodeURIComponent(l.uid)}`}
               target="_blank" rel="noopener noreferrer">
              See the listing at {sourceName(l.source)} ↗
            </a>
            <a className="btn btn-ghost btn-pdf"
               href={`/api/listings/${encodeURIComponent(l.uid)}/pdf`} download>
              <IcoDoc size={14} /> Download the listing sheet (PDF)
            </a>
          </section>

          <section className="f-bloc f-desc" id="description">
            <h2>Description</h2>
            {dg ? (
              <>
                {dg.en_bref && <p className="enbref">{dg.en_bref}</p>}
                {dg.sections.map((s) => (
                  <div key={s.titre} className="desc-section">
                    <h4>{s.titre}</h4>
                    <p>{s.texte}</p>
                  </div>
                ))}
                <details className="texte-original">
                  <summary>See the source's original text</summary>
                  <p>{l.description}</p>
                </details>
              </>
            ) : (
              l.description
                ? <p style={{ color: "var(--ink-2)" }}>{l.description}</p>
                : <p className="fine">The source does not provide a description for this listing.</p>
            )}
          </section>

          <section className="f-bloc f-incl" id="inclusions">
            <h2>Amenities and inclusions</h2>
            {zeroFrais && <div className="deal-badge deal-good">💡 Heat, electricity and hot water included — $0 hidden costs</div>}
            <div className="amenity-grid">
              {confirmes.map((b) => (
                <span className="amenity-it confirmed" key={`c-${b}`}>
                  <span className="am-ico"><AmenityIco label={b} /></span>
                  <span className="am-txt">{b}</span>
                  <span className="am-conf" title="Confirmed by the source's structured data">✓</span>
                </span>
              ))}
              {autres.map((a) => (
                <span className="amenity-it unconfirmed" key={a} title="Mentioned by the source, without structured confirmation">
                  <span className="am-ico"><AmenityIco label={a} fallback="spark" /></span>
                  <span className="am-txt">{a}</span>
                </span>
              ))}
            </div>
            {confirmes.length === 0 && autres.length === 0 && (
              <p className="fine">The source does not specify inclusions.</p>
            )}
          </section>

          <section className="f-bloc f-pratique">
            <h2>Practical details</h2>
            <div className="kv">
              <div className="cell"><div className="k">Manager</div><div className="v">{sourceName(l.source)}</div></div>
              {l.price_label && (
                <div className="cell"><div className="k">Advertised price</div><div className="v">{l.price_label}</div></div>
              )}
              {f?.duree_bail_minimale_mois && (
                <div className="cell"><div className="k">Minimum lease</div><div className="v">{f.duree_bail_minimale_mois} months</div></div>
              )}
              {enLigneDepuis != null && (
                <div className="cell"><div className="k">Online for</div>
                  <div className="v">{enLigneDepuis === 0 ? "today" : `${enLigneDepuis}${NBSP}day${enLigneDepuis > 1 ? "s" : ""}`}</div></div>
              )}
              {updated && (
                <div className="cell"><div className="k">Synced</div><div className="v">{updated}</div></div>
              )}
            </div>
            {baissePrix && (
              <div className={`prix-histo ${baissePrix.a < baissePrix.de ? "down" : "up"}`}>
                {baissePrix.a < baissePrix.de ? "📉" : "📈"} Price went from{" "}
                {fmtPrice(baissePrix.de)} to <b>{fmtPrice(baissePrix.a)}</b>
                {baissePrix.a < baissePrix.de && " — negotiation leverage"}
              </div>
            )}
          </section>
        </div>

        {/* ------- right column (desktop): price analysis, history, ----------
             ------- building, manager, map, KA Scores, nearby ----------------- */}
        <div className="f-col">
          <PriceAnalysis uid={l.uid} price={l.price} />

          <HistoriqueLouka uid={l.uid} />

          {l.immeuble && <ImmeubleBloc im={l.immeuble} />}

          <GestionnaireBloc source={l.source} />

          {l.lat != null && l.lng != null && (
            <section className="f-bloc f-carte" id="emplacement">
              <h2>Location</h2>
              <Suspense fallback={<div className="lmap3d lmap3d-skel" aria-busy="true" />}>
                <ListingMap3D l={l} />
              </Suspense>
              <p className="fine">
                3D view of the area — the listing's building is highlighted.
                Position from the geocoded address (OpenStreetMap).
              </p>
            </section>
          )}

          {l.kascores && <KaScoresBlock ks={l.kascores} />}

          {l.hiver && <HiverScore h={l.hiver} />}

          <section className="f-bloc f-poi" id="proximite">
            {pois.length > 0 && (
              <>
                <h2>Nearby</h2>
                {POI_GROUPES.map((g, gi) => {
                  const items = pois.filter((p) => g.cats.includes(p.cat));
                  if (items.length === 0) return null;
                  return (
                    <details className="poi-groupe" key={g.titre} open={gi === 0}>
                      <summary>
                        <span>{g.icone} {g.titre}</span>
                        <span className="poi-resume">
                          {items.length} · nearest at {fmtDist(items[0].dist_m)}
                        </span>
                      </summary>
                      <ul className="poi-list">
                        {items.map((p) => {
                          const meta = POI_META[p.cat] ?? { icon: "📍", label: p.cat };
                          return (
                            <li key={p.cat} title={meta.label}>
                              <span className="poi-ico" aria-hidden="true">{meta.icon}</span>
                              <span className="poi-name">{p.name}</span>
                              <span className="poi-dist">{fmtDist(p.dist_m)} · {fmtMarche(p.dist_m)}</span>
                            </li>
                          );
                        })}
                      </ul>
                    </details>
                  );
                })}
                <div className="fine">
                  Estimated walking times (straight-line distance ×{NBSP}1.3, 4.8{NBSP}km/h) — OpenStreetMap data.
                </div>
              </>
            )}
          </section>
        </div>
      </div>

      <div className="fine f-foot">
        {updated && <>Last synced: {updated}. </>}
        Prices and availability are as displayed by the source — every listing
        links back to the original ad.
      </div>

      {/* sticky mobile CTA — always visible */}
      <div className="cta-sticky">
        <span className="cta-sticky-prix">{fmtPrice(l.price, l.price_label)}{l.price != null && <small>/month</small>}</span>
        <a className="cta" href={`/gateway/${encodeURIComponent(l.uid)}`}
           target="_blank" rel="noopener noreferrer">
          See at {sourceName(l.source)} ↗
        </a>
      </div>
    </div>
  );
}