import { useState, useEffect } from 'react';
import {
  createEmptyReport,
} from './OilSpillReportTemplate';
import { consumeReportGenCategory, consumeHnsReportPayload, type HnsReportPayload, consumeOilReportPayload, type OilReportPayload } from '@common/hooks/useSubMenu';
import { saveReport } from '../services/reportsApi';
import {
  CATEGORIES,
  sampleOilData,
  sampleHnsData,
  sampleRescueData,
  type ReportCategory,
  type ReportSection,
} from './reportTypes';
import { exportAsPDF } from './reportUtils';

interface ReportGeneratorProps {
  onSave: () => void;
}

function ReportGenerator({ onSave }: ReportGeneratorProps) {
  const [activeCat, setActiveCat] = useState<ReportCategory>(() => {
    const hint = consumeReportGenCategory()
    return (hint === 0 || hint === 1 || hint === 2) ? hint : 0
  })
  const [selectedTemplate, setSelectedTemplate] = useState(0)
  const [sectionsMap, setSectionsMap] = useState<Record<number, ReportSection[]>>(() => ({
    0: CATEGORIES[0].sections.map(s => ({ ...s })),
    1: CATEGORIES[1].sections.map(s => ({ ...s })),
    2: CATEGORIES[2].sections.map(s => ({ ...s })),
  }))

  // HNS 실 데이터 (없으면 sampleHnsData fallback)
  const [hnsPayload, setHnsPayload] = useState<HnsReportPayload | null>(null)
  // OIL 실 데이터 (없으면 sampleOilData fallback)
  const [oilPayload, setOilPayload] = useState<OilReportPayload | null>(null)

  // 외부에서 카테고리 힌트가 변경되면 반영
  useEffect(() => {
    const hint = consumeReportGenCategory()
    if (hint === 0 || hint === 1 || hint === 2) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setActiveCat(hint)
      setSelectedTemplate(0)
    }
    // HNS 데이터 소비
    const payload = consumeHnsReportPayload()
    if (payload) setHnsPayload(payload)
    // OIL 예측 데이터 소비
    const oilData = consumeOilReportPayload()
    if (oilData) setOilPayload(oilData)
  }, [])

  const cat = CATEGORIES[activeCat]
  const sections = sectionsMap[activeCat]
  const activeSections = sections.filter(s => s.checked)

  const toggleSection = (id: string) => {
    setSectionsMap(prev => ({
      ...prev,
      [activeCat]: prev[activeCat].map(s => s.id === id ? { ...s, checked: !s.checked } : s),
    }))
  }

  const handleSave = async () => {
    const report = createEmptyReport()
    report.reportType = activeCat === 0 ? '예측보고서' : activeCat === 1 ? '종합보고서' : '초기보고서'
    report.analysisCategory = activeCat === 0 ? '유출유 확산예측' : activeCat === 1 ? 'HNS 대기확산' : '긴급구난'
    report.title = cat.reportName
    report.status = '완료'
    report.author = '시스템 자동생성'
    if (activeCat === 0) {
      if (oilPayload) {
        report.incident.name = oilPayload.incident.name;
        report.incident.occurTime = oilPayload.incident.occurTime;
        report.incident.location = oilPayload.incident.location;
        report.incident.lat = String(oilPayload.incident.lat ?? '');
        report.incident.lon = String(oilPayload.incident.lon ?? '');
        report.incident.shipName = oilPayload.incident.shipName;
        report.incident.pollutant = oilPayload.pollution.oilType;
        report.incident.spillAmount = oilPayload.pollution.spillAmount;
      } else {
        report.incident.pollutant = sampleOilData.pollution.oilType;
        report.incident.spillAmount = sampleOilData.pollution.spillAmount;
      }
    }
    try {
      await saveReport(report)
      onSave()
    } catch (err) {
      console.error('[reports] 저장 오류:', err)
      alert('보고서 저장 중 오류가 발생했습니다.')
    }
  }

  const handleDownload = () => {
    const secColor = cat.color === 'var(--cyan)' ? '#06b6d4' : cat.color === 'var(--orange)' ? '#f97316' : '#ef4444';
    const sectionHTML = activeSections.map(sec => {
      let content = `<p style="font-size:12px;color:#666;">${sec.desc}</p>`;

      // OIL 섹션에 실 데이터 삽입
      if (activeCat === 0 && oilPayload) {
        if (sec.id === 'oil-pollution') {
          const rows = [
            ['유출량', oilPayload.pollution.spillAmount, '풍화량', oilPayload.pollution.weathered],
            ['해상잔유량', oilPayload.pollution.seaRemain, '오염해역면적', oilPayload.pollution.pollutionArea],
            ['연안부착량', oilPayload.pollution.coastAttach, '오염해안길이', oilPayload.pollution.coastLength],
          ];
          const simBanner = !oilPayload.hasSimulation
            ? '<p style="font-size:10px;color:#f97316;margin-bottom:8px;">시뮬레이션이 실행되지 않아 오염량은 입력값 기준으로 표시됩니다.</p>'
            : '';
          const trs = rows.map(r =>
            `<tr><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">${r[0]}</td><td style="padding:6px 8px;border:1px solid #ddd;font-weight:bold;text-align:right;">${r[1]}</td><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">${r[2]}</td><td style="padding:6px 8px;border:1px solid #ddd;font-weight:bold;text-align:right;">${r[3]}</td></tr>`
          ).join('');
          content = `${simBanner}<table style="width:100%;border-collapse:collapse;font-size:12px;">${trs}</table>`;
        }
      }

      // HNS 섹션에 실 데이터 삽입
      if (activeCat === 1 && hnsPayload) {
        if (sec.id === 'hns-atm') {
          const mapImg = hnsPayload.mapImageDataUrl
            ? `<img src="${hnsPayload.mapImageDataUrl}" style="width:100%;max-height:300px;object-fit:contain;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;" />`
            : '<div style="height:100px;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;margin-bottom:12px;">[대기확산 예측 지도]</div>';
          content = `${mapImg}<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>${hnsPayload.atm.model}</b><br/>${hnsPayload.atm.maxDistance}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>최대 농도</b><br/>${hnsPayload.maxConcentration}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>AEGL-1 면적</b><br/>${hnsPayload.aeglAreas.aegl1}</td></tr></table>`;
        } else if (sec.id === 'hns-hazard') {
          content = `<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:8px;border:1px solid #ddd;text-align:center;color:#ef4444;"><b>AEGL-3</b><br/>${hnsPayload.hazard.aegl3} (${hnsPayload.aeglAreas.aegl3})</td><td style="padding:8px;border:1px solid #ddd;text-align:center;color:#f97316;"><b>AEGL-2</b><br/>${hnsPayload.hazard.aegl2} (${hnsPayload.aeglAreas.aegl2})</td><td style="padding:8px;border:1px solid #ddd;text-align:center;color:#eab308;"><b>AEGL-1</b><br/>${hnsPayload.hazard.aegl1} (${hnsPayload.aeglAreas.aegl1})</td></tr></table>`;
        } else if (sec.id === 'hns-substance') {
          content = `<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">물질명</td><td style="padding:6px 8px;border:1px solid #ddd;font-weight:bold;">${hnsPayload.substance.name}</td></tr><tr><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">독성기준</td><td style="padding:6px 8px;border:1px solid #ddd;color:#ef4444;font-weight:bold;">${hnsPayload.substance.toxicity}</td></tr></table>`;
        } else if (sec.id === 'hns-weather') {
          content = `<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>풍향</b><br/>${hnsPayload.weather.windDir}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>풍속</b><br/>${hnsPayload.weather.windSpeed}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>안정도</b><br/>${hnsPayload.weather.stability}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>기온</b><br/>${hnsPayload.weather.temperature}</td></tr></table>`;
        }
      }

      return `<h3 style="color:${secColor};font-size:14px;margin:20px 0 8px;">${sec.icon} ${sec.title}</h3>${content}`;
    }).join('')
    const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>${cat.reportName}</title><style>@page{size:A4;margin:20mm}body{font-family:'맑은 고딕',sans-serif;color:#1a1a1a;max-width:800px;margin:0 auto;padding:40px}table{margin:8px 0}</style></head><body><div style="text-align:center;margin-bottom:30px"><h1 style="font-size:20px;margin:0">해양환경 위기대응 통합지원시스템</h1><h2 style="font-size:16px;color:#0891b2;margin:8px 0">${cat.reportName}</h2></div>${sectionHTML}</body></html>`
    exportAsPDF(html, cat.reportName)
  }

  return (
    <div className="flex flex-col h-full w-full">
      {/* Header */}
      <div className="px-6 py-4 border-b border-border bg-bg-1">
        <h2 className="text-[16px] font-bold text-text-1 font-korean">보고서 생성</h2>
        <p className="text-[11px] text-text-3 font-korean mt-1">보고서 유형을 선택하고 포함할 섹션을 구성하여 보고서를 생성합니다.</p>

        {/* 3 카테고리 카드 */}
        <div className="flex gap-3.5 mt-4">
          {CATEGORIES.map((c, i) => {
            const isActive = activeCat === i
            return (
              <button
                key={i}
                onClick={() => { setActiveCat(i as ReportCategory); setSelectedTemplate(0) }}
                className="flex-1 px-4 py-3.5 rounded-[10px] cursor-pointer text-center transition-[0.2s]"
                style={{
                  border: `1px solid ${isActive ? c.borderColor : 'var(--bd)'}`,
                  background: isActive ? c.bgActive : 'var(--bg3)',
                }}
              >
                <div className="text-[22px] mb-1">{c.icon}</div>
                <div className="text-[12px] font-bold" style={{ color: isActive ? c.color : 'var(--t3)' }}>
                  {c.label}
                </div>
                <div className="text-[9px] text-text-3 mt-0.5">
                  {c.desc}
                </div>
              </button>
            )
          })}
        </div>
      </div>

      <div className="flex flex-1 overflow-hidden">
        {/* Left Sidebar - Template + Sections */}
        <div className="w-[250px] min-w-[250px] border-r border-border bg-bg-1 flex flex-col overflow-y-auto shrink-0">
          {/* 템플릿 선택 */}
          <div className="px-4 py-3 border-b border-border">
            <h3 className="text-[11px] font-bold text-text-2 font-korean flex items-center gap-2">📄 보고서 템플릿</h3>
          </div>
          <div className="flex flex-col gap-1.5 px-3 py-2 border-b border-border">
            {cat.templates.map((tmpl, i) => (
              <button
                key={i}
                onClick={() => setSelectedTemplate(i)}
                className="flex items-center gap-2 px-3 py-2.5 rounded-lg transition-all text-left"
                style={{
                  border: `1px solid ${selectedTemplate === i ? cat.borderColor : 'var(--bd)'}`,
                  background: selectedTemplate === i ? cat.bgActive : 'var(--bg2)',
                }}
              >
                <span className="text-[14px]">{tmpl.icon}</span>
                <span className="text-[11px] font-semibold" style={{ color: selectedTemplate === i ? cat.color : 'var(--t2)' }}>
                  {tmpl.label}
                </span>
              </button>
            ))}
          </div>

          {/* 섹션 체크 */}
          <div className="px-4 py-3 border-b border-border">
            <h3 className="text-[11px] font-bold text-text-2 font-korean flex items-center gap-2">📋 포함 섹션</h3>
          </div>
          <div className="flex flex-col gap-1.5 p-3">
            {sections.map(sec => (
              <button
                key={sec.id}
                onClick={() => toggleSection(sec.id)}
                className="flex items-start gap-2.5 p-2.5 rounded-lg border transition-all text-left"
                style={{
                  borderColor: sec.checked ? cat.borderColor : 'var(--bd)',
                  background: sec.checked ? cat.bgActive : 'var(--bg2)',
                  opacity: sec.checked ? 1 : 0.55,
                }}
              >
                <div
                  className="w-[18px] h-[18px] rounded shrink-0 mt-[1px] flex items-center justify-center text-[10px]"
                  style={{
                    background: sec.checked ? cat.color : 'var(--bg3)',
                    color: sec.checked ? '#fff' : 'transparent',
                    border: sec.checked ? 'none' : '1px solid var(--bd)',
                  }}
                >
                  ✓
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-1">
                    <span className="text-[12px]">{sec.icon}</span>
                    <span className="text-[11px] font-bold" style={{ color: sec.checked ? 'var(--t1)' : 'var(--t3)' }}>
                      {sec.title}
                    </span>
                  </div>
                  <p className="text-[9px] text-text-3 mt-0.5">
                    {sec.desc}
                  </p>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Right - Report Preview */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Preview Header */}
          <div className="flex items-center justify-between px-6 py-3 border-b border-border bg-bg-1">
            <h3 className="text-[13px] font-bold text-text-1 font-korean flex items-center gap-2">
              📄 보고서 미리보기
              <span className="text-[10px] font-semibold px-2 py-0.5 rounded" style={{ background: cat.bgActive, color: cat.color }}>
                {cat.templates[selectedTemplate].label}
              </span>
            </h3>
            <div className="flex items-center gap-2">
              <button
                onClick={handleDownload}
                className="px-3 py-1.5 text-[11px] font-semibold rounded transition-all font-korean flex items-center gap-1.5"
                style={{ background: cat.bgActive, border: `1px solid ${cat.borderColor}`, color: cat.color }}
              >
                📥 다운로드
              </button>
              <button
                onClick={handleSave}
                className="px-3 py-1.5 text-[11px] font-semibold rounded border border-border bg-bg-2 text-text-1 hover:bg-bg-hover transition-all font-korean flex items-center gap-1.5"
              >
                💾 저장
              </button>
            </div>
          </div>

          {/* Preview Content */}
          <div className="flex-1 overflow-y-auto px-6 py-5">
            {/* Report Header */}
            <div className="rounded-lg border border-border p-8 mb-6 bg-bg-2">
              <div className="text-center">
                <p className="text-[10px] text-text-3 font-korean mb-2">해양환경 위기대응 통합지원시스템</p>
                <h2 className="text-[20px] font-bold text-text-1 font-korean mb-2">{cat.reportName}</h2>
                <p className="text-[12px] font-korean" style={{ color: cat.color }}>{cat.templates[selectedTemplate].label}</p>
              </div>
            </div>

            {/* Dynamic Sections */}
            {activeSections.map(sec => (
              <div key={sec.id} className="rounded-lg border border-border mb-4 overflow-hidden bg-bg-2">
                <div className="px-5 py-3 border-b border-border">
                  <h4 className="text-[13px] font-bold text-text-1 font-korean flex items-center gap-2">
                    {sec.icon} {sec.title}
                  </h4>
                </div>
                <div className="p-5">
                  {/* ── 유출유 확산예측 섹션들 ── */}
                  {sec.id === 'oil-spread' && (
                    <>
                      <div className="w-full h-[140px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean mb-4">
                        [확산예측 지도 - 범위 조절 작업]
                      </div>
                      <div className="grid grid-cols-3 gap-3">
                        {[
                          { label: 'KOSPS', value: oilPayload?.spread.kosps || sampleOilData.spread.kosps, color: '#06b6d4' },
                          { label: 'OpenDrift', value: oilPayload?.spread.openDrift || sampleOilData.spread.openDrift, color: '#ef4444' },
                          { label: 'POSEIDON', value: oilPayload?.spread.poseidon || sampleOilData.spread.poseidon, color: '#f97316' },
                        ].map((m, i) => (
                          <div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
                            <p className="text-[10px] text-text-3 font-korean mb-1">{m.label}</p>
                            <p className="text-[20px] font-bold font-mono" style={{ color: m.color }}>{m.value}</p>
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                  {sec.id === 'oil-pollution' && (
                    <>
                      {oilPayload && !oilPayload.hasSimulation && (
                        <div className="mb-3 px-3 py-2 rounded text-[10px] font-korean" style={{ background: 'rgba(249,115,22,0.08)', border: '1px solid rgba(249,115,22,0.3)', color: '#f97316' }}>
                          시뮬레이션이 실행되지 않아 오염량은 입력값 기준으로 표시됩니다.
                        </div>
                      )}
                      <table className="w-full table-fixed border-collapse">
                        <colgroup><col style={{ width: '25%' }} /><col style={{ width: '25%' }} /><col style={{ width: '25%' }} /><col style={{ width: '25%' }} /></colgroup>
                        <tbody>
                          {[
                            ['유출량', oilPayload?.pollution.spillAmount || sampleOilData.pollution.spillAmount, '풍화량', oilPayload?.pollution.weathered || sampleOilData.pollution.weathered],
                            ['해상잔유량', oilPayload?.pollution.seaRemain || sampleOilData.pollution.seaRemain, '오염해역면적', oilPayload?.pollution.pollutionArea || sampleOilData.pollution.pollutionArea],
                            ['연안부착량', oilPayload?.pollution.coastAttach || sampleOilData.pollution.coastAttach, '오염해안길이', oilPayload?.pollution.coastLength || sampleOilData.pollution.coastLength],
                          ].map((row, i) => (
                            <tr key={i} className="border-b border-border">
                              <td className="px-4 py-3 text-[11px] text-text-3 font-korean bg-[rgba(255,255,255,0.02)]">{row[0]}</td>
                              <td className="px-4 py-3 text-[12px] text-text-1 font-mono font-semibold text-right">{row[1]}</td>
                              <td className="px-4 py-3 text-[11px] text-text-3 font-korean bg-[rgba(255,255,255,0.02)]">{row[2]}</td>
                              <td className="px-4 py-3 text-[12px] text-text-1 font-mono font-semibold text-right">{row[3]}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </>
                  )}
                  {sec.id === 'oil-sensitive' && (
                    <>
                      <p className="text-[11px] text-text-3 font-korean mb-3">반경 10 NM 기준</p>
                      <div className="flex flex-wrap gap-2">
                        {sampleOilData.sensitive.map((item, i) => (
                          <span key={i} className="px-3 py-1.5 text-[11px] font-semibold rounded-md bg-bg-3 border border-border text-text-2 font-korean">{item.label}</span>
                        ))}
                      </div>
                    </>
                  )}
                  {sec.id === 'oil-coastal' && (
                    <p className="text-[12px] text-text-2 font-korean">
                      최초 부착시간: <span className="font-semibold text-text-1">{oilPayload?.coastal?.firstTime ?? sampleOilData.coastal.firstTime}</span>
                      {' / '}
                      부착 해안길이: <span className="font-semibold text-text-1">{oilPayload?.pollution.coastLength || sampleOilData.coastal.coastLength}</span>
                    </p>
                  )}
                  {sec.id === 'oil-defense' && (
                    <div className="text-[12px] text-text-3 font-korean">
                      <p className="mb-2">방제자원 배치 계획에 따른 전략을 수립합니다.</p>
                      <div className="w-full h-[100px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean">
                        [방제자원 배치 지도]
                      </div>
                    </div>
                  )}
                  {sec.id === 'oil-tide' && (
                    <>
                      <p className="text-[12px] text-text-2 font-korean">
                        고조: <span className="font-semibold text-text-1">{sampleOilData.tide.highTide1}</span>
                        {' / '}저조: <span className="font-semibold text-text-1">{sampleOilData.tide.lowTide}</span>
                        {' / '}고조: <span className="font-semibold text-text-1">{sampleOilData.tide.highTide2}</span>
                      </p>
                      {oilPayload?.weather && (
                        <p className="text-[11px] text-text-3 font-korean mt-2">
                          기상: 풍향/풍속 <span className="text-text-2 font-semibold">{oilPayload.weather.windDir}</span>
                          {' / '}파고 <span className="text-text-2 font-semibold">{oilPayload.weather.waveHeight}</span>
                          {' / '}기온 <span className="text-text-2 font-semibold">{oilPayload.weather.temp}</span>
                        </p>
                      )}
                    </>
                  )}

                  {/* ── HNS 대기확산 섹션들 ── */}
                  {sec.id === 'hns-atm' && (
                    <>
                      {hnsPayload?.mapImageDataUrl ? (
                        <img
                          src={hnsPayload.mapImageDataUrl}
                          alt="대기확산 예측 지도"
                          className="w-full h-auto rounded-lg border border-border mb-4"
                          style={{ maxHeight: '300px', objectFit: 'contain' }}
                        />
                      ) : (
                        <div className="w-full h-[140px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean mb-4">
                          [대기확산 예측 지도]
                        </div>
                      )}
                      <div className="grid grid-cols-3 gap-3">
                        {[
                          { label: hnsPayload?.atm.model || 'ALOHA', value: hnsPayload?.atm.maxDistance || sampleHnsData.atm.aloha, color: '#f97316', desc: '최대 확산거리' },
                          { label: '최대 농도', value: hnsPayload?.maxConcentration || '—', color: '#ef4444', desc: '지상 1.5m 기준' },
                          { label: 'AEGL-1 면적', value: hnsPayload?.aeglAreas.aegl1 || '—', color: '#06b6d4', desc: '확산 영향 면적' },
                        ].map((m, i) => (
                          <div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
                            <p className="text-[10px] text-text-3 font-korean mb-1">{m.label}</p>
                            <p className="text-[20px] font-bold font-mono" style={{ color: m.color }}>{m.value}</p>
                            <p className="text-[8px] text-text-3 font-korean mt-1">{m.desc}</p>
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                  {sec.id === 'hns-hazard' && (
                    <div className="grid grid-cols-3 gap-3">
                      {[
                        { label: 'AEGL-3 구역', value: hnsPayload?.hazard.aegl3 || sampleHnsData.hazard.erpg3, area: hnsPayload?.aeglAreas.aegl3, color: '#ef4444', desc: '생명 위협' },
                        { label: 'AEGL-2 구역', value: hnsPayload?.hazard.aegl2 || sampleHnsData.hazard.erpg2, area: hnsPayload?.aeglAreas.aegl2, color: '#f97316', desc: '건강 피해' },
                        { label: 'AEGL-1 구역', value: hnsPayload?.hazard.aegl1 || sampleHnsData.hazard.evacuation, area: hnsPayload?.aeglAreas.aegl1, color: '#eab308', desc: '불쾌감' },
                      ].map((h, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
                          <p className="text-[9px] font-bold font-korean mb-1" style={{ color: h.color }}>{h.label}</p>
                          <p className="text-[18px] font-bold font-mono" style={{ color: h.color }}>{h.value}</p>
                          {h.area && <p className="text-[10px] text-text-3 font-mono mt-0.5">{h.area}</p>}
                          <p className="text-[8px] text-text-3 font-korean mt-1">{h.desc}</p>
                        </div>
                      ))}
                    </div>
                  )}
                  {sec.id === 'hns-substance' && (
                    <div className="grid grid-cols-2 gap-2 text-[11px]">
                      {[
                        { k: '물질명', v: hnsPayload?.substance.name || sampleHnsData.substance.name },
                        { k: 'UN번호', v: hnsPayload?.substance.un || sampleHnsData.substance.un },
                        { k: 'CAS번호', v: hnsPayload?.substance.cas || sampleHnsData.substance.cas },
                        { k: '위험등급', v: hnsPayload?.substance.class || sampleHnsData.substance.class },
                      ].map((r, i) => (
                        <div key={i} className="flex justify-between px-3 py-2 bg-bg-1 rounded border border-border">
                          <span className="text-text-3 font-korean">{r.k}</span>
                          <span className="text-text-1 font-semibold font-mono">{r.v}</span>
                        </div>
                      ))}
                      <div className="col-span-2 flex justify-between px-3 py-2 bg-bg-1 rounded border border-[rgba(239,68,68,0.3)]">
                        <span className="text-text-3 font-korean">독성기준</span>
                        <span className="text-[var(--red)] font-semibold font-mono text-[10px]">{hnsPayload?.substance.toxicity || sampleHnsData.substance.toxicity}</span>
                      </div>
                    </div>
                  )}
                  {sec.id === 'hns-ppe' && (
                    <div className="flex flex-wrap gap-2">
                      {sampleHnsData.ppe.map((item, i) => (
                        <span key={i} className="px-3 py-1.5 text-[11px] font-semibold rounded-md border text-text-2 font-korean" style={{ background: 'rgba(249,115,22,0.06)', borderColor: 'rgba(249,115,22,0.2)' }}>
                          🛡 {item}
                        </span>
                      ))}
                    </div>
                  )}
                  {sec.id === 'hns-facility' && (
                    <div className="grid grid-cols-3 gap-3">
                      {[
                        { label: '인근 학교', value: `${sampleHnsData.facility.schools}개소`, icon: '🏫' },
                        { label: '의료시설', value: `${sampleHnsData.facility.hospitals}개소`, icon: '🏥' },
                        { label: '주변 인구', value: sampleHnsData.facility.population, icon: '👥' },
                      ].map((f, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
                          <div className="text-[18px] mb-1">{f.icon}</div>
                          <p className="text-[14px] font-bold text-text-1 font-mono">{f.value}</p>
                          <p className="text-[9px] text-text-3 font-korean mt-1">{f.label}</p>
                        </div>
                      ))}
                    </div>
                  )}
                  {sec.id === 'hns-3d' && (
                    <div className="w-full h-[160px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean">
                      [3D 농도 분포 시각화]
                    </div>
                  )}
                  {sec.id === 'hns-weather' && (
                    <div className="grid grid-cols-4 gap-3">
                      {[
                        { label: '풍향', value: hnsPayload?.weather.windDir || 'NE 42°', icon: '🌬' },
                        { label: '풍속', value: hnsPayload?.weather.windSpeed || '5.2 m/s', icon: '💨' },
                        { label: '대기안정도', value: hnsPayload?.weather.stability || 'D (중립)', icon: '🌡' },
                        { label: '기온', value: hnsPayload?.weather.temperature || '8.5°C', icon: '☀️' },
                      ].map((w, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-3 text-center">
                          <div className="text-[16px] mb-0.5">{w.icon}</div>
                          <p className="text-[13px] font-bold text-text-1 font-mono">{w.value}</p>
                          <p className="text-[8px] text-text-3 font-korean mt-1">{w.label}</p>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* ── 긴급구난 섹션들 ── */}
                  {sec.id === 'rescue-safety' && (
                    <div className="grid grid-cols-4 gap-3">
                      {[
                        { label: 'GM (복원력)', value: sampleRescueData.safety.gm, color: '#f97316' },
                        { label: '경사각 (Heel)', value: sampleRescueData.safety.heel, color: '#ef4444' },
                        { label: '트림 (Trim)', value: sampleRescueData.safety.trim, color: '#06b6d4' },
                        { label: '안전 상태', value: sampleRescueData.safety.status, color: '#f97316' },
                      ].map((s, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-3 text-center">
                          <p className="text-[9px] text-text-3 font-korean mb-1">{s.label}</p>
                          <p className="text-[16px] font-bold font-mono" style={{ color: s.color }}>{s.value}</p>
                        </div>
                      ))}
                    </div>
                  )}
                  {sec.id === 'rescue-timeline' && (
                    <div className="flex flex-col gap-2">
                      {[
                        { time: '06:28', event: '충돌 발생 — ORIENTAL GLORY ↔ HAI FENG 168', color: '#ef4444' },
                        { time: '06:30', event: 'No.1P 탱크 파공, 벙커C유 유출 개시', color: '#f97316' },
                        { time: '06:35', event: 'VHF Ch.16 조난통신, 해경 출동 요청', color: '#eab308' },
                        { time: '07:15', event: '해경 3009함 현장 도착, 방제 개시', color: '#06b6d4' },
                      ].map((e, i) => (
                        <div key={i} className="flex items-center gap-3 px-3 py-2 bg-bg-1 rounded border border-border">
                          <span className="font-mono text-[11px] font-bold min-w-[40px]" style={{ color: e.color }}>{e.time}</span>
                          <span className="text-[11px] text-text-2 font-korean">{e.event}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  {sec.id === 'rescue-casualty' && (
                    <div className="grid grid-cols-4 gap-3">
                      {[
                        { label: '총원', value: sampleRescueData.casualty.total },
                        { label: '구조완료', value: sampleRescueData.casualty.rescued, color: '#22c55e' },
                        { label: '실종', value: sampleRescueData.casualty.missing, color: '#ef4444' },
                        { label: '부상', value: sampleRescueData.casualty.injured, color: '#f97316' },
                      ].map((c, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
                          <p className="text-[9px] text-text-3 font-korean mb-1">{c.label}</p>
                          <p className="text-[24px] font-bold font-mono" style={{ color: c.color }}>{c.value}</p>
                          <p className="text-[8px] text-text-3 font-korean mt-0.5">명</p>
                        </div>
                      ))}
                    </div>
                  )}
                  {sec.id === 'rescue-resource' && (
                    <table className="w-full text-[11px] border-collapse">
                      <thead>
                        <tr className="border-b border-border">
                          <th className="px-3 py-2 text-left text-text-3 font-korean">유형</th>
                          <th className="px-3 py-2 text-left text-text-3 font-korean">선박/장비명</th>
                          <th className="px-3 py-2 text-center text-text-3 font-korean">도착예정</th>
                          <th className="px-3 py-2 text-center text-text-3 font-korean">상태</th>
                        </tr>
                      </thead>
                      <tbody>
                        {sampleRescueData.resources.map((r, i) => (
                          <tr key={i} className="border-b border-border">
                            <td className="px-3 py-2 text-text-2 font-korean">{r.type}</td>
                            <td className="px-3 py-2 text-text-1 font-mono font-semibold">{r.name}</td>
                            <td className="px-3 py-2 text-text-2 text-center font-mono">{r.eta}</td>
                            <td className="px-3 py-2 text-center">
                              <span className="px-2 py-0.5 rounded text-[10px] font-semibold font-korean" style={{
                                background: r.status === '투입중' ? 'rgba(34,197,94,0.15)' : r.status === '이동중' ? 'rgba(249,115,22,0.15)' : 'rgba(138,150,168,0.15)',
                                color: r.status === '투입중' ? '#22c55e' : r.status === '이동중' ? '#f97316' : '#8a96a8',
                              }}>
                                {r.status}
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  )}
                  {sec.id === 'rescue-grounding' && (
                    <div className="grid grid-cols-3 gap-3">
                      {[
                        { label: '좌초 위험도', value: sampleRescueData.grounding.risk, color: '#ef4444' },
                        { label: '최근 천해', value: sampleRescueData.grounding.nearestShallow, color: '#f97316' },
                        { label: '현재 수심', value: sampleRescueData.grounding.depth, color: '#06b6d4' },
                      ].map((g, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
                          <p className="text-[9px] text-text-3 font-korean mb-1">{g.label}</p>
                          <p className="text-[14px] font-bold font-mono" style={{ color: g.color }}>{g.value}</p>
                        </div>
                      ))}
                    </div>
                  )}
                  {sec.id === 'rescue-weather' && (
                    <div className="grid grid-cols-4 gap-3">
                      {[
                        { label: '파고', value: '1.5 m', icon: '🌊' },
                        { label: '풍속', value: '5.2 m/s', icon: '🌬' },
                        { label: '조류', value: '1.2 kts NE', icon: '🌀' },
                        { label: '시정', value: '8 km', icon: '👁' },
                      ].map((w, i) => (
                        <div key={i} className="bg-bg-1 border border-border rounded-lg p-3 text-center">
                          <div className="text-[16px] mb-0.5">{w.icon}</div>
                          <p className="text-[13px] font-bold text-text-1 font-mono">{w.value}</p>
                          <p className="text-[8px] text-text-3 font-korean mt-1">{w.label}</p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}

            {activeSections.length === 0 && (
              <div className="flex flex-col items-center justify-center py-20 text-text-3">
                <div className="text-4xl mb-4">📋</div>
                <p className="text-sm font-korean">왼쪽에서 보고서에 포함할 섹션을 선택하세요</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ReportGenerator;