import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { Map, useControl } from '@vis.gl/react-maplibre';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { PolygonLayer, ScatterplotLayer } from '@deck.gl/layers';
import type { MapMouseEvent } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
import { useMapStore } from '@common/store/mapStore';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function DeckGLOverlay({ layers }: { layers: any[] }) {
  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
  overlay.setProps({ layers });
  return null;
}

type WingAITab = 'detect' | 'change' | 'aoi';

const tabItems: { id: WingAITab; label: string; icon: string; desc: string }[] = [
  {
    id: 'detect',
    label: '객체 탐지',
    icon: '🎯',
    desc: '위성/드론 영상에서 선박·차량·시설물 자동 탐지 및 분류',
  },
  {
    id: 'change',
    label: '변화 감지',
    icon: '🔄',
    desc: '동일 지역 다시점 영상 비교 분석 (Before/After)',
  },
  {
    id: 'aoi',
    label: '연안자동감지',
    icon: '📍',
    desc: '연안 관심지역 등록 → 변화 자동 감지 및 알림',
  },
];

export function WingAI() {
  const [activeTab, setActiveTab] = useState<WingAITab>('detect');

  return (
    <div className="overflow-y-auto px-6 pt-1 pb-2">
      {/* 헤더 */}
      <div className="flex items-center gap-3 mb-4 h-9">
        <div className="flex items-center gap-2 shrink-0">
          <div
            className="w-7 h-7 rounded-md flex items-center justify-center text-body-2"
            style={{
              background: 'rgba(6,182,212,0.15)',
              border: '1px solid rgba(6,182,212,0.3)',
            }}
          >
            🤖
          </div>
          <div className="text-label-1 font-bold font-korean text-fg">AI 탐지/분석</div>
          {/* <span
            className="text-caption px-1.5 py-0.5 rounded font-bold"
            style={{
              background: 'color-mix(in srgb, var(--color-tertiary) 12%, transparent)',
              color: 'var(--color-tertiary)',
              border: '1px solid rgba(168,85,247,.25)',
            }}
          >
            WingAI
          </span> */}
        </div>
        <div className="flex gap-1 h-7">
          {tabItems.map((t) => (
            <button
              key={t.id}
              onClick={() => setActiveTab(t.id)}
              className="px-2.5 h-full rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
              style={
                activeTab === t.id
                  ? {
                      background: 'rgba(6,182,212,.08)',
                      borderColor: 'rgba(6,182,212,.3)',
                      color: 'var(--color-accent)',
                    }
                  : {
                      background: 'var(--bg-card)',
                      borderColor: 'var(--stroke-default)',
                      color: 'var(--fg-disabled)',
                    }
              }
            >
              {/* {t.icon} */}
              {t.label}
            </button>
          ))}
        </div>
      </div>

      {/* 탭 콘텐츠 */}
      {activeTab === 'detect' && <DetectPanel />}
      {activeTab === 'change' && <ChangeDetectPanel />}
      {activeTab === 'aoi' && <AoiPanel />}
    </div>
  );
}

/* ─── 객체 탐지 패널 (MMSI 선종 불일치 탐지) ─────────── */
type MismatchStatus = '불일치' | '의심' | '정상' | '확인중';

interface VesselDetection {
  id: string;
  mmsi: string;
  vesselName: string;
  /** AIS 등록 선종 */
  aisType: string;
  /** AI 영상 분석 선종 */
  detectedType: string;
  /** 불일치 여부 */
  mismatch: boolean;
  status: MismatchStatus;
  confidence: string;
  coord: string;
  lon: number;
  lat: number;
  time: string;
  detail: string;
}

function DetectPanel() {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [filterStatus, setFilterStatus] = useState<MismatchStatus | '전체'>('전체');
  const currentMapStyle = useBaseMapStyle();
  const mapToggles = useMapStore((s) => s.mapToggles);

  const detections: VesselDetection[] = [
    {
      id: 'VD-001',
      mmsi: '440123456',
      vesselName: 'OCEAN GLORY',
      aisType: '화물선',
      detectedType: '유조선',
      mismatch: true,
      status: '불일치',
      confidence: '94.2%',
      coord: '33.24°N 126.50°E',
      lon: 126.5,
      lat: 33.24,
      time: '14:23',
      detail: 'AIS 화물선 등록 → 영상 분석 결과 유조선 선형 + 탱크 구조 탐지',
    },
    {
      id: 'VD-002',
      mmsi: '441987654',
      vesselName: 'SEA PHOENIX',
      aisType: '유조선',
      detectedType: '화물선',
      mismatch: true,
      status: '불일치',
      confidence: '91.7%',
      coord: '34.73°N 127.68°E',
      lon: 127.68,
      lat: 34.73,
      time: '14:18',
      detail: 'AIS 유조선 등록 → 영상 분석 결과 컨테이너 적재 확인, 화물선 판정',
    },
    {
      id: 'VD-003',
      mmsi: '440555123',
      vesselName: 'DONGBANG 7',
      aisType: '어선',
      detectedType: '화물선',
      mismatch: true,
      status: '의심',
      confidence: '78.3%',
      coord: '35.15°N 129.13°E',
      lon: 129.13,
      lat: 35.15,
      time: '14:10',
      detail: 'AIS 어선 등록 → 선체 규모 및 구조가 어선 대비 과대, 화물선 의심',
    },
    {
      id: 'VD-004',
      mmsi: '440678901',
      vesselName: 'KOREA STAR',
      aisType: '화물선',
      detectedType: '화물선',
      mismatch: false,
      status: '정상',
      confidence: '97.8%',
      coord: '34.80°N 126.37°E',
      lon: 126.37,
      lat: 34.8,
      time: '14:05',
      detail: 'AIS 등록 선종과 영상 분석 결과 일치',
    },
    {
      id: 'VD-005',
      mmsi: 'N/A',
      vesselName: '미식별',
      aisType: 'AIS 미수신',
      detectedType: '유조선',
      mismatch: true,
      status: '확인중',
      confidence: '85.6%',
      coord: '33.11°N 126.27°E',
      lon: 126.27,
      lat: 33.11,
      time: '14:01',
      detail: 'AIS 신호 없음 → 위성 SAR로 유조선급 선형 탐지, 불법 운항 의심',
    },
    {
      id: 'VD-006',
      mmsi: '440234567',
      vesselName: 'BUSAN EXPRESS',
      aisType: '컨테이너선',
      detectedType: '유조선',
      mismatch: true,
      status: '불일치',
      confidence: '89.1%',
      coord: '35.05°N 129.10°E',
      lon: 129.1,
      lat: 35.05,
      time: '13:55',
      detail: 'AIS 컨테이너선 → 갑판 컨테이너 미확인, 탱크 구조 감지',
    },
    {
      id: 'VD-007',
      mmsi: '440345678',
      vesselName: 'JEJU BREEZE',
      aisType: '여객선',
      detectedType: '여객선',
      mismatch: false,
      status: '정상',
      confidence: '98.1%',
      coord: '33.49°N 126.52°E',
      lon: 126.52,
      lat: 33.49,
      time: '13:50',
      detail: 'AIS 등록 선종과 영상 분석 결과 일치',
    },
  ];

  const mismatchCount = detections.filter((d) => d.mismatch).length;
  const confirmingCount = detections.filter((d) => d.status === '확인중').length;

  const stats = [
    { value: String(detections.length), label: '분석 선박', color: 'var(--fg-default)' },
    { value: String(mismatchCount), label: '선종 불일치', color: 'var(--fg-default)' },
    { value: String(confirmingCount), label: '확인 중', color: 'var(--fg-default)' },
    {
      value: String(detections.filter((d) => !d.mismatch).length),
      label: '정상',
      color: 'var(--fg-default)',
    },
  ];

  const filtered =
    filterStatus === '전체' ? detections : detections.filter((d) => d.status === filterStatus);

  const statusStyle = (s: MismatchStatus) => {
    if (s === '불일치')
      return {
        background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
        color: 'var(--color-danger)',
        border: '1px solid color-mix(in srgb, var(--color-danger) 25%, transparent)',
      };
    if (s === '의심')
      return {
        background: 'color-mix(in srgb, var(--color-caution) 12%, transparent)',
        color: 'var(--color-caution)',
        border: '1px solid color-mix(in srgb, var(--color-caution) 25%, transparent)',
      };
    if (s === '확인중')
      return {
        background: 'rgba(6,182,212,.08)',
        color: 'var(--color-accent)',
        border: '1px solid rgba(6,182,212,.25)',
      };
    return {
      background: 'color-mix(in srgb, var(--color-success) 12%, transparent)',
      color: 'var(--color-success)',
      border: '1px solid color-mix(in srgb, var(--color-success) 25%, transparent)',
    };
  };

  const filters: (MismatchStatus | '전체')[] = ['전체', '불일치', '의심', '확인중', '정상'];

  return (
    <div>
      {/* 통계 카드 */}
      <div className="grid grid-cols-4 gap-3 mb-5">
        {stats.map((s, i) => (
          <div key={i} className="bg-bg-elevated border border-stroke rounded-md p-3.5 text-center">
            <div className="text-[22px] font-bold font-mono" style={{ color: s.color }}>
              {s.value}
            </div>
            <div className="text-caption text-fg-disabled mt-1 font-korean">{s.label}</div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-[1fr_380px] gap-4">
        {/* 탐지 결과 지도 */}
        <div
          className="bg-bg-elevated border border-stroke rounded-md overflow-hidden"
          style={{ minHeight: 480 }}
        >
          <div className="flex items-center justify-between px-4 py-3 border-b border-stroke">
            <div className="text-label-2 font-bold font-korean text-fg">
              🎯 선종 불일치 탐지 지도
            </div>
            <div className="text-caption text-fg-disabled font-mono">{filtered.length}척 표시</div>
          </div>
          <div className="relative" style={{ height: 440 }}>
            <Map
              initialViewState={{ longitude: 127.5, latitude: 34.0, zoom: 6.5 }}
              style={{ width: '100%', height: '100%' }}
              mapStyle={currentMapStyle}
              attributionControl={false}
            >
              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              <DeckGLOverlay
                layers={[
                  new ScatterplotLayer({
                    id: 'vessel-detect-markers',
                    data: filtered,
                    getPosition: (d: VesselDetection) => [d.lon, d.lat],
                    getRadius: (d: VesselDetection) => (selectedId === d.id ? 10 : 7),
                    radiusUnits: 'pixels' as const,
                    getFillColor: (d: VesselDetection) => {
                      if (d.status === '불일치') return [239, 68, 68, 200];
                      if (d.status === '의심') return [234, 179, 8, 200];
                      if (d.status === '확인중') return [6, 182, 212, 200];
                      return [34, 197, 94, 160];
                    },
                    getLineColor: [255, 255, 255, 255],
                    lineWidthMinPixels: 2,
                    stroked: true,
                    pickable: true,
                    onClick: ({ object }: { object: VesselDetection }) => {
                      if (object) setSelectedId(object.id === selectedId ? null : object.id);
                    },
                    updateTriggers: { getRadius: [selectedId] },
                  }),
                ]}
              />
            </Map>
            {/* 범례 */}
            <div className="absolute bottom-3 left-3 bg-bg-elevated/90 border border-stroke rounded px-3 py-2 backdrop-blur-sm">
              <div className="flex items-center gap-3">
                {[
                  { color: 'var(--color-danger)', label: '불일치' },
                  { color: 'var(--color-caution)', label: '의심' },
                  { color: 'var(--color-accent)', label: '확인중' },
                  { color: 'var(--color-success)', label: '정상' },
                ].map((l) => (
                  <div key={l.label} className="flex items-center gap-1">
                    <div className="w-2.5 h-2.5 rounded-full" style={{ background: l.color }} />
                    <span className="text-caption font-korean text-fg-disabled">{l.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 탐지 목록 */}
        <div
          className="bg-bg-elevated border border-stroke rounded-md overflow-hidden flex flex-col"
          style={{ maxHeight: 520 }}
        >
          <div className="px-4 py-3 border-b border-stroke shrink-0">
            <div className="flex items-center justify-between mb-2">
              <div className="text-label-2 font-bold font-korean text-fg">
                📋 MMSI 선종 검증 목록
              </div>
              <div className="text-caption text-fg-disabled font-mono">{filtered.length}건</div>
            </div>
            <div className="flex gap-1">
              {filters.map((f) => (
                <button
                  key={f}
                  onClick={() => setFilterStatus(f)}
                  className="px-2 py-0.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
                  style={
                    filterStatus === f
                      ? {
                          background: 'rgba(6,182,212,.08)',
                          borderColor: 'rgba(6,182,212,.3)',
                          color: 'var(--color-accent)',
                        }
                      : {
                          background: 'var(--bg-card)',
                          borderColor: 'var(--stroke-default)',
                          color: 'var(--fg-disabled)',
                        }
                  }
                >
                  {f}
                </button>
              ))}
            </div>
          </div>
          <div className="divide-y divide-stroke overflow-y-auto flex-1">
            {filtered.map((d) => (
              <div
                key={d.id}
                onClick={() => setSelectedId(selectedId === d.id ? null : d.id)}
                className="px-4 py-3 hover:bg-bg-surface-hover/30 transition-colors cursor-pointer"
                style={{ background: selectedId === d.id ? 'rgba(6,182,212,.04)' : undefined }}
              >
                <div className="flex items-center justify-between mb-1">
                  <div className="flex items-center gap-2">
                    <span className="text-caption font-mono text-fg-disabled">{d.id}</span>
                    <span className="text-caption font-bold font-korean text-fg">
                      {d.vesselName}
                    </span>
                  </div>
                  <span
                    className="px-1.5 py-0.5 rounded text-caption font-bold font-korean"
                    style={statusStyle(d.status)}
                  >
                    {d.status}
                  </span>
                </div>
                {/* 선종 비교 */}
                <div className="flex items-center gap-1.5 mt-1.5">
                  <span className="text-caption font-korean text-fg">AIS: {d.aisType}</span>
                  {d.mismatch && <span className="text-caption text-fg-disabled">≠</span>}
                  {!d.mismatch && <span className="text-caption text-fg-disabled">=</span>}
                  <span className="text-caption font-korean text-fg">AI: {d.detectedType}</span>
                </div>
                <div className="flex items-center gap-3 mt-1.5 text-caption text-fg-disabled font-mono">
                  <span>MMSI {d.mmsi}</span>
                  <span>{d.coord}</span>
                  <span>{d.time}</span>
                  <span>신뢰도 {d.confidence}</span>
                </div>
                {/* 펼침: 상세 */}
                {selectedId === d.id && (
                  <div
                    className="mt-2 px-3 py-2 rounded text-caption font-korean"
                    style={{
                      background: 'rgba(6,182,212,.04)',
                      border: '1px solid rgba(6,182,212,.12)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    {d.detail}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ─── 변화 감지 패널 (복합 정보원 시점 비교) ──────────── */
type SourceType = 'satellite' | 'cctv' | 'drone' | 'ais';

interface SourceConfig {
  id: SourceType;
  label: string;
  icon: string;
  color: string;
  desc: string;
}

const SOURCES: SourceConfig[] = [
  {
    id: 'satellite',
    label: '위성영상',
    icon: '🛰',
    color: 'var(--color-accent)',
    desc: 'KOMPSAT-3A / Sentinel SAR 수신 영상',
  },
  {
    id: 'cctv',
    label: 'CCTV',
    icon: '📹',
    color: 'var(--color-info)',
    desc: 'KHOA / KBS 해안 CCTV 스냅샷',
  },
  {
    id: 'drone',
    label: '드론',
    icon: '🛸',
    color: 'var(--color-success)',
    desc: '정밀 촬영 / 열화상 이미지',
  },
  {
    id: 'ais',
    label: 'AIS',
    icon: '🚢',
    color: 'var(--color-warning)',
    desc: '선박 위치·항적·MMSI 궤적',
  },
];

interface ChangeRecord {
  id: string;
  area: string;
  type: string;
  date1: string;
  time1: string;
  date2: string;
  time2: string;
  severity: '심각' | '보통' | '낮음';
  detail: string;
  sources: SourceType[];
  crossRef?: string;
  /** 각 정보원별 AS-IS 시점 요약 */
  asIsDetail: Partial<Record<SourceType, string>>;
  /** 각 정보원별 현재 시점 요약 */
  nowDetail: Partial<Record<SourceType, string>>;
}

function ChangeDetectPanel() {
  const [layers, setLayers] = useState<Record<SourceType, boolean>>({
    satellite: true,
    cctv: true,
    drone: true,
    ais: true,
  });
  const [sourceFilter, setSourceFilter] = useState<SourceType | 'all'>('all');
  const [selectedChange, setSelectedChange] = useState<string | null>(null);

  const toggleLayer = (id: SourceType) => setLayers((prev) => ({ ...prev, [id]: !prev[id] }));
  const activeCount = Object.values(layers).filter(Boolean).length;

  const changes: ChangeRecord[] = [
    {
      id: 'CHG-001',
      area: '여수항 북측 해안',
      type: '선박 이동',
      date1: '03-14',
      time1: '14:00',
      date2: '03-16',
      time2: '14:23',
      severity: '보통',
      detail: '정박 선박 3척 → 7척 (증가)',
      sources: ['satellite', 'ais', 'cctv'],
      crossRef: 'AIS MMSI 440123456 외 3척 신규 입항 — 위성+CCTV 동시 확인',
      asIsDetail: {
        satellite: '정박 선박 3척 식별',
        ais: 'MMSI 3건 정박 상태',
        cctv: '여수 오동도 CCTV 정상',
      },
      nowDetail: {
        satellite: '선박 7척 식별 (4척 증가)',
        ais: 'MMSI 7건 (신규 4건 입항)',
        cctv: '여수 오동도 CCTV 선박 증가 확인',
      },
    },
    {
      id: 'CHG-002',
      area: '제주 서귀포 해상',
      type: '유막 확산',
      date1: '03-15',
      time1: '10:30',
      date2: '03-16',
      time2: '14:23',
      severity: '심각',
      detail: '유막 면적 2.1km² → 4.8km² (확산)',
      sources: ['satellite', 'drone', 'cctv', 'ais'],
      crossRef: '4개 정보원 교차확인 — 유막 남동 방향 확산 일치',
      asIsDetail: {
        satellite: 'SAR 유막 2.1km² 탐지',
        drone: '열화상 유막 경계 포착',
        cctv: '서귀포 카메라 해면 이상 없음',
        ais: '인근 유조선 1척 정박',
      },
      nowDetail: {
        satellite: 'SAR 유막 4.8km² 확산',
        drone: '열화상 유막 남동 2.7km 확대',
        cctv: '서귀포 카메라 해면 변색 감지',
        ais: '유조선 이탈, 방제선 2척 진입',
      },
    },
    {
      id: 'CHG-003',
      area: '부산항 외항',
      type: '방제장비 배치',
      date1: '03-10',
      time1: '09:00',
      date2: '03-16',
      time2: '14:23',
      severity: '낮음',
      detail: '부유식 오일펜스 신규 배치 확인',
      sources: ['drone', 'cctv'],
      crossRef: 'CCTV 부산항 #204 + 드론 정밀 촬영 일치',
      asIsDetail: { drone: '오일펜스 미배치', cctv: '부산 민락항 CCTV 해상 장비 없음' },
      nowDetail: { drone: '오일펜스 300m 배치 확인', cctv: '부산 민락항 CCTV 오일펜스 포착' },
    },
    {
      id: 'CHG-004',
      area: '통영 해역 남측',
      type: '미식별 선박',
      date1: '03-13',
      time1: '22:00',
      date2: '03-16',
      time2: '14:23',
      severity: '보통',
      detail: 'AIS 미송출 선박 2척 위성 포착',
      sources: ['satellite', 'ais'],
      crossRef: 'AIS 미등록 — 위성 SAR 반사 신호로 탐지, 불법 조업 의심',
      asIsDetail: { satellite: '해역 내 선박 신호 없음', ais: '등록 선박 0척' },
      nowDetail: { satellite: 'SAR 반사 2건 포착 (선박 추정)', ais: 'MMSI 미수신 — 미식별 선박' },
    },
    {
      id: 'CHG-005',
      area: '인천 연안부두',
      type: '야간 이상징후',
      date1: '03-15',
      time1: '03:42',
      date2: '03-16',
      time2: '03:45',
      severity: '심각',
      detail: 'CCTV 야간 유출 의심 + AIS 정박선 이탈',
      sources: ['cctv', 'ais'],
      crossRef: 'KBS CCTV #9981 03:42 해면 반사 이상 → AIS 03:45 정박선 이탈 연계',
      asIsDetail: { cctv: '인천 연안부두 CCTV 야간 정상', ais: '정박선 5척 정상 정박' },
      nowDetail: {
        cctv: '03:42 해면 반사광 이상 감지',
        ais: '03:45 정박선 1척 이탈 (MMSI 441987654)',
      },
    },
    {
      id: 'CHG-006',
      area: '마라도 주변 해역',
      type: '해안선 변화',
      date1: '03-12',
      time1: '11:00',
      date2: '03-16',
      time2: '11:15',
      severity: '낮음',
      detail: '해안 퇴적물 분포 변경 감지',
      sources: ['satellite', 'drone'],
      crossRef: '위성 다분광 + 드론 정밀 촬영 퇴적 방향 확인',
      asIsDetail: { satellite: '해안선 퇴적 분포 기준점', drone: '미촬영' },
      nowDetail: { satellite: '퇴적 남서 방향 이동 감지', drone: '정밀 촬영으로 퇴적 경계 확인' },
    },
  ];

  const severityStyle = (s: '심각' | '보통' | '낮음') => {
    if (s === '심각')
      return {
        background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
        color: 'var(--color-danger)',
        border: '1px solid color-mix(in srgb, var(--color-danger) 25%, transparent)',
      };
    if (s === '보통')
      return {
        background: 'color-mix(in srgb, var(--color-caution) 12%, transparent)',
        color: 'var(--color-caution)',
        border: '1px solid color-mix(in srgb, var(--color-caution) 25%, transparent)',
      };
    return {
      background: 'color-mix(in srgb, var(--color-success) 12%, transparent)',
      color: 'var(--color-success)',
      border: '1px solid color-mix(in srgb, var(--color-success) 25%, transparent)',
    };
  };

  const sourceStyle = (src: SourceConfig, active = true) =>
    active
      ? { background: `${src.color}18`, color: src.color, border: `1px solid ${src.color}40` }
      : {
          background: 'var(--bg-card)',
          color: 'var(--fg-disabled)',
          border: '1px solid var(--stroke-default)',
          opacity: 0.5,
        };

  const filteredChanges =
    sourceFilter === 'all' ? changes : changes.filter((c) => c.sources.includes(sourceFilter));

  return (
    <div>
      {/* 레이어 토글 바 */}
      <div className="flex items-center gap-3 mb-4">
        <div className="text-caption font-bold font-korean text-fg-disabled shrink-0">
          오버레이 레이어
        </div>
        <div className="flex gap-1.5">
          {SOURCES.map((s) => (
            <button
              key={s.id}
              onClick={() => toggleLayer(s.id)}
              className="px-2.5 py-1.5 rounded text-caption font-bold font-korean cursor-pointer border transition-all"
              style={sourceStyle(s, layers[s.id])}
            >
              <span className="mr-1">{layers[s.id] ? '◉' : '○'}</span>
              {/* {s.icon}  */}
              {s.label}
            </button>
          ))}
        </div>
        <div className="text-caption text-fg-disabled font-mono ml-auto">
          {activeCount}/4 레이어 활성
        </div>
      </div>

      {/* AS-IS / 현재 시점 비교 뷰 */}
      <div className="grid grid-cols-2 gap-4 mb-4" style={{ minHeight: 400 }}>
        {/* AS-IS 시점 */}
        <div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden">
          <div
            className="flex items-center justify-between px-4 py-2.5 border-b border-stroke"
            style={{ background: 'rgba(6,182,212,.05)' }}
          >
            <div className="flex items-center gap-2">
              <span
                className="text-label-2 font-bold font-korean"
                style={{ color: 'var(--color-accent)' }}
              >
                AS-IS
              </span>
              <span
                className="text-caption px-1.5 py-0.5 rounded font-bold"
                style={{
                  background: 'rgba(6,182,212,.12)',
                  color: 'var(--color-accent)',
                  border: '1px solid rgba(6,182,212,.25)',
                }}
              >
                과거 시점
              </span>
            </div>
            <div className="flex items-center gap-2">
              <input
                type="date"
                defaultValue="2026-03-14"
                className="text-caption font-mono px-2 py-1 rounded border outline-none"
                style={{
                  background: 'var(--bg-card)',
                  borderColor: 'var(--stroke-default)',
                  color: 'var(--fg-sub)',
                }}
              />
              <input
                type="time"
                defaultValue="14:00"
                className="text-caption font-mono px-2 py-1 rounded border outline-none"
                style={{
                  background: 'var(--bg-card)',
                  borderColor: 'var(--stroke-default)',
                  color: 'var(--fg-sub)',
                }}
              />
            </div>
          </div>
          {/* 활성 레이어 표시 */}
          {/* <div
            className="flex gap-1 px-3 py-2 border-b"
            style={{ borderColor: 'rgba(255,255,255,.04)' }}
          >
            {SOURCES.filter((s) => layers[s.id]).map((s) => (
              <span
                key={s.id}
                className="px-1.5 py-0.5 rounded text-caption font-bold"
                style={sourceStyle(s)}
              >
                {s.icon} {s.label}
              </span>
            ))}
            {activeCount === 0 && (
              <span className="text-caption text-fg-disabled font-korean">레이어를 선택하세요</span>
            )}
          </div> */}
          {/* 지도 플레이스홀더 */}
          <div
            className="flex items-center justify-center text-fg-disabled"
            style={{ height: 320 }}
          >
            <div className="text-center">
              <div className="flex justify-center gap-2 text-2xl mb-3 opacity-30">
                {SOURCES.filter((s) => layers[s.id]).map((s) => (
                  <span key={s.id}>{s.icon}</span>
                ))}
              </div>
              <div className="text-label-2 font-korean text-fg-disabled">
                과거 시점 복합 오버레이
              </div>
              <div className="text-caption text-fg-disabled mt-1">
                {SOURCES.filter((s) => layers[s.id])
                  .map((s) => s.label)
                  .join(' + ')}{' '}
                통합 표시
              </div>
            </div>
          </div>
        </div>

        {/* 현재 시점 */}
        <div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden">
          <div
            className="flex items-center justify-between px-4 py-2.5 border-b border-stroke"
            style={{ background: 'rgba(6,182,212,.05)' }}
          >
            <div className="flex items-center gap-2">
              <span
                className="text-label-2 font-bold font-korean"
                style={{ color: 'var(--color-accent)' }}
              >
                현재
              </span>
              <span
                className="text-caption px-1.5 py-0.5 rounded font-bold"
                style={{
                  background: 'rgba(6,182,212,.12)',
                  color: 'var(--color-accent)',
                  border: '1px solid rgba(6,182,212,.25)',
                }}
              >
                NOW
              </span>
            </div>
            <span className="text-caption text-fg-disabled font-mono">2026-03-16 14:23</span>
          </div>
          {/* 활성 레이어 표시 */}
          {/* <div
            className="flex gap-1 px-3 py-2 border-b"
            style={{ borderColor: 'rgba(255,255,255,.04)' }}
          >
            {SOURCES.filter((s) => layers[s.id]).map((s) => (
              <span
                key={s.id}
                className="px-1.5 py-0.5 rounded text-caption font-bold"
                style={sourceStyle(s)}
              >
                {s.icon} {s.label}
              </span>
            ))}
            {activeCount === 0 && (
              <span className="text-caption text-fg-disabled font-korean">레이어를 선택하세요</span>
            )}
          </div> */}
          {/* 지도 플레이스홀더 */}
          <div
            className="flex items-center justify-center text-fg-disabled"
            style={{ height: 320 }}
          >
            <div className="text-center">
              <div className="flex justify-center gap-2 text-2xl mb-3 opacity-30">
                {SOURCES.filter((s) => layers[s.id]).map((s) => (
                  <span key={s.id}>{s.icon}</span>
                ))}
              </div>
              <div className="text-label-2 font-korean text-fg-disabled">
                현재 시점 복합 오버레이
              </div>
              <div className="text-caption text-fg-disabled mt-1">
                {SOURCES.filter((s) => layers[s.id])
                  .map((s) => s.label)
                  .join(' + ')}{' '}
                실시간 통합
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 복합 변화 감지 목록 */}
      <div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden">
        <div className="flex items-center justify-between px-4 py-3 border-b border-stroke">
          <div className="text-label-2 font-bold font-korean text-fg">
            🔄 복합 변화 감지 타임라인
          </div>
          <div className="flex items-center gap-2">
            <div className="flex gap-1">
              <button
                onClick={() => setSourceFilter('all')}
                className="px-2 py-0.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
                style={
                  sourceFilter === 'all'
                    ? {
                        background: 'rgba(6,182,212,.08)',
                        borderColor: 'rgba(6,182,212,.3)',
                        color: 'var(--color-accent)',
                      }
                    : {
                        background: 'var(--bg-card)',
                        borderColor: 'var(--stroke-default)',
                        color: 'var(--fg-disabled)',
                      }
                }
              >
                전체
              </button>
              {SOURCES.map((s) => (
                <button
                  key={s.id}
                  onClick={() => setSourceFilter(s.id)}
                  className="px-2 py-0.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
                  style={
                    sourceFilter === s.id
                      ? {
                          background: 'rgba(6,182,212,.08)',
                          borderColor: 'rgba(6,182,212,.3)',
                          color: 'var(--color-accent)',
                        }
                      : {
                          background: 'var(--bg-card)',
                          borderColor: 'var(--stroke-default)',
                          color: 'var(--fg-disabled)',
                        }
                  }
                >
                  {s.label}
                </button>
              ))}
            </div>
            <div className="text-caption text-fg-disabled font-mono">
              {filteredChanges.length}건
            </div>
          </div>
        </div>

        {/* 데이터 행 */}
        {filteredChanges.map((c) => {
          const isOpen = selectedChange === c.id;
          return (
            <div key={c.id} className="border-b" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
              {/* 요약 행 */}
              <div
                onClick={() => setSelectedChange(isOpen ? null : c.id)}
                className="grid gap-0 px-4 py-3 items-center hover:bg-bg-surface-hover/30 transition-colors cursor-pointer"
                style={{
                  gridTemplateColumns: '52px 1fr 200px 150px 52px',
                  background: isOpen ? 'rgba(6,182,212,.04)' : undefined,
                }}
              >
                <div className="text-caption font-mono text-fg-disabled">{c.id}</div>
                <div>
                  <div className="flex items-center gap-2">
                    <span className="text-label-2 font-semibold text-fg font-korean">{c.area}</span>
                    <span
                      className="text-caption font-korean"
                      style={{ color: 'var(--fg-disabled)' }}
                    >
                      {c.type}
                    </span>
                  </div>
                  <div className="text-caption text-fg-disabled font-korean mt-0.5">{c.detail}</div>
                </div>
                <div className="flex flex-wrap gap-1">
                  {c.sources.map((sid) => {
                    const cfg = SOURCES.find((s) => s.id === sid)!;
                    return (
                      <span
                        key={sid}
                        className="px-1.5 py-0.5 rounded text-caption text-fg"
                        style={{
                          background: 'transparent',
                          border: `1px solid color-mix(in srgb, ${cfg.color} 40%, transparent)`,
                          color: `${cfg.color}`,
                        }}
                      >
                        {cfg.label}
                      </span>
                    );
                  })}
                </div>
                <div className="text-caption font-mono">
                  <span className="text-fg">
                    {c.date1} {c.time1}
                  </span>
                  <span className="text-fg-disabled mx-1">→</span>
                  <span className="text-fg">
                    {c.date2} {c.time2}
                  </span>
                </div>
                <div>
                  <span
                    className="px-1.5 py-0.5 rounded text-caption font-bold font-korean"
                    style={severityStyle(c.severity)}
                  >
                    {c.severity}
                  </span>
                </div>
              </div>

              {/* 펼침: 정보원별 AS-IS → 현재 상세 */}
              {isOpen && (
                <div className="px-4 pb-3 pt-1" style={{ background: 'rgba(6,182,212,.02)' }}>
                  {/* 교차검증 */}
                  {c.crossRef && (
                    <div
                      className="mb-3 px-3 py-2 rounded text-caption font-korean"
                      style={{
                        background: 'rgba(6,182,212,.06)',
                        border: '1px solid rgba(6,182,212,.15)',
                        color: 'var(--fg-sub)',
                      }}
                    >
                      <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                        교차검증
                      </span>{' '}
                      {c.crossRef}
                    </div>
                  )}
                  {/* 정보원별 비교 그리드 */}
                  <div className="grid gap-2">
                    <div
                      className="grid gap-0 px-3 py-1.5"
                      style={{ gridTemplateColumns: '90px 1fr 1fr' }}
                    >
                      <div className="text-caption font-bold text-fg-disabled font-korean">
                        정보원
                      </div>
                      <div className="text-caption font-bold font-korean text-fg">
                        AS-IS ({c.date1} {c.time1})
                      </div>
                      <div className="text-caption font-bold font-korean text-fg">
                        현재 ({c.date2} {c.time2})
                      </div>
                    </div>
                    {c.sources.map((sid) => {
                      const cfg = SOURCES.find((s) => s.id === sid)!;
                      return (
                        <div
                          key={sid}
                          className="grid gap-0 px-3 py-2 rounded"
                          style={{
                            gridTemplateColumns: '90px 1fr 1fr',
                            background: `${cfg.color}06`,
                            border: `1px solid ${cfg.color}15`,
                          }}
                        >
                          <div className="flex items-center gap-1.5">
                            <span
                              className="text-caption font-bold px-1.5 py-0.5 rounded"
                              style={sourceStyle(cfg)}
                            >
                              {cfg.icon} {cfg.label}
                            </span>
                          </div>
                          <div className="text-caption font-korean text-fg-disabled">
                            {c.asIsDetail[sid] || '-'}
                          </div>
                          <div className="text-caption font-korean text-fg">
                            {c.nowDetail[sid] || '-'}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ─── 연안자동감지 패널 ──────────────────────────────── */
type ZoneStatus = '정상' | '경보' | '주의';
type MonitorSource = 'satellite' | 'cctv' | 'drone' | 'ais';

interface MonitorSourceConfig {
  id: MonitorSource;
  label: string;
  icon: string;
  color: string;
  desc: string;
}

const MONITOR_SOURCES: MonitorSourceConfig[] = [
  {
    id: 'satellite',
    label: '위성영상',
    icon: '🛰',
    color: 'var(--color-accent)',
    desc: 'KOMPSAT/Sentinel 주기 촬영',
  },
  {
    id: 'cctv',
    label: 'CCTV',
    icon: '📹',
    color: 'var(--color-info)',
    desc: 'KHOA/KBS 해안 CCTV 실시간',
  },
  {
    id: 'drone',
    label: '드론',
    icon: '🛸',
    color: 'var(--color-success)',
    desc: '드론 정밀 촬영 / 열화상',
  },
  {
    id: 'ais',
    label: 'AIS',
    icon: '🚢',
    color: 'var(--color-warning)',
    desc: '선박 위치·항적 실시간 수신',
  },
];

interface MonitorZone {
  id: string;
  name: string;
  interval: string;
  lastCheck: string;
  status: ZoneStatus;
  alerts: number;
  polygon: [number, number][];
  color: string;
  monitoring: boolean;
  /** 활성 모니터링 소스 */
  sources: MonitorSource[];
}

const INTERVAL_OPTIONS = ['1h', '3h', '6h', '12h', '24h'];

const ZONE_COLORS = [
  'var(--color-accent)',
  'var(--color-info)',
  'var(--color-success)',
  'var(--color-warning)',
  'var(--color-danger)',
  'var(--color-danger)',
  'var(--color-accent)',
];

const INITIAL_ZONES: MonitorZone[] = [
  {
    id: 'AOI-001',
    name: '여수항 반경',
    interval: '6h',
    lastCheck: '03-16 14:00',
    status: '정상',
    alerts: 0,
    monitoring: true,
    color: 'var(--color-info)',
    polygon: [
      [127.68, 34.78],
      [127.78, 34.78],
      [127.78, 34.7],
      [127.68, 34.7],
    ],
    sources: ['satellite', 'cctv', 'ais'],
  },
  {
    id: 'AOI-002',
    name: '제주 서귀포 해상',
    interval: '3h',
    lastCheck: '03-16 13:30',
    status: '경보',
    alerts: 2,
    monitoring: true,
    color: 'var(--color-danger)',
    polygon: [
      [126.45, 33.28],
      [126.58, 33.28],
      [126.58, 33.2],
      [126.45, 33.2],
    ],
    sources: ['satellite', 'drone', 'cctv', 'ais'],
  },
  {
    id: 'AOI-003',
    name: '부산항 외항',
    interval: '12h',
    lastCheck: '03-16 08:00',
    status: '정상',
    alerts: 0,
    monitoring: true,
    color: 'var(--color-success)',
    polygon: [
      [129.05, 35.12],
      [129.2, 35.12],
      [129.2, 35.05],
      [129.05, 35.05],
    ],
    sources: ['cctv', 'ais'],
  },
  {
    id: 'AOI-004',
    name: '통영 ~ 거제 해역',
    interval: '24h',
    lastCheck: '03-15 20:00',
    status: '주의',
    alerts: 1,
    monitoring: true,
    color: 'var(--color-warning)',
    polygon: [
      [128.3, 34.9],
      [128.65, 34.9],
      [128.65, 34.8],
      [128.3, 34.8],
    ],
    sources: ['satellite', 'drone'],
  },
];

function AoiPanel() {
  const [zones, setZones] = useState<MonitorZone[]>(INITIAL_ZONES);
  const [selectedZone, setSelectedZone] = useState<string | null>(null);
  const currentMapStyle = useBaseMapStyle();
  const mapToggles = useMapStore((s) => s.mapToggles);
  // 드로잉 상태
  const [isDrawing, setIsDrawing] = useState(false);
  const [drawingPoints, setDrawingPoints] = useState<[number, number][]>([]);
  // 등록 폼
  const [showForm, setShowForm] = useState(false);
  const [formName, setFormName] = useState('');
  // 실시간 시뮬
  const [now, setNow] = useState(() => new Date());

  // 시계 갱신 (1분마다)
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 60_000);
    return () => clearInterval(t);
  }, []);

  const nextId = useRef(zones.length + 1);

  // 지도 클릭 → 폴리곤 포인트 수집
  const handleMapClick = useCallback(
    (e: MapMouseEvent) => {
      if (!isDrawing) return;
      setDrawingPoints((prev) => [...prev, [e.lngLat.lng, e.lngLat.lat]]);
    },
    [isDrawing],
  );

  // 드로잉 시작
  const startDrawing = () => {
    setDrawingPoints([]);
    setIsDrawing(true);
    setShowForm(false);
    setSelectedZone(null);
  };

  // 드로잉 완료 → 폼 표시
  const finishDrawing = () => {
    if (drawingPoints.length < 3) return;
    setIsDrawing(false);
    setShowForm(true);
    setFormName('');
  };

  // 드로잉 취소
  const cancelDrawing = () => {
    setIsDrawing(false);
    setDrawingPoints([]);
    setShowForm(false);
  };

  // 구역 등록 (이름만 → 등록 후 설정)
  const registerZone = () => {
    if (!formName.trim() || drawingPoints.length < 3) return;
    const newId = `AOI-${String(nextId.current++).padStart(3, '0')}`;
    const newZone: MonitorZone = {
      id: newId,
      name: formName.trim(),
      interval: '6h',
      lastCheck: `${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
      status: '정상',
      alerts: 0,
      polygon: [...drawingPoints],
      color: ZONE_COLORS[zones.length % ZONE_COLORS.length],
      monitoring: true,
      sources: ['satellite', 'cctv'],
    };
    setZones((prev) => [...prev, newZone]);
    setDrawingPoints([]);
    setShowForm(false);
    setSelectedZone(newId);
  };

  // 구역 설정 변경
  const updateZone = (id: string, patch: Partial<MonitorZone>) => {
    setZones((prev) => prev.map((z) => (z.id === id ? { ...z, ...patch } : z)));
  };

  // 모니터링 소스 토글
  const toggleSource = (id: string, src: MonitorSource) => {
    setZones((prev) =>
      prev.map((z) => {
        if (z.id !== id) return z;
        const has = z.sources.includes(src);
        return { ...z, sources: has ? z.sources.filter((s) => s !== src) : [...z.sources, src] };
      }),
    );
  };

  // 모니터링 토글
  const toggleMonitoring = (id: string) => {
    setZones((prev) => prev.map((z) => (z.id === id ? { ...z, monitoring: !z.monitoring } : z)));
  };

  // 구역 삭제
  const removeZone = (id: string) => {
    setZones((prev) => prev.filter((z) => z.id !== id));
    if (selectedZone === id) setSelectedZone(null);
  };

  const statusStyle = (s: ZoneStatus) => {
    if (s === '경보')
      return {
        background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
        color: 'var(--color-danger)',
        border: '1px solid color-mix(in srgb, var(--color-danger) 25%, transparent)',
      };
    if (s === '주의')
      return {
        background: 'color-mix(in srgb, var(--color-caution) 12%, transparent)',
        color: 'var(--color-caution)',
        border: '1px solid color-mix(in srgb, var(--color-caution) 25%, transparent)',
      };
    return {
      background: 'color-mix(in srgb, var(--color-success) 12%, transparent)',
      color: 'var(--color-success)',
      border: '1px solid color-mix(in srgb, var(--color-success) 25%, transparent)',
    };
  };

  // deck.gl 레이어: 등록된 폴리곤 + 드로잉 중 포인트
  const deckLayers = useMemo(() => {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const result: any[] = [];

    // 등록된 구역 폴리곤
    const visibleZones = zones.filter((z) => z.monitoring);
    if (visibleZones.length > 0) {
      result.push(
        new PolygonLayer({
          id: 'aoi-zones',
          data: visibleZones,
          getPolygon: (d: MonitorZone) => [...d.polygon, d.polygon[0]],
          getFillColor: (d: MonitorZone) => {
            const hex = d.color;
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            const alpha = selectedZone === d.id ? 60 : 30;
            return [r, g, b, alpha];
          },
          getLineColor: (d: MonitorZone) => {
            const hex = d.color;
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            return [r, g, b, selectedZone === d.id ? 220 : 140];
          },
          getLineWidth: (d: MonitorZone) => (selectedZone === d.id ? 3 : 1.5),
          lineWidthUnits: 'pixels',
          pickable: true,
          onClick: ({ object }: { object: MonitorZone }) => {
            if (object && !isDrawing)
              setSelectedZone(object.id === selectedZone ? null : object.id);
          },
          updateTriggers: {
            getFillColor: [selectedZone],
            getLineColor: [selectedZone],
            getLineWidth: [selectedZone],
          },
        }),
      );

      // 경보/주의 구역 중심점 펄스
      const alertZones = visibleZones.filter((z) => z.status !== '정상');
      if (alertZones.length > 0) {
        result.push(
          new ScatterplotLayer({
            id: 'aoi-alert-pulse',
            data: alertZones,
            getPosition: (d: MonitorZone) => {
              const lngs = d.polygon.map((p) => p[0]);
              const lats = d.polygon.map((p) => p[1]);
              return [
                (Math.min(...lngs) + Math.max(...lngs)) / 2,
                (Math.min(...lats) + Math.max(...lats)) / 2,
              ];
            },
            getRadius: 8000,
            radiusUnits: 'meters' as const,
            getFillColor: (d: MonitorZone) =>
              d.status === '경보' ? [239, 68, 68, 80] : [234, 179, 8, 60],
            getLineColor: (d: MonitorZone) =>
              d.status === '경보' ? [239, 68, 68, 180] : [234, 179, 8, 150],
            lineWidthMinPixels: 2,
            stroked: true,
          }),
        );
      }
    }

    // 드로잉 중 포인트
    if (drawingPoints.length > 0) {
      result.push(
        new ScatterplotLayer({
          id: 'drawing-points',
          data: drawingPoints,
          getPosition: (d: [number, number]) => d,
          getRadius: 5,
          radiusUnits: 'pixels' as const,
          getFillColor: [6, 182, 212, 220],
          getLineColor: [255, 255, 255, 255],
          lineWidthMinPixels: 2,
          stroked: true,
        }),
      );

      // 드로잉 폴리곤 미리보기
      if (drawingPoints.length >= 3) {
        result.push(
          new PolygonLayer({
            id: 'drawing-preview',
            data: [{ polygon: [...drawingPoints, drawingPoints[0]] }],
            getPolygon: (d: { polygon: [number, number][] }) => d.polygon,
            getFillColor: [6, 182, 212, 25],
            getLineColor: [6, 182, 212, 200],
            getLineWidth: 2,
            lineWidthUnits: 'pixels',
            getDashArray: [4, 4],
          }),
        );
      }
    }

    return result;
  }, [zones, drawingPoints, selectedZone, isDrawing]);

  const activeMonitoring = zones.filter((z) => z.monitoring).length;
  const alertCount = zones.filter((z) => z.status === '경보').length;
  const warningCount = zones.filter((z) => z.status === '주의').length;
  const totalAlerts = zones.reduce((s, a) => s + a.alerts, 0);

  const inputCls = 'w-full px-2.5 py-1.5 rounded text-caption font-korean outline-none border';
  const inputStyle = {
    background: 'var(--bg-elevated)',
    borderColor: 'var(--stroke-default)',
    color: 'var(--fg-default)',
  };

  return (
    <div>
      {/* 통계 */}
      <div className="grid grid-cols-4 gap-3 mb-4">
        {[
          { value: String(activeMonitoring), label: '감시 구역', color: 'var(--color-info)' },
          { value: String(alertCount), label: '경보', color: 'var(--color-danger)' },
          { value: String(warningCount), label: '주의', color: 'var(--color-caution)' },
          { value: String(totalAlerts), label: '미확인 알림', color: 'var(--color-tertiary)' },
        ].map((s, i) => (
          <div key={i} className="bg-bg-elevated border border-stroke rounded-md p-3 text-center">
            <div className="text-[20px] font-bold font-mono text-fg">{s.value}</div>
            <div className="text-caption text-fg-disabled mt-0.5 font-korean">{s.label}</div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-[1fr_360px] gap-4">
        {/* 지도 영역 */}
        <div
          className="bg-bg-elevated border border-stroke rounded-md overflow-hidden"
          style={{ minHeight: 520 }}
        >
          {/* 지도 헤더 */}
          <div className="flex items-center justify-between px-4 py-2.5 border-b border-stroke">
            <div className="flex items-center gap-2">
              <div className="text-label-2 font-bold font-korean text-fg">📍 연안 감시 구역</div>
              {isDrawing && (
                <span
                  className="text-caption px-1.5 py-0.5 rounded font-bold animate-pulse"
                  style={{
                    background: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                    border: '1px solid rgba(6,182,212,.3)',
                  }}
                >
                  드로잉 모드 · 지도를 클릭하여 꼭짓점 추가 ({drawingPoints.length}점)
                </span>
              )}
            </div>
            <div className="flex gap-1.5">
              {isDrawing ? (
                <>
                  <button
                    onClick={finishDrawing}
                    disabled={drawingPoints.length < 3}
                    className="px-2.5 h-6 text-color-accent rounded-sm text-caption font-semibold cursor-pointer font-korean disabled:opacity-40 disabled:cursor-not-allowed"
                    style={{
                      background: drawingPoints.length >= 3 ? 'rgba(6,182,212,0.08)' : '#333',
                    }}
                  >
                    완료 ({drawingPoints.length >= 3 ? `${drawingPoints.length}점` : '3점 이상'})
                  </button>
                  <button
                    onClick={() => setDrawingPoints((p) => p.slice(0, -1))}
                    disabled={drawingPoints.length === 0}
                    className="px-2 h-6 rounded-sm text-caption font-semibold cursor-pointer font-korean border disabled:opacity-40"
                    style={{
                      background: 'var(--bg-card)',
                      borderColor: 'var(--stroke-default)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    되돌리기
                  </button>
                  <button
                    onClick={cancelDrawing}
                    className="px-2 h-6 rounded-sm text-caption font-semibold cursor-pointer font-korean border"
                    style={{
                      background: 'var(--bg-card)',
                      borderColor: 'var(--stroke-default)',
                      color: 'var(--color-danger)',
                    }}
                  >
                    취소
                  </button>
                </>
              ) : (
                <button
                  onClick={startDrawing}
                  className="px-2.5 h-6 text-color-accent rounded-sm text-caption font-semibold cursor-pointer font-korean flex items-center gap-1"
                  style={{ background: 'rgba(6,182,212,0.08)' }}
                >
                  + 감시 구역 등록
                </button>
              )}
            </div>
          </div>

          {/* MapLibre 지도 */}
          <div style={{ height: 480, cursor: isDrawing ? 'crosshair' : undefined }}>
            <Map
              initialViewState={{ longitude: 127.8, latitude: 34.5, zoom: 6.5 }}
              style={{ width: '100%', height: '100%' }}
              mapStyle={currentMapStyle}
              attributionControl={false}
              onClick={handleMapClick}
            >
              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              <DeckGLOverlay layers={deckLayers} />
            </Map>
          </div>
        </div>

        {/* 우측 패널 */}
        <div
          className="flex flex-col gap-3"
          style={{
            maxHeight: 520,
            overflowY: 'scroll',
            scrollbarWidth: 'thin',
            scrollbarColor: 'var(--stroke-default) transparent',
          }}
        >
          {/* 등록 폼: 이름만 입력 → 바로 등록 */}
          {showForm && drawingPoints.length >= 3 && (
            <div
              className="bg-bg-elevated border rounded-md overflow-hidden"
              style={{ borderColor: 'rgba(6,182,212,.3)' }}
            >
              <div
                className="px-4 py-2.5 border-b font-korean"
                style={{ borderColor: 'rgba(6,182,212,.15)', background: 'rgba(6,182,212,.05)' }}
              >
                <div className="text-label-2 font-bold" style={{ color: 'var(--color-accent)' }}>
                  새 감시 구역 등록
                </div>
                <div className="text-caption text-fg-disabled mt-0.5">
                  폴리곤 {drawingPoints.length}점 설정 완료
                </div>
              </div>
              <div className="px-4 py-3">
                <label className="text-caption font-bold text-fg-disabled font-korean block mb-1.5">
                  구역 이름
                </label>
                <input
                  value={formName}
                  onChange={(e) => setFormName(e.target.value)}
                  placeholder="예: 여수항 북측 해안"
                  className={inputCls}
                  style={inputStyle}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') registerZone();
                  }}
                  autoFocus
                />
                <div className="flex gap-2 mt-3">
                  <button
                    onClick={registerZone}
                    disabled={!formName.trim()}
                    className="flex-1 py-2 text-color-accent rounded text-caption font-bold cursor-pointer font-korean disabled:opacity-40 disabled:cursor-not-allowed"
                    style={{
                      background: formName.trim() ? 'rgba(6,182,212,0.08)' : '#333',
                    }}
                  >
                    등록
                  </button>
                  <button
                    onClick={cancelDrawing}
                    className="px-4 py-2 rounded text-caption font-bold cursor-pointer font-korean border"
                    style={{
                      background: 'var(--bg-card)',
                      borderColor: 'var(--stroke-default)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    취소
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* 감시 구역 목록 */}
          <div className="bg-bg-elevated border border-stroke rounded-md flex-1">
            <div className="flex items-center justify-between px-4 py-2.5 border-b border-stroke">
              <div className="text-label-2 font-bold font-korean text-fg">📋 등록된 감시 구역</div>
              <div className="text-caption text-fg-disabled font-mono">{zones.length}건</div>
            </div>
            <div className="divide-y divide-stroke">
              {zones.map((z) => {
                const isOpen = selectedZone === z.id;
                return (
                  <div key={z.id} className="border-b border-stroke last:border-b-0">
                    {/* 목록 행 */}
                    <div
                      onClick={() => setSelectedZone(isOpen ? null : z.id)}
                      className="px-4 py-2.5 hover:bg-bg-surface-hover/30 transition-colors cursor-pointer"
                      style={{ background: isOpen ? 'rgba(6,182,212,.04)' : undefined }}
                    >
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <span className="text-caption font-mono text-fg-disabled">{z.id}</span>
                          <span className="text-label-2 font-semibold text-fg font-korean">
                            {z.name}
                          </span>
                        </div>
                        <div className="flex items-center gap-1.5">
                          <span
                            className="px-1.5 py-0.5 rounded text-caption font-bold font-korean"
                            style={statusStyle(z.status)}
                          >
                            {z.status}
                          </span>
                          <span className="text-caption text-fg-disabled">
                            {isOpen ? '▲' : '▼'}
                          </span>
                        </div>
                      </div>
                      {/* 활성 소스 배지 + 주기 */}
                      <div className="flex items-center gap-1.5 mt-1">
                        {z.sources.map((sid) => {
                          const cfg = MONITOR_SOURCES.find((s) => s.id === sid)!;
                          return (
                            <span
                              key={sid}
                              className="px-1.5 py-0.5 rounded text-caption font-bold"
                              style={{
                                background: 'transparent',
                                color: cfg.color,
                                border: `1px solid color-mix(in srgb, ${cfg.color} 40%, transparent)`,
                              }}
                            >
                              {cfg.label}
                            </span>
                          );
                        })}
                        <span className="text-caption text-fg-disabled font-mono ml-auto">
                          {z.interval} · {z.lastCheck}
                        </span>
                      </div>
                      {z.alerts > 0 && (
                        <div
                          className="mt-1.5 px-2 py-1 rounded text-caption font-bold font-korean"
                          style={{
                            background: 'color-mix(in srgb, var(--color-danger) 8%, transparent)',
                            color: 'var(--color-danger)',
                          }}
                        >
                          미확인 알림 {z.alerts}건
                        </div>
                      )}
                    </div>

                    {/* 인라인 설정 패널 (아코디언) */}
                    {isOpen && (
                      <div
                        className="px-4 py-3 space-y-3 border-t"
                        style={{
                          borderColor: `color-mix(in srgb, ${z.color} 12%, transparent)`,
                          background: `color-mix(in srgb, ${z.color} 3%, transparent)`,
                        }}
                      >
                        {/* 감시 주기 */}
                        <div>
                          <label className="text-caption font-bold text-fg-disabled font-korean block mb-1.5">
                            감시 주기
                          </label>
                          <div className="flex gap-1">
                            {INTERVAL_OPTIONS.map((iv) => (
                              <button
                                key={iv}
                                onClick={(e) => {
                                  e.stopPropagation();
                                  updateZone(z.id, { interval: iv });
                                }}
                                className="px-2.5 py-1 rounded text-caption font-bold font-mono cursor-pointer border transition-colors"
                                style={
                                  z.interval === iv
                                    ? {
                                        background: 'rgba(6,182,212,.08)',
                                        borderColor: 'rgba(6,182,212,.3)',
                                        color: 'var(--color-accent)',
                                      }
                                    : {
                                        background: 'var(--bg-card)',
                                        borderColor: 'var(--stroke-default)',
                                        color: 'var(--fg-disabled)',
                                      }
                                }
                              >
                                {iv}
                              </button>
                            ))}
                          </div>
                        </div>

                        {/* 모니터링 방법 */}
                        <div>
                          <label className="text-caption font-bold text-fg-disabled font-korean block mb-1.5">
                            모니터링 방법
                          </label>
                          <div className="space-y-1.5">
                            {MONITOR_SOURCES.map((src) => {
                              const active = z.sources.includes(src.id);
                              return (
                                <button
                                  key={src.id}
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    toggleSource(z.id, src.id);
                                  }}
                                  className="w-full flex items-center gap-2.5 px-3 py-2 rounded border cursor-pointer transition-all text-left"
                                  style={
                                    active
                                      ? {
                                          background: 'transparent',
                                          borderColor: `color-mix(in srgb, ${src.color} 40%, transparent)`,
                                          color: 'var(--fg-default)',
                                        }
                                      : {
                                          background: 'var(--bg-card)',
                                          borderColor: 'var(--stroke-default)',
                                          color: 'var(--fg-disabled)',
                                          opacity: 0.6,
                                        }
                                  }
                                >
                                  <span className="text-body-2 shrink-0">{active ? '◉' : '○'}</span>
                                  <span className="text-body-2 shrink-0">{src.icon}</span>
                                  <div className="flex-1 min-w-0">
                                    <div className="text-caption font-bold font-korean">
                                      {src.label}
                                    </div>
                                    <div className="text-caption font-korean text-fg-disabled">
                                      {src.desc}
                                    </div>
                                  </div>
                                </button>
                              );
                            })}
                          </div>
                          {z.sources.length === 0 && (
                            <div className="text-caption text-fg-disabled font-korean mt-1.5">
                              최소 1개 이상의 모니터링 방법을 선택하세요
                            </div>
                          )}
                        </div>

                        {/* 하단 컨트롤 */}
                        <div
                          className="flex items-center gap-2 pt-1 border-t"
                          style={{ borderColor: 'var(--stroke-default)' }}
                        >
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              toggleMonitoring(z.id);
                            }}
                            className="px-3 py-1.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
                            style={
                              z.monitoring
                                ? {
                                    background:
                                      'color-mix(in srgb, var(--color-success) 12%, transparent)',
                                    borderColor:
                                      'color-mix(in srgb, var(--color-success) 25%, transparent)',
                                    color: 'var(--color-success)',
                                  }
                                : {
                                    background: 'var(--bg-card)',
                                    borderColor: 'var(--stroke-default)',
                                    color: 'var(--fg-disabled)',
                                  }
                            }
                          >
                            {z.monitoring ? '◉ 감시 중' : '○ 일시정지'}
                          </button>
                          <span className="text-caption text-fg-disabled font-mono">
                            {z.polygon.length}점 · {z.sources.length}소스 · {z.interval}
                          </span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              removeZone(z.id);
                            }}
                            className="ml-auto px-2 py-1.5 rounded text-caption font-bold font-korean cursor-pointer border"
                            style={{
                              background: 'color-mix(in srgb, var(--color-danger) 8%, transparent)',
                              borderColor:
                                'color-mix(in srgb, var(--color-danger) 20%, transparent)',
                              color: 'var(--color-danger)',
                            }}
                          >
                            삭제
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
              {zones.length === 0 && (
                <div className="px-4 py-8 text-center">
                  <div className="text-2xl opacity-30 mb-2">📍</div>
                  <div className="text-caption text-fg-disabled font-korean">
                    등록된 감시 구역이 없습니다
                  </div>
                  <div className="text-caption text-fg-disabled font-korean mt-1">
                    "+ 감시 구역 등록" 버튼으로 시작하세요
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}