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

<div class="card">
    <h2>{{ t('proliv.campaigns_title') }}</h2>
    <p style="color:var(--text-lo); margin:0 0 12px;">{{ t('proliv.campaigns_hint') }}</p>
</div>

<div class="card">
    <h2>{{ t('proliv.settings_title') }}</h2>
    <div class="grid-2">
        <label class="field">
            <span>{{ t('proliv.threads') }}</span>
            <div class="slider-row">
                <input type="range" min="1" max="8" value="3" id="proliv-threads" data-pref="proliv.threads">
                <span class="pill" id="proliv-threads-val">3</span>
            </div>
        </label>

        <label class="field">
            <span>
                {{ t('proliv.visibility') }}
                <span class="field-info" title="{{ t('proliv.visibility_help') }}">?</span>
            </span>
            <select class="select" id="proliv-visibility">
                <option value="public" title="{{ t('proliv.vis_public_help') }}">{{ t('proliv.vis_public') }}</option>
                <option value="unlisted" title="{{ t('proliv.vis_unlisted_help') }}">{{ t('proliv.vis_unlisted') }}</option>
                <option value="private" title="{{ t('proliv.vis_private_help') }}">{{ t('proliv.vis_private') }}</option>
            </select>
            <span class="field-hint">{{ t('proliv.visibility_short_help') }}</span>
        </label>

        <label class="field check-field">
            <input type="checkbox" id="proliv-tg">
            <span>{{ t('proliv.tg_notify') }}</span>
        </label>

        <label class="field check-field" title="Удалять видео из папки после успешной публикации. По одному видео на один акк — папка постепенно пустеет.">
            <input type="checkbox" id="proliv-delete-after" data-pref="proliv.delete_after_upload" checked>
            <span>Удалять видео после публикации</span>
        </label>

        <label class="field check-field" id="proliv-show-browser-field"
               title="ВКЛ (по умолчанию): залив открывает окно антидетект-профиля видимо — как прогрев, видно весь процесс. Отдельно от настройки прогрева: прогрев можно гнать в фоне ради RAM, а залив смотреть глазами. Сними галку → залив уйдёт в фон (наследует настройку прогрева). Только для classic-режима (Direct идёт без браузера вообще).">
            <input type="checkbox" id="proliv-show-browser" data-pref="proliv.show_browser" data-default="1" checked>
            <span>🖥 Показать браузер при заливе (видимое окно)</span>
        </label>

        <label class="field check-field" id="proliv-direct-mode-field"
               title="Загрузка через прямой Studio API без открытия профиля в антидетекте — 5-15с/видео вместо 60-180с, нет CDP-fingerprint'а. Требует свежей Studio-сессии (собирается автоматически при bulk_login). Профили БЕЗ сессии откатятся на классический Playwright-flow.">
            <input type="checkbox" id="proliv-direct-mode" data-pref="proliv.direct_mode">
            <span>⚡ Режим Direct <span id="proliv-direct-badge" style="font-size:11px;color:var(--text-lo);margin-left:6px"></span></span>
        </label>

        <div id="proliv-direct-subsettings" style="display:none; margin-left:8px; padding-left:14px; border-left:2px solid var(--border, rgba(255,255,255,0.1));">
            <label class="field"
                   title="Direct upload не открывает Chromium, можем гнать больше параллельных потоков чем classic. Лимит 10 — выше Google нагревается. Применяется ТОЛЬКО когда Direct включён.">
                <span>Параллель direct upload'ов</span>
                <div class="slider-row">
                    <input type="range" min="1" max="10" step="1" value="3" id="proliv-direct-threads" data-pref="proliv.direct_threads">
                    <span class="pill" id="proliv-direct-threads-val">3</span>
                </div>
            </label>
            <label class="field"
                   title="Какой клиент мимикрировать в headers + context. web — то что собрали при login (default). ios/android — Studio mobile-приложение, иногда обходит флаги когда WEB начал палиться. Auth-cookies те же, меняются только User-Agent + X-YouTube-Client-Name/Version + context.client.">
                <span>Client fingerprint</span>
                <select class="select" id="proliv-direct-client" data-pref="proliv.direct_client" style="max-width:200px">
                    <option value="web" selected>WEB_CREATOR (default)</option>
                    <option value="ios">IOS_CREATOR (Studio iOS app)</option>
                    <option value="android">ANDROID_CREATOR (Studio Android app)</option>
                </select>
            </label>
        </div>

        <label class="field"
               title="Перед заходом в Studio worker открывает YouTube и скроллит фид N секунд. Google анти-спам флагает паттерн «вошёл → сразу залил видео». Реальные креаторы обычно сначала смотрят что в feed'е. 0 = выкл. Только для classic Playwright-режима — у Direct prewarm не требуется (нет browser tab'а вообще).">
            <span>🔥 Прогрев feed перед заливом</span>
            <div class="slider-row">
                <input type="range" min="0" max="90" step="5" value="0" id="proliv-prewarm-sec" data-pref="proliv.prewarm_seconds">
                <span class="pill" id="proliv-prewarm-sec-val">0 сек</span>
            </div>
        </label>
    </div>
</div>

<div class="card" id="proliv-uniq-card">
    <h2>🎲 Уникализация видео <span style="font-size:12px; color:var(--text-lo); font-weight:normal">(ffmpeg, опционально)</span></h2>
    <p class="card-hint">
        Площадки (TikTok/YouTube) ищут копии <b>перцептивным хешем</b>: кадр ужимается до сетки ~32×32,
        цвет выбрасывается, остаётся грубое распределение света. Поэтому мелочи —
        <i>сдвиг на пиксели, поворот на пару градусов, смена цвета, шум по краям</i> — хеш просто не видит
        (они живут в том, что он отбрасывает). Отпечаток реально меняют <b>две вещи: композиция целиком
        и временна́я структура</b>. Ниже инструменты разбиты именно по этому принципу.
        <b>По дефолту выключено.</b> Время: 20-90с на видео.
    </p>
    <label class="field check-field" title="Включает обработку перед заливом. Когда выключено — видео идёт в YouTube как есть.">
        <input type="checkbox" id="proliv-uniq-enabled" data-pref="proliv.uniq_enabled">
        <span><b>Включить уникализацию</b></span>
    </label>
    <div id="proliv-uniq-subsettings" style="display:none; margin-left:8px; padding-left:14px; border-left:2px solid var(--border, rgba(255,255,255,0.1)); margin-top:8px;">
        <div style="font-size:12px; font-weight:700; color:var(--accent-hi); margin:2px 0 6px; letter-spacing:.03em;">🎯 СИЛЬНЫЕ против перцептивного хеша — меняют композицию / тайминг</div>
        <label class="field check-field" title="Видео уменьшается и кладётся по центру на размытую копию-фон. Сильнее всего меняет МАКРО-распределение света — ровно то, что pHash кодирует. Самый эффективный приём.">
            <input type="checkbox" id="proliv-uniq-blur-border" data-pref="proliv.uniq_blur_border">
            <span>🖼 Рекадрирование — рамка-фон <b style="color:var(--accent-hi)">★ самое сильное</b></span>
        </label>
        <label class="field check-field" title="Реврейм-зум 8-16% с обрезкой. Меняет КАДРИРОВАНИЕ — что попадает в сетку 32×32 хеша. Не косметические 1-2 клетки, а реальный сдвиг композиции.">
            <input type="checkbox" id="proliv-uniq-zoom" data-pref="proliv.uniq_zoom">
            <span>🔍 Реврейм-зум 8-16%</span>
        </label>
        <label class="field check-field" title="Затемнение краёв кадра. Меняет макро-распределение яркости (на что хеш и смотрит), визуально почти незаметно.">
            <input type="checkbox" id="proliv-uniq-vignette" data-pref="proliv.uniq_vignette">
            <span>🌑 Виньетка — затемнение краёв</span>
        </label>
        <label class="field check-field" title="Переворот по горизонтали (hflip). Зеркалит лево/право всей композиции → большое расстояние Хэмминга в хеше. На глаз почти незаметно, если нет текста/логотипов.">
            <input type="checkbox" id="proliv-uniq-mirror" data-pref="proliv.uniq_mirror">
            <span>🔄 Зеркало — переворот по горизонтали</span>
        </label>
        <label class="field check-field" title="Обрезает 0.4-1.0с начала. Сдвигает ВРЕМЕННУ́Ю структуру (порядок/тайминг кадров) — вторую вещь, на которую хеш смотрит. ⚠ режет первые мгновения (хук).">
            <input type="checkbox" id="proliv-uniq-trim-start" data-pref="proliv.uniq_trim_start">
            <span>✂️ Обрезка начала (временна́я структура)</span>
        </label>
        <label class="field check-field" title="Темп видео+звука ±6%. Меняет тайминг кадров — временна́я структура. Средне по силе.">
            <input type="checkbox" id="proliv-uniq-speed" data-pref="proliv.uniq_speed">
            <span>⏩ Скорость ±6% (видео + звук)</span>
        </label>
        <label class="field check-field" title="Убирает ЗЕЛЁНЫЙ фон и заменяет на твой — полная смена композиции. Нужно: (1) исходник на зелёном фоне; (2) файл фона ниже.">
            <input type="checkbox" id="proliv-uniq-chromakey" data-pref="proliv.uniq_chromakey">
            <span>🟩 Хромакей — зелёный фон → замена</span>
        </label>
        <div class="field" style="margin-left:8px;">
            <div class="btn-row">
                <button class="btn ghost" id="proliv-uniq-bg-pick" type="button">📂 Выбрать фон для хромакея</button>
                <span class="pill" id="proliv-uniq-bg-name">фон не выбран</span>
            </div>
            <span class="card-hint" style="font-weight:normal; margin-top:4px;">Видео или картинка (mp4/jpg/png). Зелёный фон в исходнике заменится на это.</span>
        </div>

        <div style="font-size:12px; font-weight:700; color:var(--text-lo); margin:14px 0 6px; letter-spacing:.03em;">🎨 КОСМЕТИКА — слабо против pHash, но не лишнее для прочих систем</div>
        <label class="field check-field" title="Crop 1-3px, поворот 0.1-0.4°, ±яркость/контраст/насыщенность, hue, шум. pHash это ОТБРАСЫВАЕТ (мелочи в высоких частотах + цвет), но меняет байтовый хеш и мешает простым детекторам. На глаз невидимо.">
            <input type="checkbox" id="proliv-uniq-visual" data-pref="proliv.uniq_visual" checked>
            <span>Визуал (crop + поворот + цвет + шум) <span style="color:var(--text-lo)">— слабо vs pHash</span></span>
        </label>
        <label class="field check-field" title="asetrate ±0.2-0.5%, volume ±1-1.5dB, highpass 35Hz, EQ. Меняет AUDIO fingerprint — это ОТДЕЛЬНАЯ система от видео-pHash, звук матчат сами по себе. Полезно держать включённым.">
            <input type="checkbox" id="proliv-uniq-audio" data-pref="proliv.uniq_audio" checked>
            <span>Звук (asetrate + volume + EQ) <span style="color:var(--text-lo)">— отдельная система</span></span>
        </label>
        <label class="field check-field" title="Случайные encoder/make/model/creation_time под TikTok/CapCut/iPhone. Контейнерные метаданные — не pHash, но «platform-origin» классификатор видит обычный UGC.">
            <input type="checkbox" id="proliv-uniq-metadata" data-pref="proliv.uniq_metadata" checked>
            <span>Metadata (encoder/make/model/время)</span>
        </label>
        <label class="field"
               title="Ширина random-диапазонов. Low — еле заметные изменения, быстрее. High — больше изменений, дольше, риск что глаз заметит блик/искажение.">
            <span>Intensity</span>
            <select class="select" id="proliv-uniq-intensity" data-pref="proliv.uniq_intensity" style="max-width:160px">
                <option value="low">low (×0.5)</option>
                <option value="medium" selected>medium (×1.0)</option>
                <option value="high">high (×1.6)</option>
            </select>
        </label>
    </div>
</div>

<script>
(function(){
    var pick = document.getElementById('proliv-uniq-bg-pick');
    var nameEl = document.getElementById('proliv-uniq-bg-name');
    function basename(p){ return (p||'').replace(/\\/g,'/').split('/').pop() || p; }
    if (nameEl) {
        fetch('/api/settings').then(function(r){return r.json();}).then(function(d){
            var bg = d && d.settings && d.settings['proliv.uniq_chromakey_bg'];
            if (bg) nameEl.textContent = basename(bg);
        }).catch(function(){});
    }
    if (pick) pick.addEventListener('click', function(){
        fetch('/api/proliv/pick-chromakey-bg', {method:'POST'}).then(function(r){return r.json();}).then(function(d){
            if (d && d.ok && d.path && nameEl) nameEl.textContent = basename(d.path);
        }).catch(function(){});
    });
})();
</script>

<div class="card">
    <h2>{{ t('proliv.queue_videos') }} / {{ t('proliv.queue_titles') }} / {{ t('proliv.queue_tags') }} / {{ t('proliv.queue_descriptions') }}</h2>
    <div class="queue-grid">

        <div class="queue">
            <div class="queue-head">
                <b>{{ t('proliv.queue_videos') }}</b>
                <span class="pill" id="q-videos-count">{{ t('profiles.queue_remaining', n=0) }}</span>
            </div>
            <div class="dropzone">
                <div class="hint-inline">📁 Видео для залива · MP4 9:16, ≤60s</div>
                <div id="q-videos-list" class="hint-inline" style="margin-top:8px; max-height:120px; overflow:auto; color:var(--text-lo); font-size:12px;"></div>
            </div>
            <div class="btn-row" style="margin-top:10px;">
                <button class="btn" id="q-videos-pick-files" type="button">Выбрать файлы</button>
                <button class="btn ghost" id="q-videos-pick-folder" type="button">{{ t('proliv.video_folder') }}</button>
                <button class="btn ghost" id="q-videos-clear" type="button">Очистить</button>
            </div>
        </div>

        <div class="queue">
            <div class="queue-head">
                <b>{{ t('proliv.queue_titles') }}</b>
                <span class="pill" id="q-titles-count">{{ t('profiles.queue_remaining', n=0) }}</span>
            </div>
            <textarea class="queue-input" id="q-titles" placeholder="One title per line — random pick per upload"></textarea>
            <div class="queue-actions">
                <button class="btn ghost btn-sm" data-queue-import="q-titles">{{ t('common.import_file') }}</button>
                <button class="btn ghost btn-sm" data-queue-paste="q-titles">{{ t('common.paste_text') }}</button>
            </div>
        </div>

        <div class="queue">
            <div class="queue-head">
                <b>{{ t('proliv.queue_tags') }}</b>
                <span class="pill" id="q-tags-count">{{ t('profiles.queue_remaining', n=0) }}</span>
            </div>
            <textarea class="queue-input" id="q-tags" placeholder="#shorts, viral, fyp, niche-tag"></textarea>
            <div class="queue-actions">
                <button class="btn ghost btn-sm" data-queue-import="q-tags">{{ t('common.import_file') }}</button>
                <button class="btn ghost btn-sm" data-queue-paste="q-tags">{{ t('common.paste_text') }}</button>
            </div>
        </div>

        <div class="queue">
            <div class="queue-head">
                <b>{{ t('proliv.queue_descriptions') }}</b>
                <span class="pill" id="q-prdesc-count">{{ t('profiles.queue_remaining', n=0) }}</span>
            </div>
            <textarea class="queue-input" id="q-prdesc" placeholder="Block-separated descriptions — blank line between."></textarea>
            <div class="queue-actions">
                <button class="btn ghost btn-sm" data-queue-import="q-prdesc">{{ t('common.import_file') }}</button>
                <button class="btn ghost btn-sm" data-queue-paste="q-prdesc">{{ t('common.paste_text') }}</button>
            </div>
        </div>

    </div>
</div>

<div class="card">
    <h2>{{ t('proliv.active_title') }}</h2>
    <!-- 1.0.167: previously the <pre> had no id and JS never wrote into it.
         Operator: «в активных кампаниях ничего не пишется». Added id +
         attached runner-events stream via window.EmberRunnerLog. -->
    <pre class="log-stream" id="proliv-log">{{ t('proliv.active_empty') }}</pre>
</div>

<div class="card">
    <h2>{{ t('warmup.profiles') }}</h2>
    <div class="toolbar">
        <input type="text" class="input" placeholder="{{ t('warmup.filter_group') }}" id="proliv-profile-filter">
        <select class="select" id="proliv-status-filter" title="{{ t('warmup.filter.status_title') }}">
            <option value="">{{ t('warmup.filter.all_statuses') }}</option>
            <option value="none">{{ t('warmup.filter.none') }}</option>
            <option value="warmed">{{ t('warmup.filter.warmed') }}</option>
            <option value="error_any">{{ t('warmup.filter.error_any') }}</option>
        </select>
        <button class="btn ghost" data-icon="refresh" data-refresh-profiles>{{ t('common.refresh') }}</button>
        <button class="btn ghost" data-icon="check" data-select-all>{{ t('common.select_all') }}</button>
        <span class="pill count" id="proliv-counter"
              data-counter-empty="{{ t('warmup.counter_selected', n=0) }}"
              data-counter-template="{{ t('warmup.counter_selected_total', n='__N__', total='__T__') }}">{{ t('warmup.counter_selected', n=0) }}</span>
        <button class="btn" id="proliv-start" data-icon="play">{{ t('common.start') }}</button>
        <button class="btn ghost" id="proliv-stop" data-icon="x" type="button">{{ t('warmup.stop') }}</button>
    </div>
    <div class="profile-grid empty" id="proliv-profile-grid" data-adapter="{{ active_adapter }}">
        <div class="empty-state es-loading">
            <div class="es-icon"><svg viewBox="0 0 24 24" class="es-spin"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.4" stroke-dasharray="42 14" stroke-linecap="round"/></svg></div>
            <div class="es-title">{{ t('warmup.loading_profiles', adapter=ANTIDETECTS[active_adapter].label) }}</div>
        </div>
    </div>
</div>

{% endblock %}
{% block scripts %}
<script>
(function(){
    const bind = (range, out) => {
        const r = document.getElementById(range), o = document.getElementById(out);
        if (!r || !o) return;
        const upd = () => o.textContent = r.value;
        r.addEventListener('input', upd); upd();
    };
    bind('proliv-threads', 'proliv-threads-val');

    // 1.0.239: prewarm slider — show «N сек» / «выкл» suffix
    (function(){
        const r = document.getElementById('proliv-prewarm-sec');
        const o = document.getElementById('proliv-prewarm-sec-val');
        if (!r || !o) return;
        const upd = () => { o.textContent = (parseInt(r.value, 10) || 0) === 0 ? 'выкл' : (r.value + ' сек'); };
        r.addEventListener('input', upd); upd();
    })();

    // 1.0.240: uniqueizer master toggle — показывает/прячет sub-settings
    (function(){
        const cb = document.getElementById('proliv-uniq-enabled');
        const sub = document.getElementById('proliv-uniq-subsettings');
        if (!cb || !sub) return;
        const upd = () => { sub.style.display = cb.checked ? '' : 'none'; };
        cb.addEventListener('change', upd); upd();
    })();

    // 1.0.241: direct-mode toggle раскрывает 2 sub-settings (threads + client)
    (function(){
        const cb = document.getElementById('proliv-direct-mode');
        const sub = document.getElementById('proliv-direct-subsettings');
        if (!cb || !sub) return;
        const upd = () => { sub.style.display = cb.checked ? '' : 'none'; };
        cb.addEventListener('change', upd); upd();
    })();
    bind('proliv-direct-threads', 'proliv-direct-threads-val');

    // 1.0.238: Direct-mode badge — показывает сколько профилей готовы к
    // direct upload (есть свежий Studio session). Освежается при загрузке
    // страницы и при тычке в чекбокс.
    const _directBadge = document.getElementById('proliv-direct-badge');
    const _directCb = document.getElementById('proliv-direct-mode');
    function _refreshDirectBadge() {
        if (!_directBadge) return;
        fetch('/api/accounts/studio_session_status').then(r => r.json()).then(s => {
            if (s && s.ok) {
                _directBadge.textContent = `(${s.fresh} сессий готово, ${s.stale} stale, ${s.never_harvested} ещё не собрано)`;
            }
        }).catch(() => {});
    }
    _refreshDirectBadge();
    if (_directCb) {
        _directCb.addEventListener('change', _refreshDirectBadge);
    }

    // 1.0.223: persist proliv.threads. До этого слайдер был чисто декоративный:
    // юзер ставил 8, но settings_repo.proliv.threads оставалось пустым → runner
    // в _enqueue_proliv читал proliv.threads → fallback 3 → пул всегда 3 воркера.
    // Operator 27 мая: «клиент ставил 8, работало все равно 3».
    const _threadsSlider = document.getElementById('proliv-threads');
    if (_threadsSlider) {
        // Restore from settings.
        fetch('/api/settings').then(r => r.json()).then(d => {
            const v = (d && d.settings && d.settings['proliv.threads']);
            if (v && !isNaN(parseInt(v, 10))) {
                _threadsSlider.value = String(parseInt(v, 10));
                _threadsSlider.dispatchEvent(new Event('input'));
            }
        }).catch(() => {});
        // Save with debounce. 1.0.224 fired `/api/settings` POST на КАЖДЫЙ
        // input event — драг слайдера = ~30 POST/сек, Werkzeug single-thread
        // забивался → весь UI замирал. Юзер 27 мая: «лагает прям пиздец».
        // 250мс — финальная позиция сохраняется через четверть секунды
        // после того как юзер перестал двигать, промежуточные значения
        // не пишутся.
        let _threadsSaveTimer = null;
        _threadsSlider.addEventListener('input', () => {
            if (_threadsSaveTimer) clearTimeout(_threadsSaveTimer);
            _threadsSaveTimer = setTimeout(() => {
                _threadsSaveTimer = null;
                fetch('/api/settings', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({'proliv.threads': String(_threadsSlider.value)}),
                }).catch(() => {});
            }, 250);
        });
    }

    const bindCount = (input, label, isFile=false) => {
        const i = document.getElementById(input), l = document.getElementById(label);
        if (!i || !l) return;
        const upd = () => {
            const n = isFile ? (i.files ? i.files.length : 0)
                             : i.value.split(/\n+/).filter(s => s.trim()).length;
            l.textContent = "{{ t('profiles.queue_remaining', n='__N__') }}".replace('__N__', n);
        };
        i.addEventListener(isFile ? 'change' : 'input', upd); upd();
    };
    bindCount('q-titles',  'q-titles-count');
    bindCount('q-tags',    'q-tags-count');
    bindCount('q-prdesc',  'q-prdesc-count');

    // 1.0.170: persist «Удалять видео после публикации» across reloads.
    // Default ON (Reyo-style folder drain) — only flip to OFF when the
    // operator explicitly saved «0». Uses the same /api/settings batch
    // endpoint as warmup controls (GET returns {settings: {...}}, POST
    // accepts {key: value} pairs directly in the body, not wrapped).
    const delChk = document.getElementById('proliv-delete-after');
    if (delChk) {
        fetch('/api/settings').then(r => r.json()).then(d => {
            const v = (d && d.settings && d.settings['proliv.delete_after_upload']);
            // Missing key → keep the HTML `checked` default ON. Only
            // un-check when operator explicitly stored an off-flavor.
            if (v === '0' || v === 'false' || v === 'off') delChk.checked = false;
        }).catch(() => {});
        delChk.addEventListener('change', () => {
            fetch('/api/settings', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({'proliv.delete_after_upload': delChk.checked ? '1' : '0'}),
            });
        });
    }

    // 1.0.247: persist the titles textarea across reloads. Оператор один раз
    // вставляет ~30 названий — они переживают перезапуск и берутся рандомно
    // (с повторами) под любое число видео. Тот же /api/settings что у галок.
    const titlesArea = document.getElementById('q-titles');
    if (titlesArea) {
        fetch('/api/settings').then(r => r.json()).then(d => {
            const saved = d && d.settings && d.settings['proliv.titles_saved'];
            if (saved && !titlesArea.value.trim()) {
                titlesArea.value = saved;
                titlesArea.dispatchEvent(new Event('input'));  // refresh count pill
            }
        }).catch(() => {});
        let _titlesSaveT;
        titlesArea.addEventListener('input', () => {
            clearTimeout(_titlesSaveT);
            _titlesSaveT = setTimeout(() => {
                fetch('/api/settings', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({'proliv.titles_saved': titlesArea.value}),
                }).catch(() => {});
            }, 400);
        });
    }

    // Video paths state — populated via native file picker so we get real
    // absolute paths (Chromium <input type="file"> hides them).
    window.__prolivVideoPaths = window.__prolivVideoPaths || [];
    function paintVideoList() {
        const list = window.__prolivVideoPaths || [];
        const count = document.getElementById('q-videos-count');
        const dom = document.getElementById('q-videos-list');
        if (count) count.textContent = "{{ t('profiles.queue_remaining', n='__N__') }}".replace('__N__', list.length);
        if (dom) {
            if (!list.length) {
                dom.textContent = '';
                return;
            }
            const esc = s => String(s).replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
            const shown = list.slice(0, 30).map(p => {
                const name = p.split(/[\\/]/).pop();
                return `• ${esc(name)}`;
            });
            const more = list.length > 30 ? `<div style="opacity:.7; margin-top:4px;">…ещё ${list.length - 30}</div>` : '';
            dom.innerHTML = shown.join('<br>') + more;
        }
    }
    paintVideoList();

    const pickFolderBtn = document.getElementById('q-videos-pick-folder');
    const pickFilesBtn = document.getElementById('q-videos-pick-files');
    const clearBtn = document.getElementById('q-videos-clear');
    function _toast(msg, tone) {
        if (window.EmberToast) window.EmberToast(msg, tone || 'info');
    }
    async function _picker(endpoint) {
        try {
            const r = await fetch(endpoint, {method: 'POST'});
            const j = await r.json();
            if (!j.ok) { _toast(j.error || 'picker failed', 'err'); return; }
            const paths = j.paths || [];
            if (!paths.length) {
                if (j.folder === null || j.folder === undefined) {
                    // user cancelled — silent
                } else {
                    _toast('В папке не нашлось видео', 'info');
                }
                return;
            }
            // Dedupe: union with existing
            const set = new Set(window.__prolivVideoPaths || []);
            paths.forEach(p => set.add(p));
            window.__prolivVideoPaths = Array.from(set);
            paintVideoList();
            _toast('Добавлено видео: ' + paths.length, 'ok');
        } catch (e) {
            _toast('Сеть: ' + (e.message || e), 'err');
        }
    }
    if (pickFolderBtn) pickFolderBtn.addEventListener('click', () => _picker('/api/proliv/pick-folder'));
    if (pickFilesBtn)  pickFilesBtn.addEventListener('click', () => _picker('/api/proliv/pick-videos'));
    if (clearBtn) clearBtn.addEventListener('click', () => {
        window.__prolivVideoPaths = [];
        paintVideoList();
    });

    // Profile grid wiring lives in app.js (shared with warmup).
    // 1.0.158: autoBind handles the 'proliv-*' DOM convention.
    if (window.EmberProfiles && window.EmberProfiles.autoBind) {
        window.EmberProfiles.autoBind('proliv');
    }

    // "Запустить" — collect form fields and POST to /api/proliv/start.
    // Video paths are persisted in window.__prolivVideoPaths via the
    // native picker (set up above) — they're ABSOLUTE paths from
    // comdlg32/SHBrowseForFolder, not Chromium <input type="file">
    // sandboxed values, so set_input_files() can actually attach them.
    const startBtn = document.getElementById('proliv-start');
    if (startBtn) {
        // 1.0.212: pre-flight check перед заливом. Раньше залив тупо брал
        // ВСЕ выбранные акки и долбился — у трети мёртвые прокси, у 2/3
        // протухшие куки, TG-канал заваливался однотипными ошибками.
        // Теперь делаем preflight → показываем расклад → даём решить.

        async function postStart(ids) {
            const videoPaths = (window.__prolivVideoPaths || []).slice();
            const splitLines = (id) => (document.getElementById(id).value || '')
                .split(/\n+/).map(s => s.trim()).filter(Boolean);
            const titlesArr = splitLines('q-titles');
            const tagsArr = splitLines('q-tags');
            const descsArr = (document.getElementById('q-prdesc').value || '')
                .split(/\n\s*\n+/).map(s => s.trim()).filter(Boolean);
            const body = {
                profile_ids: ids,
                video_paths: videoPaths,
                titles: titlesArr,
                tags: tagsArr,
                descriptions: descsArr,
                visibility: document.getElementById('proliv-visibility').value,
                threads: parseInt(document.getElementById('proliv-threads').value || '1', 10),
                tg_notify: document.getElementById('proliv-tg').checked,
            };
            // 1.0.223: log full pre-fetch state so I can see CLIENT-SIDE
            // what was sent. profiles/videos/titles counts + visibility +
            // first 80 chars of first video path (so I can verify it's an
            // absolute path, not a Chromium sandbox stub).
            const firstVideoSample = videoPaths.length ? videoPaths[0].slice(0, 80) : '<none>';
            if (window.EmberLog) {
                window.EmberLog('INFO',
                    `proliv-start postStart: ids=${ids.length} videos=${videoPaths.length} ` +
                    `titles=${titlesArr.length} tags=${tagsArr.length} descs=${descsArr.length} ` +
                    `visibility=${body.visibility} threads=${body.threads} ` +
                    `firstVideo='${firstVideoSample}'`,
                    {page: 'proliv'});
            }
            try {
                const r = await fetch('/api/proliv/start', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body),
                });
                const d = await r.json();
                // 1.0.223: log response so I see both client (request) and
                // server (validation outcome) sides in one telemetry stream.
                if (window.EmberLog) {
                    window.EmberLog(d.ok ? 'INFO' : 'WARN',
                        `proliv-start /api/proliv/start http=${r.status} ok=${d.ok} ` +
                        (d.ok ? `queued=${d.queued} videos=${d.videos} titles=${d.titles}`
                              : `err='${String(d.error || '').slice(0, 200)}'`),
                        {page: 'proliv'});
                }
                if (d.ok) {
                    if (window.EmberToast) {
                        window.EmberToast(
                            `Очередь поставлена: ${d.queued} профилей × ${d.videos} видео × ${d.titles} заголовков`,
                            'ok'
                        );
                    }
                    if (window.EmberRunnerLog) {
                        window.EmberRunnerLog.attachTo('proliv-log');
                    }
                } else if (window.EmberToast) {
                    window.EmberToast(d.error || 'Ошибка', 'err');
                }
            } catch (e) {
                if (window.EmberLog) {
                    window.EmberLog('ERROR', `proliv-start fetch threw: ${e && e.message || e}`, {page: 'proliv'});
                }
                if (window.EmberToast) window.EmberToast('Сеть: ' + (e.message || e), 'err');
            }
        }

        function showPreflightModal(counts, buckets, originalIds) {
            const escape = (s) => String(s).replace(/[&<>"']/g, c => (
                {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]
            ));
            // 1.0.219: scrub any leftover backdrop before showing a new one.
            // Operator on 1.0.218: «нажимаю запустить и ничего не работает!
            // во всех модулях» — root cause was a stuck invisible backdrop
            // from a previous half-closed modal eating every click at
            // z-index:9999.
            document.querySelectorAll('.modal-backdrop').forEach(n => {
                try { n.remove(); } catch (_) {}
            });
            const wrap = document.createElement('div');
            wrap.className = 'modal-backdrop';
            wrap.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;';
            const totalBlocked = counts.stale_cookies + counts.no_creds + counts.dead_proxy + counts.unknown;
            const proxyNote = counts.proxy_checked > 0
                ? `проверено ${counts.proxy_checked} прокси`
                : 'прокси не проверены';
            // 1.0.217: используем существующие CSS-переменные (--bg-2, --text,
            // --text-lo). Раньше указывал --bg-card / --text-mid которых в theme.css
            // нет — модалка получалась прозрачной, юзер: «сломалась кнопка залива».
            wrap.innerHTML = `
              <div class="card" style="max-width:520px;width:92%;padding:20px;background:var(--bg-2);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,0.6);">
                <h2 style="margin:0 0 12px;color:var(--text-hi);">Готовность к заливу</h2>
                <p style="color:var(--text-lo);font-size:13px;margin:0 0 14px;">
                  Из ${counts.total} выбранных профилей. ${proxyNote}.
                </p>
                <div style="display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;line-height:1.6;">
                  <span>✅ Готовы:</span>           <b style="color:#5fd66c;">${counts.ready}</b>
                  <span>⚠ Куки истекли:</span>      <b style="color:#e8b84a;">${counts.stale_cookies}</b>
                  <span>❌ Прокси не отвечает:</span> <b style="color:#e25c5c;">${counts.dead_proxy}</b>
                  <span>❌ Нет пароля:</span>        <b style="color:#e25c5c;">${counts.no_creds}</b>
                  ${counts.unknown ? `<span>❓ Нет в БД:</span> <b>${counts.unknown}</b>` : ''}
                </div>
                ${totalBlocked > 0 ? `
                  <p style="color:var(--text-lo);font-size:12px;margin:14px 0 0;">
                    Перелогинить акки с протухшими куками — страница «Аккаунты» → «Войти в Google».<br>
                    Проверить прокси — страница «Прокси» → «Чекер».
                  </p>
                ` : ''}
                <div class="btn-row" style="margin-top:18px;display:flex;justify-content:flex-end;flex-wrap:wrap;">
                  <button class="btn ghost" id="pf-cancel" type="button">Отмена</button>
                  <button class="btn ghost" id="pf-force" type="button" title="Запустить все ${counts.total} как раньше — фейлы тоже улетят">Всё равно запустить (${counts.total})</button>
                  ${counts.ready > 0
                    ? `<button class="btn" id="pf-ready" type="button">Запустить только готовые (${counts.ready})</button>`
                    : `<button class="btn" id="pf-ready" type="button" disabled style="opacity:0.5;">Готовых нет</button>`}
                </div>
              </div>`;
            document.body.appendChild(wrap);
            // 1.0.219: belt+suspenders close — try/catch the remove, and also
            // listen for Escape on the document so a stuck modal can always
            // be dismissed without a working button.
            // 1.0.224: Enter повторяет кнопку «Всё равно запустить» — юзер
            // 27 мая жал Запустить 5 раз подряд не понимая что нужно тыкать
            // отдельную кнопку в модалке. Теперь повторный Enter = «всё равно».
            const close = () => {
                try { wrap.remove(); } catch (_) {}
                document.removeEventListener('keydown', keyHandler);
            };
            const keyHandler = (e) => {
                if (e.key === 'Escape') { close(); return; }
                if (e.key === 'Enter') {
                    e.preventDefault();
                    close();
                    postStart(originalIds);
                }
            };
            document.addEventListener('keydown', keyHandler);
            wrap.querySelector('#pf-cancel').addEventListener('click', close);
            wrap.querySelector('#pf-force').addEventListener('click', () => { close(); postStart(originalIds); });
            const readyBtn = wrap.querySelector('#pf-ready');
            if (readyBtn && counts.ready > 0) {
                readyBtn.addEventListener('click', () => { close(); postStart(buckets.ready); });
            }
            wrap.addEventListener('click', (e) => { if (e.target === wrap) close(); });
            // Autofocus the «force run» button so Enter immediately triggers it
            // — saves a step for users who just want to run everything.
            try { wrap.querySelector('#pf-force').focus(); } catch (_) {}
        }

        // 1.0.224: если юзер жмёт Запустить 2-й раз в течение 3 секунд после
        // того как модалка preflight показалась и закрылась — он явно хочет
        // запустить «всё равно». Пропускаем preflight целиком на втором клике.
        // Раньше тут был замкнутый круг: модалка показывает «0 готовых»,
        // юзер бьёт Запустить ещё раз → опять модалка → frustration.
        let _lastPreflightShownTs = 0;

        startBtn.addEventListener('click', async () => {
            const ids = Array.from(document.querySelectorAll(
                '.profile-card:not(.is-filtered-out) input[data-profile-cb]:checked'
            )).map(cb => cb.value);
            const tsNow = Date.now();
            const recentlyShown = (tsNow - _lastPreflightShownTs) < 3000;
            if (window.EmberLog) {
                window.EmberLog('INFO',
                    `proliv-start CLICK ids=${ids.length} videos=${(window.__prolivVideoPaths||[]).length} ` +
                    `titles_lines=${(document.getElementById('q-titles').value||'').split(/\n+/).filter(s=>s.trim()).length} ` +
                    `threads_slider=${document.getElementById('proliv-threads').value} ` +
                    `recentlyShown=${recentlyShown}`,
                    {page: 'proliv'});
            }
            if (!ids.length) {
                if (window.EmberLog) window.EmberLog('WARN', 'proliv-start: no profiles selected → abort', {page:'proliv'});
                if (window.EmberToast) window.EmberToast('Выберите хотя бы один профиль', 'err');
                return;
            }
            // Bypass preflight on rapid re-click — user already saw the modal,
            // closed it, and is clearly asking for the «force» path.
            if (recentlyShown) {
                if (window.EmberLog) window.EmberLog('INFO', 'proliv-start: rapid re-click → bypass preflight', {page:'proliv'});
                await postStart(ids);
                return;
            }

            startBtn.disabled = true;
            const originalText = startBtn.textContent;
            startBtn.textContent = 'Проверяю готовность…';
            try {
                // 1.0.217: check_proxies=false по умолчанию (быстро, ~50мс).
                // Проверка прокси через ipify раньше тормозила на 30+с при 100
                // акках — кнопка казалась мёртвой. Куки/креды берём из БД
                // мгновенно. Глубокую проверку прокси (с пробингом) можно
                // добавить отдельной кнопкой когда руки дойдут.
                // Плюс 8-секундный AbortController на случай если эндпоинт
                // зависнет — лучше fallback на postStart чем вечная блокировка.
                const ctrl = new AbortController();
                const tout = setTimeout(() => ctrl.abort(), 8000);
                const r = await fetch('/api/proliv/preflight', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ profile_ids: ids, check_proxies: false }),
                    signal: ctrl.signal,
                });
                clearTimeout(tout);
                const d = await r.json();
                if (window.EmberLog) {
                    window.EmberLog('INFO',
                        `proliv-start /preflight http=${r.status} ok=${d.ok} ` +
                        (d.ok ? `ready=${d.counts.ready}/${d.counts.total} stale=${d.counts.stale_cookies} no_creds=${d.counts.no_creds} unknown=${d.counts.unknown}`
                              : `err='${String(d.error||'').slice(0,200)}'`),
                        {page:'proliv'});
                }
                if (!d.ok) {
                    // Preflight упал — не блокируем юзера, запускаем как раньше
                    if (window.EmberToast) window.EmberToast('Preflight: ' + (d.error || 'fail'), 'warn');
                    await postStart(ids);
                    return;
                }
                const c = d.counts;
                // Если все готовы — не показываем модалку, сразу стартуем.
                if (c.ready === c.total) {
                    if (window.EmberLog) window.EmberLog('INFO', 'proliv-start: all ready → postStart direct', {page:'proliv'});
                    await postStart(ids);
                    return;
                }
                if (window.EmberLog) window.EmberLog('INFO', `proliv-start: not all ready (ready=${c.ready}/${c.total}) → show modal`, {page:'proliv'});
                _lastPreflightShownTs = Date.now();
                showPreflightModal(c, d.buckets, ids);
            } catch (e) {
                if (window.EmberLog) window.EmberLog('WARN', `proliv-start preflight EXC: ${e && e.message || e} → fallback postStart`, {page:'proliv'});
                if (window.EmberToast) window.EmberToast('Сеть: ' + (e.message || e), 'warn');
                await postStart(ids);
            } finally {
                startBtn.disabled = false;
                startBtn.textContent = originalText;
            }
        });
    }

    // 1.0.178: Stop button — cancels in-flight uploads + clears queue.
    // Shares the runner cancel flag with Прогрев; the backend route is
    // /api/proliv/stop but mechanically it does the same thing as warmup_stop.
    const stopBtn = document.getElementById('proliv-stop');
    if (stopBtn) {
        stopBtn.addEventListener('click', () => {
            fetch('/api/proliv/stop', {method: 'POST'})
                .then(r => r.json()).then(d => {
                    if (window.EmberToast) {
                        if (d.ok) {
                            window.EmberToast('Залив остановлен' + (d.cancelled ? ` (отменено заданий: ${d.cancelled})` : ''), 'ok');
                        } else {
                            window.EmberToast(d.error || 'Не удалось остановить', 'err');
                        }
                    }
                })
                .catch(e => {
                    if (window.EmberToast) window.EmberToast('Сеть: ' + (e.message || e), 'err');
                });
        });
    }
})();
</script>
{% endblock %}