import { useState, useRef, useEffect } from 'react';
import { fetchHnsAnalyses, type HnsAnalysisItem } from '../services/hnsApi';

// ─── Types ──────────────────────────────────────────────
type Severity = 'CRITICAL' | 'HIGH' | 'MEDIUM' | 'RESOLVED';
type ViewTab = 0 | 1 | 2;

interface HnsScenario {
  id: string;
  name: string;
  severity: Severity;
  timeStep: string;
  datetime: string;
  wind: string;
  maxConc: string;
  idlhRadius: string;
  erpg2: string;
  population: string;
  description: string;
  detail: {
    maxConc: string;
    idlhRadius: string;
    erpg2: string;
    windDir: string;
    windSpeed: string;
    population: string;
    spillAmount: string;
  };
  zones: { idlh: string; erpg2: string; erpg1: string; twa: string };
  weather: {
    dir: string;
    speed: string;
    temp: string;
    stability: string;
    humidity: string;
    mixHeight: string;
  };
  actions: string[];
}

interface HnsMaterial {
  key: string;
  name: string;
  mw: string;
  bp: string;
  fp: string;
  idlh: string;
  erpg2: string;
}

const SEVERITY_STYLE: Record<Severity, { bg: string; color: string }> = {
  CRITICAL: { bg: 'rgba(239,68,68,0.15)', color: 'var(--color-danger)' },
  HIGH: { bg: 'rgba(249,115,22,0.15)', color: 'var(--color-warning)' },
  MEDIUM: { bg: 'rgba(234,179,8,0.15)', color: 'var(--color-caution)' },
  RESOLVED: { bg: 'rgba(34,197,94,0.15)', color: 'var(--color-success)' },
};

// ─── Mock Data (시나리오 시뮬레이션 엔진 미구현 — 프론트 상수 유지) ──
const MOCK_SCENARIOS: HnsScenario[] = [
  {
    id: 'S-01',
    name: '유출 직후 (초기 확산)',
    severity: 'CRITICAL',
    timeStep: 'T+0h',
    datetime: '2024.11.03 08:00 KST',
    wind: '풍속 5.2m/s SW',
    maxConc: '850 ppm',
    idlhRadius: '1.2 km',
    erpg2: '2.8 km',
    population: '3,200명',
    description:
      '톨루엔 2.5톤 순간 유출. SW 풍향으로 온산 산업단지 방향 확산. IDLH 초과 구역 발생.',
    detail: {
      maxConc: '850ppm',
      idlhRadius: '1.2km',
      erpg2: '2.8km',
      windDir: 'SW 225°',
      windSpeed: '5.2 m/s',
      population: '3,200명',
      spillAmount: '2.5 ton',
    },
    zones: {
      idlh: '1.2 km (500ppm)',
      erpg2: '2.8 km (300ppm)',
      erpg1: '4.5 km (50ppm)',
      twa: '6.2 km (20ppm)',
    },
    weather: {
      dir: 'SW 225°',
      speed: '5.2 m/s',
      temp: '18.5°C',
      stability: 'D (중립)',
      humidity: '65%',
      mixHeight: '850 m',
    },
    actions: [
      '반경 1.2km 즉시 대피 명령',
      'Level B 화학복 착용',
      '화기 엄금 — 인화점 4°C',
      '해양확산 동시 모니터링',
      'IDLH 경계 실시간 측정',
    ],
  },
  {
    id: 'S-02',
    name: '풍향 변화 시나리오',
    severity: 'HIGH',
    timeStep: 'T+1h',
    datetime: '2024.11.03 09:00 KST',
    wind: '풍속 4.8m/s SE',
    maxConc: '420 ppm',
    idlhRadius: '0.8 km',
    erpg2: '2.1 km',
    population: '5,100명',
    description: '풍향 SE 전환. 주거지역 방향 확산 확대. 영향인구 증가. 대피 범위 조정 필요.',
    detail: {
      maxConc: '420ppm',
      idlhRadius: '0.8km',
      erpg2: '2.1km',
      windDir: 'SE 135°',
      windSpeed: '4.8 m/s',
      population: '5,100명',
      spillAmount: '2.5 ton',
    },
    zones: {
      idlh: '0.8 km (500ppm)',
      erpg2: '2.1 km (300ppm)',
      erpg1: '3.8 km (50ppm)',
      twa: '5.5 km (20ppm)',
    },
    weather: {
      dir: 'SE 135°',
      speed: '4.8 m/s',
      temp: '19.2°C',
      stability: 'C (약간 불안정)',
      humidity: '62%',
      mixHeight: '920 m',
    },
    actions: ['대피 범위 SE 방향 확장', '주거지역 주민 대피 알림', '실시간 농도 모니터링 강화'],
  },
  {
    id: 'S-03',
    name: '연속유출 확대',
    severity: 'HIGH',
    timeStep: 'T+3h',
    datetime: '2024.11.03 11:00 KST',
    wind: '풍속 3.5m/s S',
    maxConc: '280 ppm',
    idlhRadius: '0.5 km',
    erpg2: '1.8 km',
    population: '4,800명',
    description: '연속유출 3시간 경과. 누적 유출량 증가. 풍속 감소로 체류 시간 증가.',
    detail: {
      maxConc: '280ppm',
      idlhRadius: '0.5km',
      erpg2: '1.8km',
      windDir: 'S 180°',
      windSpeed: '3.5 m/s',
      population: '4,800명',
      spillAmount: '4.2 ton',
    },
    zones: {
      idlh: '0.5 km (500ppm)',
      erpg2: '1.8 km (300ppm)',
      erpg1: '3.2 km (50ppm)',
      twa: '4.8 km (20ppm)',
    },
    weather: {
      dir: 'S 180°',
      speed: '3.5 m/s',
      temp: '20.1°C',
      stability: 'B (불안정)',
      humidity: '58%',
      mixHeight: '1,050 m',
    },
    actions: ['유출원 차단 작업 투입', '풍속 감소 체류 경고', '추가 모니터링 포인트 설치'],
  },
  {
    id: 'S-04',
    name: '유출 차단·잔류 확산',
    severity: 'MEDIUM',
    timeStep: 'T+6h',
    datetime: '2024.11.03 14:00 KST',
    wind: '풍속 6.1m/s W',
    maxConc: '85 ppm',
    idlhRadius: '—',
    erpg2: '0.4 km',
    population: '1,200명',
    description: '유출원 차단 완료. 잔류 증기 자연 확산중. 풍속 증가로 희석 촉진.',
    detail: {
      maxConc: '85ppm',
      idlhRadius: '—',
      erpg2: '0.4km',
      windDir: 'W 270°',
      windSpeed: '6.1 m/s',
      population: '1,200명',
      spillAmount: '0 (차단)',
    },
    zones: {
      idlh: '— (해소)',
      erpg2: '0.4 km (300ppm)',
      erpg1: '1.2 km (50ppm)',
      twa: '2.1 km (20ppm)',
    },
    weather: {
      dir: 'W 270°',
      speed: '6.1 m/s',
      temp: '21.3°C',
      stability: 'C (약간 불안정)',
      humidity: '52%',
      mixHeight: '1,200 m',
    },
    actions: ['IDLH 구역 해소 확인', '잔류 농도 지속 모니터링', '일부 대피 해제 검토'],
  },
  {
    id: 'S-05',
    name: '대기확산 해제',
    severity: 'RESOLVED',
    timeStep: 'T+12h',
    datetime: '2024.11.03 20:00 KST',
    wind: '풍속 7.3m/s NW',
    maxConc: '8 ppm',
    idlhRadius: '—',
    erpg2: '—',
    population: '0명',
    description: '전 구역 안전 농도 확인. 대피 해제. 잔류 오염 모니터링 지속.',
    detail: {
      maxConc: '8ppm',
      idlhRadius: '—',
      erpg2: '—',
      windDir: 'NW 315°',
      windSpeed: '7.3 m/s',
      population: '0명',
      spillAmount: '0 (종료)',
    },
    zones: { idlh: '— (해소)', erpg2: '— (해소)', erpg1: '— (해소)', twa: '0.3 km (20ppm)' },
    weather: {
      dir: 'NW 315°',
      speed: '7.3 m/s',
      temp: '16.8°C',
      stability: 'D (중립)',
      humidity: '68%',
      mixHeight: '780 m',
    },
    actions: ['전 구역 대피 해제', '잔류 오염 최종 모니터링', '사후 환경 평가 실시'],
  },
];

const MATERIALS: HnsMaterial[] = [
  {
    key: 'toluene',
    name: '톨루엔',
    mw: '92.14',
    bp: '110.6°C',
    fp: '4°C',
    idlh: '500 ppm',
    erpg2: '300 ppm',
  },
  {
    key: 'ammonia',
    name: '암모니아',
    mw: '17.03',
    bp: '-33.3°C',
    fp: 'N/A',
    idlh: '300 ppm',
    erpg2: '200 ppm',
  },
  {
    key: 'methanol',
    name: '메탄올',
    mw: '32.04',
    bp: '64.7°C',
    fp: '11°C',
    idlh: '6,000 ppm',
    erpg2: '1,000 ppm',
  },
  {
    key: 'hydrogen',
    name: '수소',
    mw: '2.016',
    bp: '-252.9°C',
    fp: 'N/A',
    idlh: 'N/A',
    erpg2: 'N/A',
  },
  {
    key: 'benzene',
    name: '벤젠',
    mw: '78.11',
    bp: '80.1°C',
    fp: '-11°C',
    idlh: '500 ppm',
    erpg2: '150 ppm',
  },
  {
    key: 'styrene',
    name: '스티렌',
    mw: '104.15',
    bp: '145°C',
    fp: '31°C',
    idlh: '700 ppm',
    erpg2: '250 ppm',
  },
  {
    key: 'lng',
    name: 'LNG',
    mw: '16.04',
    bp: '-161.5°C',
    fp: '-188°C',
    idlh: 'N/A',
    erpg2: '25,000 ppm',
  },
];

// ─── Main Component ─────────────────────────────────────
export function HNSScenarioView() {
  const [incidents, setIncidents] = useState<HnsAnalysisItem[]>([]);
  const [selectedIncident, setSelectedIncident] = useState(0);
  const [scenarios, setScenarios] = useState(MOCK_SCENARIOS);
  const [selectedIdx, setSelectedIdx] = useState(0);
  const [checked, setChecked] = useState<Set<number>>(new Set([0, 1]));
  const [activeView, setActiveView] = useState<ViewTab>(0);
  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    let cancelled = false;
    fetchHnsAnalyses()
      .then((items) => {
        if (!cancelled) setIncidents(items);
      })
      .catch((err) => console.error('[hns] 사고 목록 조회 실패:', err));
    return () => {
      cancelled = true;
    };
  }, []);

  const selected = scenarios[selectedIdx];

  const toggleCheck = (idx: number) => {
    setChecked((prev) => {
      const next = new Set(prev);
      if (next.has(idx)) next.delete(idx);
      else next.add(idx);
      return next;
    });
  };

  return (
    <div className="flex flex-col flex-1 w-full h-full overflow-hidden bg-bg-base">
      {/* Header */}
      <div className="flex items-center justify-between shrink-0 border-b border-stroke px-5 py-[14px] bg-bg-surface">
        <div className="flex items-center gap-2.5">
          <span className="text-base">📊</span>
          <div>
            <div className="text-title-4 font-bold">HNS 대기확산 시나리오 관리</div>
            <div className="text-label-2 text-fg-disabled">
              시간·조건별 대기확산 예측 시나리오 비교·검토 및 대응 의사결정 지원
            </div>
          </div>
        </div>
        <div className="flex gap-2 items-center">
          <select
            value={selectedIncident}
            onChange={(e) => setSelectedIncident(Number(e.target.value))}
            className="prd-i w-[280px] text-label-2"
          >
            {incidents.length === 0 ? (
              <option value={0}>분석 데이터 없음</option>
            ) : (
              incidents.map((inc, i) => (
                <option key={inc.hnsAnlysSn} value={i}>
                  HNS-{String(inc.hnsAnlysSn).padStart(3, '0')} · {inc.anlysNm}
                </option>
              ))
            )}
          </select>
          <button
            onClick={() => setModalOpen(true)}
            className="cursor-pointer whitespace-nowrap font-semibold text-color-accent text-label-2 px-[14px] py-1.5 rounded-sm"
            style={{
              border: '1px solid rgba(6,182,212,.3)',
              background: 'rgba(6,182,212,.08)',
            }}
          >
            + 신규 시나리오
          </button>
        </div>
      </div>

      {/* Body: Left list + Right detail */}
      <div className="flex flex-1 overflow-hidden">
        {/* ── Left: Scenario List ── */}
        <div
          className="flex flex-col overflow-hidden shrink-0 border-r border-stroke bg-bg-surface"
          style={{ width: '370px', minWidth: '370px' }}
        >
          <div className="flex items-center justify-between border-b border-stroke px-[14px] py-2.5">
            <span className="text-label-2 font-bold text-fg-disabled">
              시나리오 목록 — 톨루엔 대기확산
            </span>
            <div className="flex gap-1">
              {['시간순', '위험도순'].map((label, i) => (
                <button
                  key={i}
                  className={`cursor-pointer px-2 py-[3px] text-caption font-semibold rounded-sm border border-stroke ${
                    i === 0
                      ? 'bg-[rgba(6,182,212,0.08)] text-color-accent'
                      : 'bg-bg-card text-fg-disabled'
                  }`}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>

          {/* Scrollable list */}
          <div
            className="flex-1 overflow-y-auto flex flex-col gap-1.5 p-2"
            style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
          >
            {scenarios.map((scn, idx) => {
              const sev = SEVERITY_STYLE[scn.severity];
              const isSel = selectedIdx === idx;
              return (
                <div
                  key={scn.id}
                  className={`hns-scn-card ${isSel ? 'sel' : ''}`}
                  onClick={() => {
                    setSelectedIdx(idx);
                    setActiveView(0);
                  }}
                >
                  {/* Title + badge */}
                  <div className="flex items-center justify-between mb-1.5">
                    <div className="flex items-center gap-1.5">
                      <input
                        type="checkbox"
                        checked={checked.has(idx)}
                        onChange={() => toggleCheck(idx)}
                        onClick={(e) => e.stopPropagation()}
                        style={{ accentColor: 'var(--color-accent)' }}
                      />
                      <span className="text-label-1 font-bold">
                        {scn.id} {scn.name}
                      </span>
                    </div>
                    <span
                      className="font-bold px-2 py-[2px] rounded-lg text-caption"
                      style={{ background: sev.bg, color: sev.color }}
                    >
                      {scn.severity}
                    </span>
                  </div>

                  {/* Time row */}
                  <div className="flex items-center gap-1.5 mb-1.5">
                    <span
                      className="font-bold font-mono text-color-accent text-caption px-1.5 py-[2px] rounded-[3px]"
                      style={{ background: 'rgba(6,182,212,0.1)' }}
                    >
                      {scn.timeStep}
                    </span>
                    <span className="text-caption text-fg-disabled font-mono">{scn.datetime}</span>
                    <span className="ml-auto text-fg-disabled text-caption">{scn.wind}</span>
                  </div>

                  {/* Metrics grid */}
                  <div className="grid grid-cols-4 gap-1 font-mono text-caption">
                    {[
                      { label: '최대농도', value: scn.maxConc, color: 'var(--color-accent)' },
                      { label: 'IDLH반경', value: scn.idlhRadius, color: 'var(--color-accent)' },
                      { label: 'ERPG-2', value: scn.erpg2, color: 'var(--color-accent)' },
                      { label: '영향인구', value: scn.population, color: 'var(--color-accent)' },
                    ].map((m, i) => (
                      <div key={i} className="text-center p-[3px] bg-bg-base rounded-[3px]">
                        <div className="text-fg-disabled text-caption">{m.label}</div>
                        <div className="font-bold" style={{ color: m.color }}>
                          {m.value}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Description */}
                  <div className="text-fg-sub mt-1.5 text-caption leading-[1.4]">
                    {scn.description}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Bottom buttons */}
          <div className="flex gap-2 border-t border-stroke px-[14px] py-2.5">
            <button
              onClick={() => setActiveView(1)}
              className="flex-1 cursor-pointer font-bold text-static-white text-label-2 p-2 rounded-sm bg-color-navy hover:bg-color-navy-hover"
            >
              📊 선택 시나리오 비교
            </button>
            <button className="cursor-pointer font-semibold text-fg-sub text-label-2 px-[14px] py-2 rounded-sm bg-bg-card border border-stroke">
              📄 보고서
            </button>
          </div>
        </div>

        {/* ── Right: Detail Views ── */}
        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
          {/* View Tabs */}
          <div className="flex border-b border-stroke shrink-0 px-4 bg-bg-surface">
            {['📋 시나리오 상세', '📊 비교 차트', '🗺 확산범위 오버레이'].map((label, i) => (
              <button
                key={i}
                onClick={() => setActiveView(i as ViewTab)}
                className={`rsc-atab ${activeView === i ? 'on' : ''}`}
              >
                {label}
              </button>
            ))}
          </div>

          {/* View 0: Detail */}
          {activeView === 0 && selected && <ScenarioDetail scenario={selected} />}

          {/* View 1: Comparison */}
          {activeView === 1 && <ScenarioComparison />}

          {/* View 2: Map overlay */}
          {activeView === 2 && <ScenarioMapOverlay />}
        </div>
      </div>

      {/* New Scenario Modal */}
      <NewScenarioModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        onSubmit={(name) => {
          const newScn: HnsScenario = {
            ...MOCK_SCENARIOS[0],
            id: `S-${String(scenarios.length + 1).padStart(2, '0')}`,
            name,
            severity: 'MEDIUM',
          };
          setScenarios((prev) => [...prev, newScn]);
          setModalOpen(false);
        }}
      />
    </div>
  );
}

// ─── View 0: Scenario Detail ─────────────────────────────
function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
  const d = scenario.detail;
  return (
    <div
      className="flex-1 overflow-y-auto flex flex-col gap-3.5 p-4"
      style={{ scrollbarWidth: 'thin' }}
    >
      {/* Hero card */}
      <div className="rounded-md p-4 bg-bg-card border border-stroke">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-title-4 font-bold">
            {scenario.id} {scenario.name}
          </span>
          <span
            className="font-bold px-2 py-[2px] rounded-lg text-caption"
            style={{
              background: SEVERITY_STYLE[scenario.severity].bg,
              color: SEVERITY_STYLE[scenario.severity].color,
            }}
          >
            {scenario.severity}
          </span>
          <span className="ml-auto text-label-2 text-fg-disabled font-mono">
            {scenario.datetime}
          </span>
        </div>
        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
          {[
            { label: '최대농도', value: d.maxConc, color: 'var(--color-accent)' },
            { label: 'IDLH 반경', value: d.idlhRadius, color: 'var(--color-accent)' },
            { label: 'ERPG-2', value: d.erpg2, color: 'var(--color-accent)' },
            {
              label: '풍향/풍속',
              value: `${d.windDir}\n${d.windSpeed}`,
              color: 'var(--color-accent)',
            },
            { label: '영향인구', value: d.population, color: 'var(--color-accent)' },
            { label: '유출량', value: d.spillAmount, color: 'var(--color-accent)' },
          ].map((m, i) => (
            <div key={i} className="text-center rounded-sm p-2 bg-bg-base">
              <div className="text-fg-disabled text-caption">{m.label}</div>
              <div
                className="text-title-3 font-bold font-mono whitespace-pre-line mt-[2px]"
                style={{ color: m.color, lineHeight: 1.2 }}
              >
                {m.value}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Two-column section */}
      <div className="grid grid-cols-2 gap-3">
        {/* Threat Zones */}
        <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
          <h4 className="text-label-1 font-bold mb-2.5">⚠️ 위험 구역</h4>
          <div className="flex flex-col gap-1.5">
            {[
              {
                label: 'IDLH (즉시위험)',
                value: scenario.zones.idlh,
                color: 'var(--color-danger)',
              },
              {
                label: 'ERPG-2 (대피권고)',
                value: scenario.zones.erpg2,
                color: 'var(--color-warning)',
              },
              {
                label: 'ERPG-1 (주의권고)',
                value: scenario.zones.erpg1,
                color: 'var(--color-caution)',
              },
              { label: 'TWA (작업허용)', value: scenario.zones.twa, color: 'var(--color-success)' },
            ].map((z, i) => (
              <div key={i} className="flex justify-between items-center bg-bg-base rounded-sm">
                <span className="text-label-2 text-fg-sub">{z.label}</span>
                <span className="text-label-2 font-bold font-mono" style={{ color: z.color }}>
                  {z.value}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Actions */}
        <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
          <h4 className="text-label-1 font-bold mb-2.5">🛡 대응 권고 사항</h4>
          <div className="flex flex-col gap-1.5">
            {scenario.actions.map((action, i) => (
              <div
                key={i}
                className="flex items-start gap-1.5 text-label-2 text-fg-sub bg-bg-base rounded-sm leading-[1.4] py-[5px] px-2"
              >
                <span className="text-color-accent font-bold shrink-0">•</span>
                {action}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Weather */}
      <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
        <h4 className="text-label-1 font-bold mb-2.5">🌊 기상 조건</h4>
        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
          {[
            { label: '풍향', value: scenario.weather.dir, icon: '🌬' },
            { label: '풍속', value: scenario.weather.speed, icon: '💨' },
            { label: '기온', value: scenario.weather.temp, icon: '🌡' },
            { label: '대기안정도', value: scenario.weather.stability, icon: '☁️' },
            { label: '습도', value: scenario.weather.humidity, icon: '💧' },
            { label: '혼합층', value: scenario.weather.mixHeight, icon: '📏' },
          ].map((w, i) => (
            <div key={i} className="text-center p-2 rounded-sm bg-bg-base">
              <div className="text-title-3 mb-0.5">{w.icon}</div>
              <div className="text-label-1 font-bold font-mono">{w.value}</div>
              <div className="text-fg-disabled mt-0.5 text-caption">{w.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── View 1: Comparison ──────────────────────────────────
// Chart reference data (time-series per scenario)
const CHART_DATA = [
  {
    id: 'S-01',
    label: 'T+0h',
    conc: 850,
    idlh: 1.2,
    erpg2: 2.8,
    pop: 3200,
    wind: 'SW 5.2',
    severity: 'CRITICAL' as Severity,
  },
  {
    id: 'S-02',
    label: 'T+1h',
    conc: 620,
    idlh: 0.9,
    erpg2: 3.4,
    pop: 5800,
    wind: 'SE 6.8',
    severity: 'CRITICAL' as Severity,
  },
  {
    id: 'S-03',
    label: 'T+3h',
    conc: 420,
    idlh: 0.5,
    erpg2: 2.1,
    pop: 1800,
    wind: 'S 4.1',
    severity: 'HIGH' as Severity,
  },
  {
    id: 'S-04',
    label: 'T+6h',
    conc: 85,
    idlh: 0,
    erpg2: 0.6,
    pop: 120,
    wind: 'W 3.5',
    severity: 'MEDIUM' as Severity,
  },
  {
    id: 'S-05',
    label: 'T+12h',
    conc: 8,
    idlh: 0,
    erpg2: 0,
    pop: 0,
    wind: 'NW 2.8',
    severity: 'RESOLVED' as Severity,
  },
];

const SEV_COLOR: Record<Severity, string> = {
  CRITICAL: 'var(--color-danger)',
  HIGH: 'var(--color-warning)',
  MEDIUM: 'var(--color-caution)',
  RESOLVED: 'var(--color-success)',
};

function ScenarioComparison() {
  const D = CHART_DATA;
  // SVG coordinate helpers for concentration chart (viewBox 500x140)
  const concMax = 900;
  const concX = [50, 157, 264, 371, 480];
  const concY = D.map((d) => 10 + (1 - d.conc / concMax) * 110);
  const concPoly = concX.map((x, i) => `${x},${concY[i]}`).join(' ');
  const concArea = concPoly + ` ${concX[4]},120 ${concX[0]},120`;

  // Radius chart helpers (viewBox 240x100)
  const radMax = 4;
  const radX = [30, 80, 130, 180, 230];
  const idlhY = D.map((d) => 10 + (1 - d.idlh / radMax) * 75);
  const erpgY = D.map((d) => 10 + (1 - d.erpg2 / radMax) * 75);

  // Population chart helpers
  const popMax = 6000;
  const barW = 30;
  const barX = [30, 70, 110, 150, 190];

  return (
    <div
      className="flex-1 overflow-y-auto flex flex-col gap-3.5 px-5 py-4"
      style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
    >
      {/* Title */}
      <div className="text-title-4 font-bold mb-0.5">
        📊 시나리오 비교 — 시간대별 대기확산 지표 추이
      </div>

      {/* ── Chart 1: 최대 지표면 농도 추이 (Line + Area) ── */}
      <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
        <div className="text-label-2 font-bold mb-2.5">최대 지표면 농도 (ppm) 변화 추이</div>
        <svg viewBox="0 0 500 140" className="w-full" style={{ height: '130px' }}>
          <defs>
            <linearGradient id="hnsGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#f97316" stopOpacity={0.12} />
              <stop offset="100%" stopColor="transparent" />
            </linearGradient>
          </defs>
          {/* Axes */}
          <line x1="50" y1="10" x2="50" y2="120" stroke="#21262d" strokeWidth={0.5} />
          <line x1="50" y1="120" x2="480" y2="120" stroke="#21262d" strokeWidth={0.5} />
          {/* Threshold lines */}
          <line
            x1="50"
            y1={10 + (1 - 500 / concMax) * 110}
            x2="480"
            y2={10 + (1 - 500 / concMax) * 110}
            stroke="rgba(59,130,246,.2)"
            strokeWidth={0.5}
            strokeDasharray="4,3"
          />
          <text
            x="5"
            y={10 + (1 - 500 / concMax) * 110 + 4}
            fill="#f87171"
            fontSize="7"
            fontFamily="var(--font-mono)"
          >
            500 IDLH
          </text>
          <line
            x1="50"
            y1={10 + (1 - 300 / concMax) * 110}
            x2="480"
            y2={10 + (1 - 300 / concMax) * 110}
            stroke="rgba(6,182,212,.2)"
            strokeWidth={0.5}
            strokeDasharray="4,3"
          />
          <text
            x="5"
            y={10 + (1 - 300 / concMax) * 110 + 4}
            fill="#fb923c"
            fontSize="7"
            fontFamily="var(--font-mono)"
          >
            300 ERPG2
          </text>
          {/* Area fill */}
          <polygon points={concArea} fill="url(#hnsGrad)" />
          {/* Line */}
          <polyline points={concPoly} fill="none" stroke="#f97316" strokeWidth={2} />
          {/* Data points + labels */}
          {D.map((d, i) => (
            <g key={d.id}>
              <circle
                cx={concX[i]}
                cy={concY[i]}
                r={4}
                fill={SEV_COLOR[d.severity]}
                stroke="#0d1117"
                strokeWidth={2}
              />
              <text
                x={concX[i] - 6}
                y={concY[i] - 8}
                fill={SEV_COLOR[d.severity]}
                fontSize="7"
                textAnchor="end"
                fontFamily="var(--font-mono)"
              >
                {d.conc}
              </text>
              <text
                x={concX[i]}
                y={134}
                fill="#8b949e"
                fontSize="7"
                textAnchor="middle"
                fontFamily="var(--font-mono)"
              >
                {d.label}
              </text>
            </g>
          ))}
        </svg>
      </div>

      {/* ── Charts 2 & 3: 2-column grid ── */}
      <div className="grid grid-cols-2 gap-[14px]">
        {/* Chart 2: 위험 반경 변화 (Multi-line) */}
        <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
          <div className="text-label-2 font-bold mb-2.5">위험 반경 (km) 변화</div>
          <svg viewBox="0 0 260 100" className="w-full" style={{ height: '85px' }}>
            <line x1="30" y1="10" x2="30" y2="85" stroke="#21262d" strokeWidth={0.5} />
            <line x1="30" y1="85" x2="230" y2="85" stroke="#21262d" strokeWidth={0.5} />
            {/* IDLH line (red solid) */}
            <polyline
              points={radX.map((x, i) => `${x},${idlhY[i]}`).join(' ')}
              fill="none"
              stroke="#ef4444"
              strokeWidth={1.5}
            />
            {/* ERPG-2 line (orange dashed) */}
            <polyline
              points={radX.map((x, i) => `${x},${erpgY[i]}`).join(' ')}
              fill="none"
              stroke="#f97316"
              strokeWidth={1.5}
              strokeDasharray="4,2"
            />
            {/* Data points */}
            {D.map((d, i) => {
              const c =
                d.idlh > 0
                  ? d.severity === 'CRITICAL' || d.severity === 'HIGH'
                    ? '#ef4444'
                    : '#fbbf24'
                  : '#22c55e';
              return (
                <g key={d.id}>
                  <circle
                    cx={radX[i]}
                    cy={idlhY[i]}
                    r={3}
                    fill={c}
                    stroke="#0d1117"
                    strokeWidth={1.5}
                  />
                  <text
                    x={radX[i]}
                    y={96}
                    fill="#8b949e"
                    fontSize="6"
                    textAnchor="middle"
                    fontFamily="var(--font-mono)"
                  >
                    {d.label.replace('+', '+')}
                  </text>
                </g>
              );
            })}
            {/* Legend */}
            <line x1="170" y1="14" x2="185" y2="14" stroke="#ef4444" strokeWidth={1.5} />
            <text x="188" y="17" fill="#ef4444" fontSize="6" fontFamily="var(--font-korean)">
              IDLH
            </text>
            <line
              x1="170"
              y1="24"
              x2="185"
              y2="24"
              stroke="#f97316"
              strokeWidth={1.5}
              strokeDasharray="4,2"
            />
            <text x="188" y="27" fill="#f97316" fontSize="6" fontFamily="var(--font-korean)">
              ERPG-2
            </text>
          </svg>
        </div>

        {/* Chart 3: 영향 인구 변화 (Bar) */}
        <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
          <div className="text-label-2 font-bold mb-2.5">영향 인구 (명) 변화</div>
          <svg viewBox="0 0 240 100" className="w-full" style={{ height: '85px' }}>
            <line x1="30" y1="10" x2="30" y2="85" stroke="#21262d" strokeWidth={0.5} />
            <line x1="30" y1="85" x2="230" y2="85" stroke="#21262d" strokeWidth={0.5} />
            {D.map((d, i) => {
              const h = Math.max(1, (d.pop / popMax) * 75);
              const y = 85 - h;
              const color = SEV_COLOR[d.severity];
              const barColor = `${color}33`;
              return (
                <g key={d.id}>
                  <rect x={barX[i]} y={y} width={barW} height={h} rx={2} fill={barColor} />
                  <text
                    x={barX[i] + barW / 2}
                    y={y - 3}
                    fill={color}
                    fontSize="6"
                    textAnchor="middle"
                    fontFamily="var(--font-mono)"
                  >
                    {d.pop > 0 ? d.pop.toLocaleString() : '0'}
                  </text>
                  <text
                    x={barX[i] + barW / 2}
                    y={96}
                    fill="#8b949e"
                    fontSize="6"
                    textAnchor="middle"
                    fontFamily="var(--font-mono)"
                  >
                    {d.label.replace('+', '+')}
                  </text>
                </g>
              );
            })}
          </svg>
        </div>
      </div>

      {/* ── Chart 4: 시나리오 비교표 ── */}
      <div className="rounded-md border border-stroke overflow-x-auto bg-bg-card p-[14px]">
        <div className="text-label-2 font-bold mb-2.5">📋 시나리오 비교표</div>
        <table className="w-full text-label-2 border-collapse">
          <thead>
            <tr className="bg-bg-base">
              {['지표', ...D.map((d) => `${d.id} (${d.label})`)].map((h, i) => (
                <th
                  key={i}
                  className="text-fg-disabled border-b border-stroke text-caption px-[10px] py-2"
                  style={{ textAlign: i === 0 ? 'left' : 'center' }}
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {/* 최대농도 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">최대농도 (ppm)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: SEV_COLOR[d.severity] }}
                >
                  {d.conc}
                </td>
              ))}
            </tr>
            {/* IDLH 반경 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">IDLH 반경 (km)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: d.idlh > 0 ? 'var(--color-danger)' : 'var(--color-success)' }}
                >
                  {d.idlh || 0}
                </td>
              ))}
            </tr>
            {/* ERPG-2 반경 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">ERPG-2 반경 (km)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: d.erpg2 > 0 ? 'var(--color-warning)' : 'var(--color-success)' }}
                >
                  {d.erpg2 || 0}
                </td>
              ))}
            </tr>
            {/* 영향인구 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">영향인구 (명)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: SEV_COLOR[d.severity] }}
                >
                  {d.pop.toLocaleString()}
                </td>
              ))}
            </tr>
            {/* 풍향/풍속 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">풍향 / 풍속</td>
              {D.map((d) => (
                <td key={d.id} className="text-center font-mono text-color-accent p-1.5">
                  {d.wind}
                </td>
              ))}
            </tr>
            {/* 위험 등급 */}
            <tr>
              <td className="text-fg-sub px-[10px] py-1.5">위험 등급</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-bold p-1.5"
                  style={{ color: SEV_COLOR[d.severity] }}
                >
                  {d.severity}
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── View 2: Map Overlay ─────────────────────────────────
function ScenarioMapOverlay() {
  return (
    <div className="flex-1 flex items-center justify-center flex-col gap-4">
      <div
        className="flex items-center justify-center rounded-md border border-stroke text-fg-disabled text-title-4 bg-bg-elevated"
        style={{
          width: '80%',
          maxWidth: '600px',
          height: '300px',
        }}
      >
        [시나리오별 확산범위 오버레이 지도]
      </div>
      <div className="flex gap-4">
        {[
          { label: 'T+0h SW방향', color: 'var(--color-danger)' },
          { label: 'T+1h SE 전환', color: 'var(--color-warning)' },
          { label: 'T+3h S방향', color: 'var(--color-caution)' },
          { label: 'T+6h 차단 후', color: 'var(--color-success)' },
        ].map((item, i) => (
          <div key={i} className="flex items-center gap-1.5">
            <div className="w-3 h-3 rounded-full opacity-50" style={{ background: item.color }} />
            <span className="text-label-2 text-fg-sub">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── New Scenario Modal ──────────────────────────────────
function NewScenarioModal({
  isOpen,
  onClose,
  onSubmit,
}: {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (name: string) => void;
}) {
  const backdropRef = useRef<HTMLDivElement>(null);
  const [name, setName] = useState('');
  const [material, setMaterial] = useState('toluene');
  const [releaseType, setReleaseType] = useState('instant');
  const [amount, setAmount] = useState('2.5');
  const [unit, setUnit] = useState('t');
  const [timeStep, setTimeStep] = useState('T+0h');
  const [windDir, setWindDir] = useState('SW');
  const [windSpeed, setWindSpeed] = useState('5.2');
  const [temp, setTemp] = useState('18.5');
  const [stability, setStability] = useState('D');
  const [model, setModel] = useState('ALOHA');
  const [predTime, setPredTime] = useState('6');

  const mat = MATERIALS.find((m) => m.key === material) || MATERIALS[0];

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (e.target === backdropRef.current) onClose();
    };
    if (isOpen) document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [isOpen, onClose]);

  useEffect(() => {
    if (isOpen) setName(''); // eslint-disable-line react-hooks/set-state-in-effect -- 모달 열릴 때 이름 초기화
  }, [isOpen]);

  if (!isOpen) return null;

  const handleSubmit = () => {
    if (!name.trim()) return;
    onSubmit(name.trim());
  };

  return (
    <div
      ref={backdropRef}
      className="fixed inset-0 z-[9999] flex items-center justify-center"
      style={{ background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(4px)' }}
    >
      <div
        className="flex flex-col overflow-hidden rounded-[14px] bg-bg-surface border border-stroke w-[520px] max-h-[calc(100vh-80px)]"
        style={{ boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }}
      >
        {/* Header */}
        <div className="flex items-center gap-3 border-b border-stroke px-5 py-4">
          <div className="flex items-center justify-center text-base w-9 h-9 rounded-[10px] bg-bg-elevated border border-stroke">
            🧪
          </div>
          <div className="flex-1">
            <h2 className="text-title-2 font-bold m-0">신규 HNS 대기확산 시나리오</h2>
            <div className="text-label-2 text-fg-disabled mt-0.5">
              물질·기상·유출조건을 설정하여 새 시나리오를 생성합니다
            </div>
          </div>
          <button
            onClick={onClose}
            className="flex items-center justify-center w-7 h-7 cursor-pointer text-fg-disabled text-label-1 rounded-sm border border-stroke bg-bg-card"
          >
            ✕
          </button>
        </div>

        {/* Scrollable content */}
        <div className="flex-1 overflow-y-auto flex flex-col gap-3.5 px-5 py-4">
          {/* 기본 정보 */}
          <ModalSection title="기본 정보">
            <ModalField label="시나리오명">
              <input
                className="prd-i"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="예: 풍향 변화 시나리오"
              />
            </ModalField>
            <div className="grid grid-cols-2 gap-2">
              <ModalField label="시간 단계">
                <select
                  className="prd-i"
                  value={timeStep}
                  onChange={(e) => setTimeStep(e.target.value)}
                >
                  {['T+0h', 'T+1h', 'T+3h', 'T+6h', 'T+12h', 'T+24h'].map((t) => (
                    <option key={t} value={t}>
                      {t}
                    </option>
                  ))}
                </select>
              </ModalField>
              <ModalField label="기준 시각">
                <input className="prd-i" type="text" defaultValue="2024-11-03 08:00" />
              </ModalField>
            </div>
          </ModalSection>

          {/* 물질·유출 조건 */}
          <ModalSection title="물질 · 유출 조건">
            <ModalField label="HNS 물질">
              <select
                className="prd-i"
                value={material}
                onChange={(e) => setMaterial(e.target.value)}
              >
                {MATERIALS.map((m) => (
                  <option key={m.key} value={m.key}>
                    {m.name} ({m.key})
                  </option>
                ))}
              </select>
            </ModalField>
            {/* Material properties card */}
            <div
              className="grid p-2 rounded-sm bg-bg-elevated border border-stroke"
              style={{
                gridTemplateColumns: 'repeat(5, 1fr)',
                gap: '4px',
              }}
            >
              {[
                { label: 'MW', value: mat.mw },
                { label: 'BP', value: mat.bp },
                { label: 'FP', value: mat.fp },
                { label: 'IDLH', value: mat.idlh },
                { label: 'ERPG-2', value: mat.erpg2 },
              ].map((p, i) => (
                <div key={i} className="text-center">
                  <div className="text-fg-disabled text-caption">{p.label}</div>
                  <div className="text-label-2 font-bold text-color-accent font-mono">
                    {p.value}
                  </div>
                </div>
              ))}
            </div>
            <div className="grid grid-cols-2 gap-2">
              <ModalField label="유출 유형">
                <select
                  className="prd-i"
                  value={releaseType}
                  onChange={(e) => setReleaseType(e.target.value)}
                >
                  <option value="instant">순간 유출</option>
                  <option value="continuous">연속 유출</option>
                  <option value="semi">반연속</option>
                </select>
              </ModalField>
              <ModalField label="유출량">
                <div className="flex gap-1">
                  <input
                    className="prd-i flex-1"
                    type="number"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                  />
                  <select
                    className="prd-i w-[60px]"
                    value={unit}
                    onChange={(e) => setUnit(e.target.value)}
                  >
                    {['t', 'kg', 'm³', 'L'].map((u) => (
                      <option key={u} value={u}>
                        {u}
                      </option>
                    ))}
                  </select>
                </div>
              </ModalField>
            </div>
          </ModalSection>

          {/* 기상 조건 */}
          <ModalSection title="기상 조건">
            <div className="grid grid-cols-3 gap-2">
              <ModalField label="풍향">
                <select
                  className="prd-i"
                  value={windDir}
                  onChange={(e) => setWindDir(e.target.value)}
                >
                  {[
                    'N',
                    'NNE',
                    'NE',
                    'ENE',
                    'E',
                    'ESE',
                    'SE',
                    'SSE',
                    'S',
                    'SSW',
                    'SW',
                    'WSW',
                    'W',
                    'WNW',
                    'NW',
                    'NNW',
                  ].map((d) => (
                    <option key={d} value={d}>
                      {d}
                    </option>
                  ))}
                </select>
              </ModalField>
              <ModalField label="풍속 (m/s)">
                <input
                  className="prd-i"
                  type="number"
                  value={windSpeed}
                  onChange={(e) => setWindSpeed(e.target.value)}
                  step={0.1}
                />
              </ModalField>
              <ModalField label="기온 (°C)">
                <input
                  className="prd-i"
                  type="number"
                  value={temp}
                  onChange={(e) => setTemp(e.target.value)}
                  step={0.1}
                />
              </ModalField>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <ModalField label="대기안정도 (Pasquill)">
                <select
                  className="prd-i"
                  value={stability}
                  onChange={(e) => setStability(e.target.value)}
                >
                  {[
                    'A (매우 불안정)',
                    'B (불안정)',
                    'C (약간 불안정)',
                    'D (중립)',
                    'E (약간 안정)',
                    'F (안정)',
                  ].map((s) => (
                    <option key={s[0]} value={s[0]}>
                      {s}
                    </option>
                  ))}
                </select>
              </ModalField>
              <ModalField label="확산 모델">
                <select className="prd-i" value={model} onChange={(e) => setModel(e.target.value)}>
                  {['ALOHA', 'PHAST', 'CALPUFF', 'Lagrangian'].map((m) => (
                    <option key={m} value={m}>
                      {m}
                    </option>
                  ))}
                </select>
              </ModalField>
            </div>
            <ModalField label="예측 시간">
              <select
                className="prd-i"
                value={predTime}
                onChange={(e) => setPredTime(e.target.value)}
              >
                {['1', '3', '6', '12', '24', '48'].map((h) => (
                  <option key={h} value={h}>
                    {h}시간
                  </option>
                ))}
              </select>
            </ModalField>
          </ModalSection>
        </div>

        {/* Footer */}
        <div className="flex gap-2 border-t border-stroke px-5 py-[14px]">
          <button
            onClick={onClose}
            className="flex-1 text-label-1 font-semibold cursor-pointer rounded-md text-fg-sub p-[10px] bg-bg-card border border-stroke"
          >
            취소
          </button>
          <button
            onClick={handleSubmit}
            className="cursor-pointer rounded-md text-label-1 font-bold text-static-white p-[10px] bg-color-navy hover:bg-color-navy-hover"
            style={{
              flex: 2,
              opacity: name.trim() ? 1 : 0.5,
            }}
          >
            🧪 시나리오 생성 및 예측 실행
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Helpers ─────────────────────────────────────────────
function ModalSection({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="text-label-2 font-bold text-color-accent mb-2 pb-1 border-b border-stroke">
        {title}
      </div>
      <div className="flex flex-col gap-2">{children}</div>
    </div>
  );
}

function ModalField({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="text-caption font-semibold text-fg-disabled mb-1">{label}</div>
      {children}
    </div>
  );
}
