// Инструкции по клиентам подключения. 4 экрана: V2Ray, Incy, Android ("скоро"), iOS ("скоро").
// Каждая инструкция — шаги установки + ссылка-импорт subscription URL.
// Subscription URL отдаётся только из M1-модалки (one-time) при создании/перегенерации слота —
// здесь только инструкции, никаких живых URL.

function SetupScreen({ title, eyebrow, clientName, soon, soonText, store, steps, troubleshoot }) {
  return (
    <Shell active={`setup-${(clientName || "").toLowerCase()}`} screenLabel={`Setup · ${clientName}`}>
      <SectionHeader
        eyebrow={eyebrow}
        title={title}
        badge={soon ? <Badge kind="pending">скоро</Badge> : <Badge kind="active">Доступно</Badge>}
      />

      {soon ? (
        <PsCard style={{ textAlign: "center", padding: "44px 28px" }}>
          <div style={{
            width: 72, height: 72, borderRadius: 18, margin: "0 auto 18px",
            background: "rgba(162,172,184,.10)", border: "1px solid var(--border)",
            color: "var(--muted)", display: "grid", placeItems: "center",
          }}>
            <Icons.phone />
          </div>
          <h3 style={{ margin: "0 0 10px", fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink)" }}>
            {clientName}-приложение скоро
          </h3>
          <p style={{ margin: "0 auto 22px", fontSize: 15, color: "var(--muted)", maxWidth: 540, lineHeight: 1.55 }}>
            {soonText}
          </p>
          <div style={{ fontSize: 13, color: "var(--dim)" }}>
            Когда приложение появится — ваша подписка активируется в нём автоматически по email.
          </div>
        </PsCard>
      ) : (
        <React.Fragment>
          {/* Шаги */}
          <PsCard>
            <h3 style={{ margin: "0 0 14px", fontSize: 18, fontWeight: 700 }}>Как подключиться</h3>
            <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
              {steps.map((s, i) => (
                <SetupStep key={i} n={i + 1} title={s.title} body={s.body} />
              ))}
            </ol>
            {store && (
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
                <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 10 }}>Скачать клиент</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                  {store.ios && <StoreLink label="App Store" href={store.ios} />}
                  {store.android && <StoreLink label="Google Play" href={store.android} />}
                  {store.windows && <StoreLink label="Windows" href={store.windows} />}
                  {store.macos && <StoreLink label="macOS" href={store.macos} />}
                </div>
              </div>
            )}
          </PsCard>

          {store && <StoreRegionHelp />}

          {troubleshoot && troubleshoot.length > 0 && (
            <PsCard style={{ marginTop: 14 }}>
              <h3 style={{ margin: "0 0 10px", fontSize: 16, fontWeight: 700 }}>Если что-то не работает</h3>
              <ul style={{ margin: 0, padding: "0 0 0 18px", display: "flex", flexDirection: "column", gap: 6, fontSize: 13.5, color: "var(--muted)", lineHeight: 1.55 }}>
                {troubleshoot.map((t, i) => <li key={i}>{t}</li>)}
              </ul>
              <div style={{ marginTop: 14, fontSize: 13, color: "var(--dim)" }}>
                Не помогло? Напишите в <a href="https://t.me/FortuneVPNsupportbot" target="_blank" rel="noopener" style={{ color: "var(--accent-soft)", textDecoration: "none" }}>@FortuneVPNsupportbot</a> — поможем разобраться.
              </div>
            </PsCard>
          )}

          <div style={{ marginTop: 14, fontSize: 13, color: "var(--dim)" }}>
            Subscription URL для подключения вы получите при создании или перегенерации слота на странице <a href="#" onClick={(e) => { e.preventDefault(); window.navigate("keys"); }} style={{ color: "var(--accent-soft)", textDecoration: "none" }}>«Подписка»</a>.
          </div>
        </React.Fragment>
      )}
    </Shell>
  );
}

function SetupStep({ n, title, body }) {
  return (
    <li style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
      <div style={{
        width: 28, height: 28, borderRadius: 8, flexShrink: 0,
        display: "grid", placeItems: "center",
        background: "rgba(46,168,255,.12)", border: "1px solid rgba(46,168,255,.22)",
        color: "var(--accent-soft)", fontSize: 13, fontWeight: 700,
      }}>{n}</div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)", marginBottom: 4 }}>{title}</div>
        <div style={{ fontSize: 13.5, color: "var(--muted)", lineHeight: 1.55 }}>{body}</div>
      </div>
    </li>
  );
}

function StoreRegionHelp() {
  const addressRows = [
    ["Street", "151 W 34th Street"],
    ["City", "New York"],
    ["State", "NY"],
    ["ZIP", "10001"],
    ["Phone", "(212) 695-4400"],
  ];

  return (
    <PsCard style={{ marginTop: 14 }}>
      <div style={{ display: "flex", gap: 14, alignItems: "flex-start", marginBottom: 14 }}>
        <div style={{
          width: 34, height: 34, borderRadius: 10, flexShrink: 0,
          display: "grid", placeItems: "center",
          background: "rgba(46,168,255,.12)", border: "1px solid rgba(46,168,255,.24)",
          color: "var(--accent-soft)", fontSize: 16, fontWeight: 800,
        }}>i</div>
        <div>
          <h3 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 700 }}>Не нашли клиент в магазине?</h3>
          <p style={{ margin: 0, fontSize: 13.5, color: "var(--muted)", lineHeight: 1.55 }}>
            Для ключа-подписки нужен клиент с импортом subscription URL. Если App Store или Google Play скрывает приложение,
            временно смените регион магазина на США, установите клиент и затем верните регион обратно.
          </p>
        </div>
      </div>

      <div style={{ display: "grid", gap: 10 }}>
        <RegionDetails title="iPhone / iPad — смена региона App Store" open>
          <ol style={regionListStyle}>
            <li>Откройте <b>Настройки</b> → ваше имя вверху экрана → <b>Медиа и покупки</b>.</li>
            <li>Нажмите <b>Просмотреть</b> → <b>Страна или регион</b>.</li>
            <li>Выберите <b>Изменить страну или регион</b> → <b>США</b>.</li>
            <li>Примите условия. В платёжных данных выберите <b>Нет</b>, карта не нужна.</li>
            <li>Заполните адрес данными ниже. Apple проверяет формат, а не реальность адреса.</li>
            <li>Откройте App Store, найдите клиент с импортом subscription URL и установите его.</li>
            <li>После установки регион можно вернуть обратно, приложение продолжит работать.</li>
          </ol>
          <DummyAddress rows={addressRows} />
        </RegionDetails>

        <RegionDetails title="Android — смена региона Google Play">
          <ol style={regionListStyle}>
            <li>Откройте <b>Google Play</b> → нажмите на профиль справа сверху.</li>
            <li>Выберите <b>Настройки</b> → <b>Общие</b> → <b>Аккаунт и настройки устройства</b>.</li>
            <li>Откройте <b>Страна и профили</b> → выберите <b>США</b>.</li>
            <li>Если Play попросит платёжный метод, выберите <b>Пропустить</b>. Если нужен адрес, используйте данные ниже.</li>
            <li>Откройте Google Play и установите V2Ray/Incy-клиент с импортом subscription URL.</li>
          </ol>
          <DummyAddress rows={addressRows} />
          <p style={{ margin: "12px 0 0", fontSize: 13.5, color: "var(--muted)", lineHeight: 1.55 }}>
            Если Google Play не пускает в US-регион, можно скачать APK V2Ray-клиента напрямую с официального GitHub:
            {" "}
            <a href="https://github.com/2dust/v2rayNG/releases/latest" target="_blank" rel="noopener" style={{ color: "var(--accent-soft)", textDecoration: "none" }}>
              github.com/2dust/v2rayNG/releases/latest
            </a>.
            Перед установкой Android попросит разрешить установку из неизвестных источников.
          </p>
        </RegionDetails>
      </div>

      <div style={{ marginTop: 14, fontSize: 13, color: "var(--dim)", lineHeight: 1.5 }}>
        Если не хотите менять регион самостоятельно, напишите в{" "}
        <a href="https://t.me/FortuneVPNsupportbot" target="_blank" rel="noopener" style={{ color: "var(--accent-soft)", textDecoration: "none" }}>
          @FortuneVPNsupportbot
        </a>
        {" "}— подскажем подходящий клиент и шаги под ваше устройство.
      </div>
    </PsCard>
  );
}

function RegionDetails({ title, children, open = false }) {
  return (
    <details open={open} style={{
      border: "1px solid var(--border)",
      borderRadius: 12,
      background: "rgba(255,255,255,.025)",
      overflow: "hidden",
    }}>
      <summary style={{
        cursor: "pointer",
        padding: "14px 16px",
        fontSize: 14,
        fontWeight: 700,
        color: "var(--ink)",
      }}>
        {title}
      </summary>
      <div style={{ borderTop: "1px solid var(--border)", padding: "14px 16px 16px" }}>
        {children}
      </div>
    </details>
  );
}

const regionListStyle = {
  margin: 0,
  padding: "0 0 0 18px",
  display: "flex",
  flexDirection: "column",
  gap: 8,
  fontSize: 13.5,
  color: "var(--muted)",
  lineHeight: 1.55,
};

function DummyAddress({ rows }) {
  return (
    <div style={{
      marginTop: 12,
      padding: 12,
      borderRadius: 10,
      border: "1px solid rgba(207,176,99,.28)",
      background: "rgba(207,176,99,.08)",
    }}>
      <div style={{ marginBottom: 8, fontSize: 12, fontWeight: 800, color: "var(--gold)", textTransform: "uppercase", letterSpacing: 0.6 }}>
        Готовые данные для США
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "88px minmax(0,1fr)", gap: "6px 10px", fontSize: 13 }}>
        {rows.map(([label, value]) => (
          <React.Fragment key={label}>
            <span style={{ color: "var(--dim)" }}>{label}</span>
            <code style={{ color: "var(--ink)", whiteSpace: "normal", overflowWrap: "anywhere" }}>{value}</code>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function StoreLink({ label, href }) {
  return (
    <a href={href} target="_blank" rel="noopener" className="btn btn-ghost btn-sm" style={{ textDecoration: "none" }}>
      <Icons.download size={14} /> {label}
    </a>
  );
}

// ── V2Ray ──────────────────────────────────────────────────────────────
function Screen_Setup_V2Ray() {
  return (
    <SetupScreen
      title="V2Ray"
      eyebrow="ИНСТРУКЦИЯ"
      clientName="V2Ray"
      store={{
        ios: "https://apps.apple.com/search?term=v2ray",
        android: "https://play.google.com/store/search?q=v2ray&c=apps",
        windows: "https://github.com/2dust/v2rayN/releases",
        macos: "https://apps.apple.com/search?term=v2ray",
      }}
      steps={[
        { title: "Установите V2Ray-клиент", body: "Скачайте клиент для вашей платформы по ссылке ниже. Для iOS и Android откроется поиск по V2Ray-клиентам в официальном магазине." },
        { title: "Откройте «Подписка» в ЛК", body: "На странице «Подписка» в боковом меню нажмите «Подключить устройство» — мы покажем subscription URL один раз. Сохраните его сразу." },
        { title: "Импортируйте URL в V2Ray-клиент", body: "Откройте клиент → раздел подписок или профилей → добавьте подписку по URL. Не вставляйте ссылку как одиночный VLESS-ключ." },
        { title: "Подключитесь", body: "Выберите импортированную конфигурацию и нажмите кнопку подключения. Серверы обновляются автоматически — переустановка не нужна." },
      ]}
      troubleshoot={[
        "Если App Store или Google Play не показывает нужный V2Ray-клиент — временно смените регион магазина на US/UK и повторите поиск.",
        "Если соединение не устанавливается — обновите подписку в V2Ray-клиенте и попробуйте снова.",
        "Если ссылка перестала работать — перегенерируйте slot на странице «Подписка».",
      ]}
    />
  );
}

// ── Incy ────────────────────────────────────────────────────────────────
function Screen_Setup_Incy() {
  return (
    <SetupScreen
      title="Incy"
      eyebrow="ИНСТРУКЦИЯ"
      clientName="Incy"
      store={{
        ios: "https://apps.apple.com/app/incy-vpn-client/id6502091749",
        android: "https://play.google.com/store/apps/details?id=app.incy.client",
      }}
      steps={[
        { title: "Установите Incy", body: "Скачайте Incy из App Store или Google Play. Приложение бесплатное." },
        { title: "Откройте «Подписка» в ЛК", body: "На странице «Подписка» нажмите «Подключить устройство» — увидите subscription URL один раз. Сохраните." },
        { title: "Добавьте подписку в Incy", body: "Откройте Incy → «Subscribe» → «Add Subscription URL» → вставьте URL из ЛК." },
        { title: "Подключитесь", body: "Выберите профиль из подписки и нажмите «Connect». Список серверов в подписке обновляется автоматически." },
      ]}
      troubleshoot={[
        "Если приложение не видит подписку — нажмите «Update Subscription» в Incy, чтобы вручную подтянуть конфигурацию.",
        "Если соединение разрывается — переключите профиль на другой сервер из списка.",
      ]}
    />
  );
}

// ── Android ("скоро") ───────────────────────────────────────────────────
function Screen_Setup_Android() {
  return (
    <SetupScreen
      title="Android-приложение"
      eyebrow="ИНСТРУКЦИЯ"
      clientName="Android"
      soon
      soonText="Готовим запуск Fortune VPN для Android в Google Play. Это будет наше собственное приложение — VPN в одной кнопке, без копирования subscription URL."
    />
  );
}

// ── iOS ("скоро") ───────────────────────────────────────────────────────
function Screen_Setup_iOS() {
  return (
    <SetupScreen
      title="iOS-приложение"
      eyebrow="ИНСТРУКЦИЯ"
      clientName="iOS"
      soon
      soonText="Готовим запуск Fortune VPN для iOS в App Store. Будет работать с той же подпиской — никаких доплат."
    />
  );
}

Object.assign(window, {
  Screen_Setup_V2Ray, Screen_Setup_Incy, Screen_Setup_Android, Screen_Setup_iOS,
  SetupScreen, SetupStep, StoreRegionHelp, RegionDetails, DummyAddress, StoreLink,
});