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

export function OceanCorrectionPanel() {
  return (
    <div className="grid grid-cols-2 gap-4 mb-4">
      {/* 해양 보정 인자 */}
      <div className={`${card} ${cardBg} p-4`}>
        <div style={labelStyle('var(--color-accent)')}>🌊 해양환경 특수 보정 인자</div>
        <div className="flex flex-col gap-2.5">
          {/* 해풍·육풍 순환 보정 */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해풍·육풍 순환 보정</span>
              <span style={tag('var(--color-accent)')}>핵심 인자</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해안에서는 주간(해풍)·야간(육풍) 풍향 전환 발생. 기존 가우시안 모델은 정상 풍향을
              가정하므로, <b style={{ color: 'var(--color-accent)' }}>풍향 전환 시점</b>에서 플룸
              방향 급변을 반영해야 함.
              <br />
              <span
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                θ(t) = θ₀ + Δθ · sigmoid((t - t<sub>shift</sub>)/τ)
              </span>
            </div>
          </div>
          {/* 해수면 거칠기 */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해수면 거칠기 (z₀) 보정</span>
              <span style={tag('var(--color-accent)')}>중요</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해수면은 육상 대비 표면 거칠기가 매우 낮음 (
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                z₀ ≈ 0.0002 m
              </span>{' '}
              vs 도시 0.5~2.0 m). Charnock 관계식 적용:
              <br />
              <span
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                z₀ = α<sub>c</sub> · u*² / g (α<sub>c</sub> ≈ 0.011~0.018)
              </span>
            </div>
          </div>
          {/* SST 영향 */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해수면 온도(SST) 영향</span>
              <span style={tag('var(--color-accent)')}>보조</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해수면 온도가 기온보다 높으면 열적 불안정 촉진 → 수직 혼합 증가 → 지표 농도 감소.
              반대로 SST &lt; T<sub>air</sub>이면 안정층 형성으로{' '}
              <b style={{ color: 'var(--color-accent)' }}>농도 체류↑</b>.
            </div>
          </div>
          {/* MABL */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해상 대기경계층(MABL) 구조</span>
              <span style={tag('var(--color-accent)')}>중요</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해양 대기경계층은 육상과 구조가 상이. 혼합고{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                300~800 m
              </span>
              (육상 1~2 km)으로 낮아 확산이 억제될 수 있음. Fumigation 발생 시{' '}
              <b style={{ color: 'var(--color-accent)' }}>지표 농도 급상승</b>.
            </div>
          </div>
        </div>
      </div>

      {/* 보정 계수 시각화 */}
      <div className="flex flex-col gap-4">
        <div className={`${card} ${cardBg} p-4`}>
          <div style={labelStyle('var(--color-accent)')}>
            📈 확산계수 보정 비교 (σ<sub>y</sub> at 1km)
          </div>
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2">
              <span className="text-caption text-fg-disabled min-w-[70px]">P-G 원본</span>
              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
                <div
                  className="h-full rounded"
                  style={{
                    width: '60%',
                    background: 'var(--color-accent)',
                  }}
                />
              </div>
              <span
                className="font-mono text-caption min-w-[50px] text-right"
                style={{ color: 'var(--color-accent)' }}
              >
                68 m
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-caption text-fg-disabled min-w-[70px]">해양 보정</span>
              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
                <div
                  className="h-full rounded"
                  style={{
                    width: '82%',
                    background: 'var(--color-accent)',
                  }}
                />
              </div>
              <span
                className="font-mono text-caption min-w-[50px] text-right"
                style={{ color: 'var(--color-accent)' }}
              >
                92 m
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-caption text-fg-disabled min-w-[70px]">ALOHA</span>
              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
                <div
                  className="h-full rounded"
                  style={{
                    width: '72%',
                    background: 'var(--color-accent)',
                  }}
                />
              </div>
              <span
                className="font-mono text-caption min-w-[50px] text-right"
                style={{ color: 'var(--color-accent)' }}
              >
                78 m
              </span>
            </div>
          </div>
          <div className="mt-2 text-caption text-fg-disabled">
            ※ D등급(중립), 풍속 5 m/s, 풍하거리 1 km 기준
          </div>
        </div>

        <div className={`${card} ${cardBg} p-4`}>
          <div style={labelStyle('var(--color-accent)')}>🔬 ALOHA vs 이문진박사모델 비교</div>
          <div className="grid grid-cols-2 gap-2 text-caption">
            <div className="p-2 bg-bg-base rounded-md">
              <div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
                ALOHA (EPA)
              </div>
              <div className="text-fg-sub leading-[1.6]">
                • 가우시안 플룸 기본
                <br />
                • 평탄 지형 가정
                <br />
                • 표면 거칠기 고정값
                <br />
                • 해양 특성 미반영
                <br />• 1차원 풍향 고정
              </div>
            </div>
            <div
              className="p-2 rounded-md"
              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.1)' }}
            >
              <div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
                이문진박사모델 (해양 보정)
              </div>
              <div className="text-fg-sub leading-[1.6]">
                • 가우시안 + 해양 보정
                <br />
                • 해안 지형 효과 반영
                <br />
                • Charnock z₀ 동적 계산
                <br />
                • 해풍/육풍 전환 반영
                <br />• MABL 혼합고 가변
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
