import type { HnsScenario } from '@interfaces/hns/HnsInterface';
import { SEVERITY_STYLE } from '../HNSScenarioView';

export function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
  const d = scenario.detail;
  return (
    <div
      className="flex-1 overflow-y-auto flex flex-col gap-3.5 p-4"
      style={{ scrollbarWidth: 'thin' }}
    >
      {/* Hero card */}
      <div className="rounded-md p-4 bg-bg-card border border-stroke">
        <div className="flex items-center gap-2 mb-3">
          <span className="text-title-4 font-bold">
            {scenario.id} {scenario.name}
          </span>
          <span
            className="font-bold px-2 py-[2px] rounded-lg text-caption"
            style={{
              background: SEVERITY_STYLE[scenario.severity].bg,
              color: SEVERITY_STYLE[scenario.severity].color,
            }}
          >
            {scenario.severity}
          </span>
          <span className="ml-auto text-label-2 text-fg-disabled font-mono">
            {scenario.datetime}
          </span>
        </div>
        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
          {[
            { label: '최대농도', value: d.maxConc, color: 'var(--color-accent)' },
            { label: 'IDLH 반경', value: d.idlhRadius, color: 'var(--color-accent)' },
            { label: 'ERPG-2', value: d.erpg2, color: 'var(--color-accent)' },
            {
              label: '풍향/풍속',
              value: `${d.windDir}\n${d.windSpeed}`,
              color: 'var(--color-accent)',
            },
            { label: '영향인구', value: d.population, color: 'var(--color-accent)' },
            { label: '유출량', value: d.spillAmount, color: 'var(--color-accent)' },
          ].map((m, i) => (
            <div key={i} className="text-center rounded-sm p-2 bg-bg-base">
              <div className="text-fg-disabled text-caption">{m.label}</div>
              <div
                className="text-title-3 font-bold font-mono whitespace-pre-line mt-[2px]"
                style={{ color: m.color, lineHeight: 1.2 }}
              >
                {m.value}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Two-column section */}
      <div className="grid grid-cols-2 gap-3">
        {/* Threat Zones */}
        <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
          <h4 className="text-label-1 font-bold mb-2.5">위험 구역</h4>
          <div className="flex flex-col gap-1.5">
            {[
              {
                label: 'IDLH (즉시위험)',
                value: scenario.zones.idlh,
                color: 'var(--color-fg)',
              },
              {
                label: 'ERPG-2 (대피권고)',
                value: scenario.zones.erpg2,
                color: 'var(--fg-sub)',
              },
              {
                label: 'ERPG-1 (주의권고)',
                value: scenario.zones.erpg1,
                color: 'var(--fg-sub)',
              },
              { label: 'TWA (작업허용)', value: scenario.zones.twa, color: 'var(--fg-sub)' },
            ].map((z, i) => (
              <div key={i} className="flex justify-between items-center bg-bg-base rounded-sm p-2">
                <span className="text-label-2 text-fg-sub">{z.label}</span>
                <span className="text-label-2 font-mono" style={{ color: z.color }}>
                  {z.value}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Actions */}
        <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
          <h4 className="text-label-1 font-bold mb-2.5">대응 권고 사항</h4>
          <div className="flex flex-col gap-1.5">
            {scenario.actions.map((action, i) => (
              <div
                key={i}
                className="flex items-center text-label-2 text-fg-sub bg-bg-base rounded-sm p-2"
              >
                {/* <span className="text-color-accent font-bold shrink-0">•</span> */}
                {action}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Weather */}
      <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
        <h4 className="text-label-1 font-bold mb-2.5">기상 조건</h4>
        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
          {[
            { label: '풍향', value: scenario.weather.dir, icon: '🌬' },
            { label: '풍속', value: scenario.weather.speed, icon: '💨' },
            { label: '기온', value: scenario.weather.temp, icon: '🌡' },
            { label: '대기안정도', value: scenario.weather.stability, icon: '☁️' },
            { label: '습도', value: scenario.weather.humidity, icon: '💧' },
            { label: '혼합층', value: scenario.weather.mixHeight, icon: '📏' },
          ].map((w, i) => (
            <div key={i} className="text-center p-2 rounded-sm bg-bg-base">
              <div className="text-title-3 mb-0.5">{w.icon}</div>
              <div className="text-label-1 font-bold font-mono">{w.value}</div>
              <div className="text-fg-disabled mt-0.5 text-caption">{w.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
