// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Listing.tsx : full listing page
//   gallery + lightbox · specs · details (DDF fields) · rooms ·
//   features · description · price history · agent · mini-map · financing
// -----------------------------------------------------------------------------
import { Suspense, lazy, useEffect, useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import {
  Listing, Room, fetchListing, fetchSources, fmtArea, fmtDate, fmtPrice,
  registerSourceNames, sourceName,
} from "../api";

const PropertyMap = lazy(() => import("../components/PropertyMap"));
import Financing from "../components/Financing";
import NearbyPlaces from "../components/NearbyPlaces";
import { Ico } from "../components/Icons";
import AmenityIco from "../components/AmenityIco";
import { TypeFallback } from "../components/PropertyImg";
import { useAccount } from "../account";

// --- Lightbox: pinch to zoom + pan + swipe between photos ---------------------
function ZoomImg({ src, onSwipe }: { src: string; onSwipe: (dir: 1 | -1) => void }) {
  const [t, setT] = useState({ scale: 1, x: 0, y: 0 });
  const pointers = useRef(new Map<number, { x: number; y: number }>());
  const start = useRef({ scale: 1, x: 0, y: 0, dist: 0, cx: 0, cy: 0, t: 0 });
  const lastTap = useRef(0);

  // reset when the photo changes
  useEffect(() => { setT({ scale: 1, x: 0, y: 0 }); }, [src]);

  const dist = () => {
    const p = [...pointers.current.values()];
    return p.length < 2 ? 0 : Math.hypot(p[0].x - p[1].x, p[0].y - p[1].y);
  };
  const center = () => {
    const p = [...pointers.current.values()];
    return p.length < 2
      ? p[0] ?? { x: 0, y: 0 }
      : { x: (p[0].x + p[1].x) / 2, y: (p[0].y + p[1].y) / 2 };
  };

  const onDown = (e: React.PointerEvent) => {
    (e.target as HTMLElement).setPointerCapture(e.pointerId);
    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
    const c = center();
    start.current = { scale: t.scale, x: t.x, y: t.y, dist: dist(), cx: c.x, cy: c.y, t: Date.now() };
  };
  const onMove = (e: React.PointerEvent) => {
    if (!pointers.current.has(e.pointerId)) return;
    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
    const s = start.current;
    if (pointers.current.size >= 2 && s.dist > 0) {
      // pinch: zoom around the two-finger midpoint
      const scale = Math.min(4, Math.max(1, (dist() / s.dist) * s.scale));
      const c = center();
      setT({ scale, x: s.x + (c.x - s.cx), y: s.y + (c.y - s.cy) });
    } else if (pointers.current.size === 1 && t.scale > 1) {
      // pan once zoomed
      const p = pointers.current.get(e.pointerId)!;
      setT({ scale: t.scale, x: s.x + (p.x - s.cx), y: s.y + (p.y - s.cy) });
    }
  };
  const onUp = (e: React.PointerEvent) => {
    const p = pointers.current.get(e.pointerId);
    pointers.current.delete(e.pointerId);
    const s = start.current;
    if (pointers.current.size === 0 && p) {
      const dx = p.x - s.cx, dy = p.y - s.cy, dt = Date.now() - s.t;
      if (t.scale <= 1.05 && Math.abs(dx) > 56 && Math.abs(dx) > Math.abs(dy) * 1.5) {
        onSwipe(dx < 0 ? 1 : -1);                       // swipe → next photo
      } else if (dt < 260 && Math.abs(dx) < 8 && Math.abs(dy) < 8) {
        const now = Date.now();
        if (now - lastTap.current < 320)                 // double-tap: ×2.4 zoom
          setT(t.scale > 1 ? { scale: 1, x: 0, y: 0 } : { scale: 2.4, x: 0, y: 0 });
        lastTap.current = now;
      }
      if (t.scale <= 1.02) setT({ scale: 1, x: 0, y: 0 });
    }
  };

  return (
    <img
      src={src} alt="" draggable={false}
      style={{
        transform: `translate(${t.x}px, ${t.y}px) scale(${t.scale})`,
        transition: pointers.current.size ? "none" : "transform 0.15s ease",
        touchAction: "none", cursor: t.scale > 1 ? "grab" : "zoom-out",
      }}
      onClick={(e) => e.stopPropagation()}
      onPointerDown={onDown} onPointerMove={onMove}
      onPointerUp={onUp} onPointerCancel={onUp}
    />
  );
}

// --- Gallery: native swipe (scroll-snap) + thumbnails + fullscreen ------------
function Gallery({ images, captions, title, type }:
  { images: string[]; captions?: string[]; title: string; type?: string }) {
  const [idx, setIdx] = useState(0);
  const [zoom, setZoom] = useState(false);
  const [dead, setDead] = useState<Set<string>>(new Set());
  const track = useRef<HTMLDivElement>(null);

  // images that fail to load: removed from the gallery on the fly (never a
  // broken-image icon); captions kept aligned
  const alive = images
    .map((u, i) => ({ u, cap: captions && captions.length === images.length ? captions[i] : "" }))
    .filter(({ u }) => !dead.has(u));
  const markDead = (u: string) => setDead((d) => new Set(d).add(u));

  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" });

  useEffect(() => {
    if (!zoom) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setZoom(false);
      if (e.key === "ArrowLeft") setIdx((i) => Math.max(0, i - 1));
      if (e.key === "ArrowRight") setIdx((i) => Math.min(alive.length - 1, i + 1));
    };
    window.addEventListener("keydown", onKey);
    // freeze the background while fullscreen (mobile)
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [zoom, alive.length]);

  if (alive.length === 0)
    return <div className="carousel"><div className="carousel-empty"><TypeFallback type={type} /></div></div>;

  const cur = Math.min(idx, alive.length - 1);
  const swipe = (dir: 1 | -1) =>
    setIdx((i) => Math.min(alive.length - 1, Math.max(0, i + dir)));

  return (
    <>
      <div className="carousel">
        <div className="carousel-track" ref={track} onScroll={onScroll}>
          {alive.map(({ u }, i) => (
            <img key={u} src={u} loading={i <= 1 ? "eager" : "lazy"} decoding="async"
              alt={`${title} — photo ${i + 1} of ${alive.length}`}
              onError={() => markDead(u)} onClick={() => setZoom(true)} />
          ))}
        </div>
        {alive[cur]?.cap && <span className="carousel-caption">{alive[cur].cap}</span>}
        <span className="carousel-count" aria-live="polite">{cur + 1}/{alive.length}</span>
        {cur > 0 && <button className="carousel-nav prev" aria-label="Previous photo" onClick={() => goto(cur - 1)}>‹</button>}
        {cur < alive.length - 1 && <button className="carousel-nav next" aria-label="Next photo" onClick={() => goto(cur + 1)}>›</button>}
      </div>
      {alive.length > 1 && (
        <div className="thumbs">
          {alive.map(({ u }, i) => (
            <button key={u} className={i === cur ? "on" : ""} onClick={() => goto(i)} aria-label={`Photo ${i + 1}`}>
              <img src={u} alt="" loading="lazy" decoding="async" onError={() => markDead(u)} />
            </button>
          ))}
        </div>
      )}
      {zoom && (
        <div className="lightbox" onClick={() => setZoom(false)} role="dialog" aria-label="Enlarged photo">
          <button className="lb-close" aria-label="Close" onClick={() => setZoom(false)}>✕</button>
          {cur > 0 && <button className="lb-nav prev" aria-label="Previous" onClick={(e) => { e.stopPropagation(); setIdx(cur - 1); }}>‹</button>}
          <ZoomImg src={alive[cur].u} onSwipe={swipe} />
          {cur < alive.length - 1 && <button className="lb-nav next" aria-label="Next" onClick={(e) => { e.stopPropagation(); setIdx(cur + 1); }}>›</button>}
          <span className="lb-count">
            {alive[cur]?.cap ? `${alive[cur].cap} · ` : ""}{cur + 1} / {alive.length}
          </span>
        </div>
      )}
    </>
  );
}

// technical `details` keys never shown in “Details”
const DETAIL_HIDDEN = new Set([
  "pieces", "price_from", "cover_thumb", "photo_captions", "img_audited",
  "needs_image_review", "postal_code", "region", "transaction",
  "prix_pi2", "prix_m2", "listing_origin_url",
]);

// icon for each “spec” tile (Icons.tsx)
const SPEC_ICONS: Record<string, string> = {
  "Type": "home", "Bedrooms": "bed", "Bathrooms": "bath",
  "Half baths": "drop", "Living area": "area", "Lot": "land",
  "Year built": "calendar", "MLS®": "tag",
};

export default function ListingPage() {
  const { uid } = useParams<{ uid: string }>();
  const [l, setL] = useState<Listing | null>(null);
  const [error, setError] = useState<string | null>(null);
  // re-render when the source names arrive (Title Case fallback otherwise)
  const [, setSrcTick] = useState(0);

  useEffect(() => {
    fetchSources().then((r) => { registerSourceNames(r.sources); setSrcTick(1); }).catch(() => {});
    if (!uid) return;
    setL(null); setError(null);
    fetchListing(uid).then(setL).catch((e) => setError(String(e)));
    window.scrollTo(0, 0);
  }, [uid]);

  const { favs, toggleFav, enabled: accountEnabled } = useAccount();

  if (error)
    return (
      <div className="notice container">
        <div className="big"><Ico name="alert" size={44} /></div>
        <h2>Listing not found</h2>
        <p>{error}</p>
        <Link className="btn btn-primary" to="/">Back to homes</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 specs: { k: string; v: string }[] = [];
  if (l.property_type) specs.push({ k: "Type", v: l.property_type });
  if (l.bedrooms != null) specs.push({ k: "Bedrooms", v: String(l.bedrooms) });
  if (l.bathrooms != null) specs.push({ k: "Bathrooms", v: String(l.bathrooms) });
  if (l.powder_rooms != null) specs.push({ k: "Half baths", v: String(l.powder_rooms) });
  if (l.area_sqft != null) specs.push({ k: "Living area", v: fmtArea(l.area_sqft)! });
  if (l.lot_sqft != null) specs.push({ k: "Lot", v: fmtArea(l.lot_sqft)! });
  if (l.year_built != null) specs.push({ k: "Year built", v: String(l.year_built) });
  if (l.mls) specs.push({ k: "MLS®", v: l.mls });

  const rooms: Room[] = Array.isArray(l.details?.pieces) ? (l.details!.pieces as Room[]) : [];
  const detEntries = Object.entries(l.details ?? {})
    .filter(([k, v]) => !DETAIL_HIDDEN.has(k) && (typeof v === "string" || typeof v === "number") && String(v).trim());

  const isSale = l.details?.transaction !== "location";

  const hist = (l.price_history ?? []).filter((h) => h.price != null);
  const drop = hist.length >= 2 && hist[0].price !== hist[1].price
    ? { from: hist[1].price!, to: hist[0].price! } : null;
  const updated = l.updated_at ? fmtDate(l.updated_at) : null;

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

      <div className="fiche">
        {/* -------- left column: gallery, price/summary, description, ---------
             -------- details, rooms — DOM order = visual order ---------------- */}
        <div className="f-col">
          <section className="f-bloc f-galerie" aria-label="Photos">
            <Gallery
              images={l.images ?? []}
              captions={Array.isArray(l.details?.photo_captions)
                ? (l.details!.photo_captions as string[]) : undefined}
              title={l.address || l.title}
              type={l.property_type}
            />
          </section>

          <section className="f-bloc f-hero">
            <div className="price-kicker">
              {isSale ? "Asking price" : "Monthly rent"}
            </div>
            <div className="price-row">
              <div className="price">
                {fmtPrice(l.price, l.price_label)}
                {!isSale && <span className="per-month"> /month</span>}
              </div>
              {l.property_type && (
                <span className="type-chip">
                  <Ico name={SPEC_ICONS["Type"]} size={13} /> {l.property_type}
                  {!isSale ? " · for rent" : ""}
                  {l.details?.price_from ? " · starting at" : ""}
                </span>
              )}
            </div>
            {l.price != null && l.area_sqft != null && l.area_sqft > 200 && (
              <div className="price-sub">${Math.round(l.price / l.area_sqft).toLocaleString("en-CA")} / sq ft of living area</div>
            )}
            <h1>
              {l.address || l.title}
              {accountEnabled && (
                <button
                  className={`fav-heart ${favs.has(l.uid) ? "on" : ""}`}
                  aria-label={favs.has(l.uid) ? "Remove from favourites" : "Add to favourites"}
                  onClick={() => toggleFav(l)}
                >
                  {favs.has(l.uid) ? "♥" : "♡"}
                </button>
              )}
            </h1>
            <div className="loc"><Ico name="pin" size={13} /> {[l.sector, l.city, l.region].filter(Boolean).join(" · ")}</div>

            <div className="spec-list">
              {specs.map((s) => (
                <div className="spec-row" key={s.k}>
                  <span className="spec-badge"><Ico name={SPEC_ICONS[s.k] ?? "tag"} size={15} /></span>
                  <span className="spec-k">{s.k}</span>
                  <b className="spec-v">{s.v}</b>
                </div>
              ))}
            </div>

            {drop && (
              <div className={`prix-histo ${drop.to < drop.from ? "down" : ""}`}>
                <Ico name={drop.to < drop.from ? "trenddown" : "trendup"} size={16} /> Price changed from {fmtPrice(drop.from)} to <b>{fmtPrice(drop.to)}</b>
              </div>
            )}

            {(l.broker_name || l.broker_phone) && (
              <div className="broker">
                <div className="broker-k">Listing agent</div>
                {l.broker_name && <div className="broker-name">{l.broker_name}</div>}
                {l.broker_phone && <a className="broker-tel" href={`tel:${l.broker_phone.replace(/\s/g, "")}`}><Ico name="phone" size={14} /> {l.broker_phone}</a>}
              </div>
            )}

            <a className="cta" href={l.url} target="_blank" rel="noopener noreferrer">
              See the listing at {sourceName(l.source)} <Ico name="external" size={15} />
            </a>
            <div className="fine">
              Aggregated by House-Ka — {sourceName(l.source)}{updated ? ` · synced on ${updated}` : ""}.
            </div>
          </section>

          {l.duplicates && l.duplicates.length > 0 && (
            <section className="f-bloc" id="publications">
              <h2>Also published on</h2>
              <p className="dups-note">
                This property was found on {l.duplicates.length}{" "}
                other site{l.duplicates.length > 1 ? "s" : ""} —
                House-Ka shows the most complete version.
              </p>
              <div className="dups-list">
                {l.duplicates.map((d) => (
                  <a key={d.uid} className="dup-item" href={d.url} target="_blank" rel="noopener noreferrer">
                    <span className="dup-src">{sourceName(d.source)}</span>
                    {(d.broker_name || d.agency) && (
                      <span className="dup-broker">{d.broker_name || d.agency}</span>
                    )}
                    <span className="dup-go">See the listing <Ico name="external" size={13} /></span>
                  </a>
                ))}
              </div>
            </section>
          )}

          {l.description && (
            <section className="f-bloc f-desc" id="description">
              <h2>Description</h2>
              <p className="desc-text">{l.description}</p>
            </section>
          )}

          {detEntries.length > 0 && (
            <section className="f-bloc" id="details">
              <h2>Details</h2>
              <div className="dtable">
                {detEntries.map(([k, v]) => (
                  <div className="drow" key={k}>
                    <span>{k}</span>
                    {/^https?:\/\//.test(String(v))
                      ? <b><a href={String(v)} target="_blank" rel="noopener noreferrer">Open ↗</a></b>
                      : <b>{String(v)}</b>}
                  </div>
                ))}
              </div>
            </section>
          )}

          {rooms.length > 0 && (
            <section className="f-bloc" id="rooms">
              <h2>Rooms</h2>
              <div className="rooms-wrap">
                <table className="rooms">
                  <thead><tr><th>Room</th><th>Level</th><th>Dimensions</th><th>Flooring</th></tr></thead>
                  <tbody>
                    {rooms.map((r, i) => (
                      <tr key={i}>
                        <td>{r.nom || "—"}</td><td>{r.niveau || "—"}</td>
                        <td>{r.dimensions || "—"}</td><td>{r.revetement || "—"}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )}

        </div>

        {/* -------- right column (desktop): features, map --------------------- */}
        <div className="f-col">
          {l.features && l.features.length > 0 && (
            <section className="f-bloc" id="features">
              <h2>Features</h2>
              <div className="amenity-grid">
                {l.features.map((f, i) => (
                  <span className="amenity-it" key={i}>
                    <span className="am-ico"><AmenityIco label={f} /></span>
                    <span className="am-txt">{f}</span>
                  </span>
                ))}
              </div>
            </section>
          )}

          {l.lat != null && l.lng != null && (
            <section className="f-bloc" id="map">
              <h2>Location</h2>
              <Suspense fallback={<div className="lmap3d lmap3d-skel map-loading">Loading the map…</div>}>
                <PropertyMap
                  uid={l.uid} lat={l.lat} lng={l.lng} price={l.price}
                  propertyType={l.property_type} address={l.address || l.title}
                  city={l.city} image={l.images?.[0]}
                />
              </Suspense>
            </section>
          )}
        </div>
      </div>

      {/* financing: real mortgage rates + Canadian calculator */}
      {isSale && <Financing price={l.price} />}

      {/* nearby amenities: full width, AFTER the property info (correct mobile order) —
          the banner basket is per-province (Save-On-Foods in BC, Sobeys in the
          Atlantic, Co-op in SK, LCBO in ON…) */}
      <NearbyPlaces lat={l.lat} lng={l.lng} region={l.region} />

      <div className="fine f-foot">
        Prices and availability are those displayed by the source — every
        listing links back to the brokerage's original page.
      </div>

      <div className="cta-sticky">
        <span className="cta-sticky-prix">{fmtPrice(l.price, l.price_label)}</span>
        <a className="cta" href={l.url} target="_blank" rel="noopener noreferrer">
          See at {sourceName(l.source)} ↗
        </a>
      </div>
    </div>
  );
}