{% 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 по профилям — тогда залив и прогрев будут
        <b>сами логиниться</b> в RuTube (как «Войти в Google» у YouTube), без ручного входа.
        Пароли шифруются (DPAPI) и хранятся в карточке профиля. Если учётки нет — модуль
        работает на живых куках (входишь в RuTube вручную).
    </p>
</div>

<div class="card">
    <h2>Профили <span class="pill" id="rta-prof-count">0 выбрано</span></h2>
    <div class="btn-row" style="margin-bottom:10px;">
        <button class="btn ghost" id="rta-prof-all">Выбрать все</button>
        <button class="btn ghost" id="rta-prof-none">Снять все</button>
        <button class="btn ghost" id="rta-prof-reload">↻ Обновить</button>
    </div>
    <div id="rta-prof-list" style="max-height:260px; 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>Учётки RuTube</h2>
    <p class="card-hint">
        По одной строке на профиль в формате <code>email:password</code>.
        Профиль №1 (по порядку выбора) ↔ строка №1, и так далее.
    </p>
    <textarea class="queue-input" id="rta-creds" style="min-height:160px;"
              placeholder="myaccount@mail.ru:MyPassword123&#10;second@mail.ru:SecondPass456"></textarea>
    <div class="btn-row" style="margin-top:10px;">
        <button class="btn" id="rta-save">💾 Сохранить учётки</button>
    </div>
    <pre id="rta-log" class="log-stream" style="margin-top:12px; max-height:160px; overflow:auto;"></pre>
</div>

<script>
(function(){
    const $ = (id) => document.getElementById(id);
    function selectedIds(){ return Array.from(document.querySelectorAll('#rta-prof-list input[type=checkbox]:checked')).map(c => c.value); }
    function refreshCount(){ const el=$('rta-prof-count'); if(el) el.textContent = selectedIds().length + ' выбрано'; }
    function renderProfiles(list){
        const box=$('rta-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=$('rta-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>'; });
    }
    $('rta-prof-all') && $('rta-prof-all').addEventListener('click',()=>{document.querySelectorAll('#rta-prof-list input[type=checkbox]').forEach(c=>c.checked=true);refreshCount();});
    $('rta-prof-none') && $('rta-prof-none').addEventListener('click',()=>{document.querySelectorAll('#rta-prof-list input[type=checkbox]').forEach(c=>c.checked=false);refreshCount();});
    $('rta-prof-reload') && $('rta-prof-reload').addEventListener('click',loadProfiles);

    function logLine(t){ const el=$('rta-log'); if(el){ el.textContent+=t+'\n'; el.scrollTop=el.scrollHeight; } }
    $('rta-save') && $('rta-save').addEventListener('click',()=>{
        const ids=selectedIds();
        const creds=($('rta-creds').value||'');
        if(!ids.length){ window.EmberToast && window.EmberToast('Выберите профили','err'); return; }
        if(!creds.trim()){ window.EmberToast && window.EmberToast('Вставьте учётки email:password','err'); return; }
        fetch('/api/rutube/creds/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({profile_ids:ids,creds:creds})})
            .then(r=>r.json()).then(d=>{
                if(d.ok){ window.EmberToast && window.EmberToast(d.note||('Сохранено '+d.saved),'ok'); logLine('💾 '+(d.note||('Сохранено '+d.saved))); }
                else { window.EmberToast && window.EmberToast(d.error||'Ошибка','err'); logLine('✖ '+(d.error||'Ошибка')); }
            }).catch(e=>logLine('✖ сеть: '+(e&&e.message||e)));
    });

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