import { useState } from 'react';
import { card, cardBg, labelStyle, tag } from '../OilSpillTheoryView';

export function VerificationPanel() {
  const [papersOpen, setPapersOpen] = useState(false);
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div style={labelStyle('var(--fg-default)')}>모델 검증 사례</div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          WING 시스템의 유출유 확산 모델은{' '}
          <b className="text-color-info">과거 실제 사고 재현 시뮬레이션</b>을 통해 정확도가
          검증되었습니다.
        </div>
      </div>

      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center justify-between mb-2">
          <div style={labelStyle('var(--fg-default)')}>2007년 허베이 스피리트 사고 재현</div>
          <span
            className="text-label-2 px-2 py-0.5 rounded"
            style={{
              background: 'var(--bg-elevated)',
              color: 'var(--color-accent)',
              fontWeight: 500,
            }}
          >
            검증완료
          </span>
        </div>
        <div className="grid grid-cols-4 gap-2">
          {[
            { value: '78.4%', label: '해안 표착 예측 일치율', color: 'var(--color-accent)' },
            { value: '±12%', label: '유막 면적 오차', color: 'var(--color-accent)' },
            { value: '±8h', label: '해안 도달 시간 오차', color: 'var(--color-accent)' },
            { value: '3종', label: '비교 검증 모델 수', color: 'var(--color-accent)' },
          ].map((s) => (
            <div key={s.label} className="text-center p-2 rounded-md bg-bg-base">
              <div
                className="font-bold"
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  color: s.color,
                  fontFamily: 'var(--font-mono)',
                }}
              >
                {s.value}
              </div>
              <div className="text-label-2 text-fg-default">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
      {/* 2014년 우이산 충돌 사고 재현 */}
      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center justify-between mb-2">
          <div style={labelStyle('var(--fg-default)')}>2014년 우이산 충돌 사고 재현</div>
          <span
            className="text-label-2 px-2 py-0.5 rounded"
            style={{
              background: 'var(--bg-elevated)',
              color: 'var(--color-accent)',
              fontWeight: 500,
            }}
          >
            검증완료
          </span>
        </div>
        <div className="text-label-2 text-fg-sub leading-[1.6]">
          여수 오동도 인근 원유 유출 사고를 KOSPS 모델로 재현한 결과, 실제 위성 SAR 영상과 비교 시{' '}
          <b className="text-color-accent">유막 중심 이동 경로 일치율 82.1%</b> 확인. 남해 특유의
          복잡한 조류 패턴 반영이 관건.
        </div>
      </div>

      {/* 관련 논문 */}
      <div className={`${card} ${cardBg}`}>
        <div
          className="flex items-center gap-1.5 mb-2 cursor-pointer select-none"
          onClick={() => setPapersOpen(!papersOpen)}
        >
          <span
            style={{
              ...tag('var(--fg-sub)'),
              fontWeight: 700,
              fontSize: 'var(--font-size-label-1)',
            }}
          >
            📄 모델 검증 관련 논문
          </span>
          <span
            className="text-label-2 ml-1"
            style={{
              color: 'var(--fg-disabled)',
              transition: 'transform .2s',
              display: 'inline-block',
              transform: papersOpen ? 'rotate(180deg)' : 'rotate(0)',
            }}
          >
            ▼
          </span>
        </div>
        {papersOpen && (
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            {[
              {
                num: '①',
                title: '허베이스피리트호 유출유 확산예측 검증 분석',
                authors: '이문진 · 김선동 · 김혜진 · 오세웅',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.3154 | 2010',
                desc: 'Radarsat 인공위성영상 비교 분석 · NOAA GNOME과 동일 입력조건 하 비교 검증',
                color: 'var(--color-info)',
                system: 'KOSPS',
              },
              {
                num: '②',
                title: '3차원 유출유 확산예측 시스템 연구',
                authors: '이문진 · 김혜진 · 강관근',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.17-18 | 2013',
                desc: 'Monte Carlo Simulation 기반 3D 확산모델 · 허베이 스피리트호 720시간 적용 검증',
                color: 'var(--color-accent)',
                system: 'KOSPS',
              },
              {
                num: '③',
                title: '유출유 확산예측 모델의 해양사고 적용 및 개선방안 연구',
                authors: '이문진 · 김혜진',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.2353 | 2014',
                desc: 'GS칼텍스 송유관 · Captain Vangelis 유출사고 적용 검증 · 현장 보고자료 비교 분석',
                color: 'var(--fg-default)',
                system: 'KOSPS',
              },
              {
                num: '④',
                title: '해양유류오염사고 위해도 평가에 관한 연구',
                authors: '이문진 · 김혜진',
                journal: '한국해양공학회지',
                detail: '제23권 1호, pp.24-30 | 2009',
                desc: '20년 과거자료 기반 100회 몬테카를로 통계 위험평가 · 가로림만 해안/어장 도달확률 산정',
                color: 'var(--color-accent)',
                system: 'KOSPS',
              },
              {
                num: '⑤',
                title: '한반도 인근 해역 MOHID 지역 해양순환 모델 검증',
                authors: '이재호 · 임병준 · 김도연 외',
                journal: '한국지구과학회지',
                detail: '제39권 5호, pp.436-457 | 2018',
                desc: 'POSEIDON 기반 MOHID 모델 동아시아 해역 2016년 검증 · SST RMSE 0.42~0.78°C',
                color: 'var(--color-info)',
                system: 'POSEIDON',
              },
              {
                num: '⑥',
                title: '원격탐사 기반의 유출유 확산예측 및 해양오염 방제 지원',
                authors: '김도연 · 김충기 · 양찬수',
                journal: '한국해양환경·에너지학회 학술대회논문집',
                detail: 'pp.79 | 2022',
                desc: '위성 원격탐사(SAR·광학) 기반 유출유 탐지 · POSEIDON 확산예측 모델 연동 검증',
                color: 'var(--color-info)',
                system: 'POSEIDON',
              },
              {
                num: '⑦',
                title: 'OpenDrift v1.0: a generic framework for trajectory modelling',
                authors: 'Dagestad et al.',
                journal: 'Geoscientific Model Development',
                detail: 'Vol.11, pp.1405-1420 | 2018',
                desc: 'OpenDrift 프레임워크 설계·구현·검증 · OpenOil 유출유 모듈 다중 사례 검증',
                color: 'var(--color-accent)',
                system: 'OpenDrift',
              },
              {
                num: '⑧',
                title: 'Observation-based evaluation of surface wave effects on currents',
                authors: 'Röhrs et al.',
                journal: 'J. Geophys. Res. Oceans',
                detail: '| 2013',
                desc: 'Stokes drift 파랑 기여 효과 · OpenOil 유출유 확산 현장 관측 검증',
                color: 'var(--color-accent)',
                system: 'OpenDrift',
              },
              {
                num: '⑨',
                title: 'Numerical modelling and fate assessment of oil spills at sea',
                authors: 'Nordam et al.',
                journal: 'Marine Pollution Bulletin',
                detail: '| 2019',
                desc: '3D 유출유 수직 분포 모의 · 해저면 도달 경로 분석 · 풍화 통합 수치 검증',
                color: 'var(--color-accent)',
                system: 'OpenDrift',
              },
              {
                num: '⑩',
                title: '유출유의 초기 확산예측을 위한 고해상도 결합모형 개발',
                authors: '손상영 · 이칠우 · 윤현덕 · 정태화',
                journal: '한국해안·해양공학회논문집',
                detail: '제29권 4호, pp.189-197 | 2017',
                desc: 'Boussinesq + MEDSLIK-II 결합 모형 · 울산 진하해역 시뮬레이션 검증',
                color: 'var(--color-accent)',
                system: '결합모형',
              },
            ].map((paper) => (
              <div
                key={paper.num}
                className="rounded-lg p-2.5"
                style={{
                  background: 'var(--bg-base)',
                  border: '1px solid var(--stroke-default)',
                  display: 'grid',
                  gridTemplateColumns: '28px 1fr',
                  gap: '10px',
                  alignItems: 'start',
                }}
              >
                <div
                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-label-2 shrink-0"
                  style={{ background: `${paper.color}1F` }}
                >
                  {paper.num}
                </div>
                <div>
                  <div className="flex items-center gap-1.5 mb-0.5">
                    <div className="font-bold">{paper.title}</div>
                    <span
                      style={{
                        ...tag(paper.color),
                        fontSize: 'var(--font-size-caption)',
                        padding: '1px 5px',
                      }}
                    >
                      {paper.system}
                    </span>
                  </div>
                  <div className="text-fg-default leading-[1.6]">
                    {paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b>{' '}
                    {paper.detail}
                  </div>
                  <div className="mt-1 text-fg-sub">{paper.desc}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
