import { bodyText, card, cardBg, codeBox, labelStyle, tag } from '../OilSpillTheoryView';

export function PoseidonPanel() {
  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">
              POSEIDON (입자추적 최적화 예측 시스템)
            </div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델
              기반 · 뜰개 관측 매개변수 자동 최적화
            </div>
          </div>
        </div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          김충기·김도연 외(등록특허 10-1868791, 2018)가 개발한 POSEIDON은 실제 해양에 투하한{' '}
          <b className="text-color-accent">뜰개(Drifter) 관측 경로</b>와 수치모델 예측값을 비교하여,
          입자추적 모델의 매개변수를{' '}
          <b className="text-color-accent">GA·DE·HS·PSO 알고리즘으로 자동 최적화</b>하는 핵심 기술을
          보유합니다. 해양순환 기반 모델은 포르투갈 IST/MARETEC이 개발한{' '}
          <b className="text-color-accent">MOHID 3D 순환모델</b>을 사용합니다.
        </div>
        <div
          className="mt-2.5 px-3 py-2 rounded-md text-label-2"
          style={{
            background: 'rgba(59,130,246,.06)',
            border: '1px solid rgba(59,130,246,.15)',
            color: 'var(--fg-disabled)',
          }}
        >
          참고문헌 ①: 김도연·김용혁, &quot;유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및
          이를 이용한 예측 시스템&quot;, 등록특허 10-1868791, 2018.
          <br />
          참고문헌 ②: 이재호·임병준·김도연 외, &quot;2016년 동아시아 해역의 MOHID 지역 해양 순환
          모델 검증&quot;, 한국지구과학회지 39(5), pp.436-457, 2018.
        </div>
      </div>

      {/* 등록특허 */}
      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center gap-1.5 mb-2">
          <span
            style={{
              ...tag('var(--fg-sub)'),
              fontWeight: 700,
              fontSize: 'var(--font-size-label-1)',
            }}
          >
            등록특허
          </span>
        </div>
        <div
          className="rounded-lg p-3"
          style={{
            background: 'var(--bg-base)',
            border: '1px solid var(--stroke-default)',
            display: 'grid',
            gridTemplateColumns: 'auto 1fr',
            gap: '12px',
          }}
        >
          <div
            className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap"
            style={{
              background: 'var(--bg-elevated)',
              border: '1px solid var(--stroke-default)',
              fontFamily: 'var(--font-mono)',
            }}
          >
            <div className="text-label-2 text-fg-default">등록번호</div>
            <div className="text-label-2 font-bold text-fg">10-1868791</div>
            <div className="text-label-2 mt-0.5 text-fg-default">2018 등록</div>
          </div>
          <div>
            <div className="text-label-2 font-bold mb-1">
              유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측 시스템
              (POSEIDON)
            </div>
            <div className="text-label-2 text-fg-sub">
              <span className="text-fg font-medium">발명자</span> : 김도연 · 김용혁 · 김충기 외 |{' '}
              <span className="text-fg font-medium">출원인</span> : (주)아라종합기술
            </div>
            <div className="flex flex-wrap gap-1 mt-1.5">
              {[
                'GA(유전알고리즘)',
                'DE(차분진화)',
                'HS(화음탐색)',
                'PSO(입자군집최적화)',
                '뜰개 자동 동화',
              ].map((t) => (
                <span key={t} style={tag('var(--fg-sub)')}>
                  {t}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>MOHID 해양순환모델 (기반 모델)</div>
          <div className={`${bodyText} mb-2.5`}>
            포르투갈 IST/MARETEC에서 1985년부터 개발한 3D 수치 해양순환모델. 60여 개 모듈을 보유하며
            조류·폭풍해일·수온·염분·난류·유출유 확산 등을 통합 모의합니다.
          </div>
          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
            {[
              { label: '격자 구성', desc: '동아시아 9km + 한반도 3km (Nesting)' },
              { label: '수직 좌표', desc: 'σ + Z-level 혼합 (GVC)' },
              { label: '검증 결과', desc: 'SST RMSE 0.42~0.78°C, SLA RMSE 0.11~0.17m' },
              { label: '경계조건', desc: 'HYCOM 재분석 (MYOCEAN 대비 우수)' },
            ].map((t) => (
              <div
                key={t.label}
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <span className="text-color-accent font-bold">{t.label}</span> : {t.desc}
              </div>
            ))}
          </div>
        </div>
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>입자추적 매개변수 자동 최적화</div>
          <div className={`${bodyText} mb-2.5`}>
            뜰개 관측 경로와 제1 모델 예측값의 단위시간별 변화량을 비교하여 제2 모델의 매개변수를
            반복 최적화합니다.
          </div>
          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
            {[
              { label: '최적화 알고리즘', desc: 'GA · DE · HS · PSO 중 선택' },
              { label: '입력 데이터', desc: '유속·풍속 벡터 + 제1모델 변화량' },
              { label: '관측 보강', desc: 'UAV·선박 탑재 센서 동시 활용 가능' },
              { label: '지원과제', desc: '행정안전부 KCG-01-2017-05 (해양경비지원기술)' },
            ].map((t) => (
              <div
                key={t.label}
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                  color: 'var(--fg-sub)',
                }}
              >
                <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>{t.label}</span> :{' '}
                {t.desc}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 핵심 수식 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--color-info)')}>POSEIDON 입자추적 핵심 수식</div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <div className="text-label-2 font-medium mb-1.5 text-fg-default">
              제1 입자추적 모델 (기본)
            </div>
            <div className={codeBox}>
              Model_x = Δt × current_u + Δt × c × wind_u
              <br />
              Model_y = Δt × current_v + Δt × c × wind_v
            </div>
            <div className="text-label-2 mt-1.5 text-fg-default">
              c : 풍속 가중치 (예: c=0.3 → 바람의 30% 반영)
            </div>
          </div>
          <div>
            <div className="text-label-2 font-medium mb-1.5 text-fg-default">
              제2 입자추적 모델 (최적화 후)
            </div>
            <div className={codeBox}>
              Revised_x = a1·current_u + a2·current_v
              <br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ a3·wind_u +
              a4·wind_v
              <br />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ a5·Model_x +
              a6·Model_y + a7
            </div>
            <div className="text-label-2 mt-1.5 text-fg-default">
              a1~a7 : GA·DE·PSO로 최적화된 매개변수
            </div>
          </div>
        </div>
      </div>
      {/* 상시 운용 통신 체계 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>🔄 POSEIDON_V2 상시 운용 체계</div>

        {/* 외부 입력 자료 */}
        <div className="text-label-2 font-bold mb-1.5 mt-1 text-fg-default">외부 입력 자료</div>
        <div className="flex items-center justify-center gap-0 mb-3">
          {[
            {
              label: 'HYCOM',
              sub: '해류·수온·염분',
              detail: 'YYYYMMDD.nc',
              color: 'var(--color-info)',
            },
            {
              label: 'GDAPS(UM)',
              sub: '바람·기온·기압',
              detail: 'g512_v070_erea_*.grib2',
              color: 'var(--color-accent)',
            },
            {
              label: 'DAIN(.enc)',
              sub: '격자·수심·해안선·조석',
              detail: '정적 바이너리 데이터',
              color: 'var(--color-accent)',
            },
            {
              label: '뜰개(Drifter)',
              sub: '관측 표류 경로',
              detail: 'GA/DE/PSO 동화용',
              color: 'var(--color-accent)',
            },
          ].map((node, i) => (
            <div key={node.label} className="flex items-center">
              <div
                className="px-2.5 py-2 rounded-lg text-center text-label-2"
                style={{
                  background: `${node.color}14`,
                  border: `1px solid ${node.color}33`,
                }}
              >
                <div className="font-bold text-label-2" style={{ color: node.color }}>
                  {node.label}
                </div>
                <div className="text-fg-sub">{node.sub}</div>
                <div
                  className="mt-0.5"
                  style={{ color: 'var(--fg-disabled)', fontSize: 'var(--font-size-caption)' }}
                >
                  {node.detail}
                </div>
              </div>
              {i < 3 && (
                <div className="w-[20px] h-px" style={{ background: 'var(--stroke-light)' }} />
              )}
            </div>
          ))}
        </div>

        {/* 구분선 */}
        <div className="border-t border-stroke my-3" />

        {/* 중앙 화살표 */}
        <div className="text-center text-label-2 mb-2 text-fg-default">
          ▼ DATA → PREP → 격자 보간/좌표 변환 ▼
        </div>

        {/* 4대 도메인 실행 모듈 */}
        <div className="text-label-2 font-bold mb-1.5 text-fg-default">
          POSEIDON 4대 실행 모듈 (EA012 대격자 → KO108 연안 상세격자)
        </div>
        <div className="grid grid-cols-4 gap-2 mb-3">
          {[
            {
              label: 'HYDR',
              script: 'RUN-HYDR.sh',
              engine: 'MOHID 3D',
              desc: '해류·수온·염분·수위',
              color: 'var(--color-accent)',
              icon: '🌊',
            },
            {
              label: 'WAVE',
              script: 'RUN-WAVE.sh',
              engine: 'SWAN',
              desc: '파랑 (wave_x, wave_y)',
              color: 'var(--color-info)',
              icon: '🌬️',
            },
            {
              label: 'TIDE',
              script: 'RUN-TIDE.sh',
              engine: 'MOHID-TIDE',
              desc: '조석 (M2·S2·K1·O1)',
              color: 'var(--color-accent)',
              icon: '🌀',
            },
            {
              label: 'OILS',
              script: 'RUN-OILS.sh',
              engine: 'OILS-RUN',
              desc: '유출유 입자추적·확산',
              color: 'var(--color-accent)',
              icon: '🛢️',
              strong: true,
            },
          ].map((m) => (
            <div
              key={m.label}
              className="rounded-lg p-2.5 text-center"
              style={{
                background: `${m.color}0A`,
                border: m.strong ? `2px solid ${m.color}4D` : `1px solid ${m.color}25`,
              }}
            >
              <div className="text-title-2 mb-1">{m.icon}</div>
              <div className="text-label-1 font-bold" style={{ color: m.color }}>
                {m.label}
              </div>
              <div className="text-caption mt-0.5 text-fg-sub">{m.engine}</div>
              <div
                className="text-caption mt-0.5 px-1 py-0.5 rounded"
                style={{ background: `${m.color}14`, color: 'var(--fg-disabled)' }}
              >
                {m.script}
              </div>
              <div className="text-caption mt-1 text-fg-sub">{m.desc}</div>
            </div>
          ))}
        </div>

        {/* 화살표 + 최적화 */}
        <div className="text-center text-label-2 mb-2 text-fg-default">
          ▼ HYDR + WAVE + TIDE → OILS 강제력 입력 ▼ 뜰개 관측 → GA/DE/PSO 매개변수 자동 최적화 ▼
        </div>

        {/* 출력·활용 */}
        <div className="flex items-center justify-center gap-0">
          {[
            { label: 'DASV 결과', sub: 'HDF5·NetCDF', color: 'var(--color-accent)' },
            { label: 'SAR/위성', sub: '원격탐사 검증', color: 'var(--color-info)' },
            {
              label: '방제 의사결정',
              sub: '자원배치·전략',
              color: 'var(--color-accent)',
              strong: true,
            },
          ].map((node, i) => (
            <div key={node.label} className="flex items-center">
              <div
                className="px-3 py-2 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 < 2 && (
                <div className="w-[30px] h-px" style={{ background: 'var(--stroke-light)' }} />
              )}
            </div>
          ))}
        </div>

        <div
          className="text-label-2 text-center mt-2.5 px-3 py-1.5 rounded-md"
          style={{
            background: 'rgba(59,130,246,.04)',
            border: '1px solid rgba(59,130,246,.12)',
            color: 'var(--fg-disabled)',
          }}
        >
          HYCOM(.nc) + GDAPS(.grib2) → 격자 보간(EA012/KO108) → MOHID(해류) + SWAN(파랑) + 조석 →
          OILS 입자추적 → 뜰개 동화 최적화 → HDF5 결과 → 방제 의사결정
        </div>
        <div
          className="mt-2.5 p-2 rounded-md"
          style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.15)' }}
        >
          <div className="text-label-2 font-bold mb-1 text-color-caution">⚠️ 예측 신뢰도 한계</div>
          <div className="text-label-2 text-fg-sub leading-[1.6]">
            조류: 무한 예보 가능
            <br />
            해류(HYCOM): <b>5일치</b> 제한
            <br />
            기온·취송류: <b className="text-color-caution">3일치</b> 제한
            <br />→ <b className="text-color-caution">72h 초과 예측 시 신뢰도 저하</b>
          </div>
        </div>
      </div>

      {/* POSEIDON관련 유출유 확산예측 논문 */}
      <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-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-title-3 shrink-0"
            style={{ background: 'var(--bg-elevated)', border: '1px solid rgba(59,130,246,.25)' }}
          >
            📄
          </div>
          <div>
            <div className="text-label-1 font-bold">POSEIDON관련 유출유 확산예측 논문</div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              포세이돈 시스템 소개·활용 · 최적 방제전략 · 원격탐사 연동 · MOHID 검증 —
              한국해양환경·에너지학회 외
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-2">
          {[
            {
              tags: [
                { label: '시스템 소개', color: '#3b82f6' },
                { label: '활용사례', color: 'var(--color-accent)' },
              ],
              year: '2019',
              title: '해양오염방제 의사결정지원 시스템(포세이돈) 소개 및 활용사례',
              authors:
                '김충기, 윤종휘, 천정윤, 김도연 | 한국해양환경·에너지학회 학술대회논문집 | 2019.5 | pp.14',
              desc: 'POSEIDON 시스템의 전체 아키텍처 및 주요 기능 소개. 유출유 확산예측·방제자원 연계·의사결정지원 모듈 구성 설명. 실제 해양오염 대응 사례 적용 결과 발표.',
            },
            {
              tags: [
                { label: '방제전략', color: '#3b82f6' },
                { label: '정책수립', color: 'var(--color-accent)' },
              ],
              year: '2020',
              title: '포세이돈 시스템을 활용한 최적 해양오염 방제전략 및 정책수립',
              authors:
                '윤종휘, 김충기, 천정윤, 김형만, 방기영, 홍성수 | 한국해양환경·에너지학회 학술대회논문집 | 2020.7 | pp.1452',
              desc: 'POSEIDON 시스템을 활용한 방제자원 최적 배치 전략 수립 방법론 연구. 유출유 확산 시나리오별 방제효율 비교 분석 및 정책 의사결정 지원 프레임워크 제안.',
            },
            {
              tags: [
                { label: '원격탐사', color: '#3b82f6' },
                { label: '위성 연동', color: '#06b6d4' },
              ],
              year: '2022',
              title: '원격탐사 기반의 유출유 확산예측 및 해양오염 방제 지원',
              authors:
                '김도연, 김충기, 양찬수 | 한국해양환경·에너지학회 학술대회논문집 | 2022.11 | pp.79',
              desc: '위성 원격탐사(SAR·광학) 기반 유출유 탐지 결과를 POSEIDON 확산예측 모델과 연동하는 기술 연구. 실시간 위성 영상으로 초기 유출 범위를 파악하고 예측 정확도 향상.',
            },
            {
              tags: [
                { label: 'MOHID 검증', color: '#3b82f6' },
                { label: '해양순환모델', color: '#06b6d4' },
              ],
              year: '2018',
              title: '한반도 인근 해역 MOHID 지역 해양순환 모델 검증',
              authors: '이재호, 임병준, 김도연 외 | 한국지구과학회지 제39권 5호, pp.436-457 | 2018',
              desc: 'POSEIDON 기반 MOHID 모델 동아시아 해역 2016년 검증. 수온·염분·해류 정확도 평가 — SST RMSE 0.42~0.78°C, SLA RMSE 0.11~0.17m.',
            },
          ].map((paper) => (
            <div
              key={paper.title}
              className="rounded-[9px] p-3"
              style={{
                background: 'var(--bg-surface)',
                border: '1px solid rgba(59,130,246,.18)',
              }}
            >
              <div className="flex items-center justify-between mb-1.5">
                <div className="flex items-center gap-1.5">
                  {paper.tags.map((t) => (
                    <span
                      key={t.label}
                      style={{
                        padding: '2px 7px',
                        background: `${t.color}1A`,
                        border: `1px solid ${t.color}38`,
                        borderRadius: '4px',
                        fontSize: 'var(--font-size-label-2)',
                        fontWeight: 700,
                        color: t.color,
                      }}
                    >
                      {t.label}
                    </span>
                  ))}
                </div>
                <span className="text-label-2 text-fg-default">{paper.year}</span>
              </div>
              <div className="text-label-2 font-bold mb-1">{paper.title}</div>
              <div className="text-label-2 mb-1.5 text-fg-default">{paper.authors}</div>
              <div className="text-label-2 text-fg-sub leading-[1.7]">{paper.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
