import { forwardRef } from 'react';

/**
 * 나침반 (heading-up, 아날로그 눈금형) — 눈금 링 + N + 빨간 바늘이 드론 방위(--rot = -yaw)로 회전.
 *   - 회전 카드(눈금/N/빨간 바늘/빨간 눈금): 부모 RAF 가 `--rot`(누적 언랩) 갱신 → 부드럽게 회전.
 *   - 상단 흰 삼각형 인덱스 + 외곽 링은 고정(위 = 드론 진행방향 = 헤딩).
 * ref 는 root div — `style.setProperty('--rot', `${-yaw}deg`)`.
 */
const D = 200; // 나침반 한 변(px) — 지도 나침반(BASE_D)과 동일

// 눈금: 6° 간격(60개). 0/90/180/270=장, 30°배수=중, 그 외=단.
const TICKS = Array.from({ length: 60 }, (_, i) => {
  const deg = i * 6;
  const long = deg % 90 === 0;
  const mid = deg % 30 === 0;
  const a = (deg * Math.PI) / 180;
  const r1 = long ? 37 : mid ? 40 : 42; // 안쪽 끝
  const sin = Math.sin(a), cos = Math.cos(a);
  return {
    deg,
    x1: 50 + r1 * sin, y1: 50 - r1 * cos,
    x2: 50 + 46 * sin, y2: 50 - 46 * cos,
    w: long ? 1.7 : mid ? 1.2 : 0.8,
    color: long ? '#fff' : 'rgba(255,255,255,0.6)',
  };
});

export const Minimap = forwardRef<HTMLDivElement, { className?: string }>(function Minimap(_props, ref) {
  return (
    <div ref={ref} style={{ position: 'absolute', top: 14, right: 14, width: D, height: D, zIndex: 30, pointerEvents: 'none' }}>
      {/* 고정 — 배경 원 + 외곽 링(두껍게). 프레임만 고정, 그 외 전부 회전. */}
      <svg viewBox="0 0 100 100" width={D} height={D} style={{ position: 'absolute', inset: 0 }}>
        <circle cx="50" cy="50" r="46.5" fill="rgba(16,22,32,0.45)" stroke="rgba(255,255,255,0.92)" strokeWidth="3" />
      </svg>

      {/* 회전 카드 — 눈금 + N + 빨간 바늘(N) + 흰 삼각형(S) + 빨간 눈금. 전체가 함께 회전. */}
      <svg
        viewBox="0 0 100 100"
        width={D}
        height={D}
        style={{ position: 'absolute', inset: 0, transform: 'rotate(var(--rot, 0deg))', transformOrigin: '50% 50%' }}
      >
        {TICKS.map((t) => (
          <line key={t.deg} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2} stroke={t.color} strokeWidth={t.w} strokeLinecap="round" />
        ))}
        {/* 빨간 화살표 — N(정북). 끝(tip)이 테두리에 맞닿고, 기단은 중심 쪽. */}
        <polygon points="50,7 43,32 57,32" fill="#e2231a" />
        {/* N 문자 — 빨간 화살표 '안쪽'(중심 방향). */}
        <text
          x="50"
          y="45"
          textAnchor="middle"
          fontSize="12"
          fontWeight="700"
          fill="#fff"
          stroke="rgba(0,0,0,0.55)"
          strokeWidth="0.7"
          style={{ paintOrder: 'stroke' }}
        >
          N
        </text>
        {/* 흰 삼각형 — S방향, 빨간 화살표와 '정반대'(아래로). 끝이 하단 테두리에 맞닿음. */}
        <polygon points="50,93 43,68 57,68" fill="rgba(255,255,255,0.95)" />
        {/* 중심 점 */}
        <circle cx="50" cy="50" r="2.3" fill="#fff" />
      </svg>
    </div>
  );
});
