import { useState, useEffect, useCallback, useRef } from 'react'
import { Map, Marker, Popup } from '@vis.gl/react-maplibre'
import 'maplibre-gl/dist/maplibre-gl.css'
import { fetchDroneStreams, startDroneStreamApi, stopDroneStreamApi } from '../services/aerialApi'
import type { DroneStreamItem } from '../services/aerialApi'
import { CCTVPlayer } from './CCTVPlayer'
import type { CCTVPlayerHandle } from './CCTVPlayer'
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle'
import { S57EncOverlay } from '@common/components/map/S57EncOverlay'
import { useMapStore } from '@common/store/mapStore'

/** 함정 위치 + 드론 비행 위치 */
const DRONE_POSITIONS: Record<string, { ship: { lat: number; lon: number }; drone: { lat: number; lon: number } }> = {
  'busan-1501': { ship: { lat: 35.0796, lon: 129.0756 }, drone: { lat: 35.1100, lon: 129.1100 } },
  'incheon-3008': { ship: { lat: 37.4541, lon: 126.5986 }, drone: { lat: 37.4800, lon: 126.5600 } },
  'mokpo-3015': { ship: { lat: 34.7780, lon: 126.3780 }, drone: { lat: 34.8050, lon: 126.4100 } },
}

export function RealtimeDrone() {
  const [streams, setStreams] = useState<DroneStreamItem[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedStream, setSelectedStream] = useState<DroneStreamItem | null>(null)
  const [gridMode, setGridMode] = useState(1)
  const [activeCells, setActiveCells] = useState<DroneStreamItem[]>([])
  const [mapPopup, setMapPopup] = useState<DroneStreamItem | null>(null)
  const playerRefs = useRef<(CCTVPlayerHandle | null)[]>([])
  const currentMapStyle = useBaseMapStyle()
  const mapToggles = useMapStore((s) => s.mapToggles)

  const showMap = activeCells.length === 0

  const loadStreams = useCallback(async () => {
    try {
      const items = await fetchDroneStreams()
      setStreams(items)
      // Update selected stream and active cells with latest status
      setSelectedStream(prev => prev ? items.find(s => s.id === prev.id) ?? prev : prev)
      setActiveCells(prev => prev.map(cell => items.find(s => s.id === cell.id) ?? cell))
    } catch {
      // Fallback: show configured streams as idle
      setStreams([
        { id: 'busan-1501', name: '1501함 드론', shipName: '부산서 1501함', droneModel: 'DJI M300 RTK', ip: '10.26.7.213', rtspUrl: 'rtsp://10.26.7.213:554/stream0', region: '부산', status: 'idle', hlsUrl: null, error: null },
        { id: 'incheon-3008', name: '3008함 드론', shipName: '인천서 3008함', droneModel: 'DJI M30T', ip: '10.26.5.21', rtspUrl: 'rtsp://10.26.5.21:554/stream0', region: '인천', status: 'idle', hlsUrl: null, error: null },
        { id: 'mokpo-3015', name: '3015함 드론', shipName: '목포서 3015함', droneModel: 'DJI Mavic 3E', ip: '10.26.7.85', rtspUrl: 'rtsp://10.26.7.85:554/stream0', region: '목포', status: 'idle', hlsUrl: null, error: null },
      ])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    loadStreams()
  }, [loadStreams])

  // Poll status every 3 seconds when any stream is starting
  useEffect(() => {
    const hasStarting = streams.some(s => s.status === 'starting')
    if (!hasStarting) return
    const timer = setInterval(loadStreams, 3000)
    return () => clearInterval(timer)
  }, [streams, loadStreams])

  const handleStartStream = async (id: string) => {
    try {
      await startDroneStreamApi(id)
      // Immediately update to 'starting' state
      setStreams(prev => prev.map(s => s.id === id ? { ...s, status: 'starting' as const, error: null } : s))
      // Poll for status update
      setTimeout(loadStreams, 2000)
    } catch {
      setStreams(prev => prev.map(s => s.id === id ? { ...s, status: 'error' as const, error: '스트림 시작 요청 실패' } : s))
    }
  }

  const handleStopStream = async (id: string) => {
    try {
      await stopDroneStreamApi(id)
      setStreams(prev => prev.map(s => s.id === id ? { ...s, status: 'idle' as const, hlsUrl: null, error: null } : s))
      setActiveCells(prev => prev.filter(c => c.id !== id))
    } catch {
      // ignore
    }
  }

  const handleSelectStream = (stream: DroneStreamItem) => {
    setSelectedStream(stream)
    if (stream.status === 'streaming' && stream.hlsUrl) {
      if (gridMode === 1) {
        setActiveCells([stream])
      } else {
        setActiveCells(prev => {
          if (prev.length < gridMode && !prev.find(c => c.id === stream.id)) return [...prev, stream]
          return prev
        })
      }
    }
  }

  const statusInfo = (status: string) => {
    switch (status) {
      case 'streaming': return { label: '송출중', color: 'var(--color-success)', bg: 'rgba(34,197,94,.12)' }
      case 'starting': return { label: '연결중', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.12)' }
      case 'error': return { label: '오류', color: 'var(--color-danger)', bg: 'rgba(239,68,68,.12)' }
      default: return { label: '대기', color: 'var(--fg-disabled)', bg: 'rgba(255,255,255,.06)' }
    }
  }

  const gridCols = gridMode === 1 ? 1 : 2
  const totalCells = gridMode

  return (
    <div className="flex h-full overflow-hidden" style={{ margin: '-20px -24px', height: 'calc(100% + 40px)' }}>
      {/* 좌측: 드론 스트림 목록 */}
      <div className="flex flex-col overflow-hidden bg-bg-surface border-r border-stroke w-[260px] min-w-[260px]">
        {/* 헤더 */}
        <div className="p-3 pb-2.5 border-b border-stroke shrink-0 bg-bg-elevated">
          <div className="flex items-center justify-between mb-2">
            <div className="text-xs font-bold text-fg font-korean flex items-center gap-1.5">
              <span className="w-[7px] h-[7px] rounded-full inline-block" style={{ background: streams.some(s => s.status === 'streaming') ? 'var(--color-success)' : 'var(--fg-disabled)' }} />
              실시간 드론 영상
            </div>
            <button
              onClick={loadStreams}
              className="px-2 py-0.5 text-[9px] font-korean bg-bg-card border border-stroke rounded text-fg-sub cursor-pointer hover:bg-bg-surface-hover transition-colors"
            >새로고침</button>
          </div>
          <div className="text-[9px] text-fg-disabled font-korean">ViewLink RTSP 스트림 · 내부망 전용</div>
        </div>

        {/* 드론 스트림 카드 */}
        <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}>
          {loading ? (
            <div className="px-3.5 py-4 text-[11px] text-fg-disabled font-korean">불러오는 중...</div>
          ) : streams.map(stream => {
            const si = statusInfo(stream.status)
            const isSelected = selectedStream?.id === stream.id
            return (
              <div
                key={stream.id}
                onClick={() => handleSelectStream(stream)}
                className="px-3.5 py-3 border-b cursor-pointer transition-colors"
                style={{
                  borderColor: 'rgba(255,255,255,.04)',
                  background: isSelected ? 'rgba(6,182,212,.08)' : 'transparent',
                }}
              >
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-2">
                    <div className="text-sm">🚁</div>
                    <div>
                      <div className="text-[11px] font-semibold text-fg font-korean">{stream.shipName} <span className="text-[9px] text-color-accent font-semibold">({stream.droneModel})</span></div>
                      <div className="text-[9px] text-fg-disabled font-mono">{stream.ip}</div>
                    </div>
                  </div>
                  <span
                    className="text-[8px] font-bold px-1.5 py-0.5 rounded-full"
                    style={{ background: si.bg, color: si.color }}
                  >{si.label}</span>
                </div>

                <div className="flex items-center gap-1.5">
                  <span className="text-[8px] text-fg-disabled font-korean px-1.5 py-0.5 rounded bg-bg-card">{stream.region}</span>
                  <span className="text-[8px] text-fg-disabled font-mono px-1.5 py-0.5 rounded bg-bg-card">RTSP :554</span>
                </div>

                {stream.error && (
                  <div className="mt-1.5 text-[8px] text-color-danger font-korean px-1.5 py-1 rounded bg-[rgba(239,68,68,.06)]">
                    {stream.error}
                  </div>
                )}

                {/* 시작/중지 버튼 */}
                <div className="mt-2 flex gap-1.5">
                  {stream.status === 'idle' || stream.status === 'error' ? (
                    <button
                      onClick={(e) => { e.stopPropagation(); handleStartStream(stream.id) }}
                      className="flex-1 px-2 py-1 text-[9px] font-bold font-korean rounded border cursor-pointer transition-colors"
                      style={{ background: 'rgba(34,197,94,.1)', borderColor: 'rgba(34,197,94,.3)', color: 'var(--color-success)' }}
                    >▶ 스트림 시작</button>
                  ) : (
                    <button
                      onClick={(e) => { e.stopPropagation(); handleStopStream(stream.id) }}
                      className="flex-1 px-2 py-1 text-[9px] font-bold font-korean rounded border cursor-pointer transition-colors"
                      style={{ background: 'rgba(239,68,68,.1)', borderColor: 'rgba(239,68,68,.3)', color: 'var(--color-danger)' }}
                    >■ 스트림 중지</button>
                  )}
                </div>
              </div>
            )
          })}
        </div>

        {/* 하단 안내 */}
        <div className="px-3 py-2 border-t border-stroke bg-bg-elevated shrink-0">
          <div className="text-[8px] text-fg-disabled font-korean leading-relaxed">
            RTSP 스트림은 해양경찰 내부망에서만 접속 가능합니다.
            ViewLink 프로그램과 연동됩니다.
          </div>
        </div>
      </div>

      {/* 중앙: 영상 뷰어 */}
      <div className="flex-1 flex flex-col overflow-hidden min-w-0 bg-bg-base">
        {/* 툴바 */}
        <div className="flex items-center justify-between px-4 py-2 border-b border-stroke bg-bg-elevated shrink-0 gap-2.5">
          <div className="flex items-center gap-2 min-w-0">
            <div className="text-xs font-bold text-fg font-korean whitespace-nowrap overflow-hidden text-ellipsis">
              {selectedStream ? `🚁 ${selectedStream.shipName}` : '🚁 드론 스트림을 선택하세요'}
            </div>
            {selectedStream?.status === 'streaming' && (
              <div className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold shrink-0" style={{ background: 'rgba(34,197,94,.14)', border: '1px solid rgba(34,197,94,.35)', color: 'var(--color-success)' }}>
                <span className="w-[5px] h-[5px] rounded-full inline-block animate-pulse" style={{ background: 'var(--color-success)' }} />LIVE
              </div>
            )}
            {selectedStream?.status === 'starting' && (
              <div className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold shrink-0" style={{ background: 'rgba(6,182,212,.14)', border: '1px solid rgba(6,182,212,.35)', color: 'var(--color-accent)' }}>
                <span className="w-[5px] h-[5px] rounded-full inline-block animate-pulse" style={{ background: 'var(--color-accent)' }} />연결중
              </div>
            )}
          </div>
          <div className="flex items-center gap-1.5 shrink-0">
            {/* 분할 모드 */}
            <div className="flex border border-stroke rounded-[5px] overflow-hidden">
              {[
                { mode: 1, icon: '▣', label: '1화면' },
                { mode: 4, icon: '⊞', label: '4분할' },
              ].map(g => (
                <button
                  key={g.mode}
                  onClick={() => { setGridMode(g.mode); setActiveCells(prev => prev.slice(0, g.mode)) }}
                  title={g.label}
                  className="px-2 py-1 text-[11px] cursor-pointer border-none transition-colors"
                  style={gridMode === g.mode
                    ? { background: 'rgba(6,182,212,.15)', color: 'var(--color-accent)' }
                    : { background: 'var(--bg-card)', color: 'var(--fg-sub)' }
                  }
                >{g.icon}</button>
              ))}
            </div>
            <button
              onClick={() => playerRefs.current.forEach(r => r?.capture())}
              className="px-2.5 py-1 bg-bg-card border border-stroke rounded-[5px] text-fg-sub text-[10px] font-semibold cursor-pointer font-korean hover:bg-bg-surface-hover transition-colors"
            >📷 캡처</button>
          </div>
        </div>

        {/* 드론 위치 지도 또는 영상 그리드 */}
        {showMap ? (
          <div className="flex-1 overflow-hidden relative">
            <Map
              initialViewState={{ longitude: 127.8, latitude: 35.5, zoom: 6.2 }}
              mapStyle={currentMapStyle}
              style={{ width: '100%', height: '100%' }}
              attributionControl={false}
            >
              <S57EncOverlay visible={mapToggles['s57'] ?? false} />
              {streams.map(stream => {
                const pos = DRONE_POSITIONS[stream.id]
                if (!pos) return null
                const statusColor = stream.status === 'streaming' ? '#22c55e' : stream.status === 'starting' ? '#06b6d4' : stream.status === 'error' ? '#ef4444' : '#94a3b8'
                return (
                  <Marker
                    key={stream.id}
                    longitude={(pos.ship.lon + pos.drone.lon) / 2}
                    latitude={(pos.ship.lat + pos.drone.lat) / 2}
                    anchor="center"
                    onClick={e => { e.originalEvent.stopPropagation(); setMapPopup(stream) }}
                  >
                    <div className="cursor-pointer group" title={stream.shipName}>
                      <svg width="130" height="85" viewBox="0 0 130 85" fill="none" className="drop-shadow-lg transition-transform group-hover:scale-105" style={{ overflow: 'visible' }}>
                        {/* 연결선 (점선) */}
                        <line x1="28" y1="52" x2="88" y2="30" stroke={statusColor} strokeWidth="1.2" strokeDasharray="4 3" opacity="0.5" />

                        {/* ── 함정: MarineTraffic 스타일 삼각형 (선수 방향 위) ── */}
                        <polygon points="28,38 18,58 38,58" fill={statusColor} opacity="0.85" />
                        <polygon points="28,38 18,58 38,58" fill="none" stroke="#fff" strokeWidth="0.8" opacity="0.5" />
                        {/* 함정명 라벨 */}
                        <rect x="3" y="61" width="50" height="13" rx="3" fill="rgba(0,0,0,.75)" />
                        <text x="28" y="70.5" textAnchor="middle" fill="#fff" fontSize="7" fontFamily="sans-serif" fontWeight="bold">{stream.shipName.replace(/서 /, ' ')}</text>

                        {/* ── 드론: 쿼드콥터 아이콘 ── */}
                        {/* 외곽 원 */}
                        <circle cx="88" cy="30" r="18" fill="rgba(10,14,24,.7)" stroke={statusColor} strokeWidth="1.5" />
                        {/* X자 팔 */}
                        <line x1="76" y1="18" x2="100" y2="42" stroke={statusColor} strokeWidth="1.2" opacity="0.5" />
                        <line x1="100" y1="18" x2="76" y2="42" stroke={statusColor} strokeWidth="1.2" opacity="0.5" />
                        {/* 프로펠러 4개 (회전 애니메이션) */}
                        <ellipse cx="76" cy="18" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
                          <animateTransform attributeName="transform" type="rotate" from="0 76 18" to="360 76 18" dur="1.5s" repeatCount="indefinite" />
                        </ellipse>
                        <ellipse cx="100" cy="18" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
                          <animateTransform attributeName="transform" type="rotate" from="0 100 18" to="-360 100 18" dur="1.5s" repeatCount="indefinite" />
                        </ellipse>
                        <ellipse cx="76" cy="42" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
                          <animateTransform attributeName="transform" type="rotate" from="0 76 42" to="-360 76 42" dur="1.5s" repeatCount="indefinite" />
                        </ellipse>
                        <ellipse cx="100" cy="42" rx="5" ry="2.5" fill={statusColor} opacity="0.35">
                          <animateTransform attributeName="transform" type="rotate" from="0 100 42" to="360 100 42" dur="1.5s" repeatCount="indefinite" />
                        </ellipse>
                        {/* 본체 */}
                        <circle cx="88" cy="30" r="6" fill={statusColor} opacity="0.8" />
                        {/* 카메라 렌즈 */}
                        <circle cx="88" cy="30" r="3" fill="#fff" opacity="0.9" />
                        <circle cx="88" cy="30" r="1.5" fill={statusColor} />
                        {/* 송출중 REC LED */}
                        {stream.status === 'streaming' && (
                          <circle cx="100" cy="16" r="3" fill="#ef4444">
                            <animate attributeName="opacity" values="1;0.2;1" dur="1s" repeatCount="indefinite" />
                          </circle>
                        )}
                        {/* 드론 모델명 */}
                        <rect x="65" y="51" width="46" height="12" rx="3" fill="rgba(0,0,0,.75)" />
                        <text x="88" y="60" textAnchor="middle" fill={statusColor} fontSize="7" fontFamily="sans-serif" fontWeight="bold">{stream.droneModel.split(' ').slice(-1)[0]}</text>
                      </svg>
                    </div>
                  </Marker>
                )
              })}
              {/* 드론 클릭 팝업 */}
              {mapPopup && DRONE_POSITIONS[mapPopup.id] && (
                <Popup
                  longitude={DRONE_POSITIONS[mapPopup.id].drone.lon}
                  latitude={DRONE_POSITIONS[mapPopup.id].drone.lat}
                  anchor="bottom"
                  onClose={() => setMapPopup(null)}
                  closeOnClick={false}
                  offset={36}
                  className="cctv-dark-popup"
                >
                  <div className="p-2.5" style={{ minWidth: 170, background: 'var(--bg-card)', borderRadius: 6 }}>
                    <div className="flex items-center gap-1.5 mb-1">
                      <span className="text-sm">🚁</span>
                      <div className="text-[11px] font-bold text-fg">{mapPopup.shipName}</div>
                    </div>
                    <div className="text-[9px] text-fg-disabled mb-0.5">{mapPopup.droneModel}</div>
                    <div className="text-[8px] text-fg-disabled font-mono mb-2">{mapPopup.ip} · {mapPopup.region}</div>
                    <div className="flex items-center gap-1.5 mb-2">
                      <span className="text-[8px] font-bold px-1.5 py-px rounded-full"
                        style={{ background: statusInfo(mapPopup.status).bg, color: statusInfo(mapPopup.status).color }}
                      >● {statusInfo(mapPopup.status).label}</span>
                    </div>
                    {mapPopup.status === 'idle' || mapPopup.status === 'error' ? (
                      <button
                        onClick={() => { handleStartStream(mapPopup.id); handleSelectStream(mapPopup); setMapPopup(null) }}
                        className="w-full px-2 py-1.5 rounded text-[10px] font-bold cursor-pointer border transition-colors"
                        style={{ background: 'rgba(34,197,94,.15)', borderColor: 'rgba(34,197,94,.3)', color: '#4ade80' }}
                      >▶ 스트림 시작</button>
                    ) : mapPopup.status === 'streaming' ? (
                      <button
                        onClick={() => { handleSelectStream(mapPopup); setMapPopup(null) }}
                        className="w-full px-2 py-1.5 rounded text-[10px] font-bold cursor-pointer border transition-colors"
                        style={{ background: 'rgba(6,182,212,.15)', borderColor: 'rgba(6,182,212,.3)', color: '#67e8f9' }}
                      >▶ 영상 보기</button>
                    ) : (
                      <div className="text-[9px] text-color-accent font-korean text-center animate-pulse">연결 중...</div>
                    )}
                  </div>
                </Popup>
              )}
            </Map>
            {/* 지도 위 안내 배지 */}
            <div className="absolute top-3 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full text-[10px] font-bold font-korean z-10"
              style={{ background: 'rgba(0,0,0,.7)', color: 'rgba(255,255,255,.7)', backdropFilter: 'blur(4px)' }}>
              🚁 드론 위치를 클릭하여 스트림을 시작하세요 ({streams.length}대)
            </div>
          </div>
        ) : (
          <div className="flex-1 gap-0.5 p-0.5 overflow-hidden relative grid bg-black"
            style={{
              gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
              gridTemplateRows: `repeat(${gridCols}, 1fr)`,
            }}>
            {Array.from({ length: totalCells }).map((_, i) => {
              const stream = activeCells[i]
              return (
                <div key={i} className="relative flex items-center justify-center overflow-hidden bg-bg-base" style={{ border: '1px solid var(--stroke-light)' }}>
                  {stream && stream.status === 'streaming' && stream.hlsUrl ? (
                    <CCTVPlayer
                      ref={el => { playerRefs.current[i] = el }}
                      cameraNm={stream.shipName}
                      streamUrl={stream.hlsUrl}
                      sttsCd="LIVE"
                      coordDc={`${stream.ip} · RTSP`}
                      sourceNm="ViewLink"
                      cellIndex={i}
                    />
                  ) : stream && stream.status === 'starting' ? (
                    <div className="flex flex-col items-center justify-center gap-2">
                      <div className="text-lg opacity-40 animate-pulse">🚁</div>
                      <div className="text-[10px] text-color-accent font-korean animate-pulse">RTSP 스트림 연결 중...</div>
                      <div className="text-[8px] text-fg-disabled font-mono">{stream.ip}:554</div>
                    </div>
                  ) : stream && stream.status === 'error' ? (
                    <div className="flex flex-col items-center justify-center gap-2">
                      <div className="text-lg opacity-30">⚠️</div>
                      <div className="text-[10px] text-color-danger font-korean">연결 실패</div>
                      <div className="text-[8px] text-fg-disabled font-korean max-w-[200px] text-center">{stream.error}</div>
                      <button
                        onClick={() => handleStartStream(stream.id)}
                        className="mt-1 px-2.5 py-1 rounded text-[9px] font-korean bg-bg-card border border-stroke text-fg-sub cursor-pointer hover:bg-bg-surface-hover transition-colors"
                      >재시도</button>
                    </div>
                  ) : (
                    <div className="text-[10px] text-fg-disabled font-korean opacity-40">
                      {streams.length > 0 ? '스트림을 시작하고 선택하세요' : '드론 스트림을 선택하세요'}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        )}

        {/* 하단 정보 바 */}
        <div className="flex items-center gap-3.5 px-4 py-1.5 border-t border-stroke bg-bg-elevated shrink-0">
          <div className="text-[10px] text-fg-disabled font-korean">선택: <b className="text-fg">{selectedStream?.shipName ?? '–'}</b></div>
          <div className="text-[10px] text-fg-disabled font-korean">IP: <span className="text-color-accent font-mono text-[9px]">{selectedStream?.ip ?? '–'}</span></div>
          <div className="text-[10px] text-fg-disabled font-korean">지역: <span className="text-fg-sub">{selectedStream?.region ?? '–'}</span></div>
          <div className="ml-auto text-[9px] text-fg-disabled font-korean">RTSP → HLS · ViewLink 연동</div>
        </div>
      </div>

      {/* 우측: 정보 패널 */}
      <div className="flex flex-col overflow-hidden bg-bg-surface border-l border-stroke w-[220px] min-w-[220px]">
        {/* 헤더 */}
        <div className="px-3 py-2 border-b border-stroke text-[11px] font-bold text-fg font-korean bg-bg-elevated shrink-0">
          📋 스트림 정보
        </div>

        <div className="flex-1 overflow-y-auto px-3 py-2.5" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}>
          {selectedStream ? (
            <div className="flex flex-col gap-1.5">
              {[
                ['함정명', selectedStream.shipName],
                ['드론명', selectedStream.name],
                ['기체모델', selectedStream.droneModel],
                ['IP 주소', selectedStream.ip],
                ['RTSP 포트', '554'],
                ['지역', selectedStream.region],
                ['프로토콜', 'RTSP → HLS'],
                ['상태', statusInfo(selectedStream.status).label],
              ].map(([k, v], i) => (
                <div key={i} className="flex justify-between px-2 py-1 bg-bg-base rounded text-[9px]">
                  <span className="text-fg-disabled font-korean">{k}</span>
                  <span className="font-mono text-fg">{v}</span>
                </div>
              ))}
              {selectedStream.hlsUrl && (
                <div className="px-2 py-1 bg-bg-base rounded text-[8px]">
                  <div className="text-fg-disabled font-korean mb-0.5">HLS URL</div>
                  <div className="font-mono text-color-accent break-all">{selectedStream.hlsUrl}</div>
                </div>
              )}
            </div>
          ) : (
            <div className="text-[10px] text-fg-disabled font-korean">드론 스트림을 선택하세요</div>
          )}

          {/* 연동 시스템 */}
          <div className="mt-3 pt-2.5 border-t border-stroke">
            <div className="text-[10px] font-bold text-fg-sub font-korean mb-2">🔗 연동 시스템</div>
            <div className="flex flex-col gap-1.5">
              <div className="flex items-center justify-between px-2 py-1.5 bg-bg-card rounded-[5px]" style={{ border: '1px solid rgba(6,182,212,.2)' }}>
                <span className="text-[9px] text-fg-sub font-korean">ViewLink 3.5</span>
                <span className="text-[9px] font-bold" style={{ color: 'var(--color-accent)' }}>● RTSP</span>
              </div>
              <div className="flex items-center justify-between px-2 py-1.5 bg-bg-card rounded-[5px]" style={{ border: '1px solid rgba(59,130,246,.2)' }}>
                <span className="text-[9px] text-fg-sub font-korean">FFmpeg 변환</span>
                <span className="text-[9px] font-bold" style={{ color: 'var(--blue, #3b82f6)' }}>RTSP→HLS</span>
              </div>
            </div>
          </div>

          {/* 전체 상태 요약 */}
          <div className="mt-3 pt-2.5 border-t border-stroke">
            <div className="text-[10px] font-bold text-fg-sub font-korean mb-2">📊 스트림 현황</div>
            <div className="grid grid-cols-2 gap-1.5">
              {[
                { label: '전체', value: streams.length, color: 'text-fg' },
                { label: '송출중', value: streams.filter(s => s.status === 'streaming').length, color: 'text-color-success' },
                { label: '연결중', value: streams.filter(s => s.status === 'starting').length, color: 'text-color-accent' },
                { label: '오류', value: streams.filter(s => s.status === 'error').length, color: 'text-color-danger' },
              ].map((item, i) => (
                <div key={i} className="px-2 py-1.5 bg-bg-base rounded text-center">
                  <div className="text-[8px] text-fg-disabled font-korean">{item.label}</div>
                  <div className={`text-sm font-bold font-mono ${item.color}`}>{item.value}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}