"use client";
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// Projet : Groupe Ka / Ka Maps (intégration Vrai-Prix)
// components/KaCarte.tsx : Vrai-Prix Maps — recherche par carte propulsée
// par le framework partagé Ka Maps (moteur Mapbox GL, style Standard 3D par
// défaut + bouton 2D). Remplace l'ancienne carte Leaflet/OSM : pastilles de
// VALEURS ESTIMÉES 2026 (grappes + moyennes), chargement piloté par le
// viewport (annulation, cache), aperçu React, bilingue FR/EN.
// À charger via next/dynamic({ ssr: false }) — Mapbox GL est navigateur-seul.

import { useState } from "react";
import { useRouter } from "next/navigation";
import "mapbox-gl/dist/mapbox-gl.css";
import "@groupe-ka/ka-maps/styles.css";
import type { MapProperty } from "@groupe-ka/ka-maps";
import { formatFullPrice } from "@groupe-ka/ka-maps";
import {
  KaBrandBadge,
  KaMapView,
  LoadingIndicator,
  LocateControl,
  PropertyPreview,
  Tilt3DControl,
} from "@groupe-ka/ka-maps/react";
import { useLang } from "@/components/LangContext";
import {
  MAPBOX_TOKEN,
  MIN_ZOOM_FETCH,
  vraiPrixMapAdapter,
  vraiPrixMapTheme,
} from "@/lib/kamaps";

const DEFAULT_CENTER = { lat: 45.5421, lng: -73.6646 }; // Montréal

/** Aperçu d'une unité d'évaluation — valeur estimée, jamais un prix. */
function PreviewCard({ p, fr, close }: { p: MapProperty; fr: boolean; close: () => void }) {
  const router = useRouter();
  return (
    <div className="vpm-pop">
      <div className="klabel">{fr ? "Estimation 2026" : "2026 estimate"}</div>
      <div className="vpm-pop-value">
        {p.estimatedValue != null ? formatFullPrice(p.estimatedValue) : "—"}
      </div>
      <div className="vpm-pop-addr">{p.address}</div>
      <div className="vpm-pop-meta">
        {[p.city, p.propertyType].filter(Boolean).join(" · ")}
      </div>
      <button
        type="button"
        className="vpm-pop-cta"
        onClick={() => {
          close();
          router.push(p.originalUrl ?? "/");
        }}
      >
        {fr ? "Voir l'estimation complète →" : "See full estimate →"}
      </button>
    </div>
  );
}

export default function KaCarte() {
  const { lang } = useLang();
  const fr = lang === "fr";
  const [zoom, setZoom] = useState(13);
  const [count, setCount] = useState<number | null>(null);

  const zoomedOut = zoom < MIN_ZOOM_FETCH;

  return (
    <div className="vpm-wrap">
      <KaMapView
        theme={vraiPrixMapTheme}
        adapter={vraiPrixMapAdapter}
        mapboxToken={MAPBOX_TOKEN}
        center={DEFAULT_CENTER}
        zoom={13.5}
        pitch={50}
        searchMode="auto"
        cluster={{ maxZoom: 15, radius: 44, valueClamp: [40_000, 5_000_000] }}
        onMoveEnd={(_c, z) => setZoom(z)}
        onData={(c) => setCount(c)}
      >
        <KaBrandBadge />
        <Tilt3DControl />
        <LocateControl label={fr ? "Me localiser" : "Locate me"} />
        <LoadingIndicator label={fr ? "Mise à jour des estimations…" : "Updating estimates…"} />
        <PropertyPreview
          render={(p, close) => <PreviewCard p={p} fr={fr} close={close} />}
        />
        <div className="vpm-chip" role="status">
          {zoomedOut
            ? fr
              ? "Zoomez pour voir les valeurs estimées"
              : "Zoom in to see estimated values"
            : count != null
              ? fr
                ? `${count.toLocaleString("fr-CA")} propriétés affichées`
                : `${count.toLocaleString("en-CA")} properties shown`
              : fr
                ? "Chargement…"
                : "Loading…"}
        </div>
      </KaMapView>
    </div>
  );
}