// -----------------------------------------------------------------------------
// Author: Simon-Pierre Boucher
// Contact: contact@spboucher.ai
// Project: Groupe Ka / Ka Maps (Rent-Ka integration)
// components/ListingMap3D.tsx: 3D mini-map of the detail page — tight camera
// on the address (zoom 17, 62° pitch), realistic Mapbox Standard basemap,
// and the listing's building highlighted in COBALT ("buildings" featureset
// via KaSpotlightMap). Lazily loaded from Listing.tsx.
// -----------------------------------------------------------------------------
import { useMemo } from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import "@groupe-ka/ka-maps/styles.css";
import type { MapProperty } from "@groupe-ka/ka-maps";
import { KaBrandBadge, KaSpotlightMap } from "@groupe-ka/ka-maps/react";
import type { Listing } from "../api";
import { louKaMapTheme } from "../kamaps/theme";
import { MAPBOX_TOKEN } from "../kamaps/config";

/** Signature highlight of the page — same language as the badges. */
export const BUILDING_ACCENT = "#2456e6";  // official Rent-Ka cobalt

export default function ListingMap3D({ l }: { l: Listing }) {
  const property = useMemo<MapProperty | null>(() => {
    if (l.lat == null || l.lng == null) return null;
    return {
      id: l.uid,
      appSource: "rent-ka",
      latitude: l.lat,
      longitude: l.lng,
      kind: "listing",
      listingType: "rent",
      price: l.price ?? undefined,
      propertyType: l.unit_type || undefined,
      address: l.address || l.title || undefined,
      city: l.city || undefined,
      thumbnailUrl: l.images?.[0],
    };
  }, [l.uid, l.lat, l.lng, l.price, l.unit_type, l.address, l.title, l.city, l.images]);

  if (!property) return null;

  return (
    <div className="lmap3d" role="img"
         aria-label={`3D map — ${l.address || l.title}, the listing's building highlighted`}>
      <KaSpotlightMap
        theme={louKaMapTheme}
        mapboxToken={MAPBOX_TOKEN}
        property={property}
        buildingColor={BUILDING_ACCENT}
      >
        <KaBrandBadge />
      </KaSpotlightMap>
      <span className="lmap3d-legende" aria-hidden="true">
        <i /> The listing's building
      </span>
    </div>
  );
}