/* global React */
const { useState: __useStateOb, useEffect: __useEffectOb } = React;

// ────────────────────────────────────────────────────────────
// ONBOARDING — приветственный 4-шаговый экран при первом открытии
// Адаптация OnboardingA из прототипа («Поэтичный · обсерватория»):
// концентрические круги-сейсмограмма, крупная типографика, точка-эпицентр.
//
// Показывается ровно один раз — потом ставит flag eq.onboarding-seen.
// ────────────────────────────────────────────────────────────

const ONBOARDING_STEPS = [
  {
    eyebrow: "ПРИВЕТСТВУЕМ",
    title: ["Земля движется.", "Вы будете знать первым."],
    body:
      "Сейсмомониторинг отслеживает землетрясения по всему миру в реальном " +
      "времени. Без задержек. Без шума. Только то, что важно для вас.",
  },
  {
    eyebrow: "ИСТОЧНИКИ",
    title: ["USGS + EMSC.", "Два независимых сейсмоцентра."],
    body:
      "Бот опрашивает оба источника каждые 10 минут с фильтром " +
      "updatedafter — ловим даже опаздывающие публикации крупных событий. " +
      "Дубликаты от двух источников отмечаются как «подтверждённые».",
  },
  {
    eyebrow: "ПОРОГИ",
    title: ["M ≥ 5 для Россия / СНГ", "M ≥ 7 для всего мира"],
    body:
      "Алерты приходят только при превышении порога — не каждый толчок, а " +
      "только заметные. Пороги меняются прямо в Mini App: «Ещё → Настройки».",
  },
  {
    eyebrow: "ГОТОВО",
    title: ["Поехали."],
    body:
      "Дайджест в 08:00 и 20:00 МСК · мгновенные алерты · live-карта · " +
      "статистика. Всё это здесь, в боте и в Mini App.",
  },
];

window.OnboardingScreen = ({ T, dark, onFinish }) => {
  const [step, setStep] = __useStateOb(0);
  const total = ONBOARDING_STEPS.length;
  const cur = ONBOARDING_STEPS[step];
  const isLast = step === total - 1;

  const next = () => (isLast ? onFinish() : setStep(step + 1));
  const prev = () => setStep(Math.max(0, step - 1));

  return (
    <div style={{
      background: T.bg, color: T.text, height: "100%",
      display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
      fontFamily: 'Manrope, "Helvetica Neue", system-ui, sans-serif',
    }}>
      {/* Концентрические круги-сейсмограмма как фон */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
        viewBox="0 0 412 892" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="ob-glow" cx="50%" cy="32%" r="55%">
            <stop offset="0%"  stopColor={T.accent} stopOpacity="0.18" />
            <stop offset="60%" stopColor={T.accent} stopOpacity="0.04" />
            <stop offset="100%" stopColor={T.accent} stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="412" height="892" fill="url(#ob-glow)" />
        {[1,2,3,4,5,6,7,8].map((i) => (
          <circle key={i} cx="206" cy="285" r={40 + i*38}
            fill="none" stroke={T.accent}
            strokeOpacity={Math.max(0, 0.2 - i*0.018)}
            strokeWidth="1" strokeDasharray={i % 2 ? "1 5" : "none"} />
        ))}
        <circle cx="206" cy="285" r="6" fill={T.accent} />
        <circle cx="206" cy="285" r="14" fill="none" stroke={T.accent}
          strokeWidth="1.5" opacity="0.6" />
      </svg>

      {/* Координаты + skip */}
      <div style={{
        padding: "18px 22px 0", display: "flex", justifyContent: "space-between",
        alignItems: "center",
        fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: 1.5,
        color: T.textMuted, position: "relative", zIndex: 1,
      }}>
        <span>53.0°N · 158.6°E</span>
        <button onClick={onFinish} title="Пропустить" style={{
          background: "transparent", border: "none", cursor: "pointer",
          color: T.textMuted, fontSize: 18, lineHeight: 1, padding: 4,
          fontFamily: "inherit",
        }}>×</button>
      </div>

      <div style={{ flex: 1 }} />

      {/* Контент */}
      <div style={{ padding: "0 28px", position: "relative", zIndex: 1 }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          letterSpacing: 2.5, color: T.accent, marginBottom: 14, fontWeight: 600,
        }}>
          {cur.eyebrow}
        </div>
        <div style={{
          fontSize: 32, fontWeight: 700, lineHeight: 1.1, letterSpacing: -0.6,
          marginBottom: 18, maxWidth: 320,
        }}>
          {cur.title.map((line, i) => (
            <div key={i}>{line}</div>
          ))}
        </div>
        <div style={{ fontSize: 14.5, lineHeight: 1.55, color: T.textDim, maxWidth: 340 }}>
          {cur.body}
        </div>
      </div>

      <div style={{ flex: 1 }} />

      {/* Степ-индикатор + кнопки */}
      <div style={{ padding: "0 22px 26px", position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
          {ONBOARDING_STEPS.map((_, i) => (
            <div key={i} style={{
              flex: 1, height: 3, borderRadius: 2,
              background: i <= step ? T.accent : T.borderSoft,
              transition: "background 0.2s",
            }} />
          ))}
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {step > 0 && (
            <button onClick={prev} style={{
              flex: "0 0 auto", padding: "13px 18px", borderRadius: 10,
              background: "transparent", color: T.text,
              border: `1px solid ${T.border}`,
              fontSize: 14, fontWeight: 500, cursor: "pointer", fontFamily: "inherit",
            }}>Назад</button>
          )}
          <button onClick={next} style={{
            flex: 1, padding: "14px", borderRadius: 10,
            background: T.accent, color: dark ? "#0E1116" : "#fff",
            border: "none",
            fontSize: 14, fontWeight: 600, cursor: "pointer", fontFamily: "inherit",
            letterSpacing: 0.2,
          }}>
            {isLast ? "Начать" : "Далее"}
          </button>
        </div>
      </div>
    </div>
  );
};

window.__shouldShowOnboarding = () => {
  try { return !localStorage.getItem("eq.onboarding-seen"); } catch (e) { return false; }
};
window.__markOnboardingSeen = () => {
  try { localStorage.setItem("eq.onboarding-seen", "1"); } catch (e) {}
};