import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Map, NavigationControl, Marker, Source, Layer } from 'react-map-gl/maplibre';
import type { MapRef } from 'react-map-gl/maplibre';
import { ScatterplotLayer, TextLayer } from '@deck.gl/layers';
import { DeckGLOverlay } from '../layers/DeckGLOverlay';
import { useAnalysisDeckLayers } from '../../hooks/useAnalysisDeckLayers';
import { useStaticDeckLayers } from '../../hooks/useStaticDeckLayers';
import type { StaticPickInfo } from '../../hooks/useStaticDeckLayers';
import fishingZonesData from '../../data/zones/fishing-zones-wgs84.json';
import { ShipLayer } from '../layers/ShipLayer';
import { InfraLayer } from './InfraLayer';
import { SatelliteLayer } from '../layers/SatelliteLayer';
import { AircraftLayer } from '../layers/AircraftLayer';
import { SubmarineCableLayer } from './SubmarineCableLayer';
import { CctvLayer } from './CctvLayer';
// 정적 레이어들은 useStaticDeckLayers로 전환됨
import { OsintMapLayer } from './OsintMapLayer';
import { EezLayer } from './EezLayer';
// PiracyLayer, WindFarmLayer, PortLayer, MilitaryBaseLayer, GovBuildingLayer,
// NKLaunchLayer, NKMissileEventLayer → useStaticDeckLayers로 전환됨
import { ChineseFishingOverlay } from './ChineseFishingOverlay';
import { StaticFacilityPopup } from './StaticFacilityPopup';
// HazardFacilityLayer, CnFacilityLayer, JpFacilityLayer → useStaticDeckLayers로 전환됨
import { AnalysisOverlay } from './AnalysisOverlay';
import { FleetClusterLayer } from './FleetClusterLayer';
import type { SelectedGearGroupData, SelectedFleetData } from './FleetClusterLayer';
import { FishingZoneLayer } from './FishingZoneLayer';
import { AnalysisStatsPanel } from './AnalysisStatsPanel';
import { getMarineTrafficCategory } from '../../utils/marineTraffic';
import { classifyFishingZone } from '../../utils/fishingAnalysis';
import { fetchKoreaInfra } from '../../services/infra';
import type { PowerFacility } from '../../services/infra';
import type { Ship, Aircraft, SatellitePosition } from '../../types';
import type { OsintItem } from '../../services/osint';
import type { UseVesselAnalysisResult } from '../../hooks/useVesselAnalysis';
import { countryLabelsGeoJSON } from '../../data/countryLabels';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import 'maplibre-gl/dist/maplibre-gl.css';

export interface KoreaFiltersState {
  illegalFishing: boolean;
  illegalTransship: boolean;
  darkVessel: boolean;
  cableWatch: boolean;
  dokdoWatch: boolean;
  ferryWatch: boolean;
  cnFishing: boolean;
}

interface Props {
  ships: Ship[];
  allShips?: Ship[];
  aircraft: Aircraft[];
  satellites: SatellitePosition[];
  layers: Record<string, boolean>;
  osintFeed: OsintItem[];
  currentTime: number;
  koreaFilters: KoreaFiltersState;
  transshipSuspects: Set<string>;
  cableWatchSuspects: Set<string>;
  dokdoWatchSuspects: Set<string>;
  cnFishingSuspects: Set<string>;
  dokdoAlerts: { mmsi: string; name: string; dist: number; time: number }[];
  vesselAnalysis?: UseVesselAnalysisResult;
  hiddenShipCategories?: Set<string>;
  hiddenNationalities?: Set<string>;
}

// MarineTraffic-style: satellite + dark ocean + nautical overlay
const MAP_STYLE = {
  version: 8 as const,
  sources: {
    'satellite': {
      type: 'raster' as const,
      tiles: [
        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      ],
      tileSize: 256,
      maxzoom: 19,
      attribution: '&copy; Esri, Maxar',
    },
    'carto-dark': {
      type: 'raster' as const,
      tiles: [
        'https://a.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',
        'https://b.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',
        'https://c.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png',
      ],
      tileSize: 256,
    },
    'opensea': {
      type: 'raster' as const,
      tiles: [
        'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
      ],
      tileSize: 256,
      maxzoom: 18,
    },
  },
  layers: [
    { id: 'background', type: 'background' as const, paint: { 'background-color': '#0d1f3c' } },
    { id: 'satellite-base', type: 'raster' as const, source: 'satellite', paint: { 'raster-brightness-max': 0.75, 'raster-saturation': -0.1, 'raster-contrast': 0.05 } },
    { id: 'dark-overlay', type: 'raster' as const, source: 'carto-dark', paint: { 'raster-opacity': 0.25 } },
    { id: 'seamark', type: 'raster' as const, source: 'opensea', paint: { 'raster-opacity': 0.5 } },
  ],
};

// Korea-centered view
const KOREA_MAP_CENTER = { longitude: 127.5, latitude: 36 };
const KOREA_MAP_ZOOM = 6;

const FILTER_ICON: Record<string, string> = {
  illegalFishing: '\u{1F6AB}\u{1F41F}',
  illegalTransship: '\u2693',
  darkVessel: '\u{1F47B}',
  cableWatch: '\u{1F50C}',
  dokdoWatch: '\u{1F3DD}\uFE0F',
  ferryWatch: '\u{1F6A2}',
  cnFishing: '\u{1F3A3}',
};

const FILTER_COLOR: Record<string, string> = {
  illegalFishing: '#ef4444',
  illegalTransship: '#f97316',
  darkVessel: '#8b5cf6',
  cableWatch: '#00e5ff',
  dokdoWatch: '#22c55e',
  ferryWatch: '#2196f3',
  cnFishing: '#f59e0b',
};

const FILTER_I18N_KEY: Record<string, string> = {
  illegalFishing: 'filters.illegalFishingMonitor',
  illegalTransship: 'filters.illegalTransshipMonitor',
  darkVessel: 'filters.darkVesselMonitor',
  cableWatch: 'filters.cableWatchMonitor',
  dokdoWatch: 'filters.dokdoWatchMonitor',
  ferryWatch: 'filters.ferryWatchMonitor',
  cnFishing: 'filters.cnFishingMonitor',
};

export function KoreaMap({ ships, allShips, aircraft, satellites, layers, osintFeed, currentTime, koreaFilters, transshipSuspects, cableWatchSuspects, dokdoWatchSuspects, dokdoAlerts, vesselAnalysis, hiddenShipCategories, hiddenNationalities }: Props) {
  const { t } = useTranslation();
  const mapRef = useRef<MapRef>(null);
  const [infra, setInfra] = useState<PowerFacility[]>([]);
  const [flyToTarget, setFlyToTarget] = useState<{ lng: number; lat: number; zoom: number } | null>(null);
  const [selectedAnalysisMmsi, setSelectedAnalysisMmsi] = useState<string | null>(null);
  const [trackCoords, setTrackCoords] = useState<[number, number][] | null>(null);
  const [selectedGearData, setSelectedGearData] = useState<SelectedGearGroupData | null>(null);
  const [selectedFleetData, setSelectedFleetData] = useState<SelectedFleetData | null>(null);
  const [zoomLevel, setZoomLevel] = useState(KOREA_MAP_ZOOM);
  const zoomRef = useRef(KOREA_MAP_ZOOM);
  const handleZoom = useCallback((e: { viewState: { zoom: number } }) => {
    const z = Math.floor(e.viewState.zoom);
    if (z !== zoomRef.current) {
      zoomRef.current = z;
      setZoomLevel(z);
    }
  }, []);
  const [staticPickInfo, setStaticPickInfo] = useState<StaticPickInfo | null>(null);
  const handleStaticPick = useCallback((info: StaticPickInfo) => setStaticPickInfo(info), []);
  const [analysisPanelOpen, setAnalysisPanelOpen] = useLocalStorage('analysisPanelOpen', false);
  const [activeBadgeFilter, setActiveBadgeFilter] = useState<string | null>(null);

  useEffect(() => {
    fetchKoreaInfra().then(setInfra).catch(() => {});
  }, []);

  useEffect(() => {
    if (flyToTarget && mapRef.current) {
      mapRef.current.flyTo({ center: [flyToTarget.lng, flyToTarget.lat], zoom: flyToTarget.zoom, duration: 1500 });
      setFlyToTarget(null);
    }
  }, [flyToTarget]);

  useEffect(() => {
    if (!selectedAnalysisMmsi) setTrackCoords(null);
  }, [selectedAnalysisMmsi]);

  const handleAnalysisShipSelect = useCallback((mmsi: string) => {
    setSelectedAnalysisMmsi(mmsi);
    const ship = (allShips ?? ships).find(s => s.mmsi === mmsi);
    if (ship) setFlyToTarget({ lng: ship.lng, lat: ship.lat, zoom: 12 });
  }, [allShips, ships]);

  const handleTrackLoad = useCallback((_mmsi: string, coords: [number, number][]) => {
    setTrackCoords(coords);
  }, []);

  const handleFleetZoom = useCallback((bounds: { minLat: number; maxLat: number; minLng: number; maxLng: number }) => {
    mapRef.current?.fitBounds(
      [[bounds.minLng, bounds.minLat], [bounds.maxLng, bounds.maxLat]],
      { padding: 60, duration: 1500 },
    );
  }, []);

  const anyKoreaFilterOn = koreaFilters.illegalFishing || koreaFilters.illegalTransship || koreaFilters.darkVessel || koreaFilters.cableWatch || koreaFilters.dokdoWatch || koreaFilters.ferryWatch || koreaFilters.cnFishing;

  // 줌 레벨별 아이콘/심볼 스케일 배율 — z4=0.8x, z6=1.0x 시작, 2단계씩 상향
  const zoomScale = useMemo(() => {
    if (zoomLevel <= 4) return 0.8;
    if (zoomLevel <= 5) return 0.9;
    if (zoomLevel <= 6) return 1.0;
    if (zoomLevel <= 7) return 1.2;
    if (zoomLevel <= 8) return 1.5;
    if (zoomLevel <= 9) return 1.8;
    if (zoomLevel <= 10) return 2.2;
    if (zoomLevel <= 11) return 2.5;
    if (zoomLevel <= 12) return 2.8;
    if (zoomLevel <= 13) return 3.5;
    return 4.2;
  }, [zoomLevel]);

  // 불법어선 강조 — deck.gl ScatterplotLayer + TextLayer
  const illegalFishingData = useMemo(() => {
    if (!koreaFilters.illegalFishing) return [];
    return (allShips ?? ships).filter(s => {
      const mtCat = getMarineTrafficCategory(s.typecode, s.category);
      if (mtCat !== 'fishing' || s.flag === 'KR') return false;
      return classifyFishingZone(s.lat, s.lng).zone !== 'OUTSIDE';
    }).slice(0, 200);
  }, [koreaFilters.illegalFishing, allShips, ships]);

  const illegalFishingLayer = useMemo(() => new ScatterplotLayer({
    id: 'illegal-fishing-highlight',
    data: illegalFishingData,
    getPosition: (d) => [d.lng, d.lat],
    getRadius: 800 * zoomScale,
    getFillColor: [239, 68, 68, 40],
    getLineColor: [239, 68, 68, 200],
    getLineWidth: 2,
    stroked: true,
    filled: true,
    radiusUnits: 'meters',
    lineWidthUnits: 'pixels',
    updateTriggers: { getRadius: [zoomScale] },
  }), [illegalFishingData, zoomScale]);

  const illegalFishingLabelLayer = useMemo(() => new TextLayer({
    id: 'illegal-fishing-labels',
    data: illegalFishingData,
    getPosition: (d) => [d.lng, d.lat],
    getText: (d) => d.name || d.mmsi,
    getSize: 11 * zoomScale,
    getColor: [239, 68, 68, 255],
    getTextAnchor: 'middle',
    getAlignmentBaseline: 'top',
    getPixelOffset: [0, 14],
    fontFamily: 'monospace',
    fontSettings: { sdf: true },
        outlineWidth: 8,
    outlineColor: [0, 0, 0, 255],
    billboard: false,
    characterSet: 'auto',
    updateTriggers: { getSize: [zoomScale] },
  }), [illegalFishingData, zoomScale]);

  // 수역 라벨 TextLayer — illegalFishing 또는 cnFishing 필터 활성 시 표시
  const zoneLabelsLayer = useMemo(() => {
    if (!koreaFilters.illegalFishing && !koreaFilters.cnFishing) return null;
    const data = (fishingZonesData as GeoJSON.FeatureCollection).features.map(f => {
      const geom = f.geometry as GeoJSON.Polygon | GeoJSON.MultiPolygon;
      let sLng = 0, sLat = 0, n = 0;
      const rings = geom.type === 'MultiPolygon'
        ? geom.coordinates.flatMap(poly => poly)
        : geom.coordinates;
      for (const ring of rings) {
        for (const [lng, lat] of ring) {
          sLng += lng; sLat += lat; n++;
        }
      }
      return {
        name: (f.properties as { name: string }).name,
        lng: n > 0 ? sLng / n : 0,
        lat: n > 0 ? sLat / n : 0,
      };
    });
    return new TextLayer({
      id: 'fishing-zone-labels',
      data,
      getPosition: (d: { lng: number; lat: number }) => [d.lng, d.lat],
      getText: (d: { name: string }) => d.name,
      getSize: 14 * zoomScale,
      getColor: [255, 255, 255, 220],
      getTextAnchor: 'middle',
      getAlignmentBaseline: 'center',
      fontFamily: 'monospace',
      fontWeight: 700,
      fontSettings: { sdf: true },
        outlineWidth: 8,
      outlineColor: [0, 0, 0, 255],
      billboard: false,
      characterSet: 'auto',
      updateTriggers: { getSize: [zoomScale] },
    });
  }, [koreaFilters.illegalFishing, koreaFilters.cnFishing, zoomScale]);

  // 정적 레이어 (deck.gl) — 항구, 공항, 군사기지, 어항경고 등
  const staticDeckLayers = useStaticDeckLayers({
    ports: layers.ports ?? false,
    coastGuard: layers.coastGuard ?? false,
    windFarm: layers.windFarm ?? false,
    militaryBases: layers.militaryBases ?? false,
    govBuildings: layers.govBuildings ?? false,
    airports: layers.airports ?? false,
    navWarning: layers.navWarning ?? false,
    nkLaunch: layers.nkLaunch ?? false,
    nkMissile: layers.nkMissile ?? false,
    piracy: layers.piracy ?? false,
    infra: layers.infra ?? false,
    infraFacilities: infra,
    hazardTypes: [
      ...(layers.hazardPetrochemical ? ['petrochemical' as const] : []),
      ...(layers.hazardLng ? ['lng' as const] : []),
      ...(layers.hazardOilTank ? ['oilTank' as const] : []),
      ...(layers.hazardPort ? ['hazardPort' as const] : []),
      ...(layers.energyNuclear ? ['nuclear' as const] : []),
      ...(layers.energyThermal ? ['thermal' as const] : []),
      ...(layers.industryShipyard ? ['shipyard' as const] : []),
      ...(layers.industryWastewater ? ['wastewater' as const] : []),
      ...(layers.industryHeavy ? ['heavyIndustry' as const] : []),
    ],
    cnPower: !!layers.cnPower,
    cnMilitary: !!layers.cnMilitary,
    jpPower: !!layers.jpPower,
    jpMilitary: !!layers.jpMilitary,
    onPick: handleStaticPick,
    sizeScale: zoomScale,
  });

  // 선택된 어구 그룹 — 어구 아이콘 + 모선 강조 (deck.gl)
  const selectedGearLayers = useMemo(() => {
    if (!selectedGearData) return [];
    const { parent, gears, groupName } = selectedGearData;
    const layers = [];

    // 어구 위치 — 주황 원형 마커
    layers.push(new ScatterplotLayer({
      id: 'selected-gear-items',
      data: gears,
      getPosition: (d: Ship) => [d.lng, d.lat],
      getRadius: 6 * zoomScale,
      getFillColor: [249, 115, 22, 180],
      getLineColor: [255, 255, 255, 220],
      stroked: true,
      filled: true,
      radiusUnits: 'pixels',
      lineWidthUnits: 'pixels',
      getLineWidth: 1.5,
      updateTriggers: { getRadius: [zoomScale] },
    }));

    // 어구 이름 라벨
    layers.push(new TextLayer({
      id: 'selected-gear-labels',
      data: gears,
      getPosition: (d: Ship) => [d.lng, d.lat],
      getText: (d: Ship) => d.name || d.mmsi,
      getSize: 10 * zoomScale,
      getColor: [249, 115, 22, 255],
      getTextAnchor: 'middle' as const,
      getAlignmentBaseline: 'top' as const,
      getPixelOffset: [0, 10],
      fontFamily: 'monospace',
      fontSettings: { sdf: true },
        outlineWidth: 8,
      outlineColor: [0, 0, 0, 220],
      billboard: false,
      characterSet: 'auto',
      updateTriggers: { getSize: [zoomScale] },
    }));

    // 모선 강조 — 큰 원 + 라벨
    if (parent) {
      layers.push(new ScatterplotLayer({
        id: 'selected-gear-parent',
        data: [parent],
        getPosition: (d: Ship) => [d.lng, d.lat],
        getRadius: 14 * zoomScale,
        getFillColor: [249, 115, 22, 80],
        getLineColor: [249, 115, 22, 255],
        stroked: true,
        filled: true,
        radiusUnits: 'pixels',
        lineWidthUnits: 'pixels',
        getLineWidth: 3,
        updateTriggers: { getRadius: [zoomScale] },
      }));
      layers.push(new TextLayer({
        id: 'selected-gear-parent-label',
        data: [parent],
        getPosition: (d: Ship) => [d.lng, d.lat],
        getText: (d: Ship) => `▼ ${d.name || groupName} (모선)`,
        getSize: 11 * zoomScale,
        getColor: [249, 115, 22, 255],
        getTextAnchor: 'middle' as const,
        getAlignmentBaseline: 'top' as const,
        getPixelOffset: [0, 18],
        fontFamily: 'monospace',
        fontWeight: 700,
        fontSettings: { sdf: true },
        outlineWidth: 8,
        outlineColor: [0, 0, 0, 220],
        billboard: false,
        characterSet: 'auto',
        updateTriggers: { getSize: [zoomScale] },
      }));
    }

    return layers;
  }, [selectedGearData, zoomScale]);

  // 선택된 선단 소속 선박 강조 레이어 (deck.gl)
  const selectedFleetLayers = useMemo(() => {
    if (!selectedFleetData) return [];
    const { ships: fleetShips, clusterId } = selectedFleetData;
    if (fleetShips.length === 0) return [];

    // HSL→RGB 인라인 변환 (선단 색상)
    const hue = (clusterId * 137) % 360;
    const h = hue / 360; const s = 0.7; const l = 0.6;
    const hue2rgb = (p: number, q: number, t: number) => { if (t < 0) t += 1; if (t > 1) t -= 1; return t < 1/6 ? p + (q-p)*6*t : t < 1/2 ? q : t < 2/3 ? p + (q-p)*(2/3-t)*6 : p; };
    const q = l < 0.5 ? l * (1+s) : l + s - l*s; const p = 2*l - q;
    const r = Math.round(hue2rgb(p, q, h + 1/3) * 255);
    const g = Math.round(hue2rgb(p, q, h) * 255);
    const b = Math.round(hue2rgb(p, q, h - 1/3) * 255);
    const color: [number, number, number, number] = [r, g, b, 255];
    const fillColor: [number, number, number, number] = [r, g, b, 80];

    const result: Layer[] = [];

    // 소속 선박 — 강조 원형
    result.push(new ScatterplotLayer({
      id: 'selected-fleet-items',
      data: fleetShips,
      getPosition: (d: Ship) => [d.lng, d.lat],
      getRadius: 8 * zoomScale,
      getFillColor: fillColor,
      getLineColor: color,
      stroked: true,
      filled: true,
      radiusUnits: 'pixels',
      lineWidthUnits: 'pixels',
      getLineWidth: 2,
      updateTriggers: { getRadius: [zoomScale] },
    }));

    // 소속 선박 이름 라벨
    result.push(new TextLayer({
      id: 'selected-fleet-labels',
      data: fleetShips,
      getPosition: (d: Ship) => [d.lng, d.lat],
      getText: (d: Ship) => {
        const dto = vesselAnalysis?.analysisMap.get(d.mmsi);
        const role = dto?.algorithms.fleetRole.role;
        const prefix = role === 'LEADER' ? '★ ' : '';
        return `${prefix}${d.name || d.mmsi}`;
      },
      getSize: 10 * zoomScale,
      getColor: color,
      getTextAnchor: 'middle' as const,
      getAlignmentBaseline: 'top' as const,
      getPixelOffset: [0, 12],
      fontFamily: 'monospace',
      fontWeight: 600,
      fontSettings: { sdf: true },
        outlineWidth: 8,
      outlineColor: [0, 0, 0, 220],
      billboard: false,
      characterSet: 'auto',
      updateTriggers: { getSize: [zoomScale], getText: [vesselAnalysis] },
    }));

    // 리더 선박 추가 강조 (큰 외곽 링)
    const leaders = fleetShips.filter(s => {
      const dto = vesselAnalysis?.analysisMap.get(s.mmsi);
      return dto?.algorithms.fleetRole.isLeader;
    });
    if (leaders.length > 0) {
      result.push(new ScatterplotLayer({
        id: 'selected-fleet-leaders',
        data: leaders,
        getPosition: (d: Ship) => [d.lng, d.lat],
        getRadius: 16 * zoomScale,
        getFillColor: [0, 0, 0, 0],
        getLineColor: color,
        stroked: true,
        filled: false,
        radiusUnits: 'pixels',
        lineWidthUnits: 'pixels',
        getLineWidth: 3,
        updateTriggers: { getRadius: [zoomScale] },
      }));
    }

    return result;
  }, [selectedFleetData, zoomScale, vesselAnalysis]);

  // 분석 결과 deck.gl 레이어
  const analysisActiveFilter = koreaFilters.illegalFishing ? 'illegalFishing'
    : koreaFilters.darkVessel ? 'darkVessel'
    : koreaFilters.cnFishing ? 'cnFishing'
    : null;

  const analysisDeckLayers = useAnalysisDeckLayers(
    vesselAnalysis?.analysisMap ?? new Map(),
    allShips ?? ships,
    analysisActiveFilter,
    zoomScale,
  );

  return (
    <Map
      ref={mapRef}
      initialViewState={{ ...KOREA_MAP_CENTER, zoom: KOREA_MAP_ZOOM }}
      style={{ width: '100%', height: '100%' }}
      mapStyle={MAP_STYLE}
      onZoom={handleZoom}
    >
      <NavigationControl position="top-right" />

      <Source id="country-labels" type="geojson" data={countryLabelsGeoJSON()}>
        <Layer
          id="country-label-lg"
          type="symbol"
          filter={['==', ['get', 'rank'], 1]}
          layout={{
            'text-field': ['get', 'name'],
            'text-size': 15,
            'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
            'text-allow-overlap': false,
            'text-ignore-placement': false,
            'text-padding': 6,
          }}
          paint={{
            'text-color': '#e2e8f0',
            'text-halo-color': '#000000',
            'text-halo-width': 2,
            'text-opacity': 0.9,
          }}
        />
        <Layer
          id="country-label-md"
          type="symbol"
          filter={['==', ['get', 'rank'], 2]}
          layout={{
            'text-field': ['get', 'name'],
            'text-size': 12,
            'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
            'text-allow-overlap': false,
            'text-ignore-placement': false,
            'text-padding': 4,
          }}
          paint={{
            'text-color': '#94a3b8',
            'text-halo-color': '#000000',
            'text-halo-width': 1.5,
            'text-opacity': 0.85,
          }}
        />
        <Layer
          id="country-label-sm"
          type="symbol"
          filter={['==', ['get', 'rank'], 3]}
          minzoom={5}
          layout={{
            'text-field': ['get', 'name'],
            'text-size': 10,
            'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
            'text-allow-overlap': false,
            'text-ignore-placement': false,
            'text-padding': 2,
          }}
          paint={{
            'text-color': '#64748b',
            'text-halo-color': '#000000',
            'text-halo-width': 1,
            'text-opacity': 0.75,
          }}
        />
      </Source>

      {layers.ships && <ShipLayer
        ships={anyKoreaFilterOn ? ships : (allShips ?? ships)}
        militaryOnly={layers.militaryOnly}
        analysisMap={vesselAnalysis?.analysisMap}
        hiddenShipCategories={hiddenShipCategories}
        hiddenNationalities={hiddenNationalities}
      />}
      {/* Transship suspect labels — Marker DOM, inline styles kept for dynamic border color */}
      {transshipSuspects.size > 0 && ships.filter(s => transshipSuspects.has(s.mmsi)).map(s => (
        <Marker key={`ts-${s.mmsi}`} longitude={s.lng} latitude={s.lat} anchor="bottom">
          <div
            className="rounded-sm text-[9px] font-bold font-mono whitespace-nowrap animate-pulse"
            style={{
              background: 'rgba(249,115,22,0.9)', color: '#fff',
              padding: '1px 5px',
              border: '1px solid #f97316',
              textShadow: '0 0 2px #000',
            }}
          >
            {`\u26A0 ${t('korea.transshipSuspect')}`}
          </div>
        </Marker>
      ))}
      {/* Cable watch suspect labels */}
      {cableWatchSuspects.size > 0 && ships.filter(s => cableWatchSuspects.has(s.mmsi)).map(s => (
        <Marker key={`cw-${s.mmsi}`} longitude={s.lng} latitude={s.lat} anchor="bottom">
          <div
            className="rounded-sm text-[9px] font-bold font-mono whitespace-nowrap animate-pulse"
            style={{
              background: 'rgba(0,229,255,0.9)', color: '#000',
              padding: '1px 5px',
              border: '1px solid #00e5ff',
              textShadow: '0 0 2px rgba(255,255,255,0.5)',
            }}
          >
            {`\u{1F50C} ${t('korea.cableDanger')}`}
          </div>
        </Marker>
      ))}
      {/* Dokdo watch labels (Japanese vessels) */}
      {dokdoWatchSuspects.size > 0 && ships.filter(s => dokdoWatchSuspects.has(s.mmsi)).map(s => {
        const dist = Math.round(Math.hypot(
          (s.lng - 131.8647) * Math.cos((37.2417 * Math.PI) / 180),
          s.lat - 37.2417,
        ) * 111);
        const inTerritorial = dist < 22;
        return (
          <Marker key={`dk-${s.mmsi}`} longitude={s.lng} latitude={s.lat} anchor="bottom">
            <div
              className="rounded-sm text-[9px] font-bold font-mono whitespace-nowrap animate-pulse"
              style={{
                background: inTerritorial ? 'rgba(239,68,68,0.95)' : 'rgba(234,179,8,0.9)',
                color: '#fff',
                padding: '2px 6px',
                border: `1px solid ${inTerritorial ? '#ef4444' : '#eab308'}`,
                textShadow: '0 0 2px #000',
              }}
            >
              {inTerritorial ? '\u{1F6A8}' : '\u26A0'} {'\u{1F1EF}\u{1F1F5}'} {inTerritorial ? t('korea.dokdoIntrusion') : t('korea.dokdoApproach')} {`${dist}km`}
            </div>
          </Marker>
        );
      })}
      {layers.infra && infra.length > 0 && <InfraLayer facilities={infra} />}
      {layers.satellites && satellites.length > 0 && <SatelliteLayer satellites={satellites} />}
      {layers.aircraft && aircraft.length > 0 && <AircraftLayer aircraft={aircraft} militaryOnly={layers.militaryOnly} />}
      {layers.cables && <SubmarineCableLayer />}
      {layers.cctv && <CctvLayer />}
      {/* 정적 레이어들은 deck.gl DeckGLOverlay로 전환됨 — 아래 DOM 레이어 제거 */}
      {(koreaFilters.illegalFishing || koreaFilters.cnFishing) && <FishingZoneLayer />}
      {koreaFilters.cnFishing && <ChineseFishingOverlay ships={ships} analysisMap={vesselAnalysis?.analysisMap} />}
      {/* HazardFacility, CnFacility, JpFacility → useStaticDeckLayers (deck.gl GPU) 전환 완료 */}
      {koreaFilters.cnFishing && (
        <FleetClusterLayer
          ships={allShips ?? ships}
          analysisMap={vesselAnalysis ? vesselAnalysis.analysisMap : undefined}
          clusters={vesselAnalysis ? vesselAnalysis.clusters : undefined}
          onShipSelect={handleAnalysisShipSelect}
          onFleetZoom={handleFleetZoom}
          onSelectedGearChange={setSelectedGearData}
          onSelectedFleetChange={setSelectedFleetData}
        />
      )}
      {vesselAnalysis && vesselAnalysis.analysisMap.size > 0 && (
        <AnalysisOverlay
          ships={allShips ?? ships}
          analysisMap={vesselAnalysis.analysisMap}
          clusters={vesselAnalysis.clusters}
          activeFilter={analysisActiveFilter}
        />
      )}

      {/* deck.gl GPU 오버레이 — 불법어선 강조 + 분석 위험도 마커 */}
      <DeckGLOverlay layers={[
        ...staticDeckLayers,
        illegalFishingLayer,
        illegalFishingLabelLayer,
        zoneLabelsLayer,
        ...selectedGearLayers,
        ...selectedFleetLayers,
        ...(analysisPanelOpen ? analysisDeckLayers : []),
      ].filter(Boolean)} />
      {/* 정적 마커 클릭 Popup — 통합 리치 디자인 */}
      {staticPickInfo && (
        <StaticFacilityPopup pickInfo={staticPickInfo} onClose={() => setStaticPickInfo(null)} />
      )}
      {layers.osint && <OsintMapLayer osintFeed={osintFeed} currentTime={currentTime} />}
      {layers.eez && <EezLayer />}

      {/* Filter Status Banner — 필터별 개별 탐지 카운트 */}
      {(() => {
        const active = (Object.keys(koreaFilters) as (keyof KoreaFiltersState)[]).filter(k => koreaFilters[k]);
        if (active.length === 0) { if (activeBadgeFilter) setActiveBadgeFilter(null); return null; }
        const gearPattern = /^.+?_\d+_\d+_?$/;
        const all = allShips ?? ships;
        const getShipsForFilter = (k: string): Ship[] => {
          switch (k) {
            case 'illegalFishing': return all.filter(s => s.mtCategory === 'fishing' && s.flag !== 'KR' && classifyFishingZone(s.lat, s.lng).zone !== 'OUTSIDE');
            case 'illegalTransship': return all.filter(s => transshipSuspects.has(s.mmsi));
            case 'darkVessel': return all.filter(s => { const dto = vesselAnalysis?.analysisMap.get(s.mmsi); return !!(dto?.algorithms.darkVessel.isDark) || (s.lastSeen != null && currentTime - s.lastSeen > 3600000); });
            case 'cableWatch': return all.filter(s => cableWatchSuspects.has(s.mmsi));
            case 'dokdoWatch': return all.filter(s => dokdoWatchSuspects.has(s.mmsi));
            case 'ferryWatch': return all.filter(s => s.mtCategory === 'passenger');
            case 'cnFishing': return all.filter(s => gearPattern.test(s.name || ''));
            default: return [];
          }
        };
        const downloadCsv = (k: string) => {
          const data = getShipsForFilter(k);
          const bom = '\uFEFF';
          const header = 'MMSI,Name,Flag,Category,Lat,Lng,Speed,Heading';
          const rows = data.map(s => `${s.mmsi},"${(s.name || '').replace(/"/g, '""')}",${s.flag || ''},${s.mtCategory || ''},${s.lat.toFixed(4)},${s.lng.toFixed(4)},${s.speed},${s.heading}`);
          const blob = new Blob([bom + header + '\n' + rows.join('\n')], { type: 'text/csv;charset=utf-8;' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = `${k}_${new Date().toISOString().slice(0, 10)}.csv`;
          a.click();
          URL.revokeObjectURL(url);
        };
        const badgeShips = activeBadgeFilter ? getShipsForFilter(activeBadgeFilter) : [];
        return (
          <>
            <div className="absolute top-2.5 left-1/2 -translate-x-1/2 z-20 flex gap-1.5 backdrop-blur-lg">
              {active.map(k => {
                const color = FILTER_COLOR[k];
                const filterShips = getShipsForFilter(k);
                const isOpen = activeBadgeFilter === k;
                // cnFishing: 어구그룹 수(고유 모선명)로 표시, 나머지: 선박 수
                let badgeLabel: string;
                if (k === 'cnFishing') {
                  const groupNames = new Set(filterShips.map(s => (s.name || '').match(/^(.+?)_\d+/)?.[1]).filter(Boolean));
                  badgeLabel = `${groupNames.size}개`;
                } else {
                  badgeLabel = `${filterShips.length}척`;
                }
                const badgeName = k === 'cnFishing' ? '중국 어구그룹 감시' : (FILTER_I18N_KEY[k] ? t(FILTER_I18N_KEY[k]) : k);
                return (
                  <div
                    key={k}
                    className={`rounded-lg px-3 py-1.5 font-mono text-[11px] font-bold flex items-center gap-1.5 cursor-pointer select-none whitespace-nowrap ${isOpen ? '' : 'animate-pulse'}`}
                    style={{
                      background: isOpen ? `${color}44` : `${color}22`,
                      border: `1px solid ${isOpen ? color : color + '88'}`,
                      color,
                    }}
                    onClick={() => setActiveBadgeFilter(prev => prev === k ? null : k)}
                  >
                    <span className="text-[13px]">{FILTER_ICON[k]}</span>
                    {badgeName}
                    <span className="ml-0.5 text-white/80">{badgeLabel}</span>
                  </div>
                );
              })}
            </div>
            {activeBadgeFilter && badgeShips.length > 0 && (
              <div
                className="absolute top-12 left-1/2 -translate-x-1/2 z-30 rounded-lg px-3 py-2 font-mono text-[11px] w-[440px] max-h-[320px] bg-kcg-overlay backdrop-blur-lg shadow-lg"
                style={{ borderWidth: 1, borderStyle: 'solid', borderColor: (FILTER_COLOR[activeBadgeFilter] ?? '#888') + '88' }}
              >
                <div className="flex justify-between items-center mb-2">
                  <span className="font-bold text-white">
                    {FILTER_ICON[activeBadgeFilter]} {FILTER_I18N_KEY[activeBadgeFilter] ? t(FILTER_I18N_KEY[activeBadgeFilter]) : activeBadgeFilter} — {badgeShips.length}척
                  </span>
                  <div className="flex gap-1.5">
                    <button type="button" onClick={() => downloadCsv(activeBadgeFilter)} className="text-[10px] px-2 py-0.5 rounded bg-white/10 hover:bg-white/20 text-white transition-colors">CSV</button>
                    <button type="button" onClick={() => setActiveBadgeFilter(null)} className="text-white/60 hover:text-white transition-colors">✕</button>
                  </div>
                </div>
                <div className="overflow-y-auto max-h-[260px]">
                  <table className="w-full text-[10px]">
                    <thead className="sticky top-0 bg-kcg-overlay">
                      <tr className="text-white/50 border-b border-white/10">
                        <th className="text-left py-1 px-1">MMSI</th>
                        <th className="text-left py-1 px-1">Name</th>
                        <th className="text-center py-1 px-1">Flag</th>
                        <th className="text-left py-1 px-1">Type</th>
                        <th className="text-right py-1 px-1">Speed</th>
                      </tr>
                    </thead>
                    <tbody>
                      {badgeShips.slice(0, 200).map(s => (
                        <tr
                          key={s.mmsi}
                          className="hover:bg-white/5 cursor-pointer border-b border-white/5"
                          onClick={() => setFlyToTarget({ lng: s.lng, lat: s.lat, zoom: 12 })}
                        >
                          <td className="py-0.5 px-1 text-white/60">{s.mmsi}</td>
                          <td className="py-0.5 px-1 text-white/90 truncate max-w-[140px]">{s.name || '-'}</td>
                          <td className="py-0.5 px-1 text-center text-white/60">{s.flag || '-'}</td>
                          <td className="py-0.5 px-1 text-white/50">{s.mtCategory || '-'}</td>
                          <td className="py-0.5 px-1 text-right text-white/50">{s.speed?.toFixed(1)}kn</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  {badgeShips.length > 200 && <div className="text-center text-white/40 text-[10px] py-1">...외 {badgeShips.length - 200}척</div>}
                </div>
              </div>
            )}
          </>
        );
      })()}

      {/* Dokdo alert panel */}
      {dokdoAlerts.length > 0 && koreaFilters.dokdoWatch && (
        <div className="absolute top-2.5 right-[50px] z-20 rounded-lg border border-kcg-danger px-2.5 py-2 font-mono text-[11px] min-w-[220px] max-h-[200px] overflow-y-auto bg-kcg-overlay backdrop-blur-lg shadow-[0_0_20px_rgba(239,68,68,0.3)]">
          <div className="font-bold text-[10px] text-kcg-danger mb-1.5 tracking-widest flex items-center gap-1">
            {`\u{1F6A8} ${t('korea.dokdoAlerts')}`}
          </div>
          {dokdoAlerts.map((a, i) => (
            <div key={`${a.mmsi}-${i}`} className="flex flex-col gap-0.5" style={{
              padding: '4px 0', borderBottom: i < dokdoAlerts.length - 1 ? '1px solid #222' : 'none',
            }}>
              <div className="flex justify-between items-center">
                <span className="font-bold text-[10px]" style={{ color: a.dist < 22 ? '#ef4444' : '#eab308' }}>
                  {a.dist < 22 ? `\u{1F6A8} ${t('korea.territorialIntrusion')}` : `\u26A0 ${t('korea.approachWarning')}`}
                </span>
                <span className="text-kcg-dim text-[9px]">
                  {new Date(a.time).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                </span>
              </div>
              <div className="text-kcg-text-secondary text-[10px]">
                {`\u{1F1EF}\u{1F1F5} ${a.name} \u2014 ${t('korea.dokdoDistance', { dist: a.dist })}`}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 선택된 분석 선박 항적 — tracks API 응답 기반 */}
      {trackCoords && trackCoords.length > 1 && (
        <Source id="analysis-trail" type="geojson" data={{
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: trackCoords,
            },
          }],
        }}>
          <Layer id="analysis-trail-line" type="line" paint={{
            'line-color': '#00e5ff',
            'line-width': 2.5,
            'line-opacity': 0.8,
          }} />
        </Source>
      )}

      {/* AI Analysis Stats Panel — 항상 표시 */}
      {vesselAnalysis && (
        <AnalysisStatsPanel
          stats={vesselAnalysis.stats}
          lastUpdated={vesselAnalysis.lastUpdated}
          isLoading={vesselAnalysis.isLoading}
          analysisMap={vesselAnalysis.analysisMap}
          ships={allShips ?? ships}
          allShips={allShips ?? ships}
          onShipSelect={handleAnalysisShipSelect}
          onTrackLoad={handleTrackLoad}
          onExpandedChange={setAnalysisPanelOpen}
        />
      )}
    </Map>
  );
}