import { card, cardBg, labelStyle } from '../HNSTheoryView';

export function VerificationPanel() {
  return (
    <div className="grid gap-4 mb-4" style={{ gridTemplateColumns: '2fr 1fr' }}>
      {/* 검증 결과 테이블 */}
      <div className={`${card} ${cardBg} p-4`}>
        <div style={labelStyle('var(--color-accent)')}>
          ✅ 모델 검증 결과 — 실측 데이터 대비 정확도
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-caption" style={{ borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                <th
                  className="p-2 text-left"
                  style={{
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  검증 항목
                </th>
                <th
                  className="p-2 text-center"
                  style={{
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  ALOHA
                </th>
                <th
                  className="p-2 text-center"
                  style={{
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  이문진박사모델
                </th>
                <th
                  className="p-2 text-center"
                  style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
                >
                  실측값
                </th>
                <th
                  className="p-2 text-center"
                  style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
                >
                  오차율
                </th>
              </tr>
            </thead>
            <tbody>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">NH₃ 최대 도달거리 (AEGL-2)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  8.2 km
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  7.1 km
                </td>
                <td className="p-2 text-center font-mono text-fg">6.8 km</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +20.6%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +4.4%
                  </span>
                </td>
              </tr>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">풍하 1km 지점 농도 (ppm)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  245
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  198
                </td>
                <td className="p-2 text-center font-mono text-fg">187</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +31.0%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +5.9%
                  </span>
                </td>
              </tr>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">MeOH 증기 확산 면적 (km²)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  4.8
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  3.6
                </td>
                <td className="p-2 text-center font-mono text-fg">3.4</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +41.2%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +5.9%
                  </span>
                </td>
              </tr>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">H₂ 가연성 구름 반경 (m)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  280
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  235
                </td>
                <td className="p-2 text-center font-mono text-fg">220</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +27.3%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +6.8%
                  </span>
                </td>
              </tr>
              <tr>
                <td className="p-2 text-fg">LNG Pool 확산 직경 (m)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  165
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  142
                </td>
                <td className="p-2 text-center font-mono text-fg">138</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +19.6%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +2.9%
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
        >
          <b style={{ color: 'var(--color-accent)' }}>결론:</b> ALOHA는 해양 환경에서{' '}
          <b style={{ color: 'var(--color-accent)' }}>평균 20~40% 과대 예측</b> 경향.
          이문진박사모델은 해양 보정 인자 적용으로{' '}
          <b style={{ color: 'var(--color-accent)' }}>평균 오차 ±5~7%</b>로 대폭 개선. 특히 풍하 1km
          이내 근거리 농도 예측 정확도가 현저히 향상됨.
        </div>
      </div>

      {/* 참고문헌 + 시스템 적용 */}
      <div className="flex flex-col gap-3">
        <div className={`${card} ${cardBg} p-4`}>
          <div className="text-label-1 font-bold text-fg mb-2.5">📚 참고 문헌</div>
          <div className="flex flex-col gap-2 text-caption text-fg-sub leading-[1.6]">
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              이문진 외, "해양 HNS 사고 시 대기확산 예측을 위한 가우시안 모델의 해양환경 보정에 관한
              연구", 한국해양환경·에너지학회지, 2014
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              이문진 외, "친환경 선박연료 해양 유출 시 대기확산 특성 연구 — 암모니아 기화율 모델링",
              KIOST, 2023
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              EPA, "ALOHA User's Manual", 2024
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              Pasquill, F., "The Estimation of the Dispersion of Windborne Material", Meteorological
              Magazine, 1961
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              Charnock, H., "Wind stress on a water surface", Q.J.R. Meteorol. Soc., 1955
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              유영현, "HNS 재난사고에 대한 해양경찰의 대응 방안", 한국위기관리논집, 9(11), pp.77-92,
              2013
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              해양경찰청, "HNS 사고 국가 대비 대응 체제 선진화 방안 연구용역 최종보고서", 2011
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              김창겸·이문진 외, "해양산업시설 배출 위험유해물질(HNS)의 해양확산 수치모의",
              한국해양환경·안전학회지, 30(s4), pp.42-51, 2024
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              장하용·이문진 외, "신속한 의사결정을 위한 HNS 사고이력관리시스템 설계 및 구현",
              한국해양환경·안전학회지, 23(2), pp.168-176, 2017
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              박경애·이진호·박재진·김태성·이문진, "인공위성 원격탐사 기반 AI 활용 위험·유해물질(HNS)
              탐지 기술 개발", 한국해양환경·에너지학회 추계학술대회, pp.125-126, 2025 — HNS의
              열적외선 스펙트럼 수집·분석, Sentinel-2 광학위성 영상에 AI 기법을 적용하여 HNS
              탐지·분류, 스펙트럼 기반 분석 방법과 비교 검증. 해양수산부 지원(RS-2023-00254781)
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              오진덕·김주영·이득재·김용명·최훈·이문진, "다항목 HNS 데이터의 실시간 취득 및 AI를
              활용한 결측값 실시간 처리 기술 개발", 한국해양과학기술협의회 공동학술대회, pp.85-86,
              2024 — LSTM(Long Short-Term Memory) 순환 신경망으로 HNS 시계열 데이터의 결측값을
              예측·보정하는 방법 연구, 다양한 모의 자료로 성능 비교·검증. 해양수산부
              지원(RS-2021-KS211535)
            </div>
          </div>
        </div>
        <div
          className="rounded-[10px] p-[14px]"
          style={{
            background: 'rgba(6,182,212,.04)',
            border: '1px solid rgba(6,182,212,.2)',
          }}
        >
          <div className="text-label-2 font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            💡 시스템 적용 방안
          </div>
          <div className="text-caption text-fg-sub leading-[1.7]">
            WING 시스템은 기본 ALOHA 엔진 위에{' '}
            <b style={{ color: 'var(--color-accent)' }}>이문진박사모델 해양 보정 모듈</b>을 레이어로
            적용하여 두 모델의 결과를 동시에 제공합니다. 사용자는 보수적 예측(ALOHA)과 정밀
            예측(이문진박사모델)을 비교하여 의사결정할 수 있습니다.
          </div>
        </div>
      </div>
    </div>
  );
}
