import { useState, useMemo } from 'react'
import type { PredictionDetail, SimulationSummary, CenterPoint } from '../services/predictionApi'
import type { DisplayControls } from './OilSpillView'
import { haversineDistance, computeBearing } from '@common/utils/geo'

interface AnalysisResult {
  area: number
  particleCount: number
  particlePercent: number
  sensitiveCount: number
}


interface RightPanelProps {
  onOpenBacktrack?: () => void
  onOpenRecalc?: () => void
  onOpenReport?: () => void
  detail?: PredictionDetail | null
  summary?: SimulationSummary | null
  displayControls?: DisplayControls
  onDisplayControlsChange?: (controls: DisplayControls) => void
  windHydrModel?: string
  windHydrModelOptions?: string[]
  onWindHydrModelChange?: (model: string) => void
  analysisTab?: 'polygon' | 'circle'
  onSwitchAnalysisTab?: (tab: 'polygon' | 'circle') => void
  drawAnalysisMode?: 'polygon' | null
  analysisPolygonPoints?: Array<{ lat: number; lon: number }>
  circleRadiusNm?: number
  onCircleRadiusChange?: (nm: number) => void
  analysisResult?: AnalysisResult | null
  incidentCoord?: { lat: number; lon: number } | null
  centerPoints?: CenterPoint[]
  predictionTime?: number
  boomBlockedVolume?: number
  onStartPolygonDraw?: () => void
  onRunPolygonAnalysis?: () => void
  onRunCircleAnalysis?: () => void
  onCancelAnalysis?: () => void
  onClearAnalysis?: () => void
}

export function RightPanel({
  onOpenBacktrack, onOpenRecalc, onOpenReport, detail, summary,
  displayControls, onDisplayControlsChange,
  windHydrModel, windHydrModelOptions = [], onWindHydrModelChange,
  analysisTab = 'polygon', onSwitchAnalysisTab,
  drawAnalysisMode, analysisPolygonPoints = [],
  circleRadiusNm = 5, onCircleRadiusChange,
  analysisResult,
  incidentCoord,
  centerPoints,
  predictionTime,
  boomBlockedVolume = 0,
  onStartPolygonDraw, onRunPolygonAnalysis, onRunCircleAnalysis,
  onCancelAnalysis, onClearAnalysis,
}: RightPanelProps) {
  const vessel = detail?.vessels?.[0]
  const vessel2 = detail?.vessels?.[1]
  const spill = detail?.spill
  const insurance = vessel?.insuranceData as Array<{ type: string; insurer: string; value: string; currency: string }> | null
  const [shipExpanded, setShipExpanded] = useState(false)
  const [insuranceExpanded, setInsuranceExpanded] = useState(false)

  const weatheringStatus = useMemo(() => {
    if (!summary) return null;
    const total = summary.remainingVolume + summary.evaporationVolume
      + summary.dispersionVolume + summary.beachedVolume + boomBlockedVolume;
    if (total <= 0) return null;
    const pct = (v: number) => Math.round((v / total) * 100);
    return {
      surface: pct(summary.remainingVolume),
      evaporation: pct(summary.evaporationVolume),
      dispersion: pct(summary.dispersionVolume),
      boom: pct(boomBlockedVolume),
      beached: pct(summary.beachedVolume),
    };
  }, [summary, boomBlockedVolume])

  const spreadSummary = useMemo(() => {
    if (!incidentCoord || !centerPoints || centerPoints.length === 0) return null
    const finalPoint = [...centerPoints].sort((a, b) => b.time - a.time)[0]
    const distM = haversineDistance(incidentCoord, { lat: finalPoint.lat, lon: finalPoint.lon })
    const distKm = distM / 1000
    const bearing = computeBearing(incidentCoord, { lat: finalPoint.lat, lon: finalPoint.lon })
    const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']
    const dirLabel = directions[Math.round(bearing / 45) % 8]
    const speedMs = predictionTime && predictionTime > 0 ? distM / (predictionTime * 3600) : null
    return {
      area: summary?.pollutionArea ?? null,
      distance: distKm,
      directionLabel: `${dirLabel} ${Math.round(bearing)}°`,
      speed: speedMs,
    }
  }, [incidentCoord, centerPoints, summary, predictionTime])

  return (
    <div className="w-[300px] min-w-[300px] bg-bg-1 border-l border-border flex flex-col">
      {/* Tab Header */}
      <div className="flex border-b border-border">
        <button className="flex-1 py-3 text-center text-xs font-semibold text-primary-cyan border-b-2 border-primary-cyan transition-all font-korean">
          분석 요약
        </button>
      </div>

      {/* Scrollable Content */}
      <div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent">

        {/* 표시 정보 제어 */}
        <Section title="표시 정보 제어">
          <div className="grid grid-cols-2 gap-x-2.5 gap-y-1">
            <ControlledCheckbox
              checked={displayControls?.showCurrent ?? true}
              onChange={(v) => onDisplayControlsChange?.({ ...displayControls!, showCurrent: v })}
            >유향/유속</ControlledCheckbox>
            <ControlledCheckbox
              checked={displayControls?.showWind ?? true}
              onChange={(v) => onDisplayControlsChange?.({ ...displayControls!, showWind: v })}
            >풍향/풍속</ControlledCheckbox>
            <ControlledCheckbox
              checked={displayControls?.showBeached ?? false}
              onChange={(v) => onDisplayControlsChange?.({ ...displayControls!, showBeached: v })}
            >해안부착</ControlledCheckbox>
            <ControlledCheckbox
              checked={displayControls?.showSensitiveResources ?? false}
              onChange={(v) => onDisplayControlsChange?.({ ...displayControls!, showSensitiveResources: v })}
            >
              민감자원
            </ControlledCheckbox>
            <ControlledCheckbox
              checked={displayControls?.showTimeLabel ?? false}
              onChange={(v) => onDisplayControlsChange?.({ ...displayControls!, showTimeLabel: v })}
            >시간 표시</ControlledCheckbox>
          </div>
          {windHydrModelOptions.length > 1 && (
            <div className="flex items-center gap-2 mt-1.5">
              <span className="text-[9px] text-text-3 font-korean whitespace-nowrap">데이터 모델</span>
              <select
                value={windHydrModel}
                onChange={e => onWindHydrModelChange?.(e.target.value)}
                className="flex-1 text-[9px] bg-bg-3 border border-border rounded px-1 py-0.5 text-text-2 font-korean"
              >
                {windHydrModelOptions.map(m => (
                  <option key={m} value={m}>{m}</option>
                ))}
              </select>
            </div>
          )}
        </Section>

        {/* 오염분석 */}
        <Section title="오염분석">
          {/* 탭 전환 */}
          <div className="flex gap-[3px] mb-2">
            {(['polygon', 'circle'] as const).map((tab) => (
              <button
                key={tab}
                onClick={() => { onSwitchAnalysisTab?.(tab); onClearAnalysis?.() }}
                className={`flex-1 py-1.5 px-1 rounded text-[9px] font-semibold font-korean border transition-colors ${
                  analysisTab === tab
                    ? 'border-primary-cyan bg-[rgba(6,182,212,0.08)] text-primary-cyan'
                    : 'border-border bg-bg-3 text-text-3 hover:text-text-2'
                }`}
              >
                {tab === 'polygon' ? '다각형 분석' : '원 분석'}
              </button>
            ))}
          </div>

          {/* 다각형 패널 */}
          {analysisTab === 'polygon' && (
            <div>
              <p className="text-[9px] text-text-3 font-korean mb-2 leading-relaxed">
                지도에서 다각형 영역을 지정하여 해당 범위 내 오염도를 분석합니다.
              </p>
              {!drawAnalysisMode && !analysisResult && (
                <button
                  onClick={onStartPolygonDraw}
                  className="w-full py-2 rounded text-[10px] font-bold font-korean text-white mb-0 transition-opacity hover:opacity-90"
                  style={{ background: 'linear-gradient(135deg, var(--purple), var(--cyan))' }}
                >
                  📐 다각형 분석수행
                </button>
              )}
              {drawAnalysisMode === 'polygon' && (
                <div className="space-y-2">
                  <div className="text-[9px] text-purple-400 font-korean bg-[rgba(168,85,247,0.08)] rounded px-2 py-1.5 leading-relaxed">
                    지도를 클릭하여 꼭짓점을 추가하세요<br />
                    <span className="text-text-3">현재 {analysisPolygonPoints.length}개 선택됨</span>
                  </div>
                  <div className="flex gap-1.5">
                    <button
                      onClick={onRunPolygonAnalysis}
                      disabled={analysisPolygonPoints.length < 3}
                      className="flex-1 py-1.5 rounded text-[10px] font-bold font-korean text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
                      style={{ background: 'linear-gradient(135deg, var(--purple), var(--cyan))' }}
                    >
                      분석 실행
                    </button>
                    <button
                      onClick={onCancelAnalysis}
                      className="py-1.5 px-2 rounded text-[10px] font-semibold font-korean border border-border text-text-3 hover:text-text-2 transition-colors"
                    >
                      취소
                    </button>
                  </div>
                </div>
              )}
              {analysisResult && !drawAnalysisMode && (
                <PollResult result={analysisResult} summary={summary} onClear={onClearAnalysis} onRerun={onStartPolygonDraw} />
              )}
            </div>
          )}

          {/* 원 분석 패널 */}
          {analysisTab === 'circle' && (
            <div>
              <p className="text-[9px] text-text-3 font-korean mb-2 leading-relaxed">
                반경(NM)을 지정하면 사고지점 기준 원형 영역의 오염도를 분석합니다.
              </p>
              <div className="text-[9px] font-semibold text-text-2 font-korean mb-1.5">반경 선택 (NM)</div>
              <div className="flex flex-wrap gap-1 mb-2">
                {[1, 3, 5, 10, 15, 20, 30, 50].map((nm) => (
                  <button
                    key={nm}
                    onClick={() => onCircleRadiusChange?.(nm)}
                    className={`w-8 h-7 rounded text-[10px] font-semibold font-mono border transition-all ${
                      circleRadiusNm === nm
                        ? 'border-primary-cyan bg-[rgba(6,182,212,0.1)] text-primary-cyan'
                        : 'border-border bg-bg-0 text-text-3 hover:text-text-2'
                    }`}
                  >
                    {nm}
                  </button>
                ))}
              </div>
              <div className="flex items-center gap-1.5 mb-2.5">
                <span className="text-[9px] text-text-3 font-korean whitespace-nowrap">직접 입력</span>
                <input
                  type="number"
                  min="0.1"
                  max="100"
                  step="0.1"
                  value={circleRadiusNm}
                  onChange={(e) => onCircleRadiusChange?.(parseFloat(e.target.value) || 0.1)}
                  className="w-14 text-center py-1 px-1 bg-bg-0 border border-border rounded text-[11px] font-mono text-text-1 outline-none focus:border-primary-cyan"
                  style={{ colorScheme: 'dark' }}
                />
                <span className="text-[9px] text-text-3 font-korean">NM</span>
                <button
                  onClick={onRunCircleAnalysis}
                  className="ml-auto py-1 px-3 rounded text-[9px] font-bold font-korean text-white transition-opacity hover:opacity-90"
                  style={{ background: 'linear-gradient(135deg, var(--cyan), var(--blue))' }}
                >
                  분석 실행
                </button>
              </div>
              {analysisResult && (
                <PollResult result={analysisResult} summary={summary} onClear={onClearAnalysis} radiusNm={circleRadiusNm} />
              )}
            </div>
          )}
        </Section>

        {/* 오염 종합 상황 */}
        <Section title="오염 종합 상황" badge="위험" badgeColor="red">
          <div className="grid grid-cols-2 gap-0.5 text-[9px]">
            <StatBox label="유출량" value={spill?.volume != null ? spill.volume.toFixed(2) : '—'} unit={spill?.unit || 'kl'} color="var(--t1)" />
            <StatBox label="풍화량" value={summary ? summary.weatheredVolume.toFixed(2) : '—'} unit="m³" color="var(--orange)" />
            <StatBox label="해상잔존" value={summary ? summary.remainingVolume.toFixed(2) : '—'} unit="m³" color="var(--blue)" />
            <StatBox label="연안부착" value={summary ? summary.beachedVolume.toFixed(2) : '—'} unit="m³" color="var(--red)" />
            <div className="col-span-2">
              <StatBox label="오염해역면적" value={summary ? summary.pollutionArea.toFixed(2) : '—'} unit="km²" color="var(--cyan)" />
            </div>
          </div>
        </Section>

        {/* 확산 예측 요약 */}
        <Section title={`확산 예측 요약 (+${predictionTime ?? 18}h)`} badge="위험" badgeColor="red">
          <div className="grid grid-cols-2 gap-0.5 text-[9px]">
            <PredictionCard value={spreadSummary?.area != null ? `${spreadSummary.area.toFixed(1)} km²` : '—'} label="영향 면적" color="var(--red)" />
            <PredictionCard value={spreadSummary?.distance != null ? `${spreadSummary.distance.toFixed(1)} km` : '—'} label="확산 거리" color="var(--orange)" />
            <PredictionCard value={spreadSummary?.directionLabel ?? '—'} label="확산 방향" color="var(--cyan)" />
            <PredictionCard value={spreadSummary?.speed != null ? `${spreadSummary.speed.toFixed(2)} m/s` : '—'} label="확산 속도" color="var(--t1)" />
          </div>
        </Section>

        {/* 유출유 풍화 상태 */}
        <Section title="유출유 풍화 상태">
          <div className="flex flex-col gap-[3px] text-[8px]">
            {weatheringStatus ? (
              <>
                <ProgressBar label="수면잔류" value={weatheringStatus.surface}     color="var(--blue)" />
                <ProgressBar label="증발"     value={weatheringStatus.evaporation} color="var(--cyan)" />
                <ProgressBar label="분산"     value={weatheringStatus.dispersion}  color="var(--green)" />
                <ProgressBar label="펜스차단" value={weatheringStatus.boom}        color="var(--boom)" />
                <ProgressBar label="해안도달" value={weatheringStatus.beached}     color="var(--red)" />
              </>
            ) : (
              <p className="text-[9px] text-text-3 font-korean text-center py-2">시뮬레이션 실행 후 표시됩니다</p>
            )}
          </div>
        </Section>

        {/* 사고 선박 제원 */}
        <CollapsibleSection
          title="🚢 사고 선박 제원"
          expanded={shipExpanded}
          onToggle={() => setShipExpanded(!shipExpanded)}
        >
          <div className="space-y-2">
            {/* 선박 카드 */}
            <div className="flex items-center gap-2 p-2 border border-[rgba(6,182,212,0.15)] rounded-md" style={{
              background: 'linear-gradient(135deg, rgba(6,182,212,0.06), rgba(168,85,247,0.04))',
            }}>
              <div className="w-[30px] h-[30px] rounded-md flex items-center justify-center text-[15px]" style={{
                background: 'rgba(6,182,212,0.1)',
                border: '1px solid rgba(6,182,212,0.2)',
              }}>🚢</div>
              <div className="flex-1">
                <div className="text-[11px] font-bold text-text-1 font-korean">{vessel?.vesselNm || '—'}</div>
                <div className="text-[8px] text-text-3 font-mono">IMO {vessel?.imoNo || '—'} · {vessel?.vesselTp || '—'}</div>
              </div>
              <span className="text-[7px] px-2 py-0.5 rounded bg-[rgba(239,68,68,0.12)] text-status-red font-bold">사고</span>
            </div>

            {/* 제원 */}
            <div className="grid grid-cols-3 gap-1">
              <SpecCard value={vessel?.loaM?.toFixed(1) || '—'} label="전장 LOA(m)" color="var(--purple)" />
              <SpecCard value={vessel?.breadthM?.toFixed(1) || '—'} label="형폭 B(m)" color="var(--cyan)" />
              <SpecCard value={vessel?.draftM?.toFixed(1) || '—'} label="흘수 d(m)" color="var(--green)" />
            </div>

            <div className="space-y-0.5 text-[9px] font-korean">
              <InfoRow label="총톤수(GT)" value={vessel?.gt ? `${vessel.gt.toLocaleString()}톤` : '—'} />
              <InfoRow label="재화중량(DWT)" value={vessel?.dwt ? `${vessel.dwt.toLocaleString()}톤` : '—'} />
              <InfoRow label="건조" value={vessel?.builtYr ? `${vessel.builtYr}` : '—'} />
              <InfoRow label="주기관" value={vessel?.engineDc || '—'} mono />
              <InfoRow label="선적" value={vessel?.flagCd || '—'} />
              <InfoRow label="호출부호" value={vessel?.callsign || '—'} mono />
            </div>

            {/* 충돌 상대 */}
            {vessel2 && (
            <div className="p-1.5 bg-[rgba(249,115,22,0.04)] border border-[rgba(249,115,22,0.12)] rounded">
              <div className="text-[8px] font-bold text-status-orange font-korean mb-1">⚠ 충돌 상대: {vessel2.vesselNm}</div>
              <div className="text-[8px] text-text-3 font-korean leading-relaxed">
                {vessel2.flagCd} {vessel2.vesselTp} {vessel2.gt ? `${vessel2.gt.toLocaleString()}GT` : ''}
              </div>
            </div>
            )}
          </div>
        </CollapsibleSection>

        {/* 선주 / 보험 */}
        <CollapsibleSection
          title="🏢 선주 / 보험"
          expanded={insuranceExpanded}
          onToggle={() => setInsuranceExpanded(!insuranceExpanded)}
        >
          <div className="space-y-2">
            {insurance && insurance.length > 0 ? (
              <>
                {insurance.filter(ins => ins.type === 'P&I').map((ins, i) => (
                  <InsuranceCard key={`pi-${i}`} title="🚢 P&I" color="cyan" items={[
                    { label: '보험사', value: ins.insurer },
                    { label: '한도', value: `${ins.currency} ${ins.value}`, mono: true },
                  ]} />
                ))}
                {insurance.filter(ins => ins.type === 'H&M').map((ins, i) => (
                  <InsuranceCard key={`hm-${i}`} title="🚢 선체보험 (H&M)" color="cyan" items={[
                    { label: '보험사', value: ins.insurer },
                    { label: '보험가액', value: `${ins.currency} ${ins.value}`, mono: true },
                  ]} />
                ))}
                {insurance.filter(ins => ins.type === 'CLC').map((ins, i) => (
                  <InsuranceCard key={`clc-${i}`} title="🛢 유류오염배상 (CLC)" color="red" items={[
                    { label: '발급기관', value: ins.insurer },
                    { label: 'CLC 한도', value: `${ins.currency} ${ins.value}`, mono: true },
                  ]} />
                ))}
              </>
            ) : (
              <div className="text-[9px] text-text-3 font-korean text-center py-4">보험 정보가 없습니다.</div>
            )}
          </div>
        </CollapsibleSection>
      </div>

      {/* Bottom Action Buttons */}
      <div className="flex gap-1.5 p-3 border-t border-border">
        <button className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-boom to-[#d97706] text-black font-korean">
          💾 저장
        </button>
        <button
          onClick={onOpenRecalc}
          className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-[rgba(249,115,22,0.1)] border border-[rgba(249,115,22,0.3)] text-status-orange font-korean"
        >
          🔄 재계산
        </button>
        <button
          onClick={onOpenReport}
          className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-primary-cyan to-primary-blue text-white font-korean"
        >
          📄 보고서
        </button>
        <button
          onClick={onOpenBacktrack}
          className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-[rgba(168,85,247,0.1)] border border-[rgba(168,85,247,0.3)] text-purple-500 font-korean"
        >
          🔍 역추적
        </button>
      </div>
    </div>
  )
}

// Helper Components
function Section({
  title,
  badge,
  badgeColor,
  children
}: {
  title: string
  badge?: string
  badgeColor?: 'red' | 'green'
  children: React.ReactNode
}) {
  return (
    <div className="bg-bg-3 border border-border rounded-md p-3.5 mb-2.5">
      <div className="flex items-center justify-between mb-2.5">
        <h4 className="text-xs font-semibold text-text-2 font-korean">{title}</h4>
        {badge && (
          <span
            className={`text-[10px] font-semibold px-2 py-1 rounded-full ${
              badgeColor === 'red'
                ? 'bg-[rgba(239,68,68,0.15)] text-status-red'
                : 'bg-[rgba(34,197,94,0.15)] text-status-green'
            }`}
          >
            {badge}
          </span>
        )}
      </div>
      {children}
    </div>
  )
}

function ControlledCheckbox({
  checked,
  onChange,
  children,
  disabled = false,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
  children: string;
  disabled?: boolean;
}) {
  return (
    <label
      className={`flex items-center gap-1.5 text-[10px] font-korean cursor-pointer ${
        disabled ? 'text-text-3 cursor-not-allowed opacity-40' : 'text-text-2'
      }`}
    >
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange(e.target.checked)}
        className="w-[13px] h-[13px] accent-[var(--cyan)]"
      />
      {children}
    </label>
  );
}

function StatBox({
  label,
  value,
  unit,
  color
}: {
  label: string
  value: string
  unit: string
  color: string
}) {
  return (
    <div className="flex justify-between px-2 py-1 bg-bg-0 border border-border rounded-[3px]">
      <span className="text-text-3 font-korean">
        {label}
      </span>
      <span style={{ fontWeight: 700, color, fontFamily: 'var(--fM)' }}>
        {value} <small className="font-normal text-text-3">{unit}</small>
      </span>
    </div>
  )
}

function PredictionCard({ value, label, color }: { value: string; label: string; color: string }) {
  return (
    <div className="flex justify-between px-2 py-1 bg-bg-0 border border-border rounded-[3px] text-[9px]">
      <span className="text-text-3 font-korean">{label}</span>
      <span style={{ fontWeight: 700, color, fontFamily: 'var(--fM)' }}>{value}</span>
    </div>
  )
}

function ProgressBar({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div className="flex items-center gap-1">
      <span className="text-text-3 font-korean" style={{ minWidth: '38px' }}>
        {label}
      </span>
      <div
        className="flex-1 h-[5px] overflow-hidden rounded-[3px]"
        style={{ background: 'rgba(255,255,255,0.05)' }}
      >
        <div
          style={{ height: '100%', width: `${value}%`, background: color, borderRadius: '3px' }}
        />
      </div>
      <span
        style={{ color, minWidth: '28px' }}
        className="font-semibold text-right font-mono"
      >
        {value}%
      </span>
    </div>
  )
}

function CollapsibleSection({
  title,
  expanded,
  onToggle,
  children
}: {
  title: string
  expanded: boolean
  onToggle: () => void
  children: React.ReactNode
}) {
  return (
    <div className="bg-bg-3 border border-border rounded-md p-3.5 mb-2.5">
      <div
        className="flex items-center justify-between cursor-pointer mb-2"
        onClick={onToggle}
      >
        <h4 className="text-xs font-semibold text-text-2 font-korean">{title}</h4>
        <span className="text-[10px] text-text-3">{expanded ? '▾' : '▸'}</span>
      </div>
      {expanded && children}
    </div>
  )
}

function SpecCard({ value, label, color }: { value: string; label: string; color: string }) {
  return (
    <div className="text-center py-[6px] px-0.5 bg-bg-0 border border-border rounded-md">
      <div
        style={{ color }}
        className="text-xs font-extrabold font-mono"
      >
        {value}
      </div>
      <div className="text-[7px] text-text-3 font-korean">
        {label}
      </div>
    </div>
  )
}

function InfoRow({
  label,
  value,
  mono,
  valueColor
}: {
  label: string
  value: string
  mono?: boolean
  valueColor?: string
}) {
  return (
    <div className="flex justify-between py-[3px] px-[6px] bg-bg-0 rounded-[3px]">
      <span className="text-text-3">{label}</span>
      <span
        style={{ color: valueColor || 'var(--t1)' }}
        className={`font-semibold${mono ? ' font-mono' : ''}`}
      >
        {value}
      </span>
    </div>
  )
}

function InsuranceCard({
  title,
  color,
  items
}: {
  title: string
  color: 'cyan' | 'purple' | 'red'
  items: Array<{ label: string; value: string; mono?: boolean; valueColor?: string }>
}) {
  const colorMap = {
    cyan: {
      border: 'rgba(6,182,212,0.15)',
      bg: 'rgba(6,182,212,0.02)',
      text: 'var(--cyan)'
    },
    purple: {
      border: 'rgba(168,85,247,0.15)',
      bg: 'rgba(168,85,247,0.02)',
      text: 'var(--purple)'
    },
    red: {
      border: 'rgba(239,68,68,0.15)',
      bg: 'rgba(239,68,68,0.02)',
      text: 'var(--red)'
    }
  }

  const colors = colorMap[color]

  return (
    <div
      className="rounded-md"
      style={{
        padding: '6px 8px',
        border: `1px solid ${colors.border}`,
        background: colors.bg
      }}
    >
      <div
        style={{ color: colors.text }}
        className="text-[8px] font-bold font-korean mb-1"
      >
        {title}
      </div>
      <div className="space-y-0.5 text-[8px] font-korean">
        {items.map((item, i) => (
          <div
            key={i}
            className="flex justify-between py-0.5 px-1"
          >
            <span className="text-text-3">{item.label}</span>
            <span
              style={{ color: item.valueColor || 'var(--t1)' }}
              className={`font-semibold${item.mono ? ' font-mono' : ''}`}
            >
              {item.value}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}

function PollResult({
  result,
  summary,
  onClear,
  onRerun,
  radiusNm,
}: {
  result: AnalysisResult
  summary?: SimulationSummary | null
  onClear?: () => void
  onRerun?: () => void
  radiusNm?: number
}) {
  const pollutedArea = (result.area * result.particlePercent / 100).toFixed(2)
  return (
    <div className="mt-1 p-2.5 bg-bg-0 border border-[rgba(168,85,247,0.2)] rounded-md" style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, var(--purple), var(--cyan))' }} />
      {radiusNm && (
        <div className="flex justify-between items-center mb-2">
          <span className="text-[10px] font-semibold text-text-1 font-korean">분석 결과</span>
          <span className="text-[9px] font-semibold text-primary-cyan font-mono">반경 {radiusNm} NM</span>
        </div>
      )}
      <div className="grid grid-cols-3 gap-1 mb-2">
        <div className="text-center py-1.5 px-1 bg-bg-3 rounded">
          <div className="text-[13px] font-bold font-mono" style={{ color: 'var(--red)' }}>{result.area.toFixed(2)}</div>
          <div className="text-[7px] text-text-3 font-korean mt-0.5">분석면적(km²)</div>
        </div>
        <div className="text-center py-1.5 px-1 bg-bg-3 rounded">
          <div className="text-[13px] font-bold font-mono" style={{ color: 'var(--orange)' }}>{result.particlePercent}%</div>
          <div className="text-[7px] text-text-3 font-korean mt-0.5">오염비율</div>
        </div>
        <div className="text-center py-1.5 px-1 bg-bg-3 rounded">
          <div className="text-[13px] font-bold font-mono" style={{ color: 'var(--cyan)' }}>{pollutedArea}</div>
          <div className="text-[7px] text-text-3 font-korean mt-0.5">오염면적(km²)</div>
        </div>
      </div>
      <div className="space-y-1 text-[9px] font-korean">
        {summary && (
          <div className="flex justify-between">
            <span className="text-text-3">해상잔존량</span>
            <span className="font-semibold font-mono" style={{ color: 'var(--blue)' }}>{summary.remainingVolume.toFixed(2)} m³</span>
          </div>
        )}
        {summary && (
          <div className="flex justify-between">
            <span className="text-text-3">연안부착량</span>
            <span className="font-semibold font-mono" style={{ color: 'var(--red)' }}>{summary.beachedVolume.toFixed(2)} m³</span>
          </div>
        )}
        <div className="flex justify-between">
          <span className="text-text-3">민감자원 포함</span>
          <span className="font-semibold font-mono" style={{ color: 'var(--orange)' }}>{result.sensitiveCount}개소</span>
        </div>
      </div>
      <div className="flex gap-1.5 mt-2">
        <button
          onClick={onClear}
          className="flex-1 py-1.5 rounded text-[9px] font-semibold font-korean border border-border text-text-3 hover:text-text-2 transition-colors"
        >
          초기화
        </button>
        {onRerun && (
          <button
            onClick={onRerun}
            className="flex-1 py-1.5 rounded text-[9px] font-semibold font-korean border border-[rgba(168,85,247,0.3)] text-purple-400 hover:bg-[rgba(168,85,247,0.08)] transition-colors"
          >
            재분석
          </button>
        )}
      </div>
    </div>
  )
}