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

export function WeatheringPanel() {
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div style={labelStyle('var(--fg-default)')}>유출유 풍화(Weathering) 프로세스</div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          유출유는 해면에 유출된 직후부터{' '}
          <b className="text-color-accent">물리·화학·생물학적 풍화 과정</b>을 거쳐 지속적으로 특성이
          변화합니다. WING 시스템은 주요 풍화 프로세스를 통합 모의하여 시간 경과에 따른 유류 상태
          변화를 추적합니다.
        </div>
      </div>

      <div className="grid grid-cols-3 gap-3 mb-4">
        {[
          {
            title: '증발(Evaporation)',
            color: 'var(--fg-default)',
            desc: '유류의 경질 성분이 대기로 증발하는 과정. 유출 초기 수시간 내에 가장 활발하게 발생합니다.',
            formula: 'F_e(t) = ∑ x_i·(1 - e^(-k_ei·t))',
            note: 'x_i: 성분별 몰분율 / k_ei: 증발 속도상수',
          },
          {
            title: '유화(Emulsification)',
            color: 'var(--fg-default)',
            desc: '파랑에 의해 해수가 유류에 혼입되어 점도가 크게 증가하는 현상. 방제 작업을 어렵게 만듭니다.',
            formula: 'dW_c/dt = K_em·U_w²·(1-W_c/W_max)',
            note: 'W_c: 함수율 / K_em: 유화 속도상수',
          },
          {
            title: '자연분산(Dispersion)',
            color: 'var(--fg-default)',
            desc: '파랑 에너지에 의해 유류가 수중으로 분산되어 유막 두께가 감소하는 과정입니다.',
            formula: 'D_r = 0.11·(U_w+U_c)²·(1+U_w)⁻¹',
            note: 'Mackay 경험식 기반 분산율 계산',
          },
        ].map((w) => (
          <div key={w.title} className={`${card} ${cardBg}`} style={{ margin: 0 }}>
            <div style={labelStyle(w.color)}>{w.title}</div>
            <div className={`${bodyText} mb-2`}>{w.desc}</div>
            <div className={codeBox}>{w.formula}</div>
            <div className="mt-2 text-label-2 text-fg-default">{w.note}</div>
          </div>
        ))}
      </div>

      {/* 타임라인 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>풍화 진행 타임라인 (원유 기준)</div>
        <div className="flex gap-0 items-stretch">
          {[
            {
              time: '0 ~ 6시간',
              title: '초기 확산',
              color: 'var(--fg-default)',
              desc: '증발 20~30%\n유막 급속 확대\n중질유분 잔류',
              nextColor: 'var(--color-accent)',
            },
            {
              time: '6 ~ 24시간',
              title: '유화 진행',
              color: 'var(--color-accent)',
              desc: '유화율 50~70%\n점도 급증\n체적 1.5~4배',
              nextColor: 'var(--color-info)',
            },
            {
              time: '24 ~ 72시간',
              title: '안정화',
              color: 'var(--color-info)',
              desc: '수중 분산 증가\n자연분해 시작\n해안 표착 위험',
              nextColor: 'var(--fg-disabled)',
            },
            {
              time: '72시간 이후',
              title: '타르볼 생성',
              color: 'var(--fg-disabled)',
              desc: '타르볼 형성\n생물분해 우세\n장기 잔류',
            },
          ].map((s, i) => (
            <div key={s.time} className="flex-1 flex items-stretch">
              <div
                className="flex-1 p-2.5 text-center"
                style={{
                  background: `${s.color}0F`,
                  border: `1px solid ${s.color}33`,
                  borderRadius: i === 0 ? '8px 0 0 8px' : i === 3 ? '0 8px 8px 0' : '0',
                }}
              >
                <div className="text-label-2 font-bold mb-1" style={{ color: s.color }}>
                  {s.time}
                </div>
                <div className="text-label-2 font-medium mb-1">{s.title}</div>
                <div className="text-label-2 whitespace-pre-line text-fg-default leading-normal">
                  {s.desc}
                </div>
              </div>
              {s.nextColor && (
                <div
                  style={{
                    width: '2px',
                    background: 'var(--stroke-default)',
                  }}
                />
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
