/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Groupe Ka / Ka Maps
 *
 * KaDrawAreaMode — l'interface TEMPORAIRE du dessin de zone (v2). Plus de
 * grosse boîte permanente : pendant le tracé, un bandeau d'instructions
 * discret ; une fois la zone posée, un CTA contextuel « Voir N propriétés
 * dans cette zone » + retrait en un geste. Tout disparaît hors du mode.
 */

import {
  useEffect,
  useState,
  type ReactElement,
} from "react";
import { useKaMap } from "./KaMapView.js";

export interface KaDrawAreaModeProps {
  /** « 184 propriétés » — libellé du compte (le compte vient de l'événement
   *  data du moteur ; l'app peut le surcharger avec son total serveur). */
  formatCount?: (n: number) => string;
  /** Total maîtrisé par l'app (prime sur le compte du moteur). */
  count?: number | null;
  /** Clic sur le CTA (défaut : cadrer la zone). */
  onSee?: () => void;
  /** Zone retirée. */
  onClear?: () => void;
}

export function KaDrawAreaMode(props: KaDrawAreaModeProps): ReactElement | null {
  const map = useKaMap();
  const [drawing, setDrawing] = useState(false);
  const [hasZone, setHasZone] = useState(false);
  const [engineCount, setEngineCount] = useState<number | null>(null);

  useEffect(() => {
    if (!map) return;
    setDrawing(map.isDrawing());
    setHasZone(map.getDrawnPolygon() !== null);
    const offs = [
      map.events.on("draw", ({ polygon, drawing: d }) => {
        setDrawing(d);
        setHasZone(polygon !== null);
      }),
      map.events.on("data", ({ count }) => setEngineCount(count)),
    ];
    return () => offs.forEach((off) => off());
  }, [map]);

  if (!map) return null;

  if (drawing) {
    return (
      <div className="ka-drawmode" role="status">
        <span className="ka-drawmode-hint">
          Touchez la carte pour poser des points — refermez sur le premier
        </span>
        <button
          type="button"
          className="ka-drawmode-cancel"
          onClick={() => map.cancelDraw()}
        >
          Annuler
        </button>
      </div>
    );
  }

  if (!hasZone) return null;

  const n = props.count ?? engineCount;
  const label =
    n == null
      ? "Zone dessinée"
      : props.formatCount
        ? props.formatCount(n)
        : `${n.toLocaleString("fr-CA")} résultat${n > 1 ? "s" : ""}`;

  return (
    <div className="ka-drawzone" role="group" aria-label="Zone dessinée">
      <button
        type="button"
        className="ka-drawzone-see"
        onClick={() => {
          if (props.onSee) {
            props.onSee();
            return;
          }
          const poly = map.getDrawnPolygon();
          if (poly) {
            const lngs = poly.map((p) => p[0]);
            const lats = poly.map((p) => p[1]);
            map.fitBounds(
              {
                west: Math.min(...lngs),
                south: Math.min(...lats),
                east: Math.max(...lngs),
                north: Math.max(...lats),
              },
              { padding: 64 },
            );
          }
        }}
      >
        {label} dans cette zone
      </button>
      <button
        type="button"
        className="ka-drawzone-clear"
        onClick={() => {
          map.clearDrawnPolygon();
          props.onClear?.();
        }}
        aria-label="Retirer la zone dessinée"
      >
        ✕
      </button>
    </div>
  );
}