// -----------------------------------------------------------------------------
// Lou-Ka — Location court terme
// components/CtMapView.tsx : carte des hébergements court terme (Ka Maps),
// pilotée par le viewport via /api/ct/listings.geojson — chargée paresseusement.
// -----------------------------------------------------------------------------
import { useCallback, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import "mapbox-gl/dist/mapbox-gl.css";
import "@groupe-ka/ka-maps/styles.css";
import type { MapProperty } from "@groupe-ka/ka-maps";
import { cameraFromParams, cameraToParams } from "@groupe-ka/ka-maps";
import {
  KaBrandBadge,
  KaMapView,
  LoadingIndicator,
  PropertyPreview,
  ResultCount,
  SearchAreaControl,
  Tilt3DControl,
} from "@groupe-ka/ka-maps/react";
import { CtFilters, ctSourceName } from "../ctapi";
import { louKaMapTheme } from "../kamaps/theme";
import { ctMapAdapter } from "../kamaps/ctAdapter";
import { MAPBOX_TOKEN } from "../kamaps/config";

const QUEBEC_CENTER = { lat: 46.82, lng: -71.25 };

function PreviewCard({ p }: { p: MapProperty }) {
  const navigate = useNavigate();
  const extra = (p.extra ?? {}) as {
    title?: string | null; priceLabel?: string | null;
    capacity?: number | null; bedrooms?: number | null;
    rating?: number | null; source?: string;
  };
  const prix = p.price != null
    ? `${p.price.toLocaleString("fr-CA", { maximumFractionDigits: 0 })} $`
    : extra.priceLabel || "Prix sur demande";
  const meta = [
    p.propertyType,
    extra.capacity ? `${extra.capacity} pers.` : "",
    extra.bedrooms ? `${extra.bedrooms} ch.` : "",
    extra.rating != null ? `★ ${extra.rating.toLocaleString("fr-CA", { maximumFractionDigits: 1 })}` : "",
  ].filter(Boolean).join(" · ");
  return (
    <div className="mv-pop">
      {p.thumbnailUrl ? (
        <img src={p.thumbnailUrl} alt="" loading="lazy" />
      ) : (
        <div className="mv-noimg" aria-hidden="true">⌂</div>
      )}
      <div className="mv-pop-body">
        <div className="mv-pop-price">
          {prix}
          <small>{p.price != null ? " /nuit" : ""}</small>
        </div>
        <div className="mv-pop-title">{extra.title ?? p.address ?? ""}</div>
        <div className="mv-pop-meta">{meta}</div>
        <div className="mv-pop-src">{ctSourceName(extra.source ?? "")}</div>
        <a
          className="mv-pop-cta"
          href={p.originalUrl}
          onClick={(e) => {
            e.preventDefault();
            navigate(p.originalUrl ?? "/court-terme");
          }}
        >
          Voir la fiche →
        </a>
      </div>
    </div>
  );
}

export default function CtMapView({ filters }: { filters: CtFilters }) {
  const initialCamera = useMemo(() => {
    const cam = cameraFromParams(new URLSearchParams(window.location.search));
    return cam ?? { ...QUEBEC_CENTER, zoom: 6.2 };
  }, []);

  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],
  );

  return (
    <div className="mapview" role="application" aria-label="Carte des hébergements court terme">
      <KaMapView
        theme={louKaMapTheme}
        adapter={ctMapAdapter}
        mapboxToken={MAPBOX_TOKEN}
        filters={mapFilters}
        center={initialCamera}
        zoom={initialCamera.zoom}
        pitch={45}
        basemap={{ theme: "default", showLandmarks: true }}
        cluster={{ maxZoom: 15, valueClamp: [50, 2000] }}
        searchMode="manual"
        onMoveEnd={onMoveEnd}
      >
        <KaBrandBadge />
        <Tilt3DControl />
        <SearchAreaControl />
        <LoadingIndicator label="Mise à jour des hébergements…" />
        <ResultCount
          emptyTitle="Aucun hébergement trouvé dans cette zone."
          emptyHint="Élargissez la carte ou modifiez vos filtres."
        />
        <PropertyPreview render={(p) => <PreviewCard p={p} />} />
      </KaMapView>
    </div>
  );
}