{% extends "base.html" %}
{% block page_title %}RuTube · Каналы{% endblock %}
{% block content %}

<div class="card" style="border-left:3px solid var(--accent);">
    <h2>🟣 RuTube — Каналы</h2>
    <p class="card-hint">
        Кастомизация канала на RuTube через ваш антидетект-профиль: название, описание,
        аватар, баннер (studio.rutube.ru). Название — по строке на профиль (строка №1 → профиль №1);
        описание, аватар и баннер — общие для всей пачки.
        <b>v1 ездит на живых куках / сохранённых учётках RuTube.</b>
        Первый прогон с видимым окном — в логи падают строки <code>rt.channel.probe</code>
        для калибровки селекторов.
    </p>
</div>

<div class="card">
    <h2>Профили <span class="pill" id="rtc-prof-count">0 выбрано</span></h2>
    <div class="btn-row compact" style="margin-bottom:10px;">
        <button class="btn ghost" id="rtc-prof-all">Выбрать все</button>
        <button class="btn ghost" id="rtc-prof-none">Снять все</button>
        <button class="btn ghost" id="rtc-prof-reload">↻ Обновить</button>
    </div>
    <div id="rtc-prof-list" style="max-height:280px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px;">
        <div class="empty-row">загружаем профили…</div>
    </div>
</div>

<div class="card">
    <h2>Настройки канала</h2>
    <label class="field">
        <span>Названия каналов — по строке на профиль (по порядку выбора)</span>
        <textarea class="queue-input" id="rtc-names" style="min-height:90px;"
                  placeholder="Мой канал 1&#10;Мой канал 2&#10;Мой канал 3"></textarea>
    </label>
    <label class="field">
        <span>Описание (одно на все профили)</span>
        <textarea class="queue-input" id="rtc-desc" style="min-height:70px;"
                  placeholder="Описание канала (опционально)"></textarea>
    </label>
    <div class="btn-row" style="margin-top:4px;">
        <button class="btn ghost" id="rtc-pick-avatar" type="button">📷 Выбрать аватар</button>
        <button class="btn ghost" id="rtc-pick-banner" type="button">🖼 Выбрать баннер</button>
    </div>
    <div class="summary-pills" style="margin-top:8px;">
        <span class="pill" id="rtc-avatar-file">аватар: нет</span>
        <span class="pill" id="rtc-banner-file">баннер: нет</span>
    </div>
    <label class="field">
        <span>Потоки (параллельных профилей)</span>
        <div class="slider-row">
            <input type="range" min="1" max="10" step="1" value="1" id="rtc-threads" data-pref="rutube_channel.threads">
            <span class="pill" id="rtc-threads-val">1</span>
        </div>
    </label>
    <label class="field check-field" title="Видимое окно профиля — нужно для калибровки селекторов RuTube.">
        <input type="checkbox" id="rtc-show-browser" data-pref="rutube_channel.show_browser" data-default="1" checked>
        <span>🖥 Показать браузер при настройке (видимое окно)</span>
    </label>
</div>

<div class="card">
    <div class="btn-row">
        <button class="btn" id="rtc-start">▶ Запустить настройку каналов</button>
        <button class="btn ghost" id="rtc-stop">■ Стоп</button>
    </div>
    <pre id="rutube-channel-log" class="log-stream" style="margin-top:12px; max-height:300px; overflow:auto;"></pre>
</div>

<script>
(function(){
    const $ = (id) => document.getElementById(id);
    let avatarPath = "";
    let bannerPath = "";
    const basename = (p) => (p||'').replace(/\\/g,'/').split('/').pop() || p;

    function selectedIds(){ return Array.from(document.querySelectorAll('#rtc-prof-list input[type=checkbox]:checked')).map(c => c.value); }
    function refreshCount(){ const el=$('rtc-prof-count'); if(el) el.textContent = selectedIds().length + ' выбрано'; }
    function renderProfiles(list){
        const box=$('rtc-prof-list'); if(!box) return;
        if(!list.length){ box.innerHTML='<div class="empty-row">нет профилей в антидетекте</div>'; return; }
        box.innerHTML = list.map(p => {
            const name=(p.name||p.id||'').toString();
            return '<label class="field check-field" style="margin:0;padding:4px 6px;"><input type="checkbox" value="'+p.id+'">'+
                   '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">'+name+'</span></label>';
        }).join('');
        box.querySelectorAll('input[type=checkbox]').forEach(c=>c.addEventListener('change',refreshCount));
        refreshCount();
    }
    function loadProfiles(){
        const box=$('rtc-prof-list'); if(box) box.innerHTML='<div class="empty-row">загружаем профили…</div>';
        fetch('/api/adapters/{{ active_adapter }}/profiles').then(r=>r.json()).then(d=>{
            renderProfiles((d&&d.ok&&d.profiles)||[]);
        }).catch(()=>{ if(box) box.innerHTML='<div class="empty-row">ошибка загрузки</div>'; });
    }
    $('rtc-prof-all') && $('rtc-prof-all').addEventListener('click',()=>{document.querySelectorAll('#rtc-prof-list input[type=checkbox]').forEach(c=>c.checked=true);refreshCount();});
    $('rtc-prof-none') && $('rtc-prof-none').addEventListener('click',()=>{document.querySelectorAll('#rtc-prof-list input[type=checkbox]').forEach(c=>c.checked=false);refreshCount();});
    $('rtc-prof-reload') && $('rtc-prof-reload').addEventListener('click',loadProfiles);

    const bind=(id,valId,suffix)=>{const el=$(id),v=$(valId); if(el&&v){ const upd=()=>v.textContent=el.value+(suffix||''); el.addEventListener('input',upd); upd(); }};
    bind('rtc-threads','rtc-threads-val','');

    function pickImage(setter, pillId, label){
        fetch('/api/rutube/channel/pick-image',{method:'POST'}).then(r=>r.json()).then(d=>{
            if(d && d.ok && d.path){ setter(d.path); const el=$(pillId); if(el) el.textContent = label+': '+basename(d.path); }
        }).catch(()=>{});
    }
    $('rtc-pick-avatar') && $('rtc-pick-avatar').addEventListener('click',()=>pickImage(p=>avatarPath=p,'rtc-avatar-file','аватар'));
    $('rtc-pick-banner') && $('rtc-pick-banner').addEventListener('click',()=>pickImage(p=>bannerPath=p,'rtc-banner-file','баннер'));

    function logLine(t){ const el=$('rutube-channel-log'); if(el){ el.textContent+=t+'\n'; el.scrollTop=el.scrollHeight; } }

    $('rtc-start') && $('rtc-start').addEventListener('click',()=>{
        const ids=selectedIds();
        if(!ids.length){ window.EmberToast && window.EmberToast('Выберите хотя бы один профиль','err'); return; }
        const body={
            profile_ids: ids,
            channel_names: ($('rtc-names').value||''),
            description: ($('rtc-desc').value||''),
            avatar_path: avatarPath,
            banner_path: bannerPath,
        };
        if(!body.channel_names.trim() && !body.description.trim() && !avatarPath && !bannerPath){
            window.EmberToast && window.EmberToast('Заполните хотя бы одно поле','err'); return;
        }
        fetch('/api/rutube/channel/start',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
            .then(r=>r.json()).then(d=>{
                if(d.ok){ window.EmberToast && window.EmberToast('RuTube каналы: '+d.queued+' профилей','ok'); logLine('▶ Настройка каналов RuTube: '+d.queued+' профилей.');
                    if(window.EmberRunnerLog) window.EmberRunnerLog.attachTo('rutube-channel-log'); }
                else { window.EmberToast && window.EmberToast(d.error||'Ошибка','err'); logLine('✖ '+(d.error||'Ошибка')); }
            }).catch(e=>logLine('✖ сеть: '+(e&&e.message||e)));
    });
    $('rtc-stop') && $('rtc-stop').addEventListener('click',()=>{
        fetch('/api/rutube/channel/stop',{method:'POST'}).then(r=>r.json()).then(d=>logLine('■ Стоп. Отменено: '+(d.cancelled||0))).catch(()=>{});
    });

    loadProfiles();
})();
</script>
{% endblock %}