/**
 * 지리정보 오버레이
 * 렌더링 최적화:
 *   - 텍스트(측점+POI): 데이터 로드 완료 시 전 프레임 Map 사전 계산 (requestIdleCallback)
 *     params 변경 시 500ms debounce 후 재계산
 *   - 중심선: 드론 프레임 변경 시 renderCacheRef 갱신 (per-frame, 나중에 최적화)
 *   - RAF 루프: Map 조회 + 캐시 읽기만 (계산 없음 → 60fps)
 */

import React, { useEffect, useRef, useState, useCallback } from 'react';
import {
  toCameraCoords,
  pixelFromCamera,
  type DroneFrameBasic,
  type CameraParams,
  type CameraCoords,
  DEFAULT_CAMERA_PARAMS,
} from '../../utils/geoProjection';
import { useGeoStore } from '../../store/geoStore';
import type { GeoPoint, CenterlinePoint } from '../../types/geo';

const VIDEO_FPS = 30000 / 1001;

interface Props {
  currentFrame: number;
  currentTime: number;
  fps: number;
  visible: boolean;
  /** 카메라 파라미터 패널 표시 (영상제어 토글). 기본 true. */
  showPanel?: boolean;
  /** 카메라 파라미터 패널 top(px) — 노선 배너 아래로 배치. 기본 72. */
  topPx?: number;
}

// category → 이모지
const CATEGORY_EMOJI: Record<string, string> = {
  '터널': '🚇',
  '교량': '🌉',
  '역사': '🚉',
  '지장물': '🏢',
  '측점': '📍',
};

// 텍스트 사전 계산 캐시 (Map<frameNum, LabelCache>)
interface LabelCache {
  stationLabels: { sx: number; sy: number; title: string }[];
  poiMarkers: { x: number; y: number; title: string; category: string }[];
}

// 중심선 + 나침반 렌더 캐시 (per-frame, renderCacheRef)
interface RenderCache {
  centerlineSegs: [number, number, number, number][];
  effectiveYaw: number;
  hFovRad: number;
  clCount: number;
  poiCount: number;
}

const cleanTitle = (t: string) => t.replace(/\s*\([상하]\)\s*$/, '').trim();

function stationOrder(title: string): number {
  const m = title.match(/(\d+)[Kk](\d+)/);
  if (!m) return 0;
  return parseInt(m[1]) * 1000 + parseInt(m[2]);
}

// ── ParamRow ─────────────────────────────────────────────────────────────────

interface ParamRowProps {
  label: string; value: number; min: number; max: number; step: number;
  unit: string; decimals?: number; onChange: (v: number) => void;
}

function ParamRow({ label, value, min, max, step, unit, decimals = 1, onChange }: ParamRowProps) {
  const fmt = useCallback((v: number) => v.toFixed(decimals), [decimals]);
  const [text, setText] = useState(() => fmt(value));
  const prevRef = useRef(value);
  useEffect(() => {
    if (prevRef.current !== value) { prevRef.current = value; setText(fmt(value)); }
  }, [value, fmt]);
  const commit = (s: string) => {
    const n = parseFloat(s);
    if (!isNaN(n)) {
      const c = Math.max(min, Math.min(max, n));
      onChange(c); setText(fmt(c)); prevRef.current = c;
    } else setText(fmt(value));
  };
  return (
    <div className="flex items-center gap-1.5 text-[11px]">
      <span className="text-gray-400 w-12 shrink-0 text-right">{label}</span>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => { const v = parseFloat(e.target.value); onChange(v); prevRef.current = v; setText(fmt(v)); }}
        className="flex-1 h-1 accent-yellow-400 cursor-pointer" />
      <input type="number" min={min} max={max} step={step} value={text}
        onChange={e => setText(e.target.value)}
        onBlur={e => commit(e.target.value)}
        onKeyDown={e => { if (e.key === 'Enter') commit((e.target as HTMLInputElement).value); if (e.key === 'Escape') setText(fmt(value)); }}
        className="w-16 bg-black/60 border border-gray-700 rounded px-1 py-0.5 text-right font-mono text-yellow-300 text-[11px] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
      <span className="text-gray-500 text-[10px] w-5 shrink-0">{unit}</span>
    </div>
  );
}

// ── 메인 컴포넌트 ─────────────────────────────────────────────────────────────

export default function StationOverlay({ currentFrame, currentTime, fps, visible, showPanel = true, topPx = 72 }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasSizeRef = useRef({ w: 0, h: 0 });

  // 데이터 ref
  const allDroneFramesRef = useRef<DroneFrameBasic[]>([]);
  const allCenterlinePointsRef = useRef<CenterlinePoint[]>([]);
  const allGeoStationsRef = useRef<GeoPoint[]>([]);
  const allPoisRef = useRef<GeoPoint[]>([]);

  // 현재 상태 ref
  const currentDroneFrameRef = useRef<DroneFrameBasic | null>(null);
  const currentFrameNumRef = useRef<number>(0);       // RAF에서 Map 조회용
  const currentFrameIdxRef = useRef<number>(0);       // smoothFrame용 배열 인덱스
  const currentTimeSecRef = useRef<number>(0);        // 마지막으로 알려진 재생 시간
  const timeUpdateWallRef = useRef<number>(performance.now()); // currentTime 갱신된 시각
  const paramsRef = useRef<CameraParams>(DEFAULT_CAMERA_PARAMS);
  const visibleRef = useRef(visible);
  const worldOriginRef = useRef<{ lat: number; lon: number; alt: number } | undefined>(undefined);

  // 텍스트 사전 계산 Map
  const labelMapRef = useRef<Map<number, LabelCache>>(new Map());
  const precomputeIdRef = useRef(0);  // 진행 중 계산 취소용

  // 중심선 + 나침반 렌더 캐시 (per-frame)
  const renderCacheRef = useRef<RenderCache | null>(null);
  // 나침반 전용(측점선 visible 무관 항상 갱신·표시)
  const compassRef = useRef<{ effectiveYaw: number; hFovRad: number } | null>(null);

  // UI state
  const [params, setParams] = useState<CameraParams>(DEFAULT_CAMERA_PARAMS);
  const [smoothHalf, setSmoothHalf] = useState(10);
  const smoothHalfRef = useRef(10);
  const [emaAlpha, setEmaAlpha] = useState(0.01);
  const emaAlphaRef = useRef(0.01);
  // 표시 위치 EMA 상태 (RAF 내부 유지)
  const displayedStRef = useRef<Map<string, { x: number; y: number }>>(new Map());
  const displayedPoiRef = useRef<Map<string, { x: number; y: number }>>(new Map());
  const [showControls, setShowControls] = useState(false);
  const [droneFramesLoaded, setDroneFramesLoaded] = useState(false);
  const [geoDataLoaded, setGeoDataLoaded] = useState(false);
  const [clDataLoaded, setClDataLoaded] = useState(false);
  const [panelDroneFrame, setPanelDroneFrame] = useState<DroneFrameBasic | null>(null);

  useEffect(() => { paramsRef.current = params; }, [params]);
  useEffect(() => { visibleRef.current = visible; }, [visible]);
  useEffect(() => { smoothHalfRef.current = smoothHalf; }, [smoothHalf]);
  useEffect(() => { emaAlphaRef.current = emaAlpha; }, [emaAlpha]);

  const setParam = useCallback(<K extends keyof CameraParams>(key: K, val: CameraParams[K]) =>
    setParams(prev => ({ ...prev, [key]: val })), []);

  const nearestCL = useCallback((lat: number, lon: number): CenterlinePoint | null => {
    const pts = allCenterlinePointsRef.current;
    if (!pts.length) return null;
    let best = pts[0], bestD = (best.lat - lat) ** 2 + (best.lon - lon) ** 2;
    for (const pt of pts) {
      const d = (pt.lat - lat) ** 2 + (pt.lon - lon) ** 2;
      if (d < bestD) { bestD = d; best = pt; }
    }
    return best;
  }, []);

  // 클라이언트 지리정보 스토어 구독 (서버 /api/geo/* 대체)
  const storeStations = useGeoStore(s => s.stations);
  const storePois = useGeoStore(s => s.pois);
  const storeCenterline = useGeoStore(s => s.centerline);
  const storeFrames = useGeoStore(s => s.frames);
  const storeOrigin = useGeoStore(s => s.origin);

  // 측점 (stationOrder 정렬 — 스토어가 이미 정렬해 두지만 방어적으로 동일 순서 보장)
  useEffect(() => {
    allGeoStationsRef.current = [...storeStations]
      .sort((a, b) => stationOrder(a.title) - stationOrder(b.title));
    allPoisRef.current = storePois;
    setGeoDataLoaded(storeStations.length > 0 || storePois.length > 0);
  }, [storeStations, storePois]);

  // 중심선
  useEffect(() => {
    allCenterlinePointsRef.current = storeCenterline;
    setClDataLoaded(storeCenterline.length > 0);
  }, [storeCenterline]);

  // 드론 프레임
  useEffect(() => {
    allDroneFramesRef.current = storeFrames;
    setDroneFramesLoaded(storeFrames.length > 0);
  }, [storeFrames]);

  // ENU 월드 원점 — 스토어 origin 직접 사용 (서버 getWorldOrigin 대체)
  useEffect(() => {
    worldOriginRef.current = storeOrigin
      ? { lat: storeOrigin.lat, lon: storeOrigin.lon, alt: storeOrigin.alt }
      : undefined;
  }, [storeOrigin]);

  // 드론 프레임 이동 평균 (GPS/자세 노이즈 제거)
  const smoothFrame = useCallback((frames: DroneFrameBasic[], i: number, halfWin: number): DroneFrameBasic => {
    const lo = Math.max(0, i - halfWin);
    const hi = Math.min(frames.length - 1, i + halfWin);
    const n = hi - lo + 1;
    let lat = 0, lon = 0, altitude = 0, pitch = 0, roll = 0, sinYaw = 0, cosYaw = 0;
    for (let k = lo; k <= hi; k++) {
      const f = frames[k];
      lat += f.lat; lon += f.lon; altitude += f.altitude;
      pitch += f.pitch; roll += f.roll;
      const yr = f.yaw * Math.PI / 180;
      sinYaw += Math.sin(yr); cosYaw += Math.cos(yr);
    }
    return {
      ...frames[i],
      lat: lat / n, lon: lon / n, altitude: altitude / n,
      pitch: pitch / n, roll: roll / n,
      yaw: Math.atan2(sinYaw / n, cosYaw / n) * 180 / Math.PI,
    };
  }, []);

  // 텍스트 사전 계산 — requestIdleCallback으로 백그라운드 실행
  const startLabelPrecompute = useCallback((currentParams: CameraParams, currentSmoothHalf: number) => {
    const id = ++precomputeIdRef.current;
    const newMap = new Map<number, LabelCache>();
    const frames = allDroneFramesRef.current;
    const allSt = allGeoStationsRef.current;
    const allPoi = allPoisRef.current;
    const worldOrigin = worldOriginRef.current;
    const CLIP_Z = 0.1;
    const SMOOTH_HALF = currentSmoothHalf;

    if (!frames.length) return;

    const t0 = performance.now();
    let idx = 0;
    const CHUNK = 200;  // 한 번에 처리할 프레임 수

    const step = () => {
      if (precomputeIdRef.current !== id) return;  // 취소됨

      const end = Math.min(idx + CHUNK, frames.length);
      while (idx < end) {
        const drone = smoothFrame(frames, idx++, SMOOTH_HALF);

        const stationLabels: LabelCache['stationLabels'] = [];
        for (const st of allSt) {
          const snap = nearestCL(st.lat, st.lon);
          const cc = toCameraCoords(drone, snap?.lat ?? st.lat, snap?.lon ?? st.lon, snap?.z ?? st.z, currentParams, worldOrigin);
          if (cc.Zc < CLIP_Z) continue;
          const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
          if (pxRaw < -0.05 || pxRaw > 1.05 || pyRaw < -0.05 || pyRaw > 1.05) continue;
          stationLabels.push({ sx: pxRaw, sy: pyRaw, title: st.title });
        }

        const poiMarkers: LabelCache['poiMarkers'] = [];
        for (const poi of allPoi) {
          const poiZ = nearestCL(poi.lat, poi.lon)?.z ?? poi.z;
          const cc = toCameraCoords(drone, poi.lat, poi.lon, poiZ, currentParams, worldOrigin);
          if (cc.Zc < CLIP_Z) continue;
          const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
          if (pxRaw < -0.02 || pxRaw > 1.02 || pyRaw < -0.02 || pyRaw > 1.02) continue;
          poiMarkers.push({ x: pxRaw, y: pyRaw, title: poi.title, category: poi.category });
        }

        newMap.set(drone.frame, { stationLabels, poiMarkers });
      }

      if (idx < frames.length) {
        requestIdleCallback(step, { timeout: 200 });
      } else {
        labelMapRef.current = newMap;
        console.log(
          `[labelMap] complete ${(performance.now() - t0).toFixed(0)}ms | ${frames.length} frames × ${allSt.length + allPoi.length} items`
        );
      }
    };

    requestIdleCallback(step, { timeout: 200 });
  }, [nearestCL]);

  // 모든 데이터 로드 완료 시 사전 계산 시작
  useEffect(() => {
    if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
    startLabelPrecompute(paramsRef.current, smoothHalf);
  }, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf]);

  // params / smoothHalf 변경 시 사전 계산 재시작 (500ms debounce)
  useEffect(() => {
    if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
    const timer = setTimeout(() => startLabelPrecompute(params, smoothHalf), 500);
    return () => clearTimeout(timer);
  }, [params, smoothHalf, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute]);

  // 현재 재생 시간 → 드론 프레임 ref 갱신
  useEffect(() => {
    // 나침반이 visible 무관 갱신되도록 visible 게이트 제거(프레임 탐색은 가벼움).
    if (!droneFramesLoaded) return;
    const frames = allDroneFramesRef.current;
    if (!frames.length) return;
    let best = frames[0], bestIdx = 0, bestD = Math.abs((best.frame ?? 0) / VIDEO_FPS - currentTime);
    for (let i = 0; i < frames.length; i++) {
      const d = Math.abs(frames[i].frame / VIDEO_FPS - currentTime);
      if (d < bestD) { bestD = d; best = frames[i]; bestIdx = i; }
      if (bestD < 1 / VIDEO_FPS / 2) break;
    }
    currentFrameNumRef.current = best.frame;
    currentFrameIdxRef.current = bestIdx;
    currentTimeSecRef.current = currentTime;
    timeUpdateWallRef.current = performance.now();
    if (currentDroneFrameRef.current?.frame !== best.frame) {
      currentDroneFrameRef.current = best;
      setPanelDroneFrame(best);
    }
  }, [currentTime, droneFramesLoaded]);

  // 중심선 + 나침반 캐시 빌드 (per-frame, 텍스트 계산 없음)
  useEffect(() => {
    // 나침반(effectiveYaw/hFovRad)은 측점선 visible 과 무관하게 항상 갱신.
    const cur = currentDroneFrameRef.current;
    if (cur) {
      const p = paramsRef.current;
      const fr = allDroneFramesRef.current;
      const d = fr.length
        ? smoothFrame(fr, currentFrameIdxRef.current, smoothHalfRef.current)
        : cur;
      compassRef.current = {
        effectiveYaw: d.yaw + p.yawOffset,
        hFovRad: 2 * Math.atan((p.sensorW ?? 36) / (2 * p.focalLen)),
      };
    } else {
      compassRef.current = null;
    }

    if (!currentDroneFrameRef.current || !visible) { renderCacheRef.current = null; return; }

    const t0 = performance.now();
    // 중심선도 smoothFrame 적용 (텍스트와 동일한 스무딩)
    const frames = allDroneFramesRef.current;
    const drone = frames.length
      ? smoothFrame(frames, currentFrameIdxRef.current, smoothHalfRef.current)
      : currentDroneFrameRef.current;
    const params = paramsRef.current;
    const worldOrigin = worldOriginRef.current;
    const allCL = allCenterlinePointsRef.current;
    const CLIP_Z = 0.1;
    const SCREEN_M = 200;

    // 선로 중심선
    const camPts: CameraCoords[] = allCL.map(pt =>
      toCameraCoords(drone, pt.lat, pt.lon, pt.z, params, worldOrigin)
    );
    const centerlineSegs: [number, number, number, number][] = [];
    for (let i = 0; i < camPts.length - 1; i++) {
      const c1 = camPts[i], c2 = camPts[i + 1];
      const z1 = c1.Zc, z2 = c2.Zc;
      if (z1 < CLIP_Z && z2 < CLIP_Z) continue;
      let px1: number, py1: number, px2: number, py2: number;
      if (z1 >= CLIP_Z && z2 >= CLIP_Z) {
        const p1 = pixelFromCamera(c1, params), p2 = pixelFromCamera(c2, params);
        px1 = p1.pxRaw; py1 = p1.pyRaw; px2 = p2.pxRaw; py2 = p2.pyRaw;
      } else {
        const t = (CLIP_Z - z1) / (z2 - z1);
        const cClip: CameraCoords = { Xc: c1.Xc + t*(c2.Xc-c1.Xc), Yc: c1.Yc + t*(c2.Yc-c1.Yc), Zc: CLIP_Z };
        if (z1 < CLIP_Z) {
          const p1 = pixelFromCamera(cClip, params), p2 = pixelFromCamera(c2, params);
          px1 = p1.pxRaw; py1 = p1.pyRaw; px2 = p2.pxRaw; py2 = p2.pyRaw;
        } else {
          const p1 = pixelFromCamera(c1, params), p2 = pixelFromCamera(cClip, params);
          px1 = p1.pxRaw; py1 = p1.pyRaw; px2 = p2.pxRaw; py2 = p2.pyRaw;
        }
      }
      const oc = (px: number, py: number) =>
        (px < -0.1 ? 1 : 0) | (px > 1.1 ? 2 : 0) |
        (py < -0.1 ? 4 : 0) | (py > 1.1 ? 8 : 0);
      if (oc(px1, py1) & oc(px2, py2)) continue;
      centerlineSegs.push([px1, py1, px2, py2]);
    }

    renderCacheRef.current = {
      centerlineSegs,
      effectiveYaw: drone.yaw + params.yawOffset,
      hFovRad: 2 * Math.atan((params.sensorW ?? 36) / (2 * params.focalLen)),
      clCount: allCL.length,
      poiCount: allPoisRef.current.length,
    };

    const elapsed = performance.now() - t0;
    console.log(
      `[cache] ${elapsed.toFixed(1)}ms | CL segs=${centerlineSegs.length}/${allCL.length} | frame=${drone.frame}`
    );
  }, [panelDroneFrame, params, visible]);

  // ResizeObserver
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const parent = canvas.parentElement;
    if (!parent) return;
    const ro = new ResizeObserver(entries => {
      for (const e of entries) {
        canvas.width = Math.round(e.contentRect.width);
        canvas.height = Math.round(e.contentRect.height);
        canvasSizeRef.current = { w: canvas.width, h: canvas.height };
      }
    });
    ro.observe(parent);
    canvas.width = parent.clientWidth;
    canvas.height = parent.clientHeight;
    canvasSizeRef.current = { w: canvas.width, h: canvas.height };
    return () => ro.disconnect();
  }, []);

  // RAF 렌더 루프 — 계산 없이 캐시/Map 조회만
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    let rafId = 0;

    const draw = () => {
      rafId = requestAnimationFrame(draw);
      const ctx = canvas.getContext('2d');
      if (!ctx) return;
      const { w: W, h: H } = canvasSizeRef.current;
      ctx.clearRect(0, 0, W, H);

      const cache = renderCacheRef.current;
      if (visibleRef.current && cache) {

      // 선로 중심선
      if (cache.centerlineSegs.length > 0) {
        ctx.strokeStyle = 'rgba(255,50,50,0.85)';
        ctx.lineWidth = 3;
        ctx.setLineDash([]);
        ctx.beginPath();
        for (const [px1, py1, px2, py2] of cache.centerlineSegs) {
          ctx.moveTo(px1*W, py1*H);
          ctx.lineTo(px2*W, py2*H);
        }
        ctx.stroke();
      }

      // 텍스트 — Map 조회 + 프레임 간 보간 (30fps 데이터 → 60fps 부드러운 표시)
      const frameNum = currentFrameNumRef.current;
      // performance.now()로 마지막 prop 업데이트 이후 경과 시간을 더해 현재 재생 위치 추정
      const elapsed = (performance.now() - timeUpdateWallRef.current) / 1000;
      const estTime = currentTimeSecRef.current + elapsed;
      const frac = Math.min(0.999, (estTime * VIDEO_FPS) - frameNum);  // 0~0.999
      const labelsA = labelMapRef.current.get(frameNum);
      const labelsB = labelMapRef.current.get(frameNum + 1);

      // 두 프레임 사이 픽셀 좌표 보간
      const interpY = (a: number, b: number | undefined) => b !== undefined ? a + (b - a) * frac : a;

      if (labelsA) {
        const α = emaAlphaRef.current;

        // 측점 라벨 — 보간 후 EMA 적용
        ctx.font = 'bold 18px monospace';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        labelsA.stationLabels.forEach((stA, i) => {
          const stB = labelsB?.stationLabels[i];
          const targetX = interpY(stA.sx, stB?.sx);
          const targetY = interpY(stA.sy, stB?.sy);
          const prev = displayedStRef.current.get(stA.title);
          const dispX = prev ? prev.x + (targetX - prev.x) * α : targetX;
          const dispY = prev ? prev.y + (targetY - prev.y) * α : targetY;
          displayedStRef.current.set(stA.title, { x: dispX, y: dispY });
          const x = dispX*W, y = dispY*H;
          // 마커 선
          ctx.strokeStyle = 'rgba(255,100,100,0.95)'; ctx.lineWidth = 2.5;
          ctx.beginPath(); ctx.moveTo(x, y-10); ctx.lineTo(x, y+10); ctx.stroke();
          // 텍스트 테두리
          const lx = Math.max(2, x + 8);
          ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 4;
          ctx.lineJoin = 'round';
          ctx.strokeText(cleanTitle(stA.title), lx, y);
          // 텍스트 본문
          ctx.fillStyle = 'rgba(255,200,200,1.0)';
          ctx.fillText(cleanTitle(stA.title), lx, y);
        });

        // POI 마커 — 보간 후 EMA 적용
        ctx.font = 'bold 20px sans-serif';
        labelsA.poiMarkers.forEach((poiA, i) => {
          const poiB = labelsB?.poiMarkers[i];
          const targetX = interpY(poiA.x, poiB?.x);
          const targetY = interpY(poiA.y, poiB?.y);
          const prev = displayedPoiRef.current.get(poiA.title);
          const dispX = prev ? prev.x + (targetX - prev.x) * α : targetX;
          const dispY = prev ? prev.y + (targetY - prev.y) * α : targetY;
          displayedPoiRef.current.set(poiA.title, { x: dispX, y: dispY });
          const px = dispX*W, py = dispY*H, r = 10;
          // 십자 마커
          ctx.strokeStyle = '#64c8ff'; ctx.lineWidth = 2.5;
          ctx.beginPath();
          ctx.moveTo(px-r, py); ctx.lineTo(px+r, py);
          ctx.moveTo(px, py-r); ctx.lineTo(px, py+r);
          ctx.stroke();
          // 이모지 + 텍스트
          const emoji = CATEGORY_EMOJI[poiA.category] ?? '📌';
          const label = `${emoji} ${cleanTitle(poiA.title)}`;
          const lx = Math.max(2, px + 14);
          ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 4;
          ctx.lineJoin = 'round';
          ctx.textBaseline = 'middle';
          ctx.strokeText(label, lx, py);
          ctx.fillStyle = '#64c8ff';
          ctx.fillText(label, lx, py);
          ctx.textBaseline = 'alphabetic';
        });
      }
      } // end if(visible && cache) — 중심선/측점/POI

      // 나침반 HUD — 우측 상단, 측점선 토글과 무관하게 항상 표시
      const compass = compassRef.current;
      if (compass) {
        const r = 52;
        const cx = W - (r + 14), cy = 16 + r;
        ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2);
        ctx.fillStyle = 'rgba(0,0,0,0.55)'; ctx.fill();
        ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1; ctx.stroke();
        ctx.font = 'bold 9px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
        for (const [label, deg] of [['N',0],['E',90],['S',180],['W',270]] as const) {
          const rad = (deg-90)*Math.PI/180;
          ctx.fillStyle = label==='N' ? '#ff6060' : 'rgba(255,255,255,0.5)';
          ctx.fillText(label, cx+Math.cos(rad)*(r-9), cy+Math.sin(rad)*(r-9));
        }
        const yawRad = (compass.effectiveYaw-90)*Math.PI/180;
        const tx = cx+Math.cos(yawRad)*(r-14), ty = cy+Math.sin(yawRad)*(r-14);
        ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(tx, ty);
        ctx.strokeStyle = '#ffd700'; ctx.lineWidth = 2.5; ctx.stroke();
        const ha = 0.42, hl = 9;
        ctx.beginPath();
        ctx.moveTo(tx, ty); ctx.lineTo(tx-hl*Math.cos(yawRad-ha), ty-hl*Math.sin(yawRad-ha));
        ctx.moveTo(tx, ty); ctx.lineTo(tx-hl*Math.cos(yawRad+ha), ty-hl*Math.sin(yawRad+ha));
        ctx.strokeStyle = '#ffd700'; ctx.lineWidth = 2; ctx.stroke();
        ctx.beginPath(); ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, r-2, yawRad-compass.hFovRad/2, yawRad+compass.hFovRad/2); ctx.closePath();
        ctx.fillStyle = 'rgba(255,215,0,0.12)'; ctx.fill();
        ctx.strokeStyle = 'rgba(255,215,0,0.35)'; ctx.lineWidth = 1; ctx.stroke();
        ctx.font = '9px monospace'; ctx.textBaseline = 'top'; ctx.fillStyle = '#ffd700';
        ctx.fillText(`${((compass.effectiveYaw+360)%360).toFixed(1)}°`, cx, cy+r+2);
        ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';
      }

      // 범례(선로중심선/지장물 개수)는 좌상단 카메라파라미터·스테이션맵과 겹쳐 제거함.
    };

    rafId = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(rafId);
  }, []);

  return (
    <>
      <canvas
        ref={canvasRef}
        className="absolute inset-0 pointer-events-none z-20"
        style={{ width: '100%', height: '100%' }}
      />
      {showPanel && (
      <div className="absolute left-2 z-30 flex flex-col items-start gap-1" style={{ top: topPx }}>
        <button onClick={() => setShowControls(v => !v)}
          className="w-28 text-center text-[10px] whitespace-nowrap bg-black/70 hover:bg-black/90 text-gray-200 px-1 py-1 rounded border border-gray-500 shadow">
          {showControls ? '▲ 카메라 파라미터' : '▼ 카메라 파라미터'}
        </button>
        {showControls && (
          <div className="bg-black/90 border border-gray-600 rounded p-3 text-white w-72 select-none max-h-[80vh] overflow-y-auto shadow-xl">
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-b border-gray-700 pb-2 mb-2">스무딩 <span className="text-gray-600">(재계산 500ms 후)</span></div>
            <div className="mb-3 space-y-2">
              <ParamRow label="smooth" value={smoothHalf} min={0} max={60} step={1} unit="fr" decimals={0} onChange={v => setSmoothHalf(Math.round(v))} />
              <div className="text-[10px] text-gray-600 text-right">±{smoothHalf}fr = ±{(smoothHalf * 1000 / (30000/1001)).toFixed(0)}ms</div>
              <ParamRow label="EMA α" value={emaAlpha} min={0.01} max={1.0} step={0.01} unit="" decimals={2} onChange={v => setEmaAlpha(v)} />
              <div className="text-[10px] text-gray-600 text-right">α={emaAlpha.toFixed(2)} → lag≈{(1000/60*(1/emaAlpha - 1)).toFixed(0)}ms</div>
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5">자세 보정 오프셋<span className="ml-1 text-gray-600">(SRT + offset)</span></div>
            <div className="space-y-2 mb-3">
              <ParamRow label="Yaw ±" value={params.yawOffset} min={-180} max={180} step={0.1} unit="°" decimals={1} onChange={v => setParam('yawOffset', v)} />
              <ParamRow label="Pitch ±" value={params.pitch} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('pitch', v)} />
              <ParamRow label="Roll ±" value={params.roll} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('roll', v)} />
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">위치 보정 (드론 GPS 오프셋)</div>
            <div className="space-y-2 mb-3">
              <ParamRow label="off X" value={params.offX} min={-500} max={500} step={0.1} unit="m" decimals={1} onChange={v => setParam('offX', v)} />
              <ParamRow label="off Y" value={params.offY} min={-500} max={500} step={0.1} unit="m" decimals={1} onChange={v => setParam('offY', v)} />
              <ParamRow label="off Z" value={params.offZ} min={-200} max={200} step={0.1} unit="m" decimals={1} onChange={v => setParam('offZ', v)} />
            </div>
            <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">내부표정 (초점·주점·센서)</div>
            <div className="space-y-2 mb-3">
              <ParamRow label="f" value={params.focalLen} min={10} max={100} step={0.1} unit="mm" decimals={1} onChange={v => setParam('focalLen', v)} />
              <ParamRow label="cx₀" value={params.cx0} min={-0.5} max={0.5} step={0.005} unit="" decimals={3} onChange={v => setParam('cx0', v)} />
              <ParamRow label="cy₀" value={params.cy0} min={-0.5} max={0.5} step={0.005} unit="" decimals={3} onChange={v => setParam('cy0', v)} />
              <ParamRow label="sen W" value={params.sensorW} min={10} max={50} step={0.05} unit="mm" decimals={2} onChange={v => setParam('sensorW', v)} />
              <ParamRow label="sen H" value={params.sensorH} min={6} max={36} step={0.05} unit="mm" decimals={2} onChange={v => setParam('sensorH', v)} />
            </div>
            {panelDroneFrame && (
              <div className="border-t border-gray-700 pt-2 mb-2 text-[10px] text-gray-400 font-mono space-y-0.5">
                <div>yaw: {((panelDroneFrame.yaw+params.yawOffset+360)%360).toFixed(1)}° pitch: {(panelDroneFrame.pitch+params.pitch).toFixed(1)}° roll: {(panelDroneFrame.roll+params.roll).toFixed(1)}°</div>
                <div>f: {params.focalLen.toFixed(1)}mm hFOV: {(2*Math.atan((params.sensorW??36)/(2*params.focalLen))*180/Math.PI).toFixed(1)}°</div>
                <div>offX: {params.offX.toFixed(1)}m offY: {params.offY.toFixed(1)}m offZ: {params.offZ.toFixed(1)}m</div>
              </div>
            )}
            <div className="border-t border-gray-700 pt-2 flex items-center justify-end">
              <button onClick={() => setParams({ ...DEFAULT_CAMERA_PARAMS })}
                className="text-[11px] text-gray-400 hover:text-white border border-gray-600 hover:border-gray-400 px-2 py-0.5 rounded transition-colors">
                초기화
              </button>
            </div>
          </div>
        )}
      </div>
      )}
    </>
  );
}