import { useState, useMemo } from 'react'
import { LayerTree } from '@common/components/layer/LayerTree'
import { useLayerTree } from '@common/hooks/useLayers'
import { layerData } from '../../../data/layerData'
import type { LayerNode } from '../../../data/layerData'
import type { Layer } from '../../../data/layerDatabase'
import { decimalToDMS } from '@common/utils/coordinates'
import { ComboBox } from '@common/components/ui/ComboBox'
import { ALL_MODELS } from './OilSpillView'
import type { PredictionModel } from './OilSpillView'
import type { BoomLine, BoomLineCoord, AlgorithmSettings, ContainmentResult } from '@common/types/boomLine'
import { generateAIBoomLines, runContainmentAnalysis, computePolylineLength, computeBearing } from '@common/utils/geo'
import type { Analysis } from './AnalysisListTable'

interface LeftPanelProps {
  selectedAnalysis?: Analysis | null
  enabledLayers: Set<string>
  onToggleLayer: (layerId: string, enabled: boolean) => void
  incidentCoord: { lon: number; lat: number }
  onCoordChange: (coord: { lon: number; lat: number }) => void
  onMapSelectClick: () => void
  onRunSimulation: () => void
  isRunningSimulation: boolean
  selectedModels: Set<PredictionModel>
  onModelsChange: (models: Set<PredictionModel>) => void
  predictionTime: number
  onPredictionTimeChange: (time: number) => void
  spillType: string
  onSpillTypeChange: (type: string) => void
  oilType: string
  onOilTypeChange: (type: string) => void
  spillAmount: number
  onSpillAmountChange: (amount: number) => void
  // 오일펜스 배치 관련
  boomLines: BoomLine[]
  onBoomLinesChange: (lines: BoomLine[]) => void
  oilTrajectory: Array<{ lat: number; lon: number; time: number; particle?: number }>
  algorithmSettings: AlgorithmSettings
  onAlgorithmSettingsChange: (settings: AlgorithmSettings) => void
  isDrawingBoom: boolean
  onDrawingBoomChange: (drawing: boolean) => void
  drawingPoints: BoomLineCoord[]
  onDrawingPointsChange: (points: BoomLineCoord[]) => void
  containmentResult: ContainmentResult | null
  onContainmentResultChange: (result: ContainmentResult | null) => void
  // 레이어 스타일
  layerOpacity: number
  onLayerOpacityChange: (val: number) => void
  layerBrightness: number
  onLayerBrightnessChange: (val: number) => void
}

export function LeftPanel({
  selectedAnalysis,
  enabledLayers,
  onToggleLayer,
  incidentCoord,
  onCoordChange,
  onMapSelectClick,
  onRunSimulation,
  isRunningSimulation,
  selectedModels,
  onModelsChange,
  predictionTime,
  onPredictionTimeChange,
  spillType,
  onSpillTypeChange,
  oilType,
  onOilTypeChange,
  spillAmount,
  onSpillAmountChange,
  boomLines,
  onBoomLinesChange,
  oilTrajectory,
  algorithmSettings,
  onAlgorithmSettingsChange,
  isDrawingBoom,
  onDrawingBoomChange,
  drawingPoints,
  onDrawingPointsChange,
  containmentResult,
  onContainmentResultChange,
  layerOpacity,
  onLayerOpacityChange,
  layerBrightness,
  onLayerBrightnessChange,
}: LeftPanelProps) {
  const [inputMode, setInputMode] = useState<'direct' | 'upload'>('direct')
  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
  const [uploadedFileName, setUploadedFileName] = useState<string>('')
  const [boomPlacementTab, setBoomPlacementTab] = useState<'ai' | 'manual' | 'simulation'>('simulation')
  const [expandedSections, setExpandedSections] = useState({
    predictionInput: true,
    incident: false,
    impactResources: false,
    infoLayer: true,
    oilBoom: false,
  })

  // API에서 레이어 트리 데이터 가져오기
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { data: layerTree, isLoading, error } = useLayerTree()

  const [layerColors, setLayerColors] = useState<Record<string, string>>({})

  // 정적 데이터를 Layer 형식으로 변환 (API 실패 시 폴백)
  const staticLayers = useMemo(() => {
    const convert = (node: LayerNode): Layer => ({
      id: node.code,
      parentId: node.parentCode,
      name: node.name,
      fullName: node.fullName,
      level: node.level,
      wmsLayer: node.layerName,
      icon: node.icon,
      count: node.count,
      children: node.children?.map(convert),
    })
    return layerData.map(convert)
  }, [])

  // API 데이터 우선, 실패 시 정적 데이터 폴백
  const effectiveLayers = (layerTree && layerTree.length > 0) ? layerTree : staticLayers

  const toggleSection = (section: keyof typeof expandedSections) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }))
  }

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setUploadedFileName(file.name)
      const reader = new FileReader()
      reader.onload = (event) => {
        setUploadedImage(event.target?.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  const removeUploadedImage = () => {
    setUploadedImage(null)
    setUploadedFileName('')
  }

  return (
    <div className="w-80 min-w-[320px] bg-bg-1 border-r border-border flex flex-col">
      {/* Scrollable Content */}
      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent">
        {/* Prediction Input Section */}
        <div className="border-b border-border">
          <div
            onClick={() => toggleSection('predictionInput')}
            className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3 className="text-[13px] font-bold text-text-2 font-korean">
              예측정보 입력
            </h3>
            <span className="text-[10px] text-text-3">
              {expandedSections.predictionInput ? '▼' : '▶'}
            </span>
          </div>

          {expandedSections.predictionInput && (
            <div className="px-4 pb-4" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              {/* Input Mode Selection */}
              <div style={{ display: 'flex', gap: '10px', alignItems: 'center', fontSize: '11px', color: 'var(--t1)', fontFamily: 'var(--fK)' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '3px', cursor: 'pointer' }}>
                  <input
                    type="radio"
                    name="prdType"
                    checked={inputMode === 'direct'}
                    onChange={() => setInputMode('direct')}
                    style={{ accentColor: 'var(--cyan)', margin: 0, width: '11px', height: '11px' }}
                  />
                  직접 입력
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '3px', cursor: 'pointer' }}>
                  <input
                    type="radio"
                    name="prdType"
                    checked={inputMode === 'upload'}
                    onChange={() => setInputMode('upload')}
                    style={{ accentColor: 'var(--cyan)', margin: 0, width: '11px', height: '11px' }}
                  />
                  이미지 업로드
                </label>
              </div>

              {/* Direct Input Mode */}
              {inputMode === 'direct' && (
                <>
                  <input className="prd-i" placeholder="사고명 직접 입력" />
                  <input className="prd-i" placeholder="또는 사고 리스트에서 선택" />
                </>
              )}

              {/* Image Upload Mode */}
              {inputMode === 'upload' && (
                <>
                  <input className="prd-i" placeholder="여수 유조선 충돌" />
                  <ComboBox
                    className="prd-i"
                    value=""
                    onChange={() => {}}
                    options={[
                      { value: '', label: '여수 유조선 충돌 (INC-0042)' },
                      { value: 'INC-0042', label: '여수 유조선 충돌 (INC-0042)' }
                    ]}
                    placeholder="사고 선택"
                  />

                  {/* Upload Success Message */}
                  {uploadedImage && (
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '6px',
                      padding: '6px 8px',
                      background: 'rgba(34,197,94,0.1)',
                      border: '1px solid rgba(34,197,94,0.3)',
                      borderRadius: 'var(--rS)',
                      fontSize: '10px',
                      color: '#22c55e',
                      fontFamily: 'var(--fK)',
                      fontWeight: 600
                    }}>
                      <span style={{ fontSize: '12px' }}>✓</span>
                      내 이미지가 업로드됨
                    </div>
                  )}

                  {/* File Upload Area */}
                  {!uploadedImage ? (
                    <label style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      padding: '20px',
                      background: 'var(--bg0)',
                      border: '2px dashed var(--bd)',
                      borderRadius: 'var(--rS)',
                      cursor: 'pointer',
                      transition: '0.15s',
                      fontSize: '11px',
                      color: 'var(--t3)',
                      fontFamily: 'var(--fK)'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.borderColor = 'var(--cyan)'
                      e.currentTarget.style.background = 'rgba(6,182,212,0.05)'
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.borderColor = 'var(--bd)'
                      e.currentTarget.style.background = 'var(--bg0)'
                    }}>
                      📁 이미지 파일을 선택하세요
                      <input
                        type="file"
                        accept="image/*"
                        onChange={handleImageUpload}
                        style={{ display: 'none' }}
                      />
                    </label>
                  ) : (
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      padding: '8px 10px',
                      background: 'var(--bg0)',
                      border: '1px solid var(--bd)',
                      borderRadius: 'var(--rS)',
                      fontSize: '10px',
                      fontFamily: 'var(--fM)'
                    }}>
                      <span style={{ color: 'var(--t2)' }}>📄 {uploadedFileName || 'example_plot_0.gif'}</span>
                      <button
                        onClick={removeUploadedImage}
                        style={{
                          padding: '2px 6px',
                          fontSize: '10px',
                          color: 'var(--t3)',
                          background: 'transparent',
                          border: 'none',
                          cursor: 'pointer',
                          transition: '0.15s'
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.color = 'var(--red)'
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.color = 'var(--t3)'
                        }}
                      >
                        ✕
                      </button>
                    </div>
                  )}

                  {/* Dropdowns */}
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }}>
                    <ComboBox
                      className="prd-i"
                      value=""
                      onChange={() => {}}
                      options={[
                        { value: '', label: '유출회사' },
                        { value: 'company1', label: '회사A' },
                        { value: 'company2', label: '회사B' }
                      ]}
                      placeholder="유출회사"
                    />
                    <ComboBox
                      className="prd-i"
                      value=""
                      onChange={() => {}}
                      options={[
                        { value: '', label: '예상시각' },
                        { value: '09:00', label: '09:00' },
                        { value: '12:00', label: '12:00' }
                      ]}
                      placeholder="예상시각"
                    />
                  </div>
                </>
              )}

              {/* Coordinates + Map Button */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: '4px', alignItems: 'center' }}>
                  <input
                    className="prd-i"
                    type="number"
                    step="0.0001"
                    value={incidentCoord?.lat ?? ''}
                    onChange={(e) => {
                      const value = e.target.value === '' ? 0 : parseFloat(e.target.value)
                      onCoordChange({ ...incidentCoord, lat: isNaN(value) ? 0 : value })
                    }}
                    placeholder="위도°"
                  />
                  <input
                    className="prd-i"
                    type="number"
                    step="0.0001"
                    value={incidentCoord?.lon ?? ''}
                    onChange={(e) => {
                      const value = e.target.value === '' ? 0 : parseFloat(e.target.value)
                      onCoordChange({ ...incidentCoord, lon: isNaN(value) ? 0 : value })
                    }}
                    placeholder="경도°"
                  />
                  <button className="prd-map-btn" onClick={onMapSelectClick}>📍 지도</button>
                </div>
                {/* 도분초 표시 */}
                {incidentCoord && !isNaN(incidentCoord.lat) && !isNaN(incidentCoord.lon) && (
                  <div style={{
                    fontSize: '9px',
                    color: 'var(--t3)',
                    fontFamily: 'var(--fM)',
                    padding: '4px 8px',
                    background: 'var(--bg0)',
                    borderRadius: 'var(--rS)',
                    border: '1px solid var(--bd)'
                  }}>
                    {decimalToDMS(incidentCoord.lat, true)} / {decimalToDMS(incidentCoord.lon, false)}
                  </div>
                )}
              </div>

              {/* Oil Type + Oil Kind */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }}>
                <ComboBox
                  className="prd-i"
                  value={spillType}
                  onChange={onSpillTypeChange}
                  options={[
                    { value: '연속', label: '연속' },
                    { value: '비연속', label: '비연속' },
                    { value: '순간 유출', label: '순간 유출' }
                  ]}
                />
                <ComboBox
                  className="prd-i"
                  value={oilType}
                  onChange={onOilTypeChange}
                  options={[
                    { value: '벙커C유', label: '벙커C유' },
                    { value: '경유', label: '경유' },
                    { value: '원유', label: '원유' },
                    { value: '중유', label: '중유' },
                    { value: '등유', label: '등유' },
                    { value: '휘발유', label: '휘발유' }
                  ]}
                />
              </div>

              {/* Volume + Unit + Duration */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 65px 1fr', gap: '4px', alignItems: 'center' }}>
                <input
                  className="prd-i"
                  placeholder="유출량"
                  type="number"
                  min="1"
                  step="1"
                  value={spillAmount}
                  onChange={(e) => onSpillAmountChange(parseInt(e.target.value) || 0)}
                />
                <ComboBox
                  className="prd-i"
                  value="kL"
                  onChange={() => {}}
                  options={[
                    { value: 'kL', label: 'kL' },
                    { value: 'ton', label: 'Ton' },
                    { value: 'barrel', label: '배럴' }
                  ]}
                />
                <ComboBox
                  className="prd-i"
                  value={predictionTime}
                  onChange={(v) => onPredictionTimeChange(parseInt(v))}
                  options={[
                    { value: '6', label: '6시간' },
                    { value: '12', label: '12시간' },
                    { value: '24', label: '24시간' },
                    { value: '48', label: '48시간' },
                    { value: '72', label: '72시간' }
                  ]}
                />
              </div>

              {/* Image Analysis Note (Upload Mode Only) */}
              {inputMode === 'upload' && uploadedImage && (
                <div style={{
                  padding: '8px',
                  background: 'rgba(59,130,246,0.08)',
                  border: '1px solid rgba(59,130,246,0.2)',
                  borderRadius: 'var(--rS)',
                  fontSize: '9px',
                  color: 'var(--t3)',
                  fontFamily: 'var(--fK)',
                  lineHeight: '1.4'
                }}>
                  📊 이미지 내 확산경로를 분석하였습니다. 각 방제요소 가이드 참고하세요.
                </div>
              )}

              {/* Divider */}
              <div style={{ height: '1px', background: 'var(--bd)', margin: '2px 0' }} />

              {/* Model Selection (다중 선택) */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px' }}>
                {([
                  { id: 'KOSPS' as PredictionModel, color: 'var(--cyan)' },
                  { id: 'POSEIDON' as PredictionModel, color: 'var(--red)' },
                  { id: 'OpenDrift' as PredictionModel, color: 'var(--blue)' },
                ] as const).map(m => (
                  <div
                    key={m.id}
                    className={`prd-mc ${selectedModels.has(m.id) ? 'on' : ''}`}
                    onClick={() => {
                      const next = new Set(selectedModels)
                      if (next.has(m.id)) {
                        next.delete(m.id)
                      } else {
                        next.add(m.id)
                      }
                      onModelsChange(next)
                    }}
                    style={{ cursor: 'pointer' }}
                  >
                    <span className="prd-md" style={{ background: m.color }} />
                    {m.id}
                  </div>
                ))}
                <div
                  className={`prd-mc ${selectedModels.size === ALL_MODELS.length ? 'on' : ''}`}
                  onClick={() => {
                    if (selectedModels.size === ALL_MODELS.length) {
                      onModelsChange(new Set(['KOSPS']))
                    } else {
                      onModelsChange(new Set(ALL_MODELS))
                    }
                  }}
                  style={{ cursor: 'pointer' }}
                >
                  <span className="prd-md" style={{ background: 'var(--purple)' }} />
                  앙상블
                </div>
              </div>

              {/* Run Button */}
              <button
                className="prd-btn pri"
                style={{ padding: '7px', fontSize: '11px', marginTop: '2px' }}
                onClick={onRunSimulation}
                disabled={isRunningSimulation}
              >
                {isRunningSimulation ? '⏳ 실행 중...' : '🔬 확산예측 실행'}
              </button>
            </div>
          )}
        </div>

        {/* Incident Section */}
        <div className="border-b border-border">
          <div
            onClick={() => toggleSection('incident')}
            className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3 className="text-[13px] font-bold text-text-2 font-korean">
              사고정보
            </h3>
            <span className="text-[10px] text-text-3">
              {expandedSections.incident ? '▼' : '▶'}
            </span>
          </div>

          {expandedSections.incident && (
            <div className="px-4 pb-4 space-y-3">
              {/* Status Badge */}
              <div className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-semibold bg-[rgba(239,68,68,0.15)] text-status-red border border-[rgba(239,68,68,0.3)]">
                <span className="w-1.5 h-1.5 rounded-full bg-status-red animate-pulse" />
                진행중
              </div>

              {/* Info Grid */}
              <div className="grid gap-1">
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고코드</span>
                  <span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis ? `INC-2025-${String(selectedAnalysis.id).padStart(4, '0')}` : 'INC-2025-0042'}</span>
                </div>
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고명</span>
                  <span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis?.name || '씨프린스호'}</span>
                </div>
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고일시</span>
                  <span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis?.occurredAt || '2025-02-10 06:30'}</span>
                </div>
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">유종</span>
                  <span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis?.oilType || 'BUNKER_C'}</span>
                </div>
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">유출량</span>
                  <span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis ? `${selectedAnalysis.volume.toFixed(2)} kl` : '350.00 kl'}</span>
                </div>
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">담당자</span>
                  <span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis?.analyst || '남해청, 방재과'}</span>
                </div>
                <div className="flex items-baseline gap-1.5">
                  <span className="text-[10px] text-text-3 min-w-[52px] font-korean">위치</span>
                  <span className="text-[11px] text-status-orange font-semibold font-korean">{selectedAnalysis?.location || '여수 돌산 남방 5NM'}</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Impact Resources Section */}
        <div className="border-b border-border">
          <div
            onClick={() => toggleSection('impactResources')}
            className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3 className="text-[13px] font-bold text-text-2 font-korean">
              영향 민감자원
            </h3>
            <span className="text-[10px] text-text-3">
              {expandedSections.impactResources ? '▼' : '▶'}
            </span>
          </div>

          {expandedSections.impactResources && (
            <div className="px-4 pb-4">
              <p className="text-[11px] text-text-3">영향받는 민감자원 목록</p>
            </div>
          )}
        </div>

        {/* Info Layer Section */}
        <div className="border-b border-border">
          <div
            className="flex items-center justify-between p-4 hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3
              onClick={() => toggleSection('infoLayer')}
              className="text-[13px] font-bold text-text-1 font-korean cursor-pointer"
            >
              📂 정보 레이어
            </h3>
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <button
                onClick={(e) => {
                  e.stopPropagation()
                  // Get all layer IDs from layerTree recursively
                  const getAllLayerIds = (layers: Layer[]): string[] => {
                    const ids: string[] = []
                    layers?.forEach(layer => {
                      ids.push(layer.id)
                      if (layer.children) {
                        ids.push(...getAllLayerIds(layer.children))
                      }
                    })
                    return ids
                  }
                  const allIds = getAllLayerIds(effectiveLayers)
                  allIds.forEach(id => onToggleLayer(id, true))
                }}
                style={{
                  padding: '4px 8px',
                  fontSize: '10px',
                  fontWeight: 600,
                  fontFamily: 'var(--fK)',
                  border: '1px solid var(--cyan)',
                  borderRadius: 'var(--rS)',
                  background: 'transparent',
                  color: 'var(--cyan)',
                  cursor: 'pointer',
                  transition: '0.15s'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'rgba(6,182,212,0.1)'
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent'
                }}
              >
                전체 켜기
              </button>
              <button
                onClick={(e) => {
                  e.stopPropagation()
                  // Get all layer IDs from layerTree recursively
                  const getAllLayerIds = (layers: Layer[]): string[] => {
                    const ids: string[] = []
                    layers?.forEach(layer => {
                      ids.push(layer.id)
                      if (layer.children) {
                        ids.push(...getAllLayerIds(layer.children))
                      }
                    })
                    return ids
                  }
                  const allIds = getAllLayerIds(effectiveLayers)
                  allIds.forEach(id => onToggleLayer(id, false))
                }}
                style={{
                  padding: '4px 8px',
                  fontSize: '10px',
                  fontWeight: 600,
                  fontFamily: 'var(--fK)',
                  border: '1px solid var(--red)',
                  borderRadius: 'var(--rS)',
                  background: 'transparent',
                  color: 'var(--red)',
                  cursor: 'pointer',
                  transition: '0.15s'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'rgba(239,68,68,0.1)'
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent'
                }}
              >
                전체 끄기
              </button>
              <span
                onClick={() => toggleSection('infoLayer')}
                className="text-[10px] text-text-3 cursor-pointer"
              >
                {expandedSections.infoLayer ? '▼' : '▶'}
              </span>
            </div>
          </div>

          {expandedSections.infoLayer && (
            <div className="px-4 pb-2">
              {isLoading && effectiveLayers.length === 0 ? (
                <p className="text-[11px] text-text-3 py-2">레이어 로딩 중...</p>
              ) : effectiveLayers.length === 0 ? (
                <p className="text-[11px] text-text-3 py-2">레이어 데이터가 없습니다.</p>
              ) : (
                <LayerTree
                  layers={effectiveLayers}
                  enabledLayers={enabledLayers}
                  onToggleLayer={onToggleLayer}
                  layerColors={layerColors}
                  onColorChange={(id, color) => setLayerColors(prev => ({ ...prev, [id]: color }))}
                />
              )}

              {/* 레이어 스타일 조절 */}
              <div className="lyr-style-box">
                <div className="lyr-style-label">레이어 스타일</div>
                <div className="lyr-style-row">
                  <span className="lyr-style-name">투명도</span>
                  <input
                    type="range"
                    className="lyr-style-slider"
                    min={0} max={100} value={layerOpacity}
                    onChange={e => onLayerOpacityChange(Number(e.target.value))}
                  />
                  <span className="lyr-style-val">{layerOpacity}%</span>
                </div>
                <div className="lyr-style-row">
                  <span className="lyr-style-name">밝기</span>
                  <input
                    type="range"
                    className="lyr-style-slider"
                    min={0} max={100} value={layerBrightness}
                    onChange={e => onLayerBrightnessChange(Number(e.target.value))}
                  />
                  <span className="lyr-style-val">{layerBrightness}%</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Oil Boom Placement Guide Section */}
        <div className="border-b border-border">
          <div
            onClick={() => toggleSection('oilBoom')}
            className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
          >
            <h3 className="text-[13px] font-bold text-text-2 font-korean">
              🛡 오일펜스 배치 가이드
            </h3>
            <span className="text-[10px] text-text-3">
              {expandedSections.oilBoom ? '▼' : '▶'}
            </span>
          </div>

          {expandedSections.oilBoom && (
            <div className="px-4 pb-4" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>

              {/* Tab Buttons + Reset */}
              <div style={{ display: 'flex', gap: '6px' }}>
                {[
                  { id: 'ai' as const, label: 'AI 자동 추천' },
                  { id: 'manual' as const, label: '수동 배치' },
                  { id: 'simulation' as const, label: '시뮬레이션' }
                ].map(tab => (
                  <button
                    key={tab.id}
                    onClick={() => setBoomPlacementTab(tab.id)}
                    style={{
                      flex: 1,
                      padding: '6px 8px',
                      fontSize: '10px',
                      fontWeight: 600,
                      fontFamily: 'var(--fK)',
                      borderRadius: 'var(--rS)',
                      border: boomPlacementTab === tab.id ? '1px solid var(--orange)' : '1px solid var(--bd)',
                      background: boomPlacementTab === tab.id ? 'rgba(245,158,11,0.1)' : 'var(--bg0)',
                      color: boomPlacementTab === tab.id ? 'var(--orange)' : 'var(--t3)',
                      cursor: 'pointer',
                      transition: '0.15s'
                    }}
                  >
                    {tab.label}
                  </button>
                ))}
                <button
                  onClick={() => {
                    onBoomLinesChange([])
                    onDrawingBoomChange(false)
                    onDrawingPointsChange([])
                    onContainmentResultChange(null)
                    onAlgorithmSettingsChange({
                      currentOrthogonalCorrection: 15,
                      safetyMarginMinutes: 60,
                      minContainmentEfficiency: 80,
                      waveHeightCorrectionFactor: 1.0,
                    })
                  }}
                  disabled={boomLines.length === 0 && !isDrawingBoom && !containmentResult}
                  style={{
                    padding: '6px 10px',
                    fontSize: '10px',
                    fontWeight: 600,
                    fontFamily: 'var(--fK)',
                    borderRadius: 'var(--rS)',
                    border: '1px solid var(--bd)',
                    background: 'var(--bg0)',
                    color: (boomLines.length === 0 && !isDrawingBoom && !containmentResult) ? 'var(--t3)' : 'var(--red)',
                    cursor: (boomLines.length === 0 && !isDrawingBoom && !containmentResult) ? 'not-allowed' : 'pointer',
                    transition: '0.15s',
                    flexShrink: 0,
                  }}
                >
                  초기화
                </button>
              </div>

              {/* Key Metrics (동적) */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '6px' }}>
                {[
                  { value: String(boomLines.length), label: '배치 라인', color: 'var(--orange)' },
                  { value: boomLines.length > 0 ? `${(boomLines.reduce((s, l) => s + l.length, 0) / 1000).toFixed(1)}km` : '0km', label: '총 길이', color: 'var(--cyan)' },
                  { value: boomLines.length > 0 ? `${Math.round(boomLines.reduce((s, l) => s + l.efficiency, 0) / boomLines.length)}%` : '—', label: '평균 효율', color: 'var(--orange)' }
                ].map((metric, idx) => (
                  <div key={idx} style={{
                    padding: '10px 8px',
                    background: 'var(--bg0)',
                    border: '1px solid var(--bd)',
                    borderRadius: 'var(--rS)',
                    textAlign: 'center'
                  }}>
                    <div style={{ fontSize: '18px', fontWeight: 700, color: metric.color, fontFamily: 'var(--fM)', marginBottom: '2px' }}>
                      {metric.value}
                    </div>
                    <div style={{ fontSize: '8px', color: 'var(--t3)', fontFamily: 'var(--fK)' }}>
                      {metric.label}
                    </div>
                  </div>
                ))}
              </div>

              {/* ===== AI 자동 추천 탭 ===== */}
              {boomPlacementTab === 'ai' && (
                <>
                  <div style={{
                    padding: '12px',
                    background: 'rgba(245,158,11,0.05)',
                    border: '1px solid rgba(245,158,11,0.3)',
                    borderRadius: 'var(--rM)'
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '8px' }}>
                      <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: oilTrajectory.length > 0 ? 'var(--green)' : 'var(--t3)' }} />
                      <span style={{ fontSize: '10px', fontWeight: 700, color: oilTrajectory.length > 0 ? 'var(--green)' : 'var(--t3)', fontFamily: 'var(--fK)' }}>
                        {oilTrajectory.length > 0 ? '확산 데이터 준비 완료' : '확산 예측을 먼저 실행하세요'}
                      </span>
                    </div>

                    <h4 style={{ fontSize: '13px', fontWeight: 700, color: 'var(--t1)', fontFamily: 'var(--fK)', marginBottom: '8px' }}>
                      확산 예측 기반 최적 배치안
                    </h4>

                    <p style={{ fontSize: '9px', color: 'var(--t3)', fontFamily: 'var(--fK)', lineHeight: '1.5', marginBottom: '10px' }}>
                      {oilTrajectory.length > 0
                        ? '확산 궤적을 분석하여 해류 직교 방향 1차 방어선, U형 포위 2차 방어선, 연안 보호 3차 방어선을 자동 생성합니다.'
                        : '상단에서 확산 예측을 실행한 뒤 AI 배치를 적용할 수 있습니다.'
                      }
                    </p>

                    <button
                      onClick={() => {
                        const lines = generateAIBoomLines(
                          oilTrajectory,
                          { lat: incidentCoord.lat, lon: incidentCoord.lon },
                          algorithmSettings
                        )
                        onBoomLinesChange(lines)
                      }}
                      disabled={oilTrajectory.length === 0}
                      style={{
                        width: '100%',
                        padding: '10px',
                        fontSize: '11px',
                        fontWeight: 700,
                        fontFamily: 'var(--fK)',
                        background: oilTrajectory.length > 0 ? 'rgba(245,158,11,0.15)' : 'var(--bg0)',
                        border: oilTrajectory.length > 0 ? '2px solid var(--orange)' : '1px solid var(--bd)',
                        borderRadius: 'var(--rS)',
                        color: oilTrajectory.length > 0 ? 'var(--orange)' : 'var(--t3)',
                        cursor: oilTrajectory.length > 0 ? 'pointer' : 'not-allowed',
                        transition: '0.15s'
                      }}
                    >
                      🛡 추천 배치안 적용하기
                    </button>
                  </div>

                  {/* 알고리즘 설정 */}
                  <div>
                    <h4 style={{ fontSize: '11px', fontWeight: 700, color: 'var(--cyan)', fontFamily: 'var(--fK)', marginBottom: '8px', letterSpacing: '0.5px' }}>
                      📊 배치 알고리즘 설정
                    </h4>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                      {[
                        { label: '해류 직교 보정', key: 'currentOrthogonalCorrection' as const, unit: '°', value: algorithmSettings.currentOrthogonalCorrection },
                        { label: '안전 마진 (도달시간)', key: 'safetyMarginMinutes' as const, unit: '분', value: algorithmSettings.safetyMarginMinutes },
                        { label: '최소 차단 효율', key: 'minContainmentEfficiency' as const, unit: '%', value: algorithmSettings.minContainmentEfficiency },
                        { label: '파고 보정 계수', key: 'waveHeightCorrectionFactor' as const, unit: 'x', value: algorithmSettings.waveHeightCorrectionFactor },
                      ].map((setting) => (
                        <div key={setting.key} style={{
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                          padding: '6px 8px', background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)'
                        }}>
                          <span style={{ fontSize: '9px', color: 'var(--t3)', fontFamily: 'var(--fK)' }}>● {setting.label}</span>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
                            <input
                              type="number"
                              value={setting.value}
                              onChange={(e) => {
                                const val = parseFloat(e.target.value) || 0
                                onAlgorithmSettingsChange({ ...algorithmSettings, [setting.key]: val })
                              }}
                              className="boom-setting-input"
                              step={setting.key === 'waveHeightCorrectionFactor' ? 0.1 : 1}
                            />
                            <span style={{ fontSize: '9px', color: 'var(--orange)', fontFamily: 'var(--fK)' }}>{setting.unit}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </>
              )}

              {/* ===== 수동 배치 탭 ===== */}
              {boomPlacementTab === 'manual' && (
                <>
                  {/* 드로잉 컨트롤 */}
                  <div style={{ display: 'flex', gap: '6px' }}>
                    {!isDrawingBoom ? (
                      <button
                        onClick={() => { onDrawingBoomChange(true); onDrawingPointsChange([]) }}
                        style={{
                          flex: 1, padding: '10px', fontSize: '11px', fontWeight: 700, fontFamily: 'var(--fK)',
                          background: 'rgba(245,158,11,0.15)', border: '2px solid var(--orange)',
                          borderRadius: 'var(--rS)', color: 'var(--orange)', cursor: 'pointer', transition: '0.15s'
                        }}
                      >
                        🛡 배치 시작
                      </button>
                    ) : (
                      <>
                        <button
                          onClick={() => {
                            if (drawingPoints.length >= 2) {
                              const newLine: BoomLine = {
                                id: `boom-manual-${Date.now()}`,
                                name: `수동 방어선 ${boomLines.length + 1}`,
                                priority: 'HIGH',
                                type: '기타',
                                coords: [...drawingPoints],
                                length: computePolylineLength(drawingPoints),
                                angle: computeBearing(drawingPoints[0], drawingPoints[drawingPoints.length - 1]),
                                efficiency: 0,
                                status: 'PLANNED',
                              }
                              onBoomLinesChange([...boomLines, newLine])
                            }
                            onDrawingBoomChange(false)
                            onDrawingPointsChange([])
                          }}
                          disabled={drawingPoints.length < 2}
                          style={{
                            flex: 1, padding: '10px', fontSize: '11px', fontWeight: 700, fontFamily: 'var(--fK)',
                            background: drawingPoints.length >= 2 ? 'rgba(34,197,94,0.15)' : 'var(--bg0)',
                            border: drawingPoints.length >= 2 ? '2px solid var(--green)' : '1px solid var(--bd)',
                            borderRadius: 'var(--rS)',
                            color: drawingPoints.length >= 2 ? 'var(--green)' : 'var(--t3)',
                            cursor: drawingPoints.length >= 2 ? 'pointer' : 'not-allowed', transition: '0.15s'
                          }}
                        >
                          배치 완료 ({drawingPoints.length}점)
                        </button>
                        <button
                          onClick={() => { onDrawingBoomChange(false); onDrawingPointsChange([]) }}
                          style={{
                            padding: '10px 14px', fontSize: '11px', fontWeight: 700, fontFamily: 'var(--fK)',
                            background: 'rgba(239,68,68,0.1)', border: '1px solid var(--red)',
                            borderRadius: 'var(--rS)', color: 'var(--red)', cursor: 'pointer', transition: '0.15s'
                          }}
                        >
                          취소
                        </button>
                      </>
                    )}
                  </div>

                  {/* 드로잉 실시간 정보 */}
                  {isDrawingBoom && drawingPoints.length > 0 && (
                    <div style={{
                      padding: '8px 10px', background: 'rgba(245,158,11,0.05)',
                      border: '1px solid rgba(245,158,11,0.3)', borderRadius: 'var(--rS)',
                      display: 'flex', gap: '12px', fontSize: '10px', fontFamily: 'var(--fK)', color: 'var(--t2)'
                    }}>
                      <span>포인트: <strong style={{ color: 'var(--orange)', fontFamily: 'var(--fM)' }}>{drawingPoints.length}</strong></span>
                      <span>길이: <strong style={{ color: 'var(--cyan)', fontFamily: 'var(--fM)' }}>{computePolylineLength(drawingPoints).toFixed(0)}m</strong></span>
                      {drawingPoints.length >= 2 && (
                        <span>방위각: <strong style={{ color: 'var(--t1)', fontFamily: 'var(--fM)' }}>{computeBearing(drawingPoints[0], drawingPoints[drawingPoints.length - 1]).toFixed(0)}°</strong></span>
                      )}
                    </div>
                  )}

                  {/* 배치된 라인 목록 */}
                  {boomLines.length === 0 ? (
                    <p style={{ fontSize: '10px', color: 'var(--t3)', fontFamily: 'var(--fK)', textAlign: 'center', padding: '16px 0' }}>
                      배치된 오일펜스 라인이 없습니다.
                    </p>
                  ) : (
                    boomLines.map((line, idx) => (
                      <div key={line.id} style={{
                        padding: '10px', background: 'var(--bg0)', border: '1px solid var(--bd)',
                        borderLeft: `3px solid ${line.priority === 'CRITICAL' ? 'var(--red)' : line.priority === 'HIGH' ? 'var(--orange)' : 'var(--yellow)'}`,
                        borderRadius: 'var(--rS)'
                      }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '6px' }}>
                          <input
                            type="text"
                            value={line.name}
                            onChange={(e) => {
                              const updated = [...boomLines]
                              updated[idx] = { ...updated[idx], name: e.target.value }
                              onBoomLinesChange(updated)
                            }}
                            style={{
                              flex: 1, fontSize: '11px', fontWeight: 700, fontFamily: 'var(--fK)',
                              background: 'transparent', border: 'none', color: 'var(--t1)', outline: 'none'
                            }}
                          />
                          <button
                            onClick={() => onBoomLinesChange(boomLines.filter(l => l.id !== line.id))}
                            style={{
                              fontSize: '10px', color: 'var(--red)', background: 'none', border: 'none',
                              cursor: 'pointer', padding: '2px 6px'
                            }}
                          >
                            삭제
                          </button>
                        </div>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '6px', fontSize: '9px', fontFamily: 'var(--fK)' }}>
                          <div>
                            <span style={{ color: 'var(--t3)' }}>길이</span>
                            <div style={{ fontWeight: 700, color: 'var(--t1)', fontFamily: 'var(--fM)' }}>{line.length.toFixed(0)}m</div>
                          </div>
                          <div>
                            <span style={{ color: 'var(--t3)' }}>각도</span>
                            <div style={{ fontWeight: 700, color: 'var(--t1)', fontFamily: 'var(--fM)' }}>{line.angle.toFixed(0)}°</div>
                          </div>
                          <div>
                            <span style={{ color: 'var(--t3)' }}>우선순위</span>
                            <select
                              value={line.priority}
                              onChange={(e) => {
                                const updated = [...boomLines]
                                updated[idx] = { ...updated[idx], priority: e.target.value as BoomLine['priority'] }
                                onBoomLinesChange(updated)
                              }}
                              style={{
                                width: '100%', fontSize: '10px', fontWeight: 600, fontFamily: 'var(--fK)',
                                background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: '3px',
                                color: 'var(--t1)', padding: '2px', outline: 'none'
                              }}
                            >
                              <option value="CRITICAL">긴급</option>
                              <option value="HIGH">중요</option>
                              <option value="MEDIUM">보통</option>
                            </select>
                          </div>
                        </div>
                      </div>
                    ))
                  )}
                </>
              )}

              {/* ===== 시뮬레이션 탭 ===== */}
              {boomPlacementTab === 'simulation' && (
                <>
                  {/* 전제조건 체크 */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 10px',
                      background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)',
                      fontSize: '10px', fontFamily: 'var(--fK)'
                    }}>
                      <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: oilTrajectory.length > 0 ? 'var(--green)' : 'var(--red)' }} />
                      <span style={{ color: oilTrajectory.length > 0 ? 'var(--green)' : 'var(--t3)' }}>
                        확산 궤적 데이터 {oilTrajectory.length > 0 ? `(${oilTrajectory.length}개 입자)` : '없음'}
                      </span>
                    </div>
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 10px',
                      background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)',
                      fontSize: '10px', fontFamily: 'var(--fK)'
                    }}>
                      <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: boomLines.length > 0 ? 'var(--green)' : 'var(--red)' }} />
                      <span style={{ color: boomLines.length > 0 ? 'var(--green)' : 'var(--t3)' }}>
                        오일펜스 라인 {boomLines.length > 0 ? `(${boomLines.length}개 배치)` : '없음'}
                      </span>
                    </div>
                  </div>

                  {/* 실행 버튼 */}
                  <button
                    onClick={() => {
                      const result = runContainmentAnalysis(oilTrajectory, boomLines)
                      onContainmentResultChange(result)
                    }}
                    disabled={oilTrajectory.length === 0 || boomLines.length === 0}
                    style={{
                      width: '100%', padding: '10px', fontSize: '11px', fontWeight: 700, fontFamily: 'var(--fK)',
                      background: (oilTrajectory.length > 0 && boomLines.length > 0) ? 'rgba(6,182,212,0.15)' : 'var(--bg0)',
                      border: (oilTrajectory.length > 0 && boomLines.length > 0) ? '2px solid var(--cyan)' : '1px solid var(--bd)',
                      borderRadius: 'var(--rS)',
                      color: (oilTrajectory.length > 0 && boomLines.length > 0) ? 'var(--cyan)' : 'var(--t3)',
                      cursor: (oilTrajectory.length > 0 && boomLines.length > 0) ? 'pointer' : 'not-allowed',
                      transition: '0.15s'
                    }}
                  >
                    🔬 차단 시뮬레이션 실행
                  </button>

                  {/* 시뮬레이션 결과 */}
                  {containmentResult && containmentResult.totalParticles > 0 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                      {/* 전체 효율 */}
                      <div style={{
                        padding: '16px', background: 'rgba(6,182,212,0.05)',
                        border: '1px solid rgba(6,182,212,0.3)', borderRadius: 'var(--rM)', textAlign: 'center'
                      }}>
                        <div style={{ fontSize: '28px', fontWeight: 700, color: 'var(--cyan)', fontFamily: 'var(--fM)' }}>
                          {containmentResult.overallEfficiency}%
                        </div>
                        <div style={{ fontSize: '10px', color: 'var(--t3)', fontFamily: 'var(--fK)', marginTop: '2px' }}>
                          전체 차단 효율
                        </div>
                      </div>

                      {/* 차단/통과 카운트 */}
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px' }}>
                        <div style={{ padding: '10px', background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', textAlign: 'center' }}>
                          <div style={{ fontSize: '16px', fontWeight: 700, color: 'var(--green)', fontFamily: 'var(--fM)' }}>
                            {containmentResult.blockedParticles}
                          </div>
                          <div style={{ fontSize: '8px', color: 'var(--t3)', fontFamily: 'var(--fK)' }}>차단 입자</div>
                        </div>
                        <div style={{ padding: '10px', background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)', textAlign: 'center' }}>
                          <div style={{ fontSize: '16px', fontWeight: 700, color: 'var(--red)', fontFamily: 'var(--fM)' }}>
                            {containmentResult.passedParticles}
                          </div>
                          <div style={{ fontSize: '8px', color: 'var(--t3)', fontFamily: 'var(--fK)' }}>통과 입자</div>
                        </div>
                      </div>

                      {/* 효율 바 */}
                      <div className="boom-eff-bar">
                        <div className="boom-eff-fill" style={{
                          width: `${containmentResult.overallEfficiency}%`,
                          background: containmentResult.overallEfficiency >= 80 ? 'var(--green)' : containmentResult.overallEfficiency >= 50 ? 'var(--orange)' : 'var(--red)'
                        }} />
                      </div>

                      {/* 라인별 분석 */}
                      <div>
                        <h4 style={{ fontSize: '10px', fontWeight: 700, color: 'var(--t3)', fontFamily: 'var(--fK)', marginBottom: '6px' }}>
                          라인별 차단 분석
                        </h4>
                        {containmentResult.perLineResults.map((r) => (
                          <div key={r.boomLineId} style={{
                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                            padding: '6px 8px', marginBottom: '4px',
                            background: 'var(--bg0)', border: '1px solid var(--bd)', borderRadius: 'var(--rS)',
                            fontSize: '9px', fontFamily: 'var(--fK)'
                          }}>
                            <span style={{ color: 'var(--t2)', flex: 1 }}>{r.boomLineName}</span>
                            <span style={{ fontWeight: 700, color: r.efficiency >= 50 ? 'var(--green)' : 'var(--orange)', fontFamily: 'var(--fM)', marginLeft: '8px' }}>
                              {r.blocked}차단 / {r.efficiency}%
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </>
              )}

              {/* 배치된 방어선 카드 (AI/수동 공통 표시) */}
              {boomPlacementTab !== 'simulation' && boomLines.length > 0 && boomPlacementTab === 'ai' && (
                <>
                  {boomLines.map((line, idx) => {
                    const priorityColor = line.priority === 'CRITICAL' ? 'var(--red)' : line.priority === 'HIGH' ? 'var(--orange)' : 'var(--yellow)'
                    const priorityLabel = line.priority === 'CRITICAL' ? '긴급' : line.priority === 'HIGH' ? '중요' : '보통'
                    return (
                      <div key={line.id} style={{
                        padding: '10px', background: 'var(--bg0)', border: '1px solid var(--bd)',
                        borderLeft: `3px solid ${priorityColor}`, borderRadius: 'var(--rS)'
                      }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
                          <span style={{ fontSize: '11px', fontWeight: 700, color: 'var(--t1)', fontFamily: 'var(--fK)' }}>
                            🛡 {idx + 1}차 방어선 ({line.type})
                          </span>
                          <span style={{
                            padding: '2px 6px', fontSize: '8px', fontWeight: 700, fontFamily: 'var(--fK)',
                            background: `${priorityColor}20`, border: `1px solid ${priorityColor}`,
                            borderRadius: '3px', color: priorityColor
                          }}>
                            {priorityLabel}
                          </span>
                        </div>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px', marginBottom: '6px' }}>
                          <div>
                            <span style={{ fontSize: '8px', color: 'var(--t3)', fontFamily: 'var(--fK)' }}>길이</span>
                            <div style={{ fontSize: '14px', fontWeight: 700, color: 'var(--t1)', fontFamily: 'var(--fM)' }}>
                              {line.length.toFixed(0)}m
                            </div>
                          </div>
                          <div>
                            <span style={{ fontSize: '8px', color: 'var(--t3)', fontFamily: 'var(--fK)' }}>각도</span>
                            <div style={{ fontSize: '14px', fontWeight: 700, color: 'var(--t1)', fontFamily: 'var(--fM)' }}>
                              {line.angle.toFixed(0)}°
                            </div>
                          </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                          <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: line.efficiency >= 80 ? 'var(--green)' : 'var(--orange)' }} />
                          <span style={{ fontSize: '9px', fontWeight: 600, color: line.efficiency >= 80 ? 'var(--green)' : 'var(--orange)', fontFamily: 'var(--fK)' }}>
                            차단 효율 {line.efficiency}%
                          </span>
                        </div>
                      </div>
                    )
                  })}
                </>
              )}

            </div>
          )}
        </div>
      </div>
    </div>
  )
}