import { cardBg } from '../HNSTheoryView';

export function GaussianModelPanel() {
  return (
    <>
      <div className="grid grid-cols-2 gap-4 mb-4">
        {/* 가우시안 플룸 모델 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center gap-2 mb-3">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              🌀
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                Gaussian Plume Model
              </div>
              <div
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                연속 방출 (Continuous Release)
              </div>
            </div>
          </div>
          <div
            style={{
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.2)',
              borderRadius: '8px',
              padding: '14px',
              marginBottom: '12px',
            }}
            className="font-mono"
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '6px',
                fontWeight: 600,
              }}
            >
              📌 농도 산출식 (Concentration Equation)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--color-accent)',
                lineHeight: 2,
                letterSpacing: '.3px',
              }}
            >
              C(x,y,z) = <span style={{ color: 'var(--color-accent)' }}>Q</span> / (2π ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>{' '}
              ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>{' '}
              · <span style={{ color: 'var(--color-accent)' }}>u</span>)
              <br />× exp(-y² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>
              ²)
              <br />× [exp(-(z-H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²) + exp(-(z+H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²)]
            </div>
          </div>
          <div
            className="grid grid-cols-2 gap-[6px]"
            style={{ fontSize: 'var(--font-size-caption)' }}
          >
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                Q
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 배출률 (g/s)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                u
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 풍속 (m/s)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                σ<sub>y</sub>
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 수평 확산계수</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                σ<sub>z</sub>
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 연직 확산계수</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.04)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
                gridColumn: 'span 2',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                H
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>
                = 유효 방출고도 (m) — 물리적 높이 + 부력 상승 보정
              </span>
            </div>
          </div>
          <div
            style={{
              marginTop: '10px',
              padding: '8px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.6,
            }}
          >
            💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 정상 상태 연속 배출, 균일
            풍속, 평탄 지형. 해양 HNS 사고에서 탱크 파손으로 인한 지속적 누출 시나리오에 적합.
          </div>
        </div>

        {/* 가우시안 퍼프 모델 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center gap-2 mb-3">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              💨
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                Gaussian Puff Model
              </div>
              <div
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                순간 방출 (Instantaneous Release)
              </div>
            </div>
          </div>
          <div
            style={{
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.2)',
              borderRadius: '8px',
              padding: '14px',
              marginBottom: '12px',
            }}
            className="font-mono"
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '6px',
                fontWeight: 600,
              }}
            >
              📌 농도 산출식 (Puff Concentration)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--color-accent)',
                lineHeight: 2,
                letterSpacing: '.3px',
              }}
            >
              C(x,y,z,t) = <span style={{ color: 'var(--color-accent)' }}>M</span> / [(2π)
              <sup>3/2</sup> ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>x</sub>
              </span>{' '}
              ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>{' '}
              ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ]
              <br />× exp(-(x-<span style={{ color: 'var(--color-accent)' }}>u</span>t)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>x</sub>
              </span>
              ²)
              <br />× exp(-y² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>
              ²)
              <br />× [exp(-(z-H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²) + exp(-(z+H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²)]
            </div>
          </div>
          <div
            className="grid grid-cols-2 gap-[6px]"
            style={{ fontSize: 'var(--font-size-caption)' }}
          >
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                M
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 총 배출량 (g)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                t
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 경과시간 (s)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
                gridColumn: 'span 2',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                σ<sub>x</sub>
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>
                = 풍하방향 확산계수 — Plume에서는 u에 의해 이미 반영
              </span>
            </div>
          </div>
          <div
            style={{
              marginTop: '10px',
              padding: '8px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.6,
            }}
          >
            💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 순간적 대량 방출,
            폭발·탱크 파열. 해양 사고 중 LPG/LNG 탱크 파열, 수소 연료선 폭발 시나리오에 적합.
          </div>
        </div>
      </div>

      {/* Pasquill-Gifford 확산 계수 테이블 */}
      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
        <div className="flex items-center justify-between mb-[14px]">
          <div
            style={{
              fontSize: 'var(--font-size-title-4)',
              fontWeight: 700,
              color: 'var(--fg-default)',
            }}
          >
            📊 Pasquill-Gifford 대기안정도 분류 및 확산계수
          </div>
          <div
            className="font-mono"
            style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
          >
            σ<sub>y</sub> = a·x<sup>b</sup> , σ<sub>z</sub> = c·x<sup>d</sup> + f
          </div>
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              fontSize: 'var(--font-size-caption)',
            }}
          >
            <thead>
              <tr style={{ background: 'rgba(6,182,212,.08)' }}>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'left',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                    fontWeight: 700,
                  }}
                >
                  안정도
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  분류
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  기상 조건
                </th>
                <th
                  className="font-mono"
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  σ<sub>y</sub> 계수 (a, b)
                </th>
                <th
                  className="font-mono"
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  σ<sub>z</sub> 계수 (c, d, f)
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  풍속 범위
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  해양 적용성
                </th>
              </tr>
            </thead>
            <tbody>
              {[
                {
                  grade: 'A',
                  class: '매우 불안정',
                  cond: '맑은 날 강한 일사',
                  sy: '0.3658, 0.9024',
                  sz: '0.192, 0.936, 0',
                  wind: '< 2 m/s',
                  ocean: {
                    label: '드물게',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'B',
                  class: '불안정',
                  cond: '맑은 날 약한 일사',
                  sy: '0.2751, 0.9031',
                  sz: '0.156, 0.922, 0',
                  wind: '2–3 m/s',
                  ocean: {
                    label: '드물게',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'C',
                  class: '약간 불안정',
                  cond: '흐린 날 주간',
                  sy: '0.2090, 0.9031',
                  sz: '0.116, 0.905, 0',
                  wind: '3–5 m/s',
                  ocean: {
                    label: '적합',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'D ★',
                  class: '중립',
                  cond: '흐린 날 / 해상풍',
                  sy: '0.1471, 0.9031',
                  sz: '0.079, 0.881, 0',
                  wind: '5–6 m/s',
                  ocean: {
                    label: '★ 해양 대표',
                    bg: 'rgba(6,182,212,.15)',
                    color: 'var(--color-accent)',
                    fontWeight: 700,
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: 'rgba(6,182,212,.03)',
                },
                {
                  grade: 'E',
                  class: '약간 안정',
                  cond: '야간 약한 바람',
                  sy: '0.1046, 0.9031',
                  sz: '0.064, 0.871, 0',
                  wind: '3–5 m/s',
                  ocean: {
                    label: '적합',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'F',
                  class: '안정',
                  cond: '야간 맑은 하늘',
                  sy: '0.0722, 0.9031',
                  sz: '0.051, 0.814, 0',
                  wind: '< 3 m/s',
                  ocean: {
                    label: '위험↑',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
              ].map((row, idx) => (
                <tr
                  key={row.grade}
                  style={{
                    borderBottom: idx < 5 ? '1px solid rgba(255,255,255,.04)' : undefined,
                    background: row.rowBg,
                  }}
                >
                  <td style={{ padding: '7px 10px', fontWeight: 700, color: row.gradeColor }}>
                    {row.grade}
                  </td>
                  <td
                    style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-default)' }}
                  >
                    {row.class}
                  </td>
                  <td style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-sub)' }}>
                    {row.cond}
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      padding: '7px 10px',
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                    }}
                  >
                    {row.sy}
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      padding: '7px 10px',
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                    }}
                  >
                    {row.sz}
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      padding: '7px 10px',
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                    }}
                  >
                    {row.wind}
                  </td>
                  <td style={{ padding: '7px 10px', textAlign: 'center' }}>
                    <span
                      style={{
                        padding: '2px 6px',
                        borderRadius: '4px',
                        background: row.ocean.bg,
                        color: row.ocean.color,
                        fontSize: 'var(--font-size-caption)',
                        fontWeight: (row.ocean as { fontWeight?: number }).fontWeight ?? 600,
                      }}
                    >
                      {row.ocean.label}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div
          style={{
            marginTop: '10px',
            padding: '8px 10px',
            background: 'rgba(6,182,212,.04)',
            border: '1px solid rgba(6,182,212,.1)',
            borderRadius: '6px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-sub)',
            lineHeight: 1.6,
          }}
        >
          ★ 해양 환경에서는 <b style={{ color: 'var(--color-accent)' }}>D 등급(중립)</b>이 가장
          빈번하게 나타남. 해풍·육풍 전환 시 일시적으로 A~C 등급 출현 가능. F 등급(안정)은 농도가
          국지적으로 높게 유지되어 <b style={{ color: 'var(--color-accent)' }}>위험도 상승</b>.
        </div>
      </div>

      {/* 플룸 vs 퍼프 비교 */}
      <div className={`${cardBg} rounded-[10px] p-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '14px',
          }}
        >
          ⚖ Plume vs Puff — 모델 선택 기준
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div
            style={{
              padding: '12px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              🌀 Plume (연속 배출) 선택 기준
            </div>
            <div
              className="flex flex-col gap-[5px]"
              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
            >
              {[
                '유출 지속시간 > 10분',
                '탱크 균열/배관 파손 — 지속적 누출',
                '풍속 > 1.5 m/s (정상류 가정 가능)',
                '톨루엔, 벤젠, 자일렌 등 증발성 액체',
                '암모니아 냉동 저장탱크 누출',
              ].map((item) => (
                <div key={item} className="flex items-center gap-[5px]">
                  <span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
                </div>
              ))}
            </div>
          </div>
          <div
            style={{
              padding: '12px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              💨 Puff (순간 배출) 선택 기준
            </div>
            <div
              className="flex flex-col gap-[5px]"
              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
            >
              {[
                '유출 지속시간 < 10분',
                '탱크 폭발/BLEVE — 순간 방출',
                '풍향 변동이 큰 경우 (여러 퍼프 중첩)',
                'LPG, 수소, LNG 탱크 파열',
                '컨테이너 화학물질 돌발 유출',
              ].map((item) => (
                <div key={item} className="flex items-center gap-[5px]">
                  <span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
