"use client";

/**
 * V2Map — the cockpit map card. Reuses the existing rich Leaflet plumbing
 * (PticaMapInner — parcel polygon, POI / ЖК / pipeline glyph pins, ЗОУИТ zones,
 * connection-point lines, custom POI, dark/satellite tiles) via a SINGLE shared
 * implementation loaded through dynamic(ssr:false) so Leaflet never touches the
 * server. Connection points + custom POIs are fetched here (same TanStack hooks
 * as PticaMap) and threaded into the inner map.
 *
 * The inner map brings its own overlay/legend/controls + base-layer toggle
 * (Спутник | Схема) and dark CartoDB tiles, matching the prototype map block.
 * The map title chip is rendered here over the card per the prototype `.map-head`.
 */

import dynamic from "next/dynamic";

import styles from "@/app/site-finder/analysis/[cad]/v2/v2.module.css";
import type { ParcelAnalysis } from "@/types/site-finder";
import { useConnectionPoints } from "@/hooks/useConnectionPoints";
import { useCustomPois } from "@/hooks/useCustomPois";
import { V2MapLegend } from "@/components/site-finder/ptica-v2/V2MapLegend";

const PticaMapInner = dynamic(
  () => import("@/components/site-finder/ptica/PticaMapInner"),
  {
    ssr: false,
    loading: () => <div className={styles.mapLoading}>Загрузка карты…</div>,
  },
);

interface Props {
  analysis: ParcelAnalysis;
}

export function V2Map({ analysis }: Props) {
  const cad = analysis.cad_num;
  const { data: connectionPoints } = useConnectionPoints(cad);
  const { data: customPois } = useCustomPois(cad);

  return (
    <div className={`${styles.card} ${styles.mapCard} ${styles.brk}`}>
      <span className={styles.bc1} />
      <span className={styles.bc2} />
      <div className={styles.mapMount}>
        <PticaMapInner
          analysis={analysis}
          cad={cad}
          connectionPoints={connectionPoints}
          customPois={customPois}
        />
      </div>
      {/* Map title — text differs per theme; only one span is shown at a time
          via the [data-theme="..."] selectors in v2.module.css (mirrors the
          prototype `.tnum-d` / `.tnum-l` toggle pattern). */}
      <div className={styles.mapHead}>
        <span className={`${styles.ttl} ${styles.mapTitleDark}`}>
          СПУТНИК · СВЕЖИЙ СНИМОК
        </span>
        <span className={`${styles.ttl} ${styles.mapTitleLight}`}>
          СПУТНИК · СХЕМА ПОДКЛЮЧЕНИЙ
        </span>
      </div>
      {/* Resource legend overlay (sibling of PticaMapInner, sits on top of the
          map via absolute positioning — does not touch the shared inner map). */}
      <V2MapLegend analysis={analysis} />
    </div>
  );
}