import { sanitizeHtml } from '@common/utils/sanitize';
import { card, cardBg, labelStyle } from '../OilSpillTheoryView';

export function SystemOverviewPanel() {
  return (
    <div>
      {/* 시스템 개요 */}
      <div className={`${card} ${cardBg}`}>
        {/* 1행: 유출유 확산 모델이란? + 활용 목적 */}
        <div className="grid grid-cols-2 gap-4 mb-4">
          <div>
            <div className="text-title-3 font-bold text-fg mb-2">📋 유출유 확산 모델이란?</div>
            <div className="text-label-1 text-fg-sub leading-[1.8]">
              해상에서 유출된 <b>원유 및 유류</b>가 해수면 위에서 이동·확산·풍화되는 과정을
              물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다.{' '}
              <b>라그랑지안 입자추적법</b>을 기반으로 해류·바람·조류의 복합 영향을 시뮬레이션합니다.
            </div>
          </div>
          <div>
            <div className="text-title-3 font-bold text-fg mb-2">🎯 활용 목적</div>
            <div className="flex flex-col gap-1.5 text-label-1 text-fg-sub">
              <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-bg-base">
                <span className="text-fg font-bold">①</span> 유출 사고 시{' '}
                <b>오염 확산 범위 신속 예측</b>
              </div>
              <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-bg-base">
                <span className="text-fg font-bold">②</span> <b>방제 자원 배치</b> 및 오일펜스 전략
                수립
              </div>
              <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-bg-base">
                <span className="text-fg font-bold">③</span> 해안선 도달 예측 및 <b>피해 최소화</b>{' '}
                대응
              </div>
            </div>
          </div>
        </div>
        {/* 2행: 해양환경 데이터 수집 + 유류 물성 반영 + 수치 시뮬레이션 */}
        <div className="grid grid-cols-3 gap-4">
          <div>
            <div className="text-title-3 font-bold text-fg mb-2">🌊 해양환경 데이터 수집</div>
            <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.7]">
              <b>실시간 해양·기상 관측 데이터</b>를 수집하여 모델 강제력으로 입력합니다.
            </div>
            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
              <div className="px-2 py-1 rounded bg-bg-base">🌬️ 표층 바람 (KMA·ECMWF)</div>
              <div className="px-2 py-1 rounded bg-bg-base">🌊 해류·조류 (KHOA 조위표)</div>
              <div className="px-2 py-1 rounded bg-bg-base">🌡️ 수온·파고 (NIFS 수치예보)</div>
            </div>
          </div>
          <div>
            <div className="text-title-3 font-bold text-fg mb-2">🧮 수치 시뮬레이션</div>
            <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.7]">
              <b>라그랑지안 입자 시뮬레이션</b>으로 유출유 이동·확산·풍화를 동시 계산합니다.
            </div>
            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
              <div className="px-2 py-1 rounded bg-bg-base">📍 수만~수십만 가상 입자 추적</div>
              <div className="px-2 py-1 rounded bg-bg-base">⏱️ 1시간 스텝 반복 계산</div>
              <div className="px-2 py-1 rounded bg-bg-base">🗺️ 농도 분포·해안 도달 예측</div>
            </div>
          </div>
          <div>
            <div className="text-title-3 font-bold text-fg mb-2">🛢️ 유류 물성 반영</div>
            <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.7]">
              유류 종류별 <b>물리·화학적 특성</b>을 모델에 반영하여 실제 거동을 재현합니다.
            </div>
            <div className="flex flex-wrap gap-1">
              {['비중(API)', '점도', '증발률', '용해도', '인화점', '유화특성'].map((label) => (
                <span
                  key={label}
                  className="px-2 py-0.5 rounded text-label-2 text-fg-sub bg-bg-base"
                >
                  {label}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 모델 비교 카드 */}
      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center justify-between mb-3.5">
          <div style={labelStyle('var(--fg-default)')}>🤖 WING 탑재 유출유 확산 모델 비교</div>
          <span className="text-label-2 text-fg-default">3종 앙상블 운용 · 불확실성 정량화</span>
        </div>
        <div className="grid grid-cols-3 gap-2.5 mb-3.5">
          {[
            {
              name: 'KOSPS',
              sub: 'Korea Oil Spill Prediction System',
              color: 'var(--color-info)',
              icon: '🔷',
              desc: '한국 해역 특화 상시 운용 체계. CHARRY 조류모델 + fBm 난류확산 + 풍화 5단계로 구성된 국산 유출유 확산 시스템.',
              org: '한국해양과학기술원(KIOST)',
              year: '2011년 (운용체계), 특허 2015년',
              strength: '한국 서해·남해 조류 정확도',
              weakness: '3D 수직혼합 미반영',
            },
            {
              name: 'POSEIDON',
              sub: '입자추적 최적화 예측 시스템',
              color: 'var(--color-info)',
              icon: '🔵',
              desc: '뜰개(Drifter) 관측 경로 기반 매개변수 자동최적화. MOHID 3D 해양순환모델과 진화알고리즘을 결합한 차세대 시스템.',
              org: '한국환경연구원, (주)아라종합기술, 한국해양기상기술',
              year: '특허: 등록 10-1868791 (2018)',
              strength: 'GA/DE/PSO 자동 매개변수 최적화',
              weakness: '실시간 뜰개 운용 필요',
            },
            {
              name: 'OpenDrift',
              sub: 'Python 기반 오픈소스 라그랑지안 프레임워크',
              color: 'var(--color-info)',
              icon: '🔵',
              desc: '노르웨이 기상청 개발 오픈소스. OpenOil 모듈로 유출유 거동 모의. 전 세계 해양모델(NEMO·ROMS·HYCOM)과 범용 연동.',
              org: '노르웨이 기상청(MET Norway)',
              year: '논문: Dagestad et al., GMD 11, 2018',
              strength: '오픈소스·모듈 확장·3D 지원',
              weakness: '한국 해역 조류 정밀도',
            },
          ].map((m) => (
            <div
              key={m.name}
              className="rounded-[10px] p-3.5"
              style={{
                background: 'var(--bg-base)',
                border: `1px solid ${m.color}40`,
              }}
            >
              <div className="flex items-center gap-2 mb-2.5">
                <div
                  className="w-7 h-7 rounded-md flex items-center justify-center text-title-3"
                  style={{ background: `${m.color}25` }}
                >
                  {m.icon}
                </div>
                <div>
                  <div className="text-label-1 font-bold" style={{ color: m.color }}>
                    {m.name}
                  </div>
                  <div className="text-label-2 text-fg-default">{m.sub}</div>
                </div>
              </div>
              <div className="text-label-2 mb-2 text-fg-sub leading-[1.7]">{m.desc}</div>
              <div className="flex flex-col gap-0.5 text-label-2 text-fg-sub">
                <div
                  className="px-1.5 py-0.5 rounded"
                  style={{ background: `${m.color}0F`, color: 'var(--fg-sub)' }}
                >
                  📍 개발: {m.org}
                </div>
                <div
                  className="px-1.5 py-0.5 rounded"
                  style={{ background: `${m.color}0F`, color: 'var(--fg-sub)' }}
                >
                  🗓️ {m.year}
                </div>
                <div
                  className="px-1.5 py-0.5 rounded"
                  style={{ background: `${m.color}0F`, color: 'var(--fg-sub)' }}
                >
                  🎯 강점: {m.strength}
                </div>
                <div
                  className="px-1.5 py-0.5 rounded"
                  style={{ background: 'rgba(59,130,246,.06)', color: 'var(--fg-sub)' }}
                >
                  ⚠️ 한계: {m.weakness}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 상세 비교 테이블 */}
        <div className="overflow-x-auto">
          <table
            className="w-full border-collapse"
            style={{ fontSize: 'var(--font-size-label-2)' }}
          >
            <thead>
              <tr
                style={{
                  background: 'rgba(255,255,255,.03)',
                  borderBottom: '1px solid var(--stroke-light)',
                }}
              >
                <th
                  className="py-2 px-3 text-left text-fg-default font-medium"
                  style={{ width: '15%' }}
                >
                  구분
                </th>
                <th
                  className="py-2 px-3 text-center text-color-info font-bold"
                  style={{ width: '28%' }}
                >
                  🔷 KOSPS
                </th>
                <th
                  className="py-2 px-3 text-center text-color-info font-bold"
                  style={{ width: '28%' }}
                >
                  🔵 POSEIDON
                </th>
                <th
                  className="py-2 px-3 text-center text-color-info font-bold"
                  style={{ width: '29%' }}
                >
                  🔵 OpenDrift
                </th>
              </tr>
            </thead>
            <tbody>
              {[
                {
                  label: '개발기관',
                  k: '한국해양과학기술원<br><span style="font-size:9px;color:var(--fg-disabled)">(KIOST, 구 KORDI)</span>',
                  p: '한국환경연구원<br>(주)아라종합기술<br>한국해양기상기술<br><span style="font-size:9px;color:var(--fg-disabled)">컨소시엄</span>',
                  o: '노르웨이 기상청<br><span style="font-size:9px;color:var(--fg-disabled)">(MET Norway · OpenOil)</span>',
                },
                {
                  label: '핵심 근거<br><span style="font-size:9px">(논문·특허)</span>',
                  k: '<div style="margin-bottom:3px;color:var(--color-accent)">① 등록특허 10-1567431 (2015)</div><div style="color:var(--fg-disabled)">이문진·김혜진 외, 유출유 확산 예측 방법</div><div style="margin-top:3px;color:var(--color-accent)">② 해양환경안전학회지 17(4) (2011)</div><div style="color:var(--fg-disabled)">김혜진·이문진 외, KOSPS 상시 운용 체계</div><div style="margin-top:3px;color:var(--color-accent)">③ 해양환경안전학회 춘계 발표 (2008)</div><div style="color:var(--fg-disabled)">이문진 외, CHARRY 조류모델 실시간 적용</div>',
                  p: '<div style="margin-bottom:3px;color:var(--color-info)">① 등록특허 10-1868791 (2018)</div><div style="color:var(--fg-disabled)">김도연·김충기 외, 입자추적 최적화 방법</div><div style="margin-top:3px;color:var(--color-info)">② 한국지구과학회지 39(5) (2018)</div><div style="color:var(--fg-disabled)">이재호·임병준·김도연 외, MOHID 동아시아 검증</div><div style="margin-top:3px;color:var(--color-info)">③ Ocean Science Journal (2019)</div><div style="color:var(--fg-disabled)">김충기 외, 한반도 인근 해역 POSEIDON 성능 평가</div>',
                  o: '<div style="margin-bottom:3px;color:var(--color-accent)">① Geosci. Model Dev. 11 (2018)</div><div style="color:var(--fg-disabled)">Dagestad et al., OpenDrift v1.0</div><div style="margin-top:3px;color:var(--color-accent)">② J. Geophys. Res. Oceans (2013)</div><div style="color:var(--fg-disabled)">Röhrs et al., OpenOil 유출유 검증</div><div style="margin-top:3px;color:var(--color-accent)">③ Mar. Pollut. Bull. (2019)</div><div style="color:var(--fg-disabled)">Nordam et al., 3D 유출유 수직분포 모의</div>',
                },
                {
                  label: '추적 방식',
                  k: '라그랑지안 입자추적<br><span style="font-size:9px;color:var(--fg-disabled)">Monte Carlo + fBm 난류확산</span>',
                  p: '라그랑지안 입자추적<br><span style="font-size:9px;color:var(--fg-disabled)">뜰개 동화 최적화</span>',
                  o: '라그랑지안 입자추적<br><span style="font-size:9px;color:var(--fg-disabled)">2D/3D 선택적 운용</span>',
                },
                {
                  label: '조류 예측',
                  k: '<span style="color:var(--color-accent);font-weight:600">CHARRY 모델</span><br><span style="font-size:9px;font-weight:400">조화분석+수치모델 결합</span>',
                  p: '<span style="color:var(--color-info);font-weight:600">MOHID 조석모듈</span><br><span style="font-size:9px;font-weight:400">3D 완전 연산</span>',
                  o: '<span style="color:var(--color-accent);font-weight:600">외부 모델 입력</span><br><span style="font-size:9px;font-weight:400">NEMO·ROMS·HYCOM 등</span>',
                },
                {
                  label: '취송류',
                  k: '이문진·강용균(2000) 경험식<br>V=0.029×Vw, θ=θw+18.6°',
                  p: 'MOHID 바람응력 직접 계산<br>Drag coefficient 적용',
                  o: 'wind_drift_factor 설정<br>기본 3% (OpenOil 표준)',
                },
                {
                  label: '해양 강제력',
                  k: '<span style="color:var(--color-accent)">HYCOM 해류·KMA UM 바람</span><br>NGSST 수온·검조소 조위',
                  p: '<span style="color:var(--color-info)">MOHID 내부 계산</span><br>KMA/ECMWF 기상 입력',
                  o: '<span style="color:var(--color-accent)">다중 모델 지원</span><br>NorESM·TOPAZ·GFS 등',
                },
                {
                  label: '수심 격자',
                  k: '15초 등간격 (약 463m)<br>3,225,600 격자',
                  p: '동아시아 9km<br>한반도 3km Nesting',
                  o: '입력 모델 해상도 종속<br>~1/12° (약 9km)',
                },
                {
                  label: '매개변수\n최적화',
                  k: '취송류 경험식 계수<br>수동 보정',
                  p: '<span style="color:var(--color-info);font-weight:600;font-size:10px">GA · DE · HS · PSO<br>뜰개 관측 자동 최적화</span>',
                  o: '설정파일 기반<br>수동 또는 DA 연동',
                },
                {
                  label: '풍화 모델',
                  k: '<span style="color:var(--color-accent);font-weight:600">5단계 통합</span><br>퍼짐(Fay 1969)·증발(Stiver&amp;Mackay)<br>소산·유상화(Mackay 1980)·침강',
                  p: '<span style="color:var(--color-info);font-weight:600">물리기반 전산</span><br>MOHID Lagrangian 모듈<br>유류 물성 DB 연동',
                  o: '<span style="color:var(--color-accent);font-weight:600">OpenOil 표준</span><br>NOAA ADIOS2 유류 DB<br>2000종+ 유류 물성 지원',
                },
                {
                  label: '난류 확산',
                  k: 'fBm 기반<br>σ²=At<sup>m</sup> (m≈2H, 0.45~2.46)',
                  p: 'Stochastic 확산<br>확산계수 실측 보정',
                  o: 'Euler-Maruyama 기법<br>수평/수직 확산계수 설정',
                },
                {
                  label: '3D 지원',
                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.1);color:var(--color-info);font-weight:700">미지원 (2D)</span>',
                  p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.12);color:var(--color-info);font-weight:700">지원 (3D)</span>',
                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">지원 (3D)</span>',
                },
                {
                  label: '유류 DB',
                  k: '국내 주요 유종<br>맞춤 물성 파라미터',
                  p: '국내외 주요 유종<br>물성 DB 구축',
                  o: '<span style="color:var(--color-accent);font-weight:600">NOAA ADIOS2 연동<br>2,000종+ 광범위 지원</span>',
                },
                {
                  label: '오픈소스',
                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.1);color:var(--color-info);font-weight:700">비공개</span>',
                  p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.1);color:var(--color-info);font-weight:700">비공개</span>',
                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">완전 오픈소스</span>',
                },
                {
                  label: '예측 신뢰\n기간',
                  k: '조류: 무제한<br>해류·기상: <b style="color:var(--color-caution)">72h</b> 한계',
                  p: '최대 <b style="color:var(--color-caution)">72h</b><br>기상 입력 해상도 종속',
                  o: '최대 <b style="color:var(--color-caution)">72h~</b><br>입력 모델 기간 종속',
                },
                {
                  label: '앙상블',
                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">지원</span>',
                  p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.12);color:var(--color-info);font-weight:700">지원</span>',
                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">지원</span>',
                },
                {
                  label: 'WING 활용\n역할',
                  k: '<span style="color:var(--color-accent);font-weight:600">한국 서해·남해<br>조류 정밀 예측</span><br><span style="color:var(--fg-disabled)">ESI 방제지도 연동</span>',
                  p: '<span style="color:var(--color-info);font-weight:600">매개변수 최적화<br>정확도 향상</span><br><span style="color:var(--fg-disabled)">뜰개 관측 동화</span>',
                  o: '<span style="color:var(--color-accent);font-weight:600">광역·3D 확산<br>다중 시나리오</span><br><span style="color:var(--fg-disabled)">오픈소스 모듈 확장</span>',
                },
              ].map((row, i) => (
                <tr
                  key={row.label}
                  style={{
                    borderBottom: '1px solid rgba(255,255,255,.04)',
                    background: i % 2 ? 'rgba(255,255,255,.01)' : 'transparent',
                  }}
                >
                  <td
                    className="py-[7px] px-3 text-fg-default"
                    dangerouslySetInnerHTML={{
                      __html: sanitizeHtml(row.label.replace(/\n/g, '<br>')),
                    }}
                  />
                  <td
                    style={{
                      padding: '7px 12px',
                      textAlign: 'center',
                      fontSize: 'var(--font-size-label-2)',
                    }}
                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(row.k) }}
                  />
                  <td
                    style={{
                      padding: '7px 12px',
                      textAlign: 'center',
                      fontSize: 'var(--font-size-label-2)',
                    }}
                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(row.p) }}
                  />
                  <td
                    style={{
                      padding: '7px 12px',
                      textAlign: 'center',
                      fontSize: 'var(--font-size-label-2)',
                    }}
                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(row.o) }}
                  />
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* 앙상블 운용 설명 */}
        <div
          className="mt-3.5 px-3 py-2.5 rounded-lg"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.15)' }}
        >
          <div className="text-label-2 text-fg-sub leading-[1.7]">
            <b className="text-color-accent">3종 앙상블 운용 방식</b> : WING 시스템은
            KOSPS·POSEIDON·OpenDrift를 동시 구동하여 각 모델의 예측 결과를 중첩·비교합니다. 3종
            결과의 공통 영역을 <b>고신뢰 오염 범위</b>로, 최외곽 범위를{' '}
            <b className="text-color-accent">불확실성 경계</b>로 표출하여 방제 의사결정의 위험도를
            정량화합니다.
          </div>
        </div>
      </div>
    </div>
  );
}
