/* global React */

// ────────────────────────────────────────────────────────────
// ALARM — драматичный экран события для сильных (M ≥ 6.0)
// Адаптация AlarmA из прототипа (Сдержанный приборный):
// огромная цифра магнитуды, pulsing предупреждение, параметры в grid.
//
// Кнопка «Карта эпицентра» переключает на полный EventDetailScreen
// с Leaflet картой.
// ────────────────────────────────────────────────────────────
window.AlarmScreen = ({ T, dark, ev, onBack, onShowDetail, onShowTsunami }) => {
  if (!ev) return null;

  const color = window.magColor(ev.mag, T);
  const magLabel = window.magLabel(ev.mag);
  const dateUtc = new Date(ev.timeUtc);
  const fmtMskWithSec = new Intl.DateTimeFormat("ru-RU", {
    hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
    timeZone: "Europe/Moscow",
  }).format(dateUtc);

  return (
    <div style={{ background: T.bg, color: T.text, minHeight: "100%",
      display: "flex", flexDirection: "column", padding: "20px 18px 28px" }}>

      {/* Top — UTC time + LIVE marker */}
      <div style={{ fontSize: 10, letterSpacing: 2, color: T.textMuted,
        fontFamily: '"JetBrains Mono", monospace', marginBottom: 14,
        display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span>СОБЫТИЕ · {fmtMskWithSec} МСК</span>
        <span style={{ color: T.accent, display: "flex", alignItems: "center", gap: 6 }}>
          <window.LivePulse color={T.accent} size={6} />
          LIVE
        </span>
      </div>

      {/* Warning header — pulsing icon + title */}
      <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 18 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 22, flexShrink: 0,
          border: `2px solid ${color}`, color: color,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: '"JetBrains Mono", monospace', fontSize: 18, fontWeight: 700,
          position: "relative",
        }}>
          <span style={{
            position: "absolute", inset: -6, borderRadius: "50%",
            border: `2px solid ${color}`, opacity: 0.5,
            animation: "eqPulse 1.6s ease-out infinite",
          }} />
          !
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, letterSpacing: 1.5, color: color,
            fontFamily: '"JetBrains Mono", monospace', fontWeight: 600 }}>
            ЗАФИКСИРОВАНО ЗЕМЛЕТРЯСЕНИЕ
          </div>
          <div style={{ fontSize: 13, color: T.textDim, marginTop: 4 }}>
            {window.formatAgo(ev.minutesAgo)} · {ev.flag} {ev.region || "—"}
          </div>
        </div>
      </div>

      {/* Magnitude — huge number */}
      <div style={{ background: T.surface, border: `1px solid ${T.border}`,
        borderRadius: 12, padding: "20px 20px 16px", marginBottom: 12 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 14 }}>
          <div style={{
            fontSize: 72, fontWeight: 700, lineHeight: 0.9, color: color,
            fontFamily: '"JetBrains Mono", monospace', letterSpacing: -3,
          }}>
            {ev.mag.toFixed(1)}
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: 1.5, color: T.textMuted,
              fontFamily: '"JetBrains Mono", monospace' }}>МАГНИТУДА</div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2, color: color }}>
              {magLabel}
            </div>
          </div>
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.4, marginBottom: 14, fontWeight: 500 }}>
          {ev.place}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10,
          paddingTop: 12, borderTop: `1px solid ${T.borderSoft}` }}>
          {[
            ["Глубина", `${ev.depth.toFixed(1)} км`],
            ["Время МСК", fmtMskWithSec],
            ["Локально", ev.timeLocal || "—"],
            ["Координаты", `${ev.lat.toFixed(2)}°, ${ev.lon.toFixed(2)}°`],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{ fontSize: 9.5, letterSpacing: 0.6, color: T.textMuted,
                fontFamily: '"JetBrains Mono", monospace' }}>{k.toUpperCase()}</div>
              <div style={{ fontSize: 13, fontWeight: 500, marginTop: 3,
                fontFamily: '"JetBrains Mono", monospace' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Sources */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ fontSize: 10, letterSpacing: 1.4, color: T.textMuted,
          fontFamily: '"JetBrains Mono", monospace', marginBottom: 8, paddingLeft: 4 }}>
          ИСТОЧНИКИ
        </div>
        <div style={{ background: T.surface, border: `1px solid ${T.border}`,
          borderRadius: 10, overflow: "hidden" }}>
          {(ev.sources && ev.sources.length > 0 ? ev.sources : ["—"]).map((src, i, arr) => (
            <div key={src + i} style={{
              padding: "11px 14px",
              borderBottom: i === arr.length - 1 ? "none" : `1px solid ${T.borderSoft}`,
              display: "flex", alignItems: "center", justifyContent: "space-between",
              fontFamily: '"JetBrains Mono", monospace',
            }}>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{src}</span>
              <span style={{ display: "flex", alignItems: "center", gap: 6,
                fontSize: 10.5, color: T.ok, letterSpacing: 0.4 }}>
                <window.LivePulse color={T.ok} size={5} />
                ПОДТВ.
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Confirmation badge */}
      {ev.confirmed && (
        <div style={{ marginBottom: 16, padding: "10px 12px",
          border: `1px solid ${T.ok}`, borderRadius: 6,
          display: "flex", alignItems: "center", gap: 8,
          fontSize: 12, color: T.ok, fontFamily: '"JetBrains Mono", monospace' }}>
          ✓ Событие подтверждено двумя независимыми источниками
        </div>
      )}

      {/* Tsunami warning — strong+shallow events trigger this. */}
      {window.TsunamiNotice && (
        <window.TsunamiNotice T={T} dark={dark} ev={ev} onOpenDetail={onShowTsunami} />
      )}

      {/* Actions */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        <button onClick={onShowDetail} style={{
          padding: "13px", borderRadius: 8,
          border: `1px solid ${T.accent}`, background: T.accent,
          color: dark ? "#0E1116" : "#fff",
          fontSize: 13, fontWeight: 600, cursor: "pointer", fontFamily: "inherit",
          letterSpacing: 0.2,
        }}>🗺 Карта эпицентра</button>
        <button onClick={onBack} style={{
          padding: "13px", borderRadius: 8,
          border: `1px solid ${T.border}`, background: "transparent",
          color: T.text,
          fontSize: 13, fontWeight: 500, cursor: "pointer", fontFamily: "inherit",
        }}>Закрыть</button>
      </div>
    </div>
  );
};