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

export function OpenDriftPanel() {
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-heading-3 bg-bg-elevated border border-stroke">
            🟢
          </div>
          <div>
            <div className="text-title-2 font-bold text-fg">
              OpenDrift (오픈소스 라그랑지안 확산 프레임워크)
            </div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증
            </div>
          </div>
        </div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          Dagestad et al.(2018)이 개발한 OpenDrift는 유출유·SAR·표류물·부유입자 등 다양한 해양 확산
          현상을 모의하는{' '}
          <b className="text-color-info">Python 기반 오픈소스 라그랑지안 프레임워크</b>입니다.
          NEMO·ROMS·HYCOM 등 다양한 해양모델 출력값을 강제력으로 사용하며,{' '}
          <b className="text-color-accent">OpenOil 모듈</b>을 통해 유출유 거동을 상세 모의합니다.
        </div>
        <div className="flex gap-2 flex-wrap mt-2.5">
          <span
            className="px-3.5 py-1.5 rounded-md text-label-2 font-medium"
            style={{
              border: '1px solid rgba(6,182,212,.3)',
              background: 'rgba(6,182,212,.08)',
              color: 'var(--color-accent)',
            }}
          >
            🔗 공식 문서 (opendrift.github.io)
          </span>
          <span
            className="px-3.5 py-1.5 rounded-md text-label-2"
            style={{
              border: '1px solid rgba(6,182,212,.2)',
              background: 'rgba(6,182,212,.06)',
              color: 'var(--color-accent)',
            }}
          >
            Dagestad et al., Geosci. Model Dev. 11, 2018
          </span>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-3 mb-4">
        {[
          {
            title: '🧩 모듈 구성',
            color: 'var(--color-accent)',
            items: [
              { html: '<b style="color:var(--color-accent)">OpenOil</b> : 유출유 확산·풍화' },
              { html: '<b style="color:var(--color-accent)">OceanDrift</b> : 표류물 추적' },
              { html: '<b style="color:var(--color-accent)">ShipDrift</b> : 선박 표류' },
              { html: '<b style="color:var(--color-accent)">SedimentDrift</b> : 부유퇴적물' },
            ],
          },
          {
            title: '🌊 지원 해양모델',
            color: 'var(--color-accent)',
            items: [
              { text: 'NEMO (전지구·지역)' },
              { text: 'ROMS (지역 고해상도)' },
              { text: 'HYCOM (전지구)' },
              { text: 'Copernicus CMEMS' },
            ],
          },
          {
            title: '✅ 검증·인증',
            color: 'var(--color-info)',
            items: [
              { text: 'IMO / IPIECA 기준 충족' },
              { text: 'ITOPF 뜰개 검증 완료' },
              { text: 'NOAA Oil Library 탑재' },
              { text: 'Geosci. Model Dev. 게재' },
            ],
          },
        ].map((s) => (
          <div key={s.title} className={`${card} ${cardBg}`} style={{ margin: 0 }}>
            <div style={labelStyle(s.color)}>{s.title}</div>
            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
              {s.items.map((item, idx) =>
                'html' in item ? (
                  <div
                    key={idx}
                    className="px-2 py-1 rounded"
                    style={{
                      background: `${s.color}0A`,
                      border: `1px solid ${s.color}1F`,
                      color: 'var(--fg-sub)',
                    }}
                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.html) }}
                  />
                ) : (
                  <div
                    key={idx}
                    className="px-2 py-1 rounded"
                    style={{
                      background: `${s.color}0A`,
                      border: `1px solid ${s.color}1F`,
                      color: 'var(--fg-sub)',
                    }}
                  >
                    {item.text}
                  </div>
                ),
              )}
            </div>
          </div>
        ))}
      </div>

      {/* OpenOil 풍화 프로세스 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>
          🔁 OpenOil 풍화 프로세스 (IKI 프레임워크 기반)
        </div>
        <div className="grid grid-cols-4 gap-2">
          {[
            {
              icon: '☁️',
              title: '증발',
              color: 'var(--fg-default)',
              desc: '성분별 증기압·분자량 기반 다성분 증발',
            },
            {
              icon: '🌊',
              title: '유화',
              color: 'var(--color-accent)',
              desc: 'Mackay 유화 방정식·함수율 추적',
            },
            {
              icon: '💧',
              title: '수중 분산',
              color: 'var(--color-info)',
              desc: '파랑 에너지 기반 수직 혼합·재부상',
            },
            {
              icon: '🦠',
              title: '생분해',
              color: 'var(--color-accent)',
              desc: '수온 의존 미생물 분해율 모의',
            },
          ].map((w) => (
            <div
              key={w.title}
              className="p-2.5 rounded-lg text-center"
              style={{ background: `${w.color}0A`, border: `1px solid ${w.color}25` }}
            >
              <div className="text-title-2 mb-1">{w.icon}</div>
              <div className="text-label-2 font-medium" style={{ color: w.color }}>
                {w.title}
              </div>
              <div className="text-label-2 mt-1 text-fg-default leading-normal">{w.desc}</div>
            </div>
          ))}
        </div>
      </div>
      {/* 상시 운용 통신 체계 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>상시 운용 통신 체계</div>
        <div className="flex items-center justify-center gap-0 py-3">
          {[
            { label: 'NEMO/ROMS', sub: '해류 강제력', color: 'var(--color-accent)' },
            { label: 'HYCOM', sub: '전지구 해류', color: 'var(--color-info)' },
            { label: 'ECMWF/GFS', sub: 'Wind·파랑', color: 'var(--color-info)' },
            { label: 'NOAA Oil Lib', sub: '유종 물성 DB', color: 'var(--color-info)' },
            {
              label: 'OpenDrift',
              sub: 'Python 모듈 구동',
              color: 'var(--color-info)',
              strong: true,
            },
            { label: 'OpenOil', sub: '유출유 풍화·확산', color: 'var(--color-info)', strong: true },
            { label: '결과 표출', sub: 'NetCDF·시각화', color: 'var(--color-accent)' },
          ].map((node, i) => (
            <div key={node.label} className="flex items-center">
              <div
                className="px-3 py-2.5 rounded-lg text-center text-label-2"
                style={{
                  background: `${node.color}14`,
                  border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
                }}
              >
                <div className="font-bold" style={{ color: node.color }}>
                  {node.label}
                </div>
                <div className="text-label-2 text-fg-default">{node.sub}</div>
              </div>
              {i < 6 && (
                <div className="w-[24px] h-px" style={{ background: 'var(--stroke-light)' }} />
              )}
            </div>
          ))}
        </div>
        <div className="text-label-2 text-center mt-1 text-fg-default">
          해양모델(NEMO·ROMS·HYCOM) + 기상자료(ECMWF·GFS) → NOAA Oil Library 유종 매칭 →
          OpenDrift/OpenOil 모듈 구동 → NetCDF 결과 출력·시각화
        </div>
      </div>

      {/* 관련 논문 카드 섹션 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-center gap-2.5 mb-3.5">
          <div
            className="w-8 h-8 rounded-lg flex items-center justify-center text-title-2 shrink-0"
            style={{ background: 'var(--bg-elevated)', border: '1px solid rgba(59,130,246,.25)' }}
          >
            📄
          </div>
          <div>
            <div className="text-label-1 font-bold">
              OpenDrift / OpenOil 국내 해역 적용 연구 논문
            </div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              한국 연안 유출유 확산 수치모의 관련 핵심 논문 3편 — WING 모델 이론 근거
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-2.5">
          {/* 논문 1: Dang et al. 2024 */}
          <div
            className="rounded-[10px] p-3.5"
            style={{
              background: 'var(--bg-surface)',
              border: '1px solid var(--stroke-default)',
            }}
          >
            <div className="flex items-start justify-between gap-2.5 mb-2">
              <div className="flex items-center gap-1.5 flex-wrap">
                {[
                  { label: '국제저널', color: '#3b82f6' },
                  { label: 'OpenOil 적용', color: 'var(--color-info)' },
                  { label: '허베이 스피리트', color: 'var(--color-info)' },
                ].map((t) => (
                  <span
                    key={t.label}
                    className="whitespace-nowrap"
                    style={{
                      padding: '2px 8px',
                      background: `${t.color}1F`,
                      border: `1px solid ${t.color}40`,
                      borderRadius: '4px',
                      fontSize: 'var(--font-size-label-2)',
                      fontWeight: 700,
                      color: t.color,
                    }}
                  >
                    {t.label}
                  </span>
                ))}
              </div>
              <span className="text-label-2 whitespace-nowrap text-fg-default">2024</span>
            </div>
            <div className="text-label-2 font-bold mb-1 leading-normal">
              Numerical Model Test of Spilled Oil Transport Near the Korean Coasts Using Various
              Input Parametric Models
            </div>
            <div className="text-label-2 mb-2 text-fg-default">
              Hai Van Dang, Suchan Joo, Junhyeok Lim, Jinhwan Hur, Sungwon Shin | Hanyang University
              ERICA | Journal of Ocean Engineering and Technology, 2024
            </div>
            <div className="grid grid-cols-2 gap-2 mb-2">
              <div className="text-label-2 text-fg-sub leading-[1.7]">
                <b>연구 목적</b>
                <br />
                OpenOil 모델에 다양한 해양-기상 강제력(Met-Ocean) 조합을 적용하여 한국 연안 유출유
                이동 예측 정확도를 비교 평가. 허베이 스피리트(2007) 사고를 대상으로 6개 조합 검증.
              </div>
              <div className="text-label-2 text-fg-sub leading-[1.7]">
                <b>주요 결과</b>
                <br />
                CMEMS 해류모델 + ECMWF 기상 조합이 최고 성능. 동황해 조석 특성(수심 &lt;60m 천해)
                고려 시 정확도 향상. Envisat ASAR 위성 실측과 수치 비교 검증 완료.
              </div>
            </div>
            <div className="mb-2">
              <div className="text-label-2 mb-1 text-fg-sub">
                <b>적용 강제력 모델 6종 조합</b>
              </div>
              <div className="grid grid-cols-3 gap-1 text-label-2 text-fg-sub">
                <div
                  className="px-2 py-1 rounded"
                  style={{
                    background: 'rgba(59,130,246,.05)',
                    border: '1px solid rgba(59,130,246,.12)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  <b className="text-color-info">해류</b> HYCOM / CMEMS
                </div>
                <div
                  className="px-2 py-1 rounded"
                  style={{
                    background: 'rgba(6,182,212,.05)',
                    border: '1px solid rgba(6,182,212,.12)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  <b className="text-color-info">파랑</b> CMEMS / ECMWF-ERA5
                </div>
                <div
                  className="px-2 py-1 rounded"
                  style={{
                    background: 'rgba(6,182,212,.05)',
                    border: '1px solid rgba(6,182,212,.12)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  <b className="text-color-info">기상</b> NCEP-GFS / ECMWF
                </div>
              </div>
            </div>
            <div
              className="p-2 rounded-md text-label-2"
              style={{
                background: 'rgba(59,130,246,.04)',
                border: '1px solid rgba(59,130,246,.1)',
                color: 'var(--fg-sub)',
                lineHeight: '1.7',
              }}
            >
              <b className="text-color-info">WING 적용 의의</b> : OpenOil이 한국 해역에서 실효적으로
              작동함을 검증한 국내 최신 연구. 6종 Met-Ocean 조합 비교는 WING의 OpenDrift 강제력 선택
              기준(CMEMS+ECMWF)의 직접적 근거.
            </div>
          </div>

          {/* 논문 2: 류청로 외 1998 */}
          <div
            className="rounded-[10px] p-3.5"
            style={{
              background: 'var(--bg-surface)',
              border: '1px solid rgba(6,182,212,.2)',
            }}
          >
            <div className="flex items-start justify-between gap-2.5 mb-2">
              <div className="flex items-center gap-1.5 flex-wrap">
                {[
                  { label: '국내저널', color: '#06b6d4' },
                  { label: '라그랑지안 실증', color: 'var(--color-accent)' },
                  { label: '동남해역 검증', color: 'var(--color-caution)' },
                ].map((t) => (
                  <span
                    key={t.label}
                    className="whitespace-nowrap"
                    style={{
                      padding: '2px 8px',
                      background: `${t.color}1F`,
                      border: `1px solid ${t.color}40`,
                      borderRadius: '4px',
                      fontSize: 'var(--font-size-label-2)',
                      fontWeight: 700,
                      color: t.color,
                    }}
                  >
                    {t.label}
                  </span>
                ))}
              </div>
              <span className="text-label-2 whitespace-nowrap text-fg-default">1998</span>
            </div>
            <div className="text-label-2 font-bold mb-1 leading-normal">
              한국 동남해역에서의 유출유 확산예측모델 (Oil Spill Behavior Forecasting Model in
              South-eastern Coastal Area of Korea)
            </div>
            <div className="text-label-2 mb-2 text-fg-default">
              류청로, 김종규, 설동관, 강동욱 | 부경대학교 해양공학과 | 한국해양환경공학회지 Vol.1
              No.2, pp.52–59, 1998
            </div>
            <div className="grid grid-cols-2 gap-2 mb-2">
              <div className="text-label-2 text-fg-sub leading-[1.7]">
                <b>연구 목적</b>
                <br />
                한국 동남해역(부산-울산) 긴급방제용 실시간 유출유 확산예측모델 OILSPILLFM 개발.
                알렉산드리아호(1995) 실제 사고 힌드캐스팅으로 모델 검증.
              </div>
              <div className="text-label-2 text-fg-sub leading-[1.7]">
                <b>핵심 수식</b>
                <br />
                라그랑지안 입자추적 + 2D 해수유동 모델(ADI법). 취송류 Vw = 0.03×V10. 난류확산 Random
                Walk. 증발 1차 반응식.
              </div>
            </div>
            <div className="grid grid-cols-3 gap-1 text-label-2 mb-2 text-fg-sub">
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <b className="text-color-accent">해수유동</b> Navier-Stokes 2D 연속·운동방정식
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <b className="text-color-accent">조류</b> 조화분석 실시간 조류 DB 구축
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <b className="text-color-info">풍화</b> 퍼짐·증발·유상화·생분해 5단계
              </div>
            </div>
            <div
              className="p-2 rounded-md text-label-2"
              style={{
                background: 'rgba(6,182,212,.04)',
                border: '1px solid rgba(6,182,212,.1)',
                color: 'var(--fg-sub)',
                lineHeight: '1.7',
              }}
            >
              <b className="text-color-accent">WING 적용 의의</b> : OpenDrift·KOSPS의 라그랑지안
              입자추적 이론적 원전. 조류 영향 미약 해역에서 취송류·해류 성분이 확산에 결정적 역할 —
              OpenDrift 한국 해역 적용 정당성 근거.
            </div>
          </div>

          {/* 논문 3: 정태성·조형진 2008 */}
          <div
            className="rounded-[10px] p-3.5"
            style={{
              background: 'var(--bg-surface)',
              border: '1px solid var(--stroke-default)',
            }}
          >
            <div className="flex items-start justify-between gap-2.5 mb-2">
              <div className="flex items-center gap-1.5 flex-wrap">
                {[
                  { label: '국내학술대회', color: 'var(--color-accent)' },
                  { label: '태안 허베이스피리트', color: 'var(--color-info)' },
                  { label: '서해 수치모의', color: 'var(--color-accent)' },
                ].map((t) => (
                  <span
                    key={t.label}
                    className="whitespace-nowrap"
                    style={{
                      padding: '2px 8px',
                      background: `${t.color}1F`,
                      border: `1px solid ${t.color}40`,
                      borderRadius: '4px',
                      fontSize: 'var(--font-size-label-2)',
                      fontWeight: 700,
                      color: t.color,
                    }}
                  >
                    {t.label}
                  </span>
                ))}
              </div>
              <span className="text-label-2 whitespace-nowrap text-fg-default">2008</span>
            </div>
            <div className="text-label-2 font-bold mb-1 leading-normal">
              태안 기름유출사고의 유출유 확산특성 분석 (Analysis of Oil Spill Dispersion in Taean
              Coastal Zone)
            </div>
            <div className="text-label-2 mb-2 text-fg-default">
              정태성, 조형진 | 한남대학교 토목환경공학과 | 한국해안·해양공학회 학술발표논문집 제17권
              pp.60–63, 2008
            </div>
            <div className="grid grid-cols-2 gap-2 mb-2">
              <div className="text-label-2 text-fg-sub leading-[1.7]">
                <b>연구 목적</b>
                <br />
                2007년 12월 태안 허베이 스피리트 기름유출 사고 후 15일간 조류·취송류에 의한 유출유
                확산패턴을 2D 수치모형으로 재현. 조류·취송류 기여도 분리 분석.
              </div>
              <div className="text-label-2 text-fg-sub leading-[1.7]">
                <b>핵심 발견</b>
                <br />
                취송류 풍속 비율 α = 2%가 실제 관측 확산과 가장 유사(3% 과대, 2.5% 다소 빠름).
                취송류 편향각 θ = 20° 최적. 조류는 남북 확산거리, 취송류는 해안 부착에 기여.
              </div>
            </div>
            <div className="grid grid-cols-3 gap-1 text-label-2 mb-2 text-fg-sub">
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <b className="text-color-info">해역</b> 군산~영흥도(서해 중부)
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(59,130,246,.05)',
                  border: '1px solid rgba(59,130,246,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <b className="text-color-info">격자</b> 유한요소 삼각형, 최소 150m
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <b className="text-color-info">방출</b> 50입자/9시간 · 총 5일 모의
              </div>
            </div>
            {/* 취송류 파라미터 비교 */}
            <div
              className="p-2.5 rounded-[7px] mb-2"
              style={{ background: 'var(--bg-base)', border: '1px solid var(--stroke-default)' }}
            >
              <div className="text-label-2 font-bold mb-1.5 text-fg-sub">
                취송류 매개변수 비교 (태안 사고 수치실험)
              </div>
              <div className="grid grid-cols-4 gap-1 text-label-2 text-fg-sub">
                <div
                  className="px-2 py-1 rounded text-center"
                  style={{
                    background: 'rgba(59,130,246,.06)',
                    border: '1px solid rgba(59,130,246,.12)',
                  }}
                >
                  <div className="font-bold text-color-info">α = 3%</div>
                  <div className="text-fg-default">과대 확산</div>
                </div>
                <div
                  className="px-2 py-1 rounded text-center"
                  style={{
                    background: 'rgba(234,179,8,.06)',
                    border: '1px solid rgba(234,179,8,.12)',
                  }}
                >
                  <div className="font-bold text-color-caution">α = 2.5%</div>
                  <div className="text-fg-default">다소 빠름</div>
                </div>
                <div
                  className="px-2 py-1 rounded text-center"
                  style={{
                    background: 'rgba(6,182,212,.08)',
                    border: '1px solid rgba(6,182,212,.2)',
                  }}
                >
                  <div className="font-bold text-color-info">α = 2% ✓</div>
                  <div className="text-fg-default">최적 일치</div>
                </div>
                <div
                  className="px-2 py-1 rounded text-center"
                  style={{
                    background: 'rgba(6,182,212,.06)',
                    border: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <div className="font-bold text-color-accent">θ = 20° ✓</div>
                  <div className="text-fg-default">최적 편향각</div>
                </div>
              </div>
            </div>
            <div
              className="p-2 rounded-md text-label-2"
              style={{
                background: 'rgba(6,182,212,.04)',
                border: '1px solid rgba(6,182,212,.1)',
                color: 'var(--fg-sub)',
                lineHeight: '1.7',
              }}
            >
              <b className="text-color-accent">WING 적용 의의</b> : 서해(조류 강한 해역) 취송류
              매개변수 α = 2%·θ = 20° 최적값은 OpenDrift 서해 운용 시 wind drift factor 설정의 직접
              근거. 허베이 스피리트 사고는 POSEIDON(특허 10-1868791)의 검증 데이터로도 활용.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
