tasteby/frontend/src/components/NaverMapView.tsx

"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Supercluster from "supercluster";
import type { Restaurant } from "@/lib/api";
import Icon from "@/components/Icon";
import type { MapBounds, MapViewProps } from "@/components/MapView.types";

declare global {
  interface Window {
    naver?: { maps: NaverMaps };
  }
}
type LatLng = { lat: () => number; lng: () => number };
type NaverMaps = {
  LatLng: new (lat: number, lng: number) => LatLng;
  Map: new (el: HTMLElement, opts: Record<string, unknown>) => NaverMapInstance;
  Marker: new (opts: Record<string, unknown>) => NaverMarker;
  InfoWindow: new (opts: Record<string, unknown>) => NaverInfoWindow;
  Event: { addListener: (target: unknown, type: string, fn: (...args: unknown[]) => void) => unknown; removeListener: (handler: unknown) => void };
  Size: new (w: number, h: number) => unknown;
  Point: new (x: number, y: number) => unknown;
};
type NaverMapInstance = {
  setCenter: (latlng: unknown) => void;
  setZoom: (zoom: number, useEffect?: boolean) => void;
  getZoom: () => number;
  getBounds: () => { getNE: () => LatLng; getSW: () => LatLng };
  panTo: (latlng: unknown, opts?: Record<string, unknown>) => void;
  refresh: (noEffect?: boolean) => void;
};
type NaverMarker = {
  setMap: (map: NaverMapInstance | null) => void;
  setIcon: (icon: Record<string, unknown>) => void;
  setPosition: (latlng: unknown) => void;
  getPosition: () => LatLng;
};
type NaverInfoWindow = {
  open: (map: NaverMapInstance, marker: NaverMarker) => void;
  close: () => void;
  setContent: (content: string) => void;
  getMap: () => NaverMapInstance | null;
};

const NAVER_CLIENT_ID = process.env.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID || "";

function useNaverMaps(): { ready: boolean; error: string | null } {
  const [ready, setReady] = useState(typeof window !== "undefined" && !!window.naver?.maps);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!NAVER_CLIENT_ID) { setError("NEXT_PUBLIC_NAVER_MAP_CLIENT_ID 미설정"); return; }
    if (window.naver?.maps) { setReady(true); return; }
    const existing = document.querySelector<HTMLScriptElement>(`script[data-naver-maps]`);
    if (existing) {
      existing.addEventListener("load", () => setReady(true), { once: true });
      return;
    }
    const s = document.createElement("script");
    s.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${NAVER_CLIENT_ID}`;
    s.async = true;
    s.dataset.naverMaps = "1";
    s.onload = () => setReady(true);
    s.onerror = () => setError("naver maps v3 스크립트 로드 실패");
    document.head.appendChild(s);
  }, []);

  return { ready, error };
}

type RestaurantProps = { restaurant: Restaurant };
type RestaurantFeature = Supercluster.PointFeature<RestaurantProps>;

function useSupercluster(restaurants: Restaurant[]) {
  const points: RestaurantFeature[] = useMemo(
    () => restaurants.map((r) => ({
      type: "Feature" as const,
      geometry: { type: "Point" as const, coordinates: [r.longitude, r.latitude] },
      properties: { restaurant: r },
    })),
    [restaurants]
  );
  const index = useMemo(() => {
    const sc = new Supercluster<{ restaurant: Restaurant }>({ radius: 60, maxZoom: 16, minPoints: 2 });
    sc.load(points);
    return sc;
  }, [points]);
  const getClusters = useCallback((bounds: MapBounds, zoom: number) =>
    index.getClusters([bounds.west, bounds.south, bounds.east, bounds.north], Math.floor(zoom))
  , [index]);
  const getExpansionZoom = useCallback((clusterId: number) => {
    try { return index.getClusterExpansionZoom(clusterId); } catch { return 17; }
  }, [index]);
  return { getClusters, getExpansionZoom };
}

function getClusterSize(count: number): number {
  if (count < 10) return 36;
  if (count < 50) return 42;
  if (count < 100) return 48;
  return 54;
}

// SVG data URL — 단일 마커(주황 핀)
function markerIconHtml(): string {
  return `<div style="width:28px;height:28px;border-radius:9999px;background:#f59e0b;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);"></div>`;
}
// SVG data URL — 클러스터(숫자)
function clusterIconHtml(count: number, size: number): string {
  return `<div style="width:${size}px;height:${size}px;border-radius:9999px;background:rgba(245,158,11,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:${size > 44 ? 14 : 12}px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);">${count}</div>`;
}

export default function NaverMapView({
  restaurants,
  selected,
  onSelectRestaurant,
  onBoundsChanged,
  flyTo,
  onMyLocation,
}: MapViewProps) {
  const { ready, error } = useNaverMaps();
  const divRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<NaverMapInstance | null>(null);
  const markersRef = useRef<NaverMarker[]>([]);
  const infoWindowRef = useRef<NaverInfoWindow | null>(null);
  const [bounds, setBounds] = useState<MapBounds | null>(null);
  const [zoom, setZoom] = useState(13);
  const [initError, setInitError] = useState<string | null>(null);
  const { getClusters, getExpansionZoom } = useSupercluster(restaurants);

  // 지도 1회 생성
  useEffect(() => {
    if (!ready || !divRef.current || mapRef.current) return;
    try {
      const n = window.naver!.maps;
      const initLat = flyTo?.lat ?? selected?.latitude ?? 37.5665;
      const initLng = flyTo?.lng ?? selected?.longitude ?? 126.978;
      const initZoom = flyTo?.zoom ?? 13;
      const m = new n.Map(divRef.current, {
        center: new n.LatLng(initLat, initLng),
        zoom: initZoom,
        logoControl: false,
        mapDataControl: false,
        scaleControl: false,
        zoomControl: false,
      });
      mapRef.current = m;
      infoWindowRef.current = new n.InfoWindow({
        borderWidth: 0,
        anchorSize: new n.Size(10, 10),
        pixelOffset: new n.Point(0, -8),
        backgroundColor: "transparent",
        disableAnchor: false,
      });

      const ro = new ResizeObserver(() => {
        try { m.refresh(true); } catch { /* noop */ }
      });
      ro.observe(divRef.current);

      // bounds_changed가 줌/팬 끝나는 시점에 한 번만 emit (SDK가 throttle)
      const sync = () => {
        try {
          const b = m.getBounds();
          const ne = b.getNE(), sw = b.getSW();
          const nb: MapBounds = { north: ne.lat(), south: sw.lat(), east: ne.lng(), west: sw.lng() };
          setBounds(nb);
          setZoom(m.getZoom());
          onBoundsChanged?.(nb);
        } catch (e) {
          console.warn("[NaverMap] sync failed", e);
        }
      };
      requestAnimationFrame(() => {
        try { m.refresh(true); } catch { /* noop */ }
        sync();
      });
      // idle = 줌/팬 끝났을 때 한 번 (bounds_changed보다 적게 발화 → 성능)
      n.Event.addListener(m, "idle", sync);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      console.error("[NaverMap] init failed", e);
      setInitError(msg);
    }
  }, [ready, flyTo, selected, onBoundsChanged]);

  // flyTo 변경 반영
  useEffect(() => {
    const m = mapRef.current;
    if (!m || !flyTo || !window.naver?.maps) return;
    m.panTo(new window.naver.maps.LatLng(flyTo.lat, flyTo.lng));
    if (flyTo.zoom) m.setZoom(flyTo.zoom, true);
  }, [flyTo]);

  // 클러스터 계산 (bounds/zoom 변경 시)
  const clusters = useMemo(() => {
    if (!bounds) return [];
    return getClusters(bounds, zoom);
  }, [bounds, zoom, getClusters]);

  // 마커를 SDK 네이티브로 그림 — clusters 바뀌면 기존 마커 모두 제거 후 새로 생성
  useEffect(() => {
    const m = mapRef.current;
    const naver = window.naver?.maps;
    if (!m || !naver) return;

    // 기존 마커 제거
    for (const mk of markersRef.current) mk.setMap(null);
    markersRef.current = [];

    for (const feature of clusters) {
      const [lng, lat] = feature.geometry.coordinates;
      const isCluster = feature.properties && "cluster" in feature.properties && feature.properties.cluster;
      if (isCluster) {
        const { cluster_id, point_count } = feature.properties as Supercluster.ClusterProperties;
        const size = getClusterSize(point_count);
        const marker = new naver.Marker({
          position: new naver.LatLng(lat, lng),
          map: m,
          icon: {
            content: clusterIconHtml(point_count, size),
            anchor: new naver.Point(size / 2, size / 2),
          },
        });
        naver.Event.addListener(marker, "click", () => {
          const z = Math.min(getExpansionZoom(cluster_id), 18);
          m.panTo(new naver.LatLng(lat, lng));
          m.setZoom(z, true);
        });
        markersRef.current.push(marker);
      } else {
        const r = (feature.properties as RestaurantProps).restaurant;
        const marker = new naver.Marker({
          position: new naver.LatLng(lat, lng),
          map: m,
          title: r.name,
          icon: {
            content: markerIconHtml(),
            anchor: new naver.Point(14, 14),
          },
        });
        naver.Event.addListener(marker, "click", () => {
          const iw = infoWindowRef.current;
          if (iw && m) {
            iw.setContent(
              `<div style="background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 4px 12px rgba(0,0,0,.18);font-size:13px;font-weight:600;color:#111;white-space:nowrap;">${escapeHtml(r.name)}</div>`
            );
            iw.open(m, marker);
          }
          onSelectRestaurant?.(r);
        });
        markersRef.current.push(marker);
      }
    }
  }, [clusters, getExpansionZoom, onSelectRestaurant]);

  // 컴포넌트 unmount 시 마커 정리
  useEffect(() => {
    return () => {
      for (const mk of markersRef.current) mk.setMap(null);
      markersRef.current = [];
      infoWindowRef.current?.close();
    };
  }, []);

  return (
    <div className="relative w-full h-full">
      <div
        ref={divRef}
        className="absolute inset-0"
        style={{ width: "100%", height: "100%", backgroundColor: "#e5e7eb" }}
      />
      {(error || initError) && (
        <div className="absolute inset-0 flex items-center justify-center text-xs text-red-600 bg-white/80 pointer-events-none">
          {error ?? initError}
        </div>
      )}
      {!ready && !error && (
        <div className="absolute inset-0 flex items-center justify-center text-xs text-gray-500 bg-white/80 pointer-events-none">
          네이버 지도 로딩 중…
        </div>
      )}
      {onMyLocation && (
        <button
          onClick={onMyLocation}
          aria-label="내 위치"
          className="absolute right-3 bottom-3 size-11 rounded-full bg-white shadow-lg flex items-center justify-center z-10"
        >
          <Icon name="my-location" size={22} />
        </button>
      )}
    </div>
  );
}

function escapeHtml(s: string): string {
  return s.replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch] as string));
}