{% extends "base.html" %}
{% block page_title %}{{ t('settings.title') }}{% endblock %}
{% block content %}

<div class="card">
    <h2>Движок интерфейса</h2>
    <p class="card-hint">Ember использует встроенный браузер для рендера UI. Edge WebView2 (Chromium 120+) намного легче чем Qt5/Chromium 87 — экономит 150-200 МБ RAM и убирает большинство лагов при rapid switching. Включается автоматически если есть .NET 6 Desktop Runtime.</p>
    <div id="engine-block" class="lic-stack" style="margin-top:6px;">
        <div class="lic-row">
            <span class="pill" id="engine-pill">проверяю…</span>
            <span class="lic-meta">
                <span id="engine-detail">—</span>
            </span>
        </div>
        <div class="btn-row" id="engine-actions" style="margin-top:10px; display:none;">
            <button class="btn" id="engine-install-dotnet6" data-icon="play">Попробовать установить .NET 6</button>
            <span class="card-hint" style="margin:0;">Запустит installer заново. Один UAC prompt, ~30 сек, потом перезапусти Ember.</span>
        </div>
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.license_title') }}</h2>
    <div id="license-block" data-licensed="0" class="lic-stack">
        <div class="lic-row">
            <span class="pill lic-status" id="lic-pill">—</span>
            <span class="lic-meta">
                <span class="lic-key-mono" id="lic-key-masked">—</span>
                <span class="lic-sep">·</span>
                <span id="lic-activated-at">—</span>
            </span>
        </div>
        <p class="lic-mid-line">
            {{ t('onboarding.machine_id') }}: <code class="lic-mid-mono" id="lic-mid">—</code>
        </p>
    </div>
</div>

<!-- 1.0.165: Virtual Desktop card.
     Спавнит браузеры антидетекта на изолированном Win32 desktop'е чтобы
     юзер не отвлекался от своего экрана пока бот работает. Camoufox =
     бесшовно (мы сами спавним). ixBrowser/AdsPower = нужно нажать
     «Запустить на виртуальном столе» — мы убиваем существующий процесс
     антидетекта и запускаем заново с lpDesktop. -->
<div class="card" id="vdesk-card">
    <h2>
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px; margin-right:6px;">
            <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/>
        </svg>Виртуальный рабочий стол
        <span class="pill warn" style="margin-left:8px; font-size:11px;">В тесте</span>
    </h2>
    <p class="card-hint">
        Браузерные профили запускаются на изолированном рабочем столе Windows — полностью
        скрыты от экрана, но рендерятся в полную силу. Площадка (YouTube, RuTube — любая)
        видит обычный активный браузер. Работает для всех профилей, не привязано к платформе.
        Просматривать и скрывать браузеры — через кнопки ниже.
    </p>
    <p class="card-hint" style="color:#FFB454; margin-top:6px;">
        ⚠ Функция в тесте — возможно влияние на траст аккаунта. Используй осторожно.
    </p>
    <div class="lic-stack" style="margin-top:12px;">
        <div class="lic-row" style="align-items:center;">
            <label class="adapter-row" style="margin:0;">
                <input type="checkbox" id="vdesk-enabled">
                <b>Скрывать браузеры на изолированном столе</b>
            </label>
            <span class="pill" id="vdesk-status-pill" style="margin-left:auto;">проверяю…</span>
        </div>
        <div style="margin-top:8px; font-size:12px; color:var(--text-lo); line-height:1.5;">
            <div>Адаптер: <b id="vdesk-adapter-label">—</b></div>
            <div id="vdesk-adapter-hint" style="margin-top:3px;">—</div>
        </div>
        <div class="btn-row" style="margin-top:10px;">
            <button class="btn ghost" id="vdesk-peek-btn" data-icon="eye">Посмотреть браузеры</button>
            <button class="btn ghost" id="vdesk-return-btn" data-icon="undo">Вернуться сейчас</button>
            <button class="btn" id="vdesk-spawn-btn" data-icon="play" style="display:none;">
                Запустить антидетект на виртуальном столе
            </button>
            <span class="onb-msg" id="vdesk-msg" role="status" style="margin-left:8px;"></span>
        </div>
    </div>
</div>

<div class="card" id="backup-card">
    <h2>
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px; margin-right:6px;">
            <ellipse cx="12" cy="6" rx="9" ry="3"/><path d="M3 6v6c0 1.66 4.03 3 9 3s9-1.34 9-3V6"/><path d="M3 12v6c0 1.66 4.03 3 9 3s9-1.34 9-3v-6"/>
        </svg>Облачный резерв базы
    </h2>
    <p class="card-hint">
        Автоматический шифрованный бэкап аккаунтов, прокси и настроек на наш сервер.
        База уезжает раз в 10 минут, только если в ней что-то менялось. Шифрование AES-GCM,
        ключ выводится из вашей лицензии — на сервере данные опаковые, расшифровать может
        только этот софт с той же лицензией.
    </p>
    <div class="lic-stack" style="margin-top:6px;">
        <div class="lic-row">
            <span class="lic-meta">Последний бэкап: <b id="backup-last-at">—</b></span>
        </div>
        <div class="lic-row">
            <span class="lic-meta">Размер: <b id="backup-size">—</b></span>
        </div>
        <div class="btn-row" style="margin-top:10px;">
            <button class="btn" id="backup-now-btn" data-icon="upload">Сделать резервную копию</button>
            <button class="btn ghost" id="backup-restore-btn" data-icon="refresh">Восстановить из копии</button>
            <span class="onb-msg" id="backup-msg" role="status" style="margin-left:8px;"></span>
        </div>
    </div>
</div>

<!-- 1.0.179: Google Sheets integration for bulk-create. Operator pastes
     a service-account JSON key + Sheet ID + tab name; after every
     bulk-create-profiles run we append one row per profile so the operator
     gets a live registry of (name, proxy, profile_id, group, created_at). -->
<div class="card" id="sheets-card">
    <h2>
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px; margin-right:6px;">
            <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>
        </svg>Google Sheets — журнал созданных профилей
    </h2>
    <p class="card-hint">
        После «Создать профили» (массовое создание) Ember добавит одну строку
        в указанную таблицу на каждый профиль: дата, имя, прокси, profile_id, папка.
        Нужен service-account JSON (см. подсказку ниже). Поле необязательное — если
        не заполнено, массовое создание просто работает без записи в таблицу.
    </p>
    <!-- 1.0.199: OAuth «Войти через Google» — альтернатива service-account JSON -->
    <details class="onb-help" style="margin:8px 0; border:1px solid var(--success); border-radius:8px; padding:10px;">
        <summary style="font-weight:600; color:var(--success);">🟢 Способ 1 — войти через Google (рекомендуется)</summary>
        <p style="margin:8px 0; color:var(--text-lo); font-size:12.5px;">
            Один раз создаёшь OAuth Client (Desktop) в Google Cloud Console — это 2 минуты.
            Дальше жмёшь «Войти через Google», открывается обычный Google-логин в браузере,
            всё. Можешь логиниться/выходить когда захочешь.
        </p>
        <ol style="margin:8px 0; padding-left:18px; line-height:1.6; color:var(--text-lo); font-size:12.5px;">
            <li><a href="https://console.cloud.google.com" target="_blank" rel="noopener">console.cloud.google.com</a> → создать проект (или открыть существующий)</li>
            <li>APIs &amp; Services → <b>Library</b> → найти «Google Sheets API» и «Google Drive API» → Enable на обоих</li>
            <li>APIs &amp; Services → <b>OAuth consent screen</b> → External → Save (заполни Application name любое, скоупы можно пропустить)</li>
            <li>APIs &amp; Services → <b>Credentials</b> → Create Credentials → <b>OAuth Client ID</b> → Application type: <b>Desktop app</b> → Create</li>
            <li>Скопируй <b>Client ID</b> и <b>Client Secret</b> из созданного клиента → вставь в поля ниже</li>
            <li>В «OAuth consent screen» → Test users → Add user → вписать свой gmail (если стадия Testing)</li>
            <li>Жми «Войти через Google» ↓</li>
        </ol>
        <div class="field-grid" style="gap:10px; margin-top:8px;">
            <label class="field">
                <span>OAuth Client ID</span>
                <input type="text" class="num" id="sheets-oauth-client-id" data-pref="sheets.oauth.client_id"
                       placeholder="123456-abc.apps.googleusercontent.com" style="font-family:monospace;">
            </label>
            <label class="field">
                <span>OAuth Client Secret</span>
                <input type="password" class="num" id="sheets-oauth-client-secret" data-pref="sheets.oauth.client_secret"
                       placeholder="GOCSPX-..." style="font-family:monospace;">
            </label>
        </div>
        <div class="btn-row" style="margin-top:10px;">
            <button class="btn" id="sheets-oauth-login-btn" type="button">🔐 Войти через Google</button>
            <button class="btn ghost" id="sheets-oauth-logout-btn" type="button" hidden>Выйти</button>
            <span class="onb-msg" id="sheets-oauth-status-msg" role="status" style="margin-left:8px;"></span>
        </div>
    </details>

    <details class="onb-help" style="margin:8px 0;">
        <summary>⚙ Способ 2 — service-account JSON (legacy)</summary>
        <ol style="margin:8px 0; padding-left:18px; line-height:1.6; color:var(--text-lo);">
            <li><a href="https://console.cloud.google.com" target="_blank" rel="noopener">console.cloud.google.com</a> → создать проект</li>
            <li>APIs &amp; Services → Library → найти «Google Sheets API» → Enable</li>
            <li>IAM &amp; Admin → Service accounts → Create service account → дать любое имя → Done</li>
            <li>Открыть созданный service account → Keys → Add Key → Create new key → JSON → скачается файл</li>
            <li>Открыть target Google Sheet → Share → вставить email из JSON-ключа (client_email) → Editor</li>
            <li>Содержимое JSON-файла вставить ниже, ID таблицы — из её URL после <code>/d/</code></li>
        </ol>
    </details>
    <div class="field-grid" style="gap:10px;">
        <label class="field">
            <span>Spreadsheet ID</span>
            <input type="text" class="num" id="sheets-spreadsheet-id" data-pref="sheets.spreadsheet_id"
                   placeholder="1AbCdEf-...-XyZ" style="font-family:monospace;">
        </label>
        <label class="field">
            <span>Вкладка (имя листа)</span>
            <input type="text" class="num" id="sheets-sheet-name" data-pref="sheets.sheet_name"
                   placeholder="Profiles" value="Profiles">
        </label>
        <label class="field" style="grid-column:1/-1;">
            <span>Service-account JSON</span>
            <textarea id="sheets-sa-json" data-pref="sheets.service_account_json"
                      rows="6" placeholder='{"type":"service_account", "client_email":"...", "private_key":"-----BEGIN PRIVATE KEY-----..."}'
                      style="width:100%; min-height:120px; font-family:monospace; font-size:11px;
                             background:var(--bg-2); border:1px solid var(--border); border-radius:6px;
                             color:var(--text); padding:8px;"></textarea>
        </label>
    </div>
    <div class="btn-row" style="margin-top:10px;">
        <button class="btn" id="sheets-verify-btn" data-icon="check" type="button">Проверить подключение</button>
        <span class="onb-msg" id="sheets-verify-msg" role="status" style="margin-left:8px;"></span>
    </div>
</div>

<!-- 1.0.209: Channel autosetup — bulk_login создаёт канал на акках без канала
     и ставит случайную аватарку из указанной папки. Юзер 2026-05-26. -->
<div class="card">
    <h2>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;">
            <circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="10" r="3"></circle>
            <path d="M7 20.7a8 8 0 0 1 10 0"></path>
        </svg>Каналы и аватарки
    </h2>
    <p style="color:var(--text-mid); font-size:13px; margin-top:-4px;">
        После входа в Google аккаунт без канала Ember автоматически создаст канал
        (имя/handle из email), и если задана папка с изображениями — поставит случайную
        картинку как аватар.
    </p>
    <div class="field-grid" style="gap:10px;">
        <label class="field">
            <span>Авто-создание канала</span>
            <select class="select" id="channels-auto-create" data-pref="channels.auto_create">
                <option value="1">Включено</option>
                <option value="0">Отключено</option>
            </select>
        </label>
        <label class="field" style="grid-column:1/-1;">
            <span>Папка с аватарками (PNG / JPG / WEBP)</span>
            <input type="text" class="num" id="channels-avatar-folder" data-pref="channels.avatar_folder"
                   placeholder="C:\Users\you\Pictures\avatars" style="font-family:monospace;">
        </label>
    </div>
    <p style="color:var(--text-mid); font-size:12px; margin-top:8px;">
        Если папка пустая или путь не задан — аватарка просто не ставится, остальной флоу работает.
    </p>
</div>

<div class="card">
    <h2>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;">
            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
        </svg>Антидетект — быстрое открытие
    </h2>
    <p style="color:var(--text-mid); font-size:13px; margin-top:-4px;">
        Когда включено (по умолчанию), софт просит ixBrowser открыть профиль БЕЗ расширений,
        информационной страницы и бэкапа cookies — это экономит ~1–1.5 сек на каждом профиле.
        Если профили открываются и сразу закрываются (8 секунд → TargetClosedError), отключи —
        ixBrowser получит «полное» открытие как при ручном клике на профиль.
    </p>
    <div class="field-grid">
        <label class="field">
            <span>Быстрое открытие профиля (fast_open)</span>
            <select class="select" id="warmup-fast-open" data-pref="warmup.fast_open">
                <option value="1">Включено — экономит 1–1.5с/профиль</option>
                <option value="0">Отключено — полное открытие как вручную</option>
            </select>
        </label>
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.language_title') }}</h2>
    <div class="adapter-row-wrap">
        {% for l in supported_langs %}
        <label class="adapter-row">
            <input type="radio" name="lang-pick" value="{{ l }}" {% if l == lang %}checked{% endif %}>
            <b>{{ t('lang.' + l) }}</b>
        </label>
        {% endfor %}
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.mode_title') }}</h2>
    <div class="adapter-row-wrap">
        {% for m in modes %}
        <label class="adapter-row">
            <input type="radio" name="mode-pick" value="{{ m }}" {% if m == mode %}checked{% endif %}>
            <b>{{ t('mode.' + m) }}</b>
            <span class="adapter-row-hint">{{ t('mode.' + m + '_hint') }}</span>
        </label>
        {% endfor %}
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.antidetect_title') }}</h2>
    <p style="color:var(--text-lo); margin:0 0 12px;">{{ t('settings.antidetect_hint') }}</p>
    <div class="adapter-row-wrap" id="adapter-pick-wrap">
        {% for key in ADAPTER_ORDER %}
        {% set info = ANTIDETECTS[key] %}
        <label class="adapter-row" data-adapter-row="{{ key }}">
            <input type="radio" name="adapter" value="{{ key }}" {% if key == active_adapter %}checked{% endif %}>
            <b class="ad-name">{{ info.label }}</b>
            {% if info.api_tier == "free" %}<span class="pill tier-free">{{ t('common.tier_free') }}</span>
            {% elif info.api_tier == "trial" %}<span class="pill tier-trial">{{ t('common.tier_trial') }}</span>
            {% else %}<span class="pill tier-paid">{{ t('common.tier_paid') }}</span>{% endif %}
            {% if info.experimental %}
            <span class="pill tier-experimental" title="Адаптер реализован спекулятивно — официальная Local-API дока закрыта или на китайском. Может работать частично или не работать вообще. Если ты на этом антидетекте сидишь и нашёл проблему — сообщи, доведём до ума.">EXPERIMENTAL</span>
            {% endif %}
            {% if info.needs_token %}
            <span class="pill pill-icon" title="{{ t('common.needs_token') }}" aria-label="{{ t('common.needs_token') }}">
                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="8" cy="14" r="4"/><path d="M11 11l9-9"/><path d="M16 6l3 3"/><path d="M14 8l3 3"/>
                </svg>
            </span>
            {% endif %}
        </label>
        {% endfor %}
    </div>

    <div class="card" id="adapter-token-card" style="margin-top:14px; display:none;">
        <h2 id="adapter-token-title">{{ t('settings.adapter_token_label') }} —</h2>
        <p class="card-hint" id="adapter-token-hint">
            {{ t('settings.adapter_token_hint') }}
        </p>
        <div class="grid-2">
            <label class="field">
                <span>API token</span>
                <input class="input" type="password" id="adapter-token-input" placeholder="—" autocomplete="off">
            </label>
            <label class="field">
                <span>Local API URL</span>
                <input class="input" type="text" id="adapter-baseurl-input" placeholder="http://localhost:..." autocomplete="off">
            </label>
        </div>
        <div class="btn-row" style="margin-top:14px;">
            <button class="btn" data-icon="save" data-save-adapter>{{ t('common.save') }}</button>
            <button class="btn ghost" data-icon="spark" data-test-adapter>{{ t('common.check') }}</button>
            <span class="onb-msg" id="adapter-msg" role="status" style="margin-left:8px;"></span>
        </div>
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.tg_title') }}</h2>
    <p style="color:var(--text-lo); margin:0 0 12px;">{{ t('settings.tg_hint') }}</p>
    <div class="grid-2">
        <label class="field">
            <span>{{ t('settings.tg_token') }}</span>
            <input class="input" type="password" id="tg-bot-token" placeholder="123456:AA...XX" autocomplete="off">
        </label>
        <label class="field">
            <span>{{ t('settings.tg_chat') }}</span>
            <input class="input" type="text" id="tg-chat-id" placeholder="-1001234567890" autocomplete="off">
        </label>
    </div>
    <div class="btn-row" style="margin-top:14px;">
        <button class="btn" data-icon="save" data-save-tg>{{ t('common.save') }}</button>
        <span class="onb-msg" id="tg-msg" role="status" style="margin-left:8px;"></span>
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.youtube_api_title') }}</h2>
    <p class="card-hint">{{ t('settings.youtube_api_hint') }} {{ t('settings.youtube_api_multi_hint') }}</p>

    <details class="yt-keys-howto" style="margin: 8px 0 14px 0; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-sm);">
        <summary style="cursor: pointer; color: var(--text-hi); font-weight: 600; font-size: 12.5px;">
            ❓ Как получить ключ — 5 минут, бесплатно
        </summary>
        <div style="margin-top: 10px; font-size: 12.5px; color: var(--text); line-height: 1.55;">
            <p style="margin: 0 0 8px 0; color: var(--text-mute);">
                Софт <b>не может создать ключ автоматически</b> — это требует входа в твой Google аккаунт. Делается один раз руками:
            </p>
            <ol style="margin: 0; padding-left: 22px;">
                <li style="margin-bottom: 4px;">Заходи на <code>console.cloud.google.com</code> с любого Google-аккаунта (хоть основной, хоть отдельный для работы).</li>
                <li style="margin-bottom: 4px;">Сверху клик на список проектов → <b>«Создать проект»</b> → имя любое (например <code>ember</code>) → Создать.</li>
                <li style="margin-bottom: 4px;">Слева <b>«APIs & Services»</b> → <b>«Library»</b> → в поиске введи <code>YouTube Data API v3</code> → клик на результат → кнопка <b>Enable</b>.</li>
                <li style="margin-bottom: 4px;">Слева <b>«Credentials»</b> → сверху <b>«+ Create credentials»</b> → <b>«API key»</b>. Появится строка <code>AIzaSy...</code> — это и есть ключ.</li>
                <li style="margin-bottom: 4px;">Скопируй ключ → нажми ниже <b>«+ Добавить ключ»</b> → вставь.</li>
            </ol>
            <p style="margin: 10px 0 0 0; color: var(--text-mute); font-size: 11.5px;">
                Каждый ключ даёт <b>10 000 единиц / сутки</b> бесплатно (1 запрос на канал ≈ 1 ед, на видео ≈ 1-3 ед). На 264 профиля × ~5 каналов = ~1300 ед/день — спокойно влезает в один ключ. Если твой объём больше — добавь второй ключ из этого же или другого Google-аккаунта, Ember ротирует автоматически когда квота первого иссякнет.
            </p>
            <p style="margin: 8px 0 0 0; color: var(--text-mute); font-size: 11.5px;">
                <b>Кредитка не нужна.</b> Free tier не требует billing-аккаунта. Превысишь квоту — просто запросы начнут возвращать 403 до полуночи UTC, никаких списаний.
            </p>
        </div>
    </details>

    <div class="yt-keys" id="yt-keys">
        <p class="yt-keys-empty">{{ t('settings.youtube_api_empty') }}</p>
    </div>

    <div class="yt-keys-add" id="yt-keys-add" style="display:none;">
        <label class="field" style="flex: 0 0 140px;">
            <span>{{ t('settings.youtube_api_label') }}</span>
            <input class="input" type="text" id="yt-new-label" placeholder="main / backup / project-2">
        </label>
        <label class="field" style="flex: 1;">
            <span>API key</span>
            <input class="input" type="password" id="yt-new-key" placeholder="AIzaSy..." autocomplete="off">
        </label>
        <button class="btn btn-sm" data-icon="plus" data-yt-add-confirm>{{ t('common.add') }}</button>
        <button class="btn ghost btn-sm" data-icon="xmark" data-yt-add-cancel>{{ t('common.cancel') }}</button>
    </div>

    <div class="yt-keys-foot">
        <button class="btn ghost btn-sm" data-yt-add-show>+ {{ t('settings.youtube_api_add') }}</button>
        <span class="onb-msg" id="yt-msg" role="status"></span>
    </div>
</div>

{% if mode == "advanced" %}
<div class="card">
    <h2>{{ t('settings.tfa_title') }}</h2>
    <p class="card-hint">{{ t('settings.tfa_hint') }}</p>
    <div class="grid-2">
        <label class="field">
            <span>{{ t('settings.tfa_mode_label') }}</span>
            <select class="select" id="tfa-mode">
                <option value="manual">{{ t('settings.tfa_mode_manual') }}</option>
                <option value="totp">{{ t('settings.tfa_mode_totp') }}</option>
                <option value="sms">{{ t('settings.tfa_mode_sms') }}</option>
            </select>
        </label>
        <label class="field">
            <span>{{ t('settings.tfa_sms_provider') }}</span>
            <select class="select" id="tfa-sms-provider">
                <option value="sms-activate">SMS-Activate</option>
                <option value="5sim">5sim</option>
                <option value="smshub">SMSHub</option>
                <option value="grizzlysms">GrizzlySMS</option>
            </select>
        </label>
        <label class="field">
            <span>{{ t('settings.tfa_sms_key') }}</span>
            <input class="input" type="password" id="tfa-sms-key" placeholder="API key" autocomplete="off">
        </label>
        <label class="field">
            <span>{{ t('settings.tfa_sms_country') }}</span>
            <input class="input" type="text" id="tfa-sms-country" placeholder="0 (Россия), 1 (Украина), 7 (Казахстан)" autocomplete="off">
        </label>
    </div>
    <p class="tfa-totp-block">
        <span class="card-hint" style="display:block; margin-bottom:6px;">{{ t('settings.tfa_totp_hint') }}</span>
        <textarea class="queue-input" id="tfa-totp-secrets" placeholder="profile_id:JBSWY3DPEHPK3PXP&#10;another_profile_id:KRSXG5BAONUW63DF" style="min-height:80px;"></textarea>
    </p>
    <div class="btn-row" style="margin-top:14px;">
        <button class="btn" data-icon="save" data-save-tfa>{{ t('common.save') }}</button>
        <span class="onb-msg" id="tfa-msg" role="status" style="margin-left:8px;"></span>
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.captcha_title') }}</h2>
    <p style="color:var(--text-lo); margin:0 0 12px;">{{ t('settings.captcha_hint') }}</p>
    <div class="grid-2">
        <label class="field">
            <span>Provider</span>
            <select class="select" id="cap-provider">
                <option value="capmonster">CapMonster Cloud</option>
                <option value="capsolver">CapSolver</option>
            </select>
        </label>
        <label class="field">
            <span>API key</span>
            <input class="input" type="password" id="cap-api-key" placeholder="{{ t('settings.captcha_placeholder') }}" autocomplete="off">
        </label>
    </div>
    <div class="btn-row" style="margin-top:14px;">
        <button class="btn" data-icon="save" data-save-cap>{{ t('common.save') }}</button>
        <span class="onb-msg" id="cap-msg" role="status" style="margin-left:8px;"></span>
    </div>
</div>

<div class="card">
    <h2>{{ t('settings.server_title') }}</h2>
    <p style="color:var(--text-lo); margin:0 0 12px;">{{ t('settings.server_hint', platform=APP_PLATFORM) }}</p>
    <div class="btn-row">
        <span class="pill">{{ SERVER_BASE_URL }}</span>
        <button class="btn ghost" data-check-server>{{ t('settings.check_connection') }}</button>
        <span class="onb-msg" id="server-msg" role="status"></span>
    </div>
</div>
{% endif %}

{% endblock %}
{% block scripts %}
<script>
(function(){
    // 1.0.179: Google Sheets — verify button. data-pref auto-persists
    // the three fields; this only handles the «Проверить подключение»
    // round-trip + status message.
    const btn = document.getElementById('sheets-verify-btn');
    const msg = document.getElementById('sheets-verify-msg');
    if (!btn || !msg) return;
    btn.addEventListener('click', () => {
        btn.disabled = true;
        msg.textContent = 'Проверка…';
        msg.style.color = 'var(--text-lo)';
        // 1.0.197: шлём live-значения из формы, не полагаемся на settings_repo —
        // auto-save после paste/input может ещё не успеть дойти до БД к моменту
        // клика, и сервер видел пустые поля → «Заполните...».
        const live = {
            service_account_json: (document.getElementById('sheets-sa-json') || {}).value || '',
            spreadsheet_id: (document.getElementById('sheets-spreadsheet-id') || {}).value || '',
            sheet_name: (document.getElementById('sheets-sheet-name') || {}).value || '',
        };
        fetch('/api/sheets/verify', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(live),
        })
            .then(r => r.json()).then(d => {
                if (d.ok) {
                    msg.textContent = '✓ ' + (d.message || 'OK');
                    msg.style.color = 'var(--success)';
                } else {
                    msg.textContent = '✕ ' + (d.message || d.error || 'Ошибка');
                    msg.style.color = 'var(--danger)';
                }
            })
            .catch(e => {
                msg.textContent = '✕ Сеть: ' + (e.message || e);
                msg.style.color = 'var(--danger)';
            })
            .finally(() => { btn.disabled = false; });
    });
})();

// 1.0.199: OAuth Sign-in with Google flow
(function(){
    const loginBtn  = document.getElementById('sheets-oauth-login-btn');
    const logoutBtn = document.getElementById('sheets-oauth-logout-btn');
    const statusEl  = document.getElementById('sheets-oauth-status-msg');
    if (!loginBtn || !logoutBtn || !statusEl) return;

    function renderStatus(state){
        if (state.connected) {
            statusEl.textContent = '✓ Подключено как ' + (state.email || 'аккаунт');
            statusEl.style.color = 'var(--success)';
            loginBtn.hidden = true;
            logoutBtn.hidden = false;
        } else {
            statusEl.textContent = '';
            loginBtn.hidden = false;
            logoutBtn.hidden = true;
        }
    }
    function pollStatus(){
        fetch('/api/sheets/oauth/status').then(r => r.json()).then(renderStatus).catch(() => {});
    }
    pollStatus();

    loginBtn.addEventListener('click', () => {
        const cid = (document.getElementById('sheets-oauth-client-id') || {}).value || '';
        const csec = (document.getElementById('sheets-oauth-client-secret') || {}).value || '';
        const missing = [];
        if (!cid.trim()) missing.push('Client ID');
        if (!csec.trim()) missing.push('Client Secret');
        if (missing.length) {
            statusEl.textContent = '✕ Не заполнено: ' + missing.join(', ');
            statusEl.style.color = 'var(--danger)';
            return;
        }
        loginBtn.disabled = true;
        statusEl.textContent = 'Открываю Google в браузере…';
        statusEl.style.color = 'var(--text-lo)';
        // 1.0.200: live secret тоже шлём — callback использует именно его,
        // не settings_repo (auto-save мог не успеть на 1й попытке).
        fetch('/api/sheets/oauth/start', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({client_id: cid.trim(), client_secret: csec.trim()}),
        })
            .then(r => r.json()).then(d => {
                if (!d.ok) {
                    statusEl.textContent = '✕ ' + (d.error || 'не вышло');
                    statusEl.style.color = 'var(--danger)';
                    return;
                }
                statusEl.textContent = 'Браузер открыт. После «Allow» в Google вернись сюда — статус обновится.';
                statusEl.style.color = 'var(--text-lo)';
                // Poll status until refresh_token shows up (max 5 minutes)
                let tries = 0;
                const t = setInterval(() => {
                    tries++;
                    fetch('/api/sheets/oauth/status').then(r => r.json()).then(s => {
                        if (s.connected) {
                            clearInterval(t);
                            renderStatus(s);
                        } else if (tries > 60) {  // 60 × 5s = 5 минут
                            clearInterval(t);
                            statusEl.textContent = '✕ Не дождался ответа Google (5 мин). Попробуй ещё раз.';
                            statusEl.style.color = 'var(--danger)';
                        }
                    });
                }, 5000);
            })
            .catch(e => {
                statusEl.textContent = '✕ Сеть: ' + (e.message || e);
                statusEl.style.color = 'var(--danger)';
            })
            .finally(() => { loginBtn.disabled = false; });
    });

    logoutBtn.addEventListener('click', () => {
        if (!confirm('Выйти из Google аккаунта? Ember отзовёт refresh_token и больше не сможет писать в Sheets пока не залогинишься снова.')) return;
        logoutBtn.disabled = true;
        fetch('/api/sheets/oauth/logout', {method: 'POST'})
            .then(r => r.json()).then(() => pollStatus())
            .finally(() => { logoutBtn.disabled = false; });
    });
})();
</script>
{% endblock %}