// -----------------------------------------------------------------------------
// Author: Simon-Pierre Boucher
// Contact: contact@spboucher.ai
// Project: Groupe Ka / Ka Maps (Home-Ka integration)
// components/PropertyMap.tsx : 3D mini-map of the detail page — same component
// as Lou-Ka (KaSpotlightMap): tight camera on the address, realistic Mapbox
// Standard basemap, the listing's building highlighted in Home-Ka GREEN.
// 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 { homeKaMapTheme } from "../kamaps/theme";
import { HOMEKA_APP_SOURCE } from "../kamaps/adapter";
import { MAPBOX_TOKEN } from "../kamaps/config";

/** Home-Ka signal green — same language as the brand accent. */
export const BUILDING_GREEN = "#1e4fd8";

export interface PropertyMapProps {
  uid: string;
  lat: number;
  lng: number;
  price?: number | null;
  propertyType?: string;
  address?: string;
  city?: string;
  image?: string | null;
  deal?: boolean;
}

export default function PropertyMap({
  uid, lat, lng, price, propertyType, address, city, image, deal,
}: PropertyMapProps) {
  const property = useMemo<MapProperty>(() => ({
    id: uid,
    appSource: HOMEKA_APP_SOURCE,
    latitude: lat,
    longitude: lng,
    kind: "listing",
    listingType: "sale",
    price: price ?? undefined,
    propertyType: propertyType || undefined,
    address: address || undefined,
    city: city || undefined,
    thumbnailUrl: image ?? undefined,
    highlight: deal ?? false,
  }), [uid, lat, lng, price, propertyType, address, city, image, deal]);

  return (
    <div
      className="lmap3d" role="img"
      aria-label={`3D map — ${address || "property"}, the listed building in green`}
    >
      <KaSpotlightMap
        theme={homeKaMapTheme}
        mapboxToken={MAPBOX_TOKEN}
        property={property}
        buildingColor={BUILDING_GREEN}
      >
        <KaBrandBadge />
      </KaSpotlightMap>
      <span className="lmap3d-legende" aria-hidden="true">
        <i /> Listed building
      </span>
    </div>
  );
}