// -----------------------------------------------------------------------------
// Author: Simon-Pierre Boucher
// Contact: contact@spboucher.ai
// Project: Groupe Ka / Ka Maps (Home-Ka integration)
// components/MapView.tsx : the Home-Ka MAP MODE (Ka Map System v2) — same
// architecture as Lou-Ka Maps, themed green/off-white/ink.
//   · viewport takeover (KaMapShell): mobile edge-to-edge + 3-notch results
//     bottom sheet, desktop resizable list|map split;
//   · viewport-driven data: /api/listings.geojson?bbox=… (Ka Maps adapter —
//     cancellable requests, never a storm);
//   · unified toolbar (zoom, 3D, draw, locate), contextual "Search this
//     area", drawn zone clipped CLIENT-SIDE (setClipPolygon) with a
//     "N homes in this area" CTA;
//   · contextual preview card v2: photo, price, swipe/chevrons between
//     neighboring homes.
// -----------------------------------------------------------------------------
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import "mapbox-gl/dist/mapbox-gl.css";
import "@groupe-ka/ka-maps/styles.css";
import type { KaMap, MapProperty } from "@groupe-ka/ka-maps";
import { cameraFromParams, cameraToParams } from "@groupe-ka/ka-maps";
import {
  KaBrandBadge,
  KaDrawAreaMode,
  KaMapShell,
  KaMapToolbar,
  KaMapView,
  KaPropertyPreview,
  KaToolbar3D,
  KaToolbarDraw,
  KaToolbarGroup,
  KaToolbarLocate,
  KaToolbarZoom,
  LoadingIndicator,
  SearchAreaControl,
  useKaMap,
  useKaShell,
} from "@groupe-ka/ka-maps/react";
import { Listing, ListingFilters, sourceName } from "../api";
import ListingCard from "./ListingCard";
import { homeKaMapTheme } from "../kamaps/theme";
import { homeKaMapAdapter } from "../kamaps/adapter";
import { MAPBOX_TOKEN } from "../kamaps/config";

// Continental US — initial camera
const US_CENTER = { lat: 39.81, lng: -98.55 };
const US_ZOOM = 4;

/** Preview card — Ka Map System ka-prevcard structure, Home-Ka content
 *  (the adapter already carries photo/price/traits: no extra fetch). */
function PreviewCard({ p }: { p: MapProperty }) {
  const navigate = useNavigate();
  const extra = (p.extra ?? {}) as {
    title?: string | null; priceLabel?: string | null;
    source?: string; state?: string | null;
  };
  const price = p.price != null
    ? `$${p.price.toLocaleString("en-US", { maximumFractionDigits: 0 })}`
    : extra.priceLabel || "Price on request";
  const meta = [
    p.propertyType,
    p.bedrooms != null ? `${p.bedrooms} bd` : "",
    p.bathrooms != null ? `${p.bathrooms} ba` : "",
    [p.city, extra.state].filter(Boolean).join(", "),
    extra.source ? sourceName(extra.source) : "",
  ].filter(Boolean).join(" · ");
  const detail = p.originalUrl ?? "/";
  return (
    <>
      <div className="ka-prevcard-media">
        {p.thumbnailUrl ? (
          <img
            src={p.thumbnailUrl} alt="" loading="lazy"
            onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
          />
        ) : (
          <div className="ka-prevcard-noimg" aria-hidden="true">⌂</div>
        )}
      </div>
      <div className="ka-prevcard-body">
        <div className="ka-prevcard-price">{price}</div>
        <div className="ka-prevcard-addr">{p.address ?? extra.title ?? ""}</div>
        <div className="ka-prevcard-meta">{meta}</div>
        <div className="ka-prevcard-actions">
          <a
            className="ka-prevcard-cta"
            href={detail}
            onClick={(e) => { e.preventDefault(); navigate(detail); }}
          >
            View details →
          </a>
        </div>
      </div>
    </>
  );
}

/** Bridge: exposes the KaMap engine to the parent component (off-canvas). */
function EngineBridge({ onEngine }: { onEngine: (m: KaMap | null) => void }) {
  const map = useKaMap();
  useEffect(() => {
    onEngine(map);
    return () => onEngine(null);
  }, [map, onEngine]);
  return null;
}

/** Mobile: selecting a marker collapses the sheet to mini. */
function SheetAutoCollapse({ selectedUid }: { selectedUid: string | null }) {
  const shell = useKaShell();
  const shellRef = useRef(shell);
  shellRef.current = shell;
  useEffect(() => {
    const s = shellRef.current;
    if (selectedUid && s?.isMobile) s.setSheet("mini");
  }, [selectedUid]);
  return null;
}

export interface MapViewProps {
  filters: ListingFilters;
  /** Current list page (12 listings) — results panel of the shell. */
  listings: Listing[] | null;
  total: number;
  page: number;
  totalPages: number;
  onPage: (p: number) => void;
  sort: string;
  onSort: (s: string) => void;
  onExit?: () => void;
  onOpenFilters?: () => void;
  filtersCount?: number;
}

export default function MapView({
  filters, listings, total, page, totalPages, onPage, sort, onSort,
  onExit, onOpenFilters, filtersCount = 0,
}: MapViewProps) {
  // initial camera: shared URL (?lat&lng&zoom), otherwise continental US
  const initialCamera = useMemo(() => {
    const cam = cameraFromParams(new URLSearchParams(window.location.search));
    return cam ?? { ...US_CENTER, zoom: US_ZOOM };
  }, []);

  const [selectedUid, setSelectedUid] = useState<string | null>(null);
  const [mapCount, setMapCount] = useState<number | null>(null);
  const [hasZone, setHasZone] = useState(false);
  const [isMobile, setIsMobile] = useState(
    () => window.matchMedia("(max-width: 780px)").matches);
  const engineRef = useRef<KaMap | null>(null);
  const listRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const mq = window.matchMedia("(max-width: 780px)");
    const update = () => setIsMobile(mq.matches);
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);

  // camera → URL (replaceState: no router re-render)
  const onMoveEnd = useCallback((center: { lat: number; lng: number }, zoom: number) => {
    const url = new URL(window.location.href);
    url.search = cameraToParams({ ...center, zoom }, url.searchParams).toString();
    window.history.replaceState(null, "", url);
  }, []);

  const mapFilters = useMemo(
    () => Object.fromEntries(Object.entries(filters).filter(([, v]) => v)),
    [filters],
  );

  const handleEngine = useCallback((m: KaMap | null) => {
    engineRef.current = m;
  }, []);

  // map selection: preview card + list card scrolled into view
  const onSelect = useCallback((p: MapProperty | null) => {
    const uid = p?.id ?? null;
    setSelectedUid(uid);
    if (!uid) return;
    const card = listRef.current?.querySelector<HTMLElement>(
      `[data-uid="${CSS.escape(uid)}"]`);
    card?.scrollIntoView({ behavior: "smooth", block: "nearest" });
  }, []);

  // drawn zone: CLIENT-SIDE clip of the displayed set (the Home-Ka API does
  // not filter by polygon) — the CTA count comes from the data event.
  const onDraw = useCallback((polygon: [number, number][] | null, drawing: boolean) => {
    if (drawing) return;
    setHasZone(polygon !== null);
    engineRef.current?.setClipPolygon(polygon);
  }, []);

  const listHeader = (
    <div className="ms2-head">
      <div className="ms2-count" role="status" aria-live="polite">
        <b>{total.toLocaleString("en-US")}</b>
        {" "}home{total !== 1 ? "s" : ""}
        {mapCount != null && hasZone && (
          <span className="ms2-zone">{mapCount.toLocaleString("en-US")} in this area</span>
        )}
      </div>
      <label className="ms2-sort">
        <select
          value={sort}
          onChange={(e) => onSort(e.target.value)}
          aria-label="Sort results"
        >
          <option value="recent">Newest</option>
          <option value="price_asc">Price: low to high</option>
          <option value="price_desc">Price: high to low</option>
        </select>
      </label>
    </div>
  );

  const listPane = (
    <div className="ms2-list" aria-label="List results" ref={listRef}>
      {(listings ?? []).map((l) => (
        <div
          key={l.uid}
          data-uid={l.uid}
          className={`map-card${selectedUid === l.uid ? " map-card-sel" : ""}`}
          onMouseEnter={() => engineRef.current?.setHovered(l.uid, "app")}
          onMouseLeave={() => engineRef.current?.setHovered(null, "app")}
        >
          <ListingCard l={l} />
        </div>
      ))}
      {listings !== null && listings.length === 0 && (
        <div className="ms-empty" role="status">
          <h3>No homes match your criteria</h3>
          <p>Try widening your search.</p>
        </div>
      )}
      {totalPages > 1 && (
        <nav className="pager ms2-pager" aria-label="Pagination">
          <button className="pager-btn" onClick={() => {
            onPage(page - 1);
            listRef.current?.parentElement?.scrollTo({ top: 0, behavior: "smooth" });
          }} disabled={page <= 1}>‹ Prev</button>
          <span className="pager-info">Page {page} / {totalPages}</span>
          <button className="pager-btn" onClick={() => {
            onPage(page + 1);
            listRef.current?.parentElement?.scrollTo({ top: 0, behavior: "smooth" });
          }} disabled={page >= totalPages}>Next ›</button>
        </nav>
      )}
    </div>
  );

  return (
    <KaMapShell
      className="ms2"
      brand={<span className="ms2-brand"><b>Home·Ka</b><span>Map</span></span>}
      onExit={onExit}
      exitLabel="List"
      storageKey="homeka-map-split"
      listHeader={listHeader}
      list={listPane}
      topExtras={
        onOpenFilters ? (
          <button className="ka-top-btn" onClick={onOpenFilters}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
              <path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" />
            </svg>
            Filters
            {filtersCount > 0 && <span className="ka-top-badge">{filtersCount}</span>}
          </button>
        ) : null
      }
    >
      <KaMapView
        theme={homeKaMapTheme}
        adapter={homeKaMapAdapter}
        mapboxToken={MAPBOX_TOKEN}
        filters={mapFilters}
        center={initialCamera}
        zoom={initialCamera.zoom}
        pitch={50}
        // Realistic rendering: full-color Standard + 3D landmarks — same
        // settings as Lou-Ka Maps.
        basemap={{ theme: "default", showLandmarks: true }}
        // valueClamp: bounds each LIST PRICE's contribution to the cluster
        // bubble (a $20M mansion does not skew the average)
        cluster={{ maxZoom: 15, valueClamp: [100_000, 3_000_000], valueMinCount: 10 }}
        searchMode="manual"
        navControl={false}
        onMoveEnd={onMoveEnd}
        onSelect={onSelect}
        onData={(count) => setMapCount(count)}
        onDraw={onDraw}
      >
        <EngineBridge onEngine={handleEngine} />
        <SheetAutoCollapse selectedUid={selectedUid} />
        <KaBrandBadge />

        {/* THE control cluster — zoom (desktop), 3D, draw, locate */}
        <KaMapToolbar>
          {!isMobile && (
            <KaToolbarGroup><KaToolbarZoom /></KaToolbarGroup>
          )}
          <KaToolbarGroup>
            <KaToolbar3D />
            <KaToolbarDraw />
            <KaToolbarLocate />
          </KaToolbarGroup>
        </KaMapToolbar>

        {/* draw mode: temporary banner + "N homes" CTA */}
        <KaDrawAreaMode
          formatCount={(n) => `${n.toLocaleString("en-US")} home${n !== 1 ? "s" : ""}`}
          onClear={() => engineRef.current?.setClipPolygon(null)}
        />

        <SearchAreaControl />
        <LoadingIndicator label="Updating homes…" />
        <KaPropertyPreview render={(p) => <PreviewCard p={p} />} />
      </KaMapView>
    </KaMapShell>
  );
}