/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ────────────────────────────────────────────────────────────
// Базовые UI-примитивы
// ────────────────────────────────────────────────────────────

window.MonoType = ({ children, style }) => (
  <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, Menlo, monospace', ...style }}>{children}</span>
);

window.Divider = ({ T }) => (
  <div style={{ height: 1, background: T.borderSoft }} />
);

// Пульсирующая «живая» точка — статус мониторинга
window.LivePulse = ({ color = "#4F6B3A", size = 8 }) => (
  <span style={{ position: "relative", display: "inline-flex", width: size, height: size }}>
    <span style={{
      position: "absolute", inset: 0, borderRadius: "50%", background: color,
      animation: "eqPulse 1.8s ease-out infinite", opacity: 0.5,
    }} />
    <span style={{ position: "relative", width: size, height: size, borderRadius: "50%", background: color }} />
  </span>
);

// Бэйдж магнитуды — крупный, монохромный, «приборный»
window.MagBadge = ({ mag, T, size = 56 }) => {
  const color = window.magColor(mag, T);
  return (
    <div style={{
      width: size, height: size, minWidth: size,
      borderRadius: 6,
      border: `1.5px solid ${color}`,
      background: "transparent",
      color,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      fontFamily: '"JetBrains Mono", ui-monospace, monospace',
      lineHeight: 1,
    }}>
      <div style={{ fontSize: size * 0.05, opacity: 0.7, letterSpacing: 0.5, marginBottom: 2 }}>М</div>
      <div style={{ fontSize: size * 0.42, fontWeight: 600 }}>{mag.toFixed(1)}</div>
    </div>
  );
};

// Статичная мини-карта с пином (SVG, не Leaflet — для производительности списка)
window.MiniMap = ({ lat, lon, T, w = 80, h = 60, mag = 4 }) => {
  // Простейшая проекция окна Россия+СНГ → SVG
  const x = ((lon + 180) / 360) * w;
  const y = (1 - (lat + 90) / 180) * h;
  const color = window.magColor(mag, T);
  return (
    <svg width={w} height={h} style={{ borderRadius: 4, background: T.surface2, border: `1px solid ${T.borderSoft}` }}>
      {/* грубые линии широты/долготы */}
      {[0.25, 0.5, 0.75].map((f, i) => (
        <line key={"v" + i} x1={f * w} y1={0} x2={f * w} y2={h} stroke={T.grid} strokeWidth={0.5} />
      ))}
      {[0.33, 0.66].map((f, i) => (
        <line key={"h" + i} x1={0} y1={f * h} x2={w} y2={f * h} stroke={T.grid} strokeWidth={0.5} />
      ))}
      {/* пин */}
      <circle cx={x} cy={y} r={6} fill={color} fillOpacity="0.18" />
      <circle cx={x} cy={y} r={3} fill={color} />
      <circle cx={x} cy={y} r={3} fill="none" stroke={T.surface} strokeWidth="1" />
    </svg>
  );
};

// «Сейсмограф» — декоративная wave-линия (SVG)
window.SeismoLine = ({ T, w = 380, h = 32, seed = 1, intense = 0.6 }) => {
  const pts = [];
  let prng = seed;
  for (let i = 0; i <= 80; i++) {
    prng = (prng * 9301 + 49297) % 233280;
    const r = prng / 233280;
    const x = (i / 80) * w;
    let amp = (r - 0.5) * 4;
    // всплеск посередине
    const k = Math.exp(-Math.pow((i - 40) / 8, 2)) * 14 * intense;
    amp += (r - 0.5) * k;
    const y = h / 2 + amp;
    pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
  }
  return (
    <svg width={w} height={h} style={{ display: "block" }}>
      <line x1="0" y1={h/2} x2={w} y2={h/2} stroke={T.grid} strokeWidth="0.5" />
      <polyline points={pts.join(" ")} fill="none" stroke={T.text} strokeWidth="1" strokeOpacity="0.6" />
    </svg>
  );
};

// Кнопка-tab нижней навигации
window.TabButton = ({ icon, label, active, onClick, T }) => (
  <button onClick={onClick} style={{
    flex: 1, background: "none", border: "none", cursor: "pointer",
    padding: "8px 0 6px",
    display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
    color: active ? T.text : T.textMuted,
    fontFamily: 'inherit',
  }}>
    <div style={{
      width: 32, height: 22, display: "flex", alignItems: "center", justifyContent: "center",
      borderRadius: 11,
      background: active ? T.accentSoft : "transparent",
      color: active ? T.accent : T.textMuted,
    }}>{icon}</div>
    <div style={{ fontSize: 10.5, letterSpacing: 0.2, fontWeight: active ? 600 : 400 }}>{label}</div>
  </button>
);

// Header — общий для экранов
window.ScreenHeader = ({ title, onBack, right, T, subtitle }) => (
  <div style={{
    padding: "14px 16px 12px", borderBottom: `1px solid ${T.borderSoft}`,
    display: "flex", alignItems: "center", gap: 12, background: T.surface,
  }}>
    {onBack && (
      <button onClick={onBack} style={{
        width: 32, height: 32, borderRadius: 16, border: `1px solid ${T.border}`,
        background: "transparent", color: T.text, cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 16, lineHeight: 1, padding: 0,
      }}>←</button>
    )}
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 16, fontWeight: 600, color: T.text, letterSpacing: -0.1 }}>{title}</div>
      {subtitle && <div style={{ fontSize: 11, color: T.textMuted, marginTop: 1, fontFamily: '"JetBrains Mono", monospace' }}>{subtitle}</div>}
    </div>
    {right}
  </div>
);

// Иконки (тонкие, scientific-style; собственная отрисовка простыми путями)
window.Icon = {
  pulse: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12h3l2-7 4 14 2-7h7"/>
    </svg>
  ),
  map: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/>
      <path d="M9 4v14M15 6v14"/>
    </svg>
  ),
  chart: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 3v18h18"/><path d="M7 14l4-5 3 3 5-7"/>
    </svg>
  ),
  bell: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8M10 21a2 2 0 0 0 4 0"/>
    </svg>
  ),
  settings: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
    </svg>
  ),
  info: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/>
    </svg>
  ),
  layers: (s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
    </svg>
  ),
};

Object.assign(window, {});
