{% extends "base.html" %}
{% block page_title %}Ember · Профили{% endblock %}
{% block content %}

<div class="card" style="border-left:3px solid var(--accent);">
    <h2>Ember — встроенный антидетект</h2>
    <p class="card-hint">
        Свой движок: профили живут <b>внутри Ember</b>, отдельное приложение-антидетект
        не нужно. Каждый профиль — это изолированный Chromium со своим отпечатком
        (ОС, экран, язык, таймзона, WebRTC, canvas/WebGL, железо) и своим прокси.
        Профили работают и для <b>YouTube</b>, и для <b>RuTube</b> — весь залив и прогрев
        используют их так же, как профили ixBrowser/AdsPower.
    </p>
    <p class="card-hint" style="margin-top:6px; color:#A66BFF;">
        Чтобы Ember стал активным: открой <b>Настройки → Антидетект</b> и выбери
        «Ember (встроенный)». Прокси с логином/паролем — только <b>HTTP</b>
        (Chromium не умеет авторизацию SOCKS5; SOCKS5 — только с whitelist IP).
    </p>
</div>

<div class="card">
    <div class="btn-row compact" style="margin-bottom:10px;">
        <button class="btn ghost ep-filter" data-platform="" >Все <span class="pill" id="ep-c-all">0</span></button>
        <button class="btn ghost ep-filter" data-platform="youtube">YouTube <span class="pill" id="ep-c-yt">0</span></button>
        <button class="btn ghost ep-filter" data-platform="rutube">RuTube <span class="pill" id="ep-c-rt">0</span></button>
        <button class="btn ghost" id="ep-reload" style="margin-left:auto;">↻ Обновить</button>
    </div>
    <div id="ep-list" class="ep-list">
        <div class="empty-row">загружаем профили…</div>
    </div>
</div>

<div class="card">
    <h2>Создать профили</h2>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
        <label class="field">
            <span>Имя (префикс)</span>
            <input class="input" id="ep-new-name" placeholder="напр. YT-RU">
        </label>
        <label class="field">
            <span>Сколько</span>
            <input class="input" id="ep-new-count" type="number" min="1" max="200" value="1" style="max-width:120px">
        </label>
    </div>
    <label class="field" style="margin-top:10px;">
        <span>Площадка</span>
        <select class="select" id="ep-new-platform" style="max-width:220px">
            <option value="youtube">YouTube</option>
            <option value="rutube">RuTube</option>
        </select>
    </label>
    <label class="field" style="margin-top:10px;">
        <span>Прокси <span class="card-hint" style="font-weight:normal">(одна строка = один профиль, по кругу; формат <code>http://user:pass@host:port</code> или <code>host:port</code>)</span></span>
        <textarea class="queue-input" id="ep-new-proxies" placeholder="http://user:pass@1.2.3.4:8080&#10;socks5://5.6.7.8:1080"></textarea>
    </label>
    <div class="btn-row" style="margin-top:10px;">
        <button class="btn" id="ep-create">Создать</button>
        <span class="card-hint">У каждого профиля будет свой случайный отпечаток — потом правится в «Настройки».</span>
    </div>
</div>

<!-- ── editor panel (hidden until «Настройки») ── -->
<div class="card" id="ep-editor" style="display:none; border-left:3px solid #A66BFF;">
    <h2>Отпечаток профиля <span class="pill" id="ep-ed-id"></span></h2>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
        <label class="field"><span>Имя</span><input class="input" id="ep-ed-name"></label>
        <label class="field"><span>Площадка</span>
            <select class="select" id="ep-ed-platform"><option value="youtube">YouTube</option><option value="rutube">RuTube</option></select>
        </label>
    </div>
    <label class="field" style="margin-top:10px;"><span>Прокси</span>
        <input class="input" id="ep-ed-proxy" placeholder="http://user:pass@host:port">
    </label>

    <h3 style="margin-top:14px;">Идентичность</h3>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
        <label class="field"><span>ОС</span>
            <select class="select" id="fp-os"><option value="windows">Windows</option><option value="macos">macOS</option></select>
        </label>
        <label class="field"><span>Версия Chrome</span><input class="input" id="fp-chrome" type="number" min="100" max="200"></label>
    </div>
    <label class="field" style="margin-top:10px;"><span>User-Agent</span><input class="input" id="fp-ua"></label>

    <h3 style="margin-top:14px;">Экран</h3>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;">
        <label class="field"><span>Ширина</span><input class="input" id="fp-sw" type="number"></label>
        <label class="field"><span>Высота</span><input class="input" id="fp-sh" type="number"></label>
        <label class="field"><span>DPR</span><input class="input" id="fp-dpr" type="number" step="0.25"></label>
    </div>

    <h3 style="margin-top:14px;">Язык / Время / Гео</h3>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
        <label class="field"><span>Язык</span>
            <select class="select" id="fp-lang">
                <option value="ru-RU">Русский (ru-RU)</option>
                <option value="uk-UA">Українська (uk-UA)</option>
                <option value="en-US">English (en-US)</option>
                <option value="pl-PL">Polski (pl-PL)</option>
            </select>
        </label>
        <label class="field"><span>Таймзона</span>
            <select class="select" id="fp-tz">
                <option value="auto">Авто (системная)</option>
                <option>Europe/Moscow</option><option>Europe/Kiev</option><option>Europe/Warsaw</option>
                <option>Europe/Berlin</option><option>Europe/Kaliningrad</option>
                <option>Asia/Yekaterinburg</option><option>Europe/Samara</option>
            </select>
        </label>
    </div>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:10px;">
        <label class="field"><span>Геолокация</span>
            <select class="select" id="fp-geo"><option value="auto">Авто</option><option value="manual">Вручную</option><option value="off">Выкл</option></select>
        </label>
        <label class="field"><span>Широта</span><input class="input" id="fp-lat" type="number" step="0.0001" placeholder="55.7558"></label>
        <label class="field"><span>Долгота</span><input class="input" id="fp-lon" type="number" step="0.0001" placeholder="37.6173"></label>
    </div>

    <h3 style="margin-top:14px;">Железо</h3>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
        <label class="field"><span>Ядра CPU</span>
            <select class="select" id="fp-hc"><option>4</option><option>6</option><option>8</option><option>12</option><option>16</option></select>
        </label>
        <label class="field"><span>ОЗУ (ГБ)</span>
            <select class="select" id="fp-dm"><option>4</option><option>8</option><option>16</option></select>
        </label>
    </div>

    <h3 style="margin-top:14px;">Защита отпечатка</h3>
    <label class="field"><span>WebRTC</span>
        <select class="select" id="fp-webrtc" style="max-width:280px">
            <option value="block">Блокировать (анти-leak IP)</option>
            <option value="real">Реальный</option>
        </select>
    </label>
    <div class="queue-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;">
        <label class="field"><span>WebGL Vendor</span><input class="input" id="fp-glv"></label>
        <label class="field"><span>WebGL Renderer</span><input class="input" id="fp-glr"></label>
    </div>
    <label class="field check-field" style="margin-top:10px;"><input type="checkbox" id="fp-canvas"><span>Шум на Canvas</span></label>
    <label class="field check-field"><input type="checkbox" id="fp-audio"><span>Шум на AudioContext</span></label>
    <label class="field check-field"><input type="checkbox" id="fp-fonts"><span>Маскировка шрифтов</span></label>
    <label class="field check-field"><input type="checkbox" id="fp-dnt"><span>Do Not Track</span></label>

    <div class="btn-row" style="margin-top:14px;">
        <button class="btn" id="ep-save">Сохранить</button>
        <button class="btn ghost" id="ep-ed-randomize">Случайный отпечаток</button>
        <button class="btn ghost" id="ep-ed-close" style="margin-left:auto;">Закрыть</button>
    </div>
</div>

<script>
(function(){
    const $ = (id) => document.getElementById(id);
    let curPlatform = "";
    let editId = null;

    const LANG_SETS = {
        "ru-RU": [["ru-RU","ru","en-US","en"], "ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7"],
        "uk-UA": [["uk-UA","uk","ru","en-US","en"], "uk-UA,uk;q=0.9,ru;q=0.8,en-US;q=0.7,en;q=0.6"],
        "en-US": [["en-US","en"], "en-US,en;q=0.9"],
        "pl-PL": [["pl-PL","pl","en-US","en"], "pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7"],
    };

    function badge(p){ return p === "rutube"
        ? '<span class="pill" style="background:#7C3AED22;color:#A66BFF;">RuTube</span>'
        : '<span class="pill" style="background:#EF444422;color:#FF6B6B;">YouTube</span>'; }

    const esc = (s) => (window.EmberHelpers ? window.EmberHelpers.escapeHtml(s) : String(s == null ? '' : s));

    function renderList(profiles){
        const box = $('ep-list');
        if (!profiles.length){ box.innerHTML = '<div class="empty-row">нет профилей — создайте ниже</div>'; return; }
        box.innerHTML = profiles.map(p => {
            const fp = p.fp_summary || {};
            // All operator-controlled fields (name, fingerprint, proxy) are
            // escaped — they end up in innerHTML and a name like
            // "<img onerror=...>" would otherwise run JS in the WebView.
            const meta = [fp.os, fp.screen, fp.lang, fp.tz, 'WebRTC:'+(fp.webrtc||'?')].filter(Boolean).map(esc).join(' · ');
            const proxy = p.has_proxy ? esc(p.proxy_masked) : '<span style="color:var(--text-lo)">без прокси</span>';
            const runDot = p.running ? '<span style="color:#22C55E">●</span>' : '<span style="color:var(--text-lo)">○</span>';
            const openBtn = p.running
                ? '<button class="btn ghost xs" data-act="close" data-id="'+p.id+'">■ Закрыть</button>'
                : '<button class="btn ghost xs" data-act="open" data-id="'+p.id+'">▶ Открыть</button>';
            return '<div class="ep-row" style="display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--border);">'
                + '<div style="flex:0 0 14px;">'+runDot+'</div>'
                + '<div style="flex:1 1 auto;min-width:0;">'
                +   '<div style="display:flex;gap:8px;align-items:center;"><b style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">'+ esc(p.name||p.id) +'</b>'+ badge(p.platform) +'</div>'
                +   '<div class="card-hint" style="font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">'+ meta +'</div>'
                +   '<div class="card-hint" style="font-size:11px;">'+ proxy +'</div>'
                + '</div>'
                + '<div class="btn-row compact" style="flex:0 0 auto;gap:4px;">'
                +   openBtn
                +   '<button class="btn ghost xs" data-act="check" data-id="'+p.id+'" title="Проверить отпечаток на iphey.com">Проверить</button>'
                +   '<button class="btn ghost xs" data-act="edit" data-id="'+p.id+'">Настройки</button>'
                +   '<button class="btn ghost xs" data-act="rnd" data-id="'+p.id+'" title="Случайный отпечаток"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M4 20 21 3"/><path d="M21 16v5h-5"/><path d="M15 15l6 6"/><path d="M4 4l5 5"/></svg></button>'
                +   '<button class="btn ghost xs" data-act="del" data-id="'+p.id+'" title="Удалить"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/></svg></button>'
                + '</div>'
                + '</div>';
        }).join('');
    }

    function load(){
        const box = $('ep-list'); box.innerHTML = '<div class="empty-row">загружаем…</div>';
        const q = curPlatform ? ('?platform='+curPlatform) : '';
        fetch('/api/ember/profiles'+q).then(r=>r.json()).then(d=>{
            if (!d.ok){ box.innerHTML = '<div class="empty-row">ошибка</div>'; return; }
            renderList(d.profiles||[]);
            const c = d.counts||{};
            $('ep-c-all').textContent = c.all||0; $('ep-c-yt').textContent = c.youtube||0; $('ep-c-rt').textContent = c.rutube||0;
        }).catch(()=>{ box.innerHTML = '<div class="empty-row">сеть недоступна</div>'; });
    }

    // filter tabs
    document.querySelectorAll('.ep-filter').forEach(b => b.addEventListener('click', () => {
        curPlatform = b.getAttribute('data-platform') || "";
        document.querySelectorAll('.ep-filter').forEach(x => x.classList.remove('active'));
        b.classList.add('active');
        load();
    }));
    $('ep-reload').addEventListener('click', load);

    // create
    $('ep-create').addEventListener('click', () => {
        const name = ($('ep-new-name').value||'').trim();
        if (!name){ window.EmberToast && window.EmberToast('Введите имя','err'); return; }
        const proxies = ($('ep-new-proxies').value||'').split(/\n+/).map(s=>s.trim()).filter(Boolean);
        const body = {
            name: name,
            count: parseInt($('ep-new-count').value||'1',10),
            platform: $('ep-new-platform').value,
            proxies: proxies,
        };
        fetch('/api/ember/profiles/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
            .then(r=>r.json()).then(d=>{
                if (d.ok){ window.EmberToast && window.EmberToast(d.note||('Создано '+d.created),'ok'); $('ep-new-name').value=''; $('ep-new-proxies').value=''; load(); }
                else window.EmberToast && window.EmberToast(d.error||'Ошибка','err');
            }).catch(()=>window.EmberToast && window.EmberToast('Сеть','err'));
    });

    // row actions (delegated)
    $('ep-list').addEventListener('click', (e) => {
        const btn = e.target.closest('button[data-act]'); if (!btn) return;
        const id = btn.getAttribute('data-id'); const act = btn.getAttribute('data-act');
        if (act === 'del'){
            if (!confirm('Удалить профиль? Куки и данные профиля будут стёрты.')) return;
            fetch('/api/ember/profiles/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id})})
                .then(()=>{ if (editId===id) closeEditor(); load(); });
        } else if (act === 'open'){
            btn.textContent = '…';
            fetch('/api/ember/profiles/open',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id})})
                .then(r=>r.json()).then(d=>{ window.EmberToast && window.EmberToast(d.ok?(d.note||'Открыт'):(d.error||'Ошибка'), d.ok?'ok':'err'); load(); });
        } else if (act === 'check'){
            btn.textContent = '…';
            fetch('/api/ember/profiles/check',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id})})
                .then(r=>r.json()).then(d=>{ window.EmberToast && window.EmberToast(d.ok?(d.note||'Открыл iphey'):(d.error||'Ошибка'), d.ok?'ok':'err'); load(); });
        } else if (act === 'close'){
            fetch('/api/ember/profiles/close',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id})}).then(()=>load());
        } else if (act === 'rnd'){
            fetch('/api/ember/profiles/randomize',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id})})
                .then(r=>r.json()).then(d=>{ if (d.ok){ window.EmberToast && window.EmberToast('Новый отпечаток','ok'); if (editId===id) fpToForm(d.fingerprint); load(); } });
        } else if (act === 'edit'){
            openEditor(id);
        }
    });

    // ── editor ──
    function fpToForm(fp){
        fp = fp || {};
        $('fp-os').value = fp.os || 'windows';
        $('fp-chrome').value = fp.chrome_major || 131;
        $('fp-ua').value = fp.ua || '';
        $('fp-sw').value = fp.screen_w || 1920;
        $('fp-sh').value = fp.screen_h || 1080;
        $('fp-dpr').value = fp.dpr != null ? fp.dpr : 1.0;
        $('fp-lang').value = fp.lang_key || 'ru-RU';
        $('fp-tz').value = fp.timezone || 'Europe/Moscow';
        $('fp-geo').value = fp.geo_mode || 'auto';
        $('fp-lat').value = fp.geo_lat != null ? fp.geo_lat : '';
        $('fp-lon').value = fp.geo_lon != null ? fp.geo_lon : '';
        $('fp-hc').value = fp.hardware_concurrency || 8;
        $('fp-dm').value = fp.device_memory || 8;
        $('fp-webrtc').value = fp.webrtc || 'block';
        $('fp-glv').value = fp.webgl_vendor || '';
        $('fp-glr').value = fp.webgl_renderer || '';
        $('fp-canvas').checked = fp.canvas_noise !== false;
        $('fp-audio').checked = fp.audio_noise !== false;
        $('fp-fonts').checked = fp.fonts_mask !== false;
        $('fp-dnt').checked = !!fp.dnt;
        $('_fp_seed').value = fp.seed || '';
    }
    function formToFp(){
        const langKey = $('fp-lang').value;
        const ls = LANG_SETS[langKey] || LANG_SETS['ru-RU'];
        const geoMode = $('fp-geo').value;
        return {
            seed: parseInt($('_fp_seed').value||'0',10) || Math.floor(Math.random()*2e9),
            os: $('fp-os').value,
            chrome_major: parseInt($('fp-chrome').value||'131',10),
            ua: $('fp-ua').value.trim(),
            platform: $('fp-os').value === 'macos' ? 'MacIntel' : 'Win32',
            screen_w: parseInt($('fp-sw').value||'1920',10),
            screen_h: parseInt($('fp-sh').value||'1080',10),
            color_depth: 24,
            dpr: parseFloat($('fp-dpr').value||'1'),
            lang_key: langKey,
            languages: ls[0],
            accept_language: ls[1],
            timezone: $('fp-tz').value,
            geo_mode: geoMode,
            geo_lat: geoMode === 'manual' ? parseFloat($('fp-lat').value||'0') : null,
            geo_lon: geoMode === 'manual' ? parseFloat($('fp-lon').value||'0') : null,
            hardware_concurrency: parseInt($('fp-hc').value||'8',10),
            device_memory: parseInt($('fp-dm').value||'8',10),
            webrtc: $('fp-webrtc').value,
            canvas_noise: $('fp-canvas').checked,
            webgl_vendor: $('fp-glv').value.trim(),
            webgl_renderer: $('fp-glr').value.trim(),
            audio_noise: $('fp-audio').checked,
            fonts_mask: $('fp-fonts').checked,
            dnt: $('fp-dnt').checked,
        };
    }
    function openEditor(id){
        fetch('/api/ember/profiles/'+id).then(r=>r.json()).then(d=>{
            if (!d.ok){ window.EmberToast && window.EmberToast('Не найден','err'); return; }
            editId = id;
            const p = d.profile;
            $('ep-ed-id').textContent = id;
            $('ep-ed-name').value = p.name || '';
            $('ep-ed-platform').value = p.platform || 'youtube';
            $('ep-ed-proxy').value = p.proxy || '';
            fpToForm(p.fingerprint);
            $('ep-editor').style.display = '';
            $('ep-editor').scrollIntoView({behavior:'smooth', block:'start'});
        });
    }
    function closeEditor(){ editId = null; $('ep-editor').style.display = 'none'; }
    $('ep-ed-close').addEventListener('click', closeEditor);
    $('ep-save').addEventListener('click', () => {
        if (!editId) return;
        const body = {
            id: editId,
            name: $('ep-ed-name').value.trim(),
            platform: $('ep-ed-platform').value,
            proxy: $('ep-ed-proxy').value.trim(),
            fingerprint: formToFp(),
        };
        fetch('/api/ember/profiles/update',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})
            .then(r=>r.json()).then(d=>{
                if (d.ok){ window.EmberToast && window.EmberToast('Сохранено','ok'); load(); }
                else window.EmberToast && window.EmberToast(d.error||'Ошибка','err');
            });
    });
    $('ep-ed-randomize').addEventListener('click', () => {
        if (!editId) return;
        fetch('/api/ember/profiles/randomize',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:editId})})
            .then(r=>r.json()).then(d=>{ if (d.ok){ fpToForm(d.fingerprint); window.EmberToast && window.EmberToast('Отпечаток обновлён — не забудь Сохранить если правил имя/прокси','ok'); load(); } });
    });

    // hidden seed holder
    const seed = document.createElement('input'); seed.type='hidden'; seed.id='_fp_seed'; document.body.appendChild(seed);

    document.querySelector('.ep-filter[data-platform=""]').classList.add('active');
    load();
})();
</script>
{% endblock %}