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

export function RealtimeComparePanel() {
  return (
    <div className={`${card} ${cardBg} p-4 mb-4`}>
      {/* 헤더 */}
      <div className="flex items-center justify-between mb-3.5">
        <div className="text-label-1 font-bold text-fg">⚡ 실시간 모델 비교 시뮬레이션</div>
        <div className="flex gap-1.5">
          <button
            className="px-4 py-1.5 rounded-md text-caption font-bold cursor-pointer text-white"
            style={{
              // background: 'var(--color-accent)',
              // border: '1px solid var(--color-accent)',
              color: 'var(--color-accent)',
            }}
          >
            ▶ 비교 실행
          </button>
          <button
            className="px-3 py-1.5 rounded-md text-caption font-semibold cursor-pointer text-fg-sub bg-bg-card"
            style={{ color: 'var(--color-accent)' }}
          >
            ⚙ 파라미터
          </button>
        </div>
      </div>

      {/* 입력 필드 */}
      <div className="grid grid-cols-6 gap-2 mb-3.5">
        <div>
          <label className="text-caption text-fg-disabled block mb-1">물질</label>
          <select
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
            style={{ border: '1px solid var(--stroke-default)' }}
          >
            <option>암모니아</option>
            <option>메탄올</option>
            <option>수소</option>
            <option>LNG</option>
            <option>톨루엔</option>
          </select>
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">유출량 (kL)</label>
          <input
            type="number"
            defaultValue={12.0}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">풍속 (m/s)</label>
          <input
            type="number"
            defaultValue={5.2}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">안정도</label>
          <select
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
            style={{ border: '1px solid var(--stroke-default)' }}
          >
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
            <option>F</option>
          </select>
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">기온 (°C)</label>
          <input
            type="number"
            defaultValue={8.5}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">SST (°C)</label>
          <input
            type="number"
            defaultValue={12.3}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
      </div>

      {/* 결과 카드 */}
      <div className="grid grid-cols-3 gap-3">
        {/* ALOHA */}
        <div
          className="p-3.5 rounded-lg text-center"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            ALOHA (EPA)
          </div>
          <div
            className="font-bold font-mono"
            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
          >
            3.8 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
          </div>
          <div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">면적</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                12.3 km²
              </span>
            </div>
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">최대농도</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                520 ppm
              </span>
            </div>
          </div>
        </div>
        {/* 이문진박사모델 */}
        <div
          className="p-3.5 rounded-lg text-center"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            이문진박사모델 (해양보정)
          </div>
          <div
            className="font-bold font-mono"
            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
          >
            2.9 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
          </div>
          <div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">면적</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                8.4 km²
              </span>
            </div>
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">최대농도</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                410 ppm
              </span>
            </div>
          </div>
        </div>
        {/* 차이 분석 */}
        <div
          className="p-3.5 rounded-lg text-center"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            차이 분석
          </div>
          <div
            className="font-bold font-mono"
            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
          >
            -23.7<span style={{ fontSize: 'var(--font-size-label-1)' }}>%</span>
          </div>
          <div className="text-caption text-fg-disabled mt-0.5">도달거리 감소율</div>
          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">면적차</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                -31.7%
              </span>
            </div>
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">농도차</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                -21.2%
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* 결과 설명 */}
      <div
        className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
        style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
      >
        ⚡ <b style={{ color: 'var(--color-accent)' }}>실시간 비교 결과:</b> 해양 환경에서 ALOHA의
        과대 예측 경향이 확인됩니다. 이문진박사모델은 해수면 거칠기(z₀), MABL 높이, SST-기온 차이를
        반영하여 보다 현실적인 확산 범위를 산출합니다.{' '}
        <b>
          대피 구역 설정 시 ALOHA 결과를 보수적 기준으로, 이문진박사모델을 현실적 기준으로 병행 활용
        </b>
        을 권장합니다.
      </div>
    </div>
  );
}
