import { useMemo } from 'react';
import { Marker } from 'react-map-gl/maplibre';
import type { VesselAnalysisDto, Ship } from '../../types';


interface Props {
  ships: Ship[];
  analysisMap: Map<string, VesselAnalysisDto>;
  clusters: Map<number, string[]>;
  activeFilter: string | null;
}

interface AnalyzedShip {
  ship: Ship;
  dto: VesselAnalysisDto;
}

/**
 * 위험도/다크베셀/스푸핑 마커는 useAnalysisDeckLayers + DeckGLOverlay로 GPU 렌더링.
 * 이 컴포넌트는 DOM Marker가 필요한 leader 별 아이콘만 담당.
 */
export function AnalysisOverlay({ ships, analysisMap, clusters: _clusters, activeFilter }: Props) {
  const analyzedShips: AnalyzedShip[] = useMemo(() => {
    return ships
      .filter(s => analysisMap.has(s.mmsi))
      .map(s => ({ ship: s, dto: analysisMap.get(s.mmsi)! }));
  }, [ships, analysisMap]);

  // 선단 leader 별 아이콘 (cnFishing 필터 ON)
  const leaderShips = useMemo(() => {
    if (activeFilter !== 'cnFishing') return [];
    return analyzedShips.filter(({ dto }) => dto.algorithms.fleetRole.isLeader);
  }, [analyzedShips, activeFilter]);

  return (
    <>
      {/* 선단 leader 별 아이콘 */}
      {leaderShips.map(({ ship }) => (
        <Marker key={`leader-${ship.mmsi}`} longitude={ship.lng} latitude={ship.lat} anchor="bottom">
          <div style={{
            marginBottom: 6,
            fontSize: 10,
            color: '#f59e0b',
            textShadow: '0 0 3px #000',
            pointerEvents: 'none',
          }}>
            ★
          </div>
        </Marker>
      ))}
    </>
  );
}
