wing-ops/frontend/src/tabs/aerial/components/CctvView.tsx

import { useState, useCallback, useEffect } from 'react'
import { fetchCctvCameras } from '../services/aerialApi'
import type { CctvCameraItem } from '../services/aerialApi'

const cctvFavorites = [
  { name: '서귀포항 동측', reason: '유출 사고 인접' },
  { name: '여수 신항', reason: '주요 방제 거점' },
  { name: '목포 내항', reason: '서해 모니터링' },
]

export function CctvView() {
  const [cameras, setCameras] = useState<CctvCameraItem[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState('')
  const [regionFilter, setRegionFilter] = useState('전체')
  const [selectedCamera, setSelectedCamera] = useState<CctvCameraItem | null>(null)
  const [gridMode, setGridMode] = useState(1)
  const [activeCells, setActiveCells] = useState<CctvCameraItem[]>([])

  const loadData = useCallback(async () => {
    setLoading(true)
    try {
      const items = await fetchCctvCameras()
      setCameras(items)
    } catch (err) {
      console.error('[aerial] CCTV 목록 조회 실패:', err)
    } finally {
      setLoading(false)
    }
  }, [])

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

  const regions = ['전체', '제주', '남해', '서해', '동해']
  const regionIcons: Record<string, string> = { '전체': '', '제주': '🌊', '남해': '⚓', '서해': '🐟', '동해': '🌅' }

  const filtered = cameras.filter(c => {
    if (regionFilter !== '전체' && c.regionNm !== regionFilter) return false
    if (searchTerm && !c.cameraNm.includes(searchTerm) && !(c.locDc ?? '').includes(searchTerm)) return false
    return true
  })

  const handleSelectCamera = (cam: CctvCameraItem) => {
    setSelectedCamera(cam)
    if (gridMode === 1) {
      setActiveCells([cam])
    } else {
      setActiveCells(prev => {
        if (prev.length < gridMode && !prev.find(c => c.cctvSn === cam.cctvSn)) return [...prev, cam]
        return prev
      })
    }
  }

  const gridCols = gridMode === 1 ? 1 : gridMode === 4 ? 2 : 3
  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-1 border-r border-border w-[290px] min-w-[290px]">
        {/* 헤더 */}
        <div className="p-3 pb-2.5 border-b border-border shrink-0 bg-bg-2">
          <div className="flex items-center justify-between mb-2">
            <div className="text-xs font-bold text-text-1 font-korean flex items-center gap-1.5">
              <span className="w-[7px] h-[7px] rounded-full inline-block animate-pulse" style={{ background: 'var(--red)' }} />
              실시간 해안 CCTV
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-[9px] text-text-3 font-korean">API 상태</span>
              <span className="w-[7px] h-[7px] rounded-full inline-block" style={{ background: 'var(--green)' }} />
            </div>
          </div>
          {/* 검색 */}
          <div className="flex items-center gap-2 bg-bg-0 border border-border rounded-md px-2.5 py-1.5 mb-2 focus-within:border-primary-cyan/50 transition-colors">
            <span className="text-text-3 text-[11px]">🔍</span>
            <input
              type="text"
              placeholder="지점명 또는 지역 검색..."
              value={searchTerm}
              onChange={e => setSearchTerm(e.target.value)}
              className="flex-1 bg-transparent border-none text-text-1 text-[11px] font-korean outline-none"
            />
          </div>
          {/* 지역 필터 */}
          <div className="flex gap-1 flex-wrap">
            {regions.map(r => (
              <button
                key={r}
                onClick={() => setRegionFilter(r)}
                className="px-2 py-0.5 rounded text-[9px] font-semibold cursor-pointer font-korean border transition-colors"
                style={regionFilter === r
                  ? { background: 'rgba(6,182,212,.15)', color: 'var(--cyan)', borderColor: 'rgba(6,182,212,.3)' }
                  : { background: 'var(--bg3)', color: 'var(--t2)', borderColor: 'var(--bd)' }
                }
              >{regionIcons[r] ? `${regionIcons[r]} ` : ''}{r}</button>
            ))}
          </div>
        </div>

        {/* 상태 바 */}
        <div className="flex items-center justify-between px-3.5 py-1 border-b border-border shrink-0 bg-bg-1">
          <div className="text-[9px] text-text-3 font-korean">출처: 국립해양조사원 · KBS 재난안전포털</div>
          <div className="text-[10px] text-text-2 font-korean"><b className="text-text-1">{filtered.length}</b>개</div>
        </div>

        {/* 카메라 목록 */}
        <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
          {loading ? (
            <div className="px-3.5 py-4 text-[11px] text-text-3 font-korean">불러오는 중...</div>
          ) : filtered.map(cam => (
            <div
              key={cam.cctvSn}
              onClick={() => handleSelectCamera(cam)}
              className="flex items-center gap-2.5 px-3.5 py-2.5 border-b cursor-pointer transition-colors"
              style={{
                borderColor: 'rgba(255,255,255,.04)',
                background: selectedCamera?.cctvSn === cam.cctvSn ? 'rgba(6,182,212,.08)' : 'transparent',
              }}
            >
              <div className="relative shrink-0">
                <div className="w-8 h-8 rounded-md bg-bg-3 flex items-center justify-center text-sm">📹</div>
                <div className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full border border-bg-1" style={{ background: cam.sttsCd === 'LIVE' ? 'var(--green)' : 'var(--t3)' }} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[11px] font-semibold text-text-1 font-korean truncate">{cam.cameraNm}</div>
                <div className="text-[9px] text-text-3 font-korean truncate">{cam.locDc ?? ''}</div>
              </div>
              <div className="flex flex-col items-end gap-0.5 shrink-0">
                {cam.sttsCd === 'LIVE' ? (
                  <span className="text-[8px] font-bold px-1.5 py-px rounded-full" style={{ background: 'rgba(34,197,94,.12)', color: 'var(--green)' }}>LIVE</span>
                ) : (
                  <span className="text-[8px] font-bold px-1.5 py-px rounded-full" style={{ background: 'rgba(255,255,255,.06)', color: 'var(--t3)' }}>OFF</span>
                )}
                {cam.ptzYn === 'Y' && <span className="text-[8px] text-text-3 font-mono">PTZ</span>}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 가운데: 영상 뷰어 */}
      <div className="flex-1 flex flex-col overflow-hidden min-w-0 bg-[#04070f]">
        {/* 뷰어 툴바 */}
        <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-bg-2 shrink-0 gap-2.5">
          <div className="flex items-center gap-2 min-w-0">
            <div className="text-xs font-bold text-text-1 font-korean whitespace-nowrap overflow-hidden text-ellipsis">
              {selectedCamera ? `📹 ${selectedCamera.cameraNm}` : '📹 카메라를 선택하세요'}
            </div>
            {selectedCamera?.sttsCd === 'LIVE' && (
              <div className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold shrink-0" style={{ background: 'rgba(239,68,68,.14)', border: '1px solid rgba(239,68,68,.35)', color: 'var(--red)' }}>
                <span className="w-[5px] h-[5px] rounded-full inline-block animate-pulse" style={{ background: 'var(--red)' }} />LIVE
              </div>
            )}
          </div>
          <div className="flex items-center gap-1.5 shrink-0">
            {/* PTZ 컨트롤 */}
            {selectedCamera?.ptzYn === 'Y' && (
              <div className="flex items-center gap-1 px-2 py-1 bg-bg-3 border border-border rounded-[5px]">
                <span className="text-[9px] text-text-3 font-korean mr-1">PTZ</span>
                {['◀', '▲', '▼', '▶'].map((d, i) => (
                  <button key={i} className="w-5 h-5 flex items-center justify-center bg-bg-0 border border-border rounded text-[9px] text-text-2 cursor-pointer hover:bg-bg-hover transition-colors">{d}</button>
                ))}
                <div className="w-px h-4 bg-border mx-0.5" />
                {['+', '−'].map((z, i) => (
                  <button key={i} className="w-5 h-5 flex items-center justify-center bg-bg-0 border border-border rounded text-[9px] text-text-2 cursor-pointer hover:bg-bg-hover transition-colors">{z}</button>
                ))}
              </div>
            )}
            {/* 분할 모드 */}
            <div className="flex border border-border rounded-[5px] overflow-hidden">
              {[
                { mode: 1, icon: '▣', label: '1화면' },
                { mode: 4, icon: '⊞', label: '4분할' },
                { mode: 9, icon: '⊟', label: '9분할' },
              ].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(--cyan)' }
                    : { background: 'var(--bg3)', color: 'var(--t2)' }
                  }
                >{g.icon}</button>
              ))}
            </div>
            <button className="px-2.5 py-1 bg-bg-3 border border-border rounded-[5px] text-text-2 text-[10px] font-semibold cursor-pointer font-korean hover:bg-bg-hover transition-colors">📷 캡처</button>
          </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 cam = activeCells[i]
            return (
              <div key={i} className="relative flex items-center justify-center overflow-hidden bg-[#0a0e18]" style={{ border: '1px solid rgba(255,255,255,.06)' }}>
                {cam ? (
                  <>
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="text-4xl opacity-20">📹</div>
                    </div>
                    <div className="absolute top-2 left-2 flex items-center gap-1.5">
                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-black/70">{cam.cameraNm}</span>
                      <span className="text-[8px] font-bold px-1 py-0.5 rounded text-[#f87171]" style={{ background: 'rgba(239,68,68,.3)' }}>● REC</span>
                    </div>
                    <div className="absolute bottom-2 left-2 text-[9px] font-mono px-1.5 py-0.5 rounded text-text-3 bg-black/70">
                      {cam.coordDc ?? ''} · {cam.sourceNm ?? ''}
                    </div>
                    <div className="absolute inset-0 flex items-center justify-center text-[11px] font-korean text-text-3 opacity-60">
                      CCTV 스트리밍 영역
                    </div>
                  </>
                ) : (
                  <div className="text-[10px] text-text-3 font-korean opacity-40">카메라를 선택하세요</div>
                )}
              </div>
            )
          })}
        </div>

        {/* 하단 정보 바 */}
        <div className="flex items-center gap-3.5 px-4 py-1.5 border-t border-border bg-bg-2 shrink-0">
          <div className="text-[10px] text-text-3 font-korean">선택: <b className="text-text-1">{selectedCamera?.cameraNm ?? '–'}</b></div>
          <div className="text-[10px] text-text-3 font-korean">위치: <span className="text-text-2">{selectedCamera?.locDc ?? '–'}</span></div>
          <div className="text-[10px] text-text-3 font-korean">좌표: <span className="text-primary-cyan font-mono text-[9px]">{selectedCamera?.coordDc ?? '–'}</span></div>
          <div className="ml-auto text-[9px] text-text-3 font-korean">API: 국립해양조사원 TAGO 해양 CCTV</div>
        </div>
      </div>

      {/* 오른쪽: 미니맵 + 정보 */}
      <div className="flex flex-col overflow-hidden bg-bg-1 border-l border-border w-[232px] min-w-[232px]">
        {/* 지도 헤더 */}
        <div className="px-3 py-2 border-b border-border text-[11px] font-bold text-text-1 font-korean bg-bg-2 shrink-0 flex items-center justify-between">
          <span>🗺 위치 지도</span>
          <span className="text-[9px] text-text-3 font-normal">클릭하여 선택</span>
        </div>
        {/* 미니맵 (placeholder) */}
        <div className="w-full bg-bg-3 flex items-center justify-center shrink-0 relative h-[210px]">
          <div className="text-[10px] text-text-3 font-korean opacity-50">지도 영역</div>
          {/* 간략 지도 표현 */}
          <div className="absolute inset-2 rounded-md border border-border/30 overflow-hidden" style={{ background: 'linear-gradient(180deg, rgba(6,182,212,.03), rgba(59,130,246,.05))' }}>
            {cameras.filter(c => c.sttsCd === 'LIVE').slice(0, 6).map((c, i) => (
              <div
                key={i}
                className="absolute w-2 h-2 rounded-full cursor-pointer"
                style={{
                  background: selectedCamera?.cctvSn === c.cctvSn ? 'var(--cyan)' : 'var(--green)',
                  boxShadow: selectedCamera?.cctvSn === c.cctvSn ? '0 0 6px var(--cyan)' : 'none',
                  top: `${20 + (i * 25) % 70}%`,
                  left: `${15 + (i * 30) % 70}%`,
                }}
                title={c.cameraNm}
                onClick={() => handleSelectCamera(c)}
              />
            ))}
          </div>
        </div>

        {/* 카메라 정보 */}
        <div className="flex-1 overflow-y-auto px-3 py-2.5 border-t border-border" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
          <div className="text-[10px] font-bold text-text-2 font-korean mb-2">📋 카메라 정보</div>
          {selectedCamera ? (
            <div className="flex flex-col gap-1.5">
              {[
                ['카메라명', selectedCamera.cameraNm],
                ['지역', selectedCamera.regionNm],
                ['위치', selectedCamera.locDc ?? '—'],
                ['좌표', selectedCamera.coordDc ?? '—'],
                ['상태', selectedCamera.sttsCd === 'LIVE' ? '● 송출중' : '● 오프라인'],
                ['PTZ', selectedCamera.ptzYn === 'Y' ? '지원' : '미지원'],
                ['출처', selectedCamera.sourceNm ?? '—'],
              ].map(([k, v], i) => (
                <div key={i} className="flex justify-between px-2 py-1 bg-bg-0 rounded text-[9px]">
                  <span className="text-text-3 font-korean">{k}</span>
                  <span className="font-mono text-text-1">{v}</span>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-[10px] text-text-3 font-korean">카메라를 선택하세요</div>
          )}

          {/* 방제 즐겨찾기 */}
          <div className="mt-3 pt-2.5 border-t border-border">
            <div className="text-[10px] font-bold text-text-2 font-korean mb-2">⭐ 방제 핵심 지점</div>
            <div className="flex flex-col gap-1">
              {cctvFavorites.map((fav, i) => (
                <div
                  key={i}
                  className="flex items-center gap-2 px-2 py-1.5 bg-bg-3 rounded-[5px] cursor-pointer hover:bg-bg-hover transition-colors"
                  onClick={() => {
                    const found = cameras.find(c => c.cameraNm === fav.name)
                    if (found) handleSelectCamera(found)
                  }}
                >
                  <span className="text-[9px]">⭐</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-[9px] font-semibold text-text-1 font-korean truncate">{fav.name}</div>
                    <div className="text-[8px] text-text-3 font-korean">{fav.reason}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* API 연동 현황 */}
          <div className="mt-3 pt-2.5 border-t border-border">
            <div className="text-[10px] font-bold text-text-2 font-korean mb-2">🔌 API 연동 현황</div>
            <div className="flex flex-col gap-1.5">
              {[
                { name: '해양조사원 TAGO', status: '● 연결', color: 'var(--green)' },
                { name: 'KBS 재난안전포털', status: '● 연결', color: 'var(--green)' },
              ].map((api, i) => (
                <div key={i} className="flex items-center justify-between px-2 py-1 bg-bg-3 rounded-[5px]" style={{ border: '1px solid rgba(34,197,94,.2)' }}>
                  <span className="text-[9px] text-text-2 font-korean">{api.name}</span>
                  <span className="text-[9px] font-bold" style={{ color: api.color }}>{api.status}</span>
                </div>
              ))}
              <div className="flex items-center justify-between px-2 py-1 bg-bg-3 rounded-[5px]" style={{ border: '1px solid rgba(59,130,246,.2)' }}>
                <span className="text-[9px] text-text-2 font-korean">갱신 주기</span>
                <span className="text-[9px] font-bold font-mono text-primary-blue">1 fps</span>
              </div>
              <div className="text-[9px] text-text-3 font-mono text-right mt-0.5">최종갱신: {new Date().toLocaleTimeString('ko-KR')}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}