/* global React */

// ────────────────────────────────────────────────────────────
// TSUNAMI — оценка риска цунами для события и ссылка на NOAA.
//
// Без официального API цунами-прогноза: используем эвристику USGS,
// показываем только когда М ≥ 6.5 и (h ≤ 50 км) и (предполагаемо в воде).
// «В воде» определяем приблизительно: расстояние до ближайшего города из
// нашей базы > 100 км ⇒ скорее всего океан/море. Для серьёзных решений
// направляем на tsunami.gov / Росгидромет — у нас лишь индикатор.
// ────────────────────────────────────────────────────────────

// Estimates a tsunami risk level given the basic event parameters.
// Returns: "high" | "mid" | "low" | null (null → don't show the section)
window.assessTsunamiRisk = (ev) => {
  if (!ev) return null;
  const mag = Number(ev.mag) || 0;
  const depth = Number(ev.depth) || 0;
  // Rules of thumb (USGS):
  //   M < 6.5            → no tsunami concern (well below threshold)
  //   depth > 100 km     → too deep to displace water effectively
  //   shallow + 7.0+     → strong concern
  //   shallow + 6.5–7.0  → local watch level
  if (mag < 6.5) return null;
  if (depth > 100) return null;
  if (mag >= 7.5 && depth <= 50) return "high";
  if (mag >= 7.0 && depth <= 70) return "mid";
  if (mag >= 6.5 && depth <= 50) return "mid";
  return "low";
};

window.TsunamiNotice = ({ T, dark, ev, onOpenDetail }) => {
  const risk = window.assessTsunamiRisk(ev);
  if (!risk) return null;
  const color = risk === "high" ? T.danger : risk === "mid" ? T.warning : T.accent;
  const label = risk === "high" ? "ВЫСОКИЙ РИСК"
              : risk === "mid"  ? "ВОЗМОЖНА УГРОЗА"
              : "СЛАБЫЙ РИСК";

  return (
    <div onClick={onOpenDetail} style={{
      marginTop: 16, cursor: "pointer",
      background: T.surface, border: `1.5px solid ${color}`,
      borderRadius: 10, padding: "13px 14px",
      display: "flex", alignItems: "center", gap: 12,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 16, flexShrink: 0,
        background: color, color: "#fff",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 18, fontWeight: 700,
      }}>🌊</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, letterSpacing: 1.5, color,
          fontFamily: '"JetBrains Mono", monospace', fontWeight: 700 }}>
          ЦУНАМИ · {label}
        </div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginTop: 3, lineHeight: 1.4 }}>
          M {ev.mag.toFixed(1)} · h={ev.depth.toFixed(1)} км · подробности →
        </div>
      </div>
      <div style={{ color: T.textMuted, fontSize: 18 }}>›</div>
    </div>
  );
};

// Full screen — shows risk level, what to do, links to authoritative sources.
window.TsunamiScreen = ({ T, dark, ev, onBack }) => {
  const risk = window.assessTsunamiRisk(ev);
  const color = risk === "high" ? T.danger : risk === "mid" ? T.warning : T.accent;
  const label = risk === "high" ? "ВЫСОКИЙ РИСК"
              : risk === "mid"  ? "ВОЗМОЖНА УГРОЗА"
              : risk === "low"  ? "СЛАБЫЙ РИСК"
              : "НЕТ РИСКА";
  const headline = risk === "high"
    ? "Сильное прибрежное событие — возможны разрушительные волны"
    : risk === "mid"
    ? "Возможны локальные волны на ближайшем побережье"
    : risk === "low"
    ? "Параметры на грани порога — риск минимален"
    : "По параметрам события угроза цунами маловероятна";

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

      <window.ScreenHeader title="Угроза цунами"
        subtitle="оценка по параметрам события" onBack={onBack} T={T} />

      {/* Banner */}
      <div style={{ background: color, color: "#fff", padding: "16px 18px" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          marginBottom: 6, fontSize: 10, letterSpacing: 2,
          fontFamily: '"JetBrains Mono", monospace', opacity: 0.9,
        }}>
          <span>● {label}</span>
          <span>USGS · ЭВРИСТИКА</span>
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.2, lineHeight: 1.3 }}>
          {headline}
        </div>
      </div>

      {/* Параметры события (компактно) */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        borderBottom: `1px solid ${T.borderSoft}`, background: T.surface }}>
        {[
          ["МАГНИТУДА", `M ${ev.mag.toFixed(1)}`, color],
          ["ГЛУБИНА", `${ev.depth.toFixed(1)} км`, ev.depth <= 50 ? T.warning : T.text],
          ["ОБЛАСТЬ", ev.flag, T.text],
        ].map(([k, v, col], i, arr) => (
          <div key={k} style={{ padding: "12px 14px",
            borderRight: i === arr.length - 1 ? "none" : `1px solid ${T.borderSoft}` }}>
            <div style={{ fontSize: 9, letterSpacing: 1.2, color: T.textMuted,
              fontFamily: '"JetBrains Mono", monospace', marginBottom: 4 }}>{k}</div>
            <div style={{ fontSize: 14, fontWeight: 700, color: col,
              fontFamily: '"JetBrains Mono", monospace' }}>{v}</div>
          </div>
        ))}
      </div>

      {/* Тело — что делать */}
      <div style={{ padding: "16px 18px", flex: 1 }}>
        <div style={{ fontSize: 10, letterSpacing: 2, color: T.accent,
          fontFamily: '"JetBrains Mono", monospace', marginBottom: 8, fontWeight: 600 }}>
          ЕСЛИ ВЫ НА ПОБЕРЕЖЬЕ
        </div>
        <div style={{ background: T.surface, border: `1px solid ${T.border}`,
          borderRadius: 10, padding: "14px", marginBottom: 14 }}>
          <ol style={{ margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.55,
            color: T.text }}>
            <li><b>Немедленно покиньте берег</b> — не ждите официального сигнала.</li>
            <li>Поднимитесь на возвышенность <b>не ниже 30 м</b> или <b>3 км вглубь суши</b>.</li>
            <li>Не возвращайтесь на берег раньше чем через несколько часов.</li>
            <li>Слушайте экстренные сообщения МЧС и Росгидромета.</li>
          </ol>
        </div>

        <div style={{ fontSize: 10, letterSpacing: 2, color: T.textMuted,
          fontFamily: '"JetBrains Mono", monospace', marginBottom: 8, fontWeight: 600 }}>
          ОФИЦИАЛЬНЫЕ ИСТОЧНИКИ
        </div>
        <div style={{ background: T.surface, border: `1px solid ${T.border}`,
          borderRadius: 10, overflow: "hidden", marginBottom: 16 }}>
          <SourceLink T={T} title="NOAA Tsunami Service"
            desc="Глобальный центр предупреждения цунами"
            url="https://www.tsunami.gov/" />
          <window.Divider T={T} />
          <SourceLink T={T} title="Цунами-центр Росгидромета"
            desc="Россия · Тихоокеанский регион"
            url="http://www.tsunami.ru/" />
          <window.Divider T={T} />
          <SourceLink T={T} title="USGS Earthquake Hazards"
            desc="Общая страница события"
            url={ev.id ? `https://earthquake.usgs.gov/earthquakes/eventpage/${ev.id}` : "https://earthquake.usgs.gov/"} />
        </div>

        <div style={{ fontSize: 10.5, color: T.textMuted,
          fontFamily: '"JetBrains Mono", monospace', lineHeight: 1.55,
          padding: "10px 0", borderTop: `1px solid ${T.borderSoft}` }}>
          ⚠️ ОЦЕНКА ОСНОВАНА НА ЭВРИСТИКЕ (M, ГЛУБИНА). НЕ ЗАМЕНЯЕТ ОФИЦИАЛЬНЫЙ
          ПРОГНОЗ. ДЛЯ КРИТИЧЕСКИХ РЕШЕНИЙ ОБРАЩАЙТЕСЬ К NOAA / РОСГИДРОМЕТУ.
        </div>
      </div>
    </div>
  );
};

const SourceLink = ({ T, title, desc, url }) => (
  <a href={url} target="_blank" rel="noopener noreferrer" style={{
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "12px 14px", color: T.text, textDecoration: "none",
  }}>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{title}</div>
      <div style={{ fontSize: 10.5, color: T.textMuted, marginTop: 2,
        fontFamily: '"JetBrains Mono", monospace' }}>{desc}</div>
    </div>
    <div style={{ color: T.accent, fontSize: 14, marginLeft: 8 }}>↗</div>
  </a>
);