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

/** House-Ka pine signal — same language as the brand accent. */
export const BUILDING_PINE = "#0f6b4f";

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: "house-ka",
    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 listing's building in green`}
    >
      <KaSpotlightMap
        theme={houseKaMapTheme}
        mapboxToken={MAPBOX_TOKEN}
        property={property}
        buildingColor={BUILDING_PINE}
      >
        <KaBrandBadge />
      </KaSpotlightMap>
      <span className="lmap3d-legende" aria-hidden="true">
        <i /> The listing's building
      </span>
    </div>
  );
}