{% extends "base.html" %}
{% block page_title %}История заливов{% endblock %}
{% block content %}

<div class="card">
    <h2>История заливов</h2>
    <p class="card-hint">
        Каждое успешно залитое видео сюда попадает само. Кнопка «Обновить статы» дёргает
        публичную страницу YouTube (без API-ключа и без открытия профиля в антидетекте)
        и обновляет просмотры/лайки/комменты для всех видео где статы устарели или ещё не подтянулись.
        Партия за раз — 200 видео.
    </p>
    <div class="btn-row" style="margin-top:8px; flex-wrap:wrap; gap:10px 14px;">
        <button class="btn" id="ph-refresh" data-icon="refresh">Обновить статы</button>
        <span class="onb-msg" id="ph-msg" role="status" style="margin-left:6px"></span>
    </div>
</div>

<div class="card" id="ph-pills-card">
    <div class="ph-pills">
        <span class="ph-pill is-err"   title="Видео которое YouTube вернул с ошибкой (удалено / приватно / region-block / consent-wall)"><span class="ph-pill-icon">⚠</span><span class="ph-pill-label">ОШИБКИ</span><span class="ph-pill-value" id="ph-pill-errors">0</span></span>
        <span class="ph-pill is-zero"  title="Видео у которого статы подтянулись но просмотров пока ровно 0 — потенциальная тень"><span class="ph-pill-icon">●</span><span class="ph-pill-label">НУЛИ</span><span class="ph-pill-value" id="ph-pill-zeros">0</span></span>
        <span class="ph-pill is-low"   title="Видео с 1–300 просмотрами"><span class="ph-pill-icon">↗</span><span class="ph-pill-label">0-300</span><span class="ph-pill-value" id="ph-pill-low">0</span></span>
        <span class="ph-pill is-high"  title="Видео с 300+ просмотрами"><span class="ph-pill-icon">↗</span><span class="ph-pill-label">300+</span><span class="ph-pill-value" id="ph-pill-high">0</span></span>
        <span class="ph-pill is-count" title="Всего залитых видео за всё время"><span class="ph-pill-icon">▶</span><span class="ph-pill-label">ВИДЕО</span><span class="ph-pill-value" id="ph-pill-videos">0</span></span>
        <span class="ph-pill is-count" title="Суммарные просмотры по всем строкам"><span class="ph-pill-icon">👁</span><span class="ph-pill-label">ПРОСМОТРЫ</span><span class="ph-pill-value" id="ph-pill-views">0</span></span>
        <span class="ph-pill is-count" title="Суммарные лайки"><span class="ph-pill-icon">♥</span><span class="ph-pill-label">ЛАЙКИ</span><span class="ph-pill-value" id="ph-pill-likes">0</span></span>
        <span class="ph-pill is-count" title="Engagement Rate = (лайки + комменты) / просмотры × 100"><span class="ph-pill-icon">↗</span><span class="ph-pill-label">ER</span><span class="ph-pill-value" id="ph-pill-er">0%</span></span>
    </div>
</div>

<div class="card">
    <h2>Залитые видео</h2>
    <div class="toolbar" style="margin-bottom:10px;">
        <input type="text" class="input" id="ph-filter" placeholder="Фильтр: акк, гео, ID видео, заголовок" style="flex:1; min-width:260px;">
        <select class="select" id="ph-bucket-filter">
            <option value="all">Все</option>
            <option value="errors">Только ошибки</option>
            <option value="zeros">Только нули</option>
            <option value="low">0–300 просмотров</option>
            <option value="high">300+ просмотров</option>
            <option value="pending">Без статы</option>
        </select>
        <span class="pill count" id="ph-row-count">Строк: 0</span>
    </div>
    <div class="table-wrap">
        <table class="data-table" id="ph-table">
            <thead>
                <tr>
                    <th>Загружено</th>
                    <th>Профиль</th>
                    <th>ГЕО</th>
                    <th>Видео</th>
                    <th class="td-num">👁</th>
                    <th class="td-num">♥</th>
                    <th class="td-num">💬</th>
                    <th class="td-num">ER%</th>
                    <th>Тень</th>
                </tr>
            </thead>
            <tbody id="ph-tbody">
                <tr><td colspan="9" class="empty-row">Загружаем…</td></tr>
            </tbody>
        </table>
    </div>
</div>

<style>
/* 1.0.237: компактнее. Юзер 31 мая: «оно слишком огромное не красиво,
   свг иконки на текст ложаться». Иконки были unicode-emoji которые в
   Chromium-emoji-fonts шире цифр и наезжали. Решение: меньший размер,
   меньше padding, line-height:1, иконкам своя ширина чтобы они НЕ
   могли вытеснить цифру. */
.ph-pills { display:flex; flex-wrap:wrap; gap:6px 8px; }
.ph-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px 4px 8px; border-radius:999px;
    background: var(--bg-card-2, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    font-size: 11.5px; font-weight: 600; line-height: 1.4;
    color: var(--text-hi, #eee);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.ph-pill-icon {
    font-size: 11px; opacity: 0.85;
    display:inline-flex; align-items:center; justify-content:center;
    width: 14px; height: 14px; flex: 0 0 14px;   /* фикс. ширина — иконка не сдвигает текст */
    text-align:center;
}
.ph-pill-label { letter-spacing: 0.4px; }
.ph-pill-value {
    background: rgba(0,0,0,0.28); padding: 1px 7px; border-radius: 999px;
    margin-left: 2px; min-width: 16px; text-align:center;
}
.ph-pill.is-err  { border-color: rgba(255,80,80,0.55); color: #ffb3b3; }
.ph-pill.is-zero { border-color: rgba(255,80,80,0.35); color: #ffd0d0; }
.ph-pill.is-low  { border-color: rgba(220,180,40,0.55); color: #ffe28a; }
.ph-pill.is-high { border-color: rgba(80,220,120,0.55); color: #aef0bc; }
.ph-shadow-yes { color: #ff8a8a; font-weight:700; }
.ph-shadow-no  { color: var(--text-lo, #888); }
.ph-shadow-pending { color: #ffc870; font-weight:600; }
.ph-views-zero  { color: #ff8a8a; }
.ph-views-low   { color: #ffd16a; }
.ph-views-high  { color: #8fe89c; }
.ph-row-err td { background: rgba(255,80,80,0.06); }
.ph-row-err td:first-child { box-shadow: inset 3px 0 0 rgba(255,80,80,0.55); }
.ph-row-pending td { background: rgba(255,200,80,0.05); }
.ph-row-pending td:first-child { box-shadow: inset 3px 0 0 rgba(255,200,80,0.45); }
.ph-video-link { color: var(--accent, #6ec1ff); text-decoration: none; }
.ph-video-link:hover { text-decoration: underline; }
.ph-table-meta { font-size: 11px; color: var(--text-lo, #888); display:block; margin-top:2px; }
</style>

{% endblock %}
{% block scripts %}
<script>
(function(){
    const fmtNum = (n) => {
        if (n == null) return '—';
        if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
        if (n >= 10_000)    return (n / 1_000).toFixed(0) + 'K';
        return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    };
    const fmtDate = (iso) => {
        if (!iso) return '—';
        const d = new Date(iso);
        if (isNaN(d.getTime())) return iso;
        const pad = n => String(n).padStart(2, '0');
        return `${pad(d.getDate())}.${pad(d.getMonth()+1)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
    };
    const escHtml = (window.EmberHelpers && window.EmberHelpers.escapeHtml)
        || (s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])));

    function bucketOf(row) {
        if (row.stats_error) return 'errors';
        if (row.stats_fetched_at == null) return 'pending';
        const v = row.views || 0;
        if (v === 0) return 'zeros';
        if (v <= 300) return 'low';
        return 'high';
    }

    function renderRows(rows) {
        const tbody = document.getElementById('ph-tbody');
        if (!tbody) return;
        if (!rows.length) {
            tbody.innerHTML = '<tr><td colspan="9" class="empty-row">Пока ничего не залито — карточки появляются после успешного shorts_upload.</td></tr>';
            return;
        }
        tbody.innerHTML = rows.map(r => {
            const isErr = !!r.stats_error;
            const isPending = !isErr && r.stats_fetched_at == null;
            const views = r.views || 0;
            const er = views > 0 ? (((r.likes || 0) + (r.comments || 0)) / views * 100) : 0;
            const viewsClass = views === 0 && !isPending ? 'ph-views-zero' : (views <= 300 ? 'ph-views-low' : 'ph-views-high');
            const link = r.video_url ? `<a class="ph-video-link" href="${escHtml(r.video_url)}" target="_blank" rel="noopener">${escHtml(r.video_title || r.video_id || '—')}</a>` : escHtml(r.video_title || '—');
            const handle = r.channel_handle ? ('@' + escHtml(r.channel_handle.replace(/^@/, ''))) : '';
            const profName = escHtml(r.profile_name || r.profile_id || '');
            const meta = handle ? `<span class="ph-table-meta">${handle}</span>` : '';
            const geo = r.geo ? escHtml(r.geo.toUpperCase()) : '—';
            // 1.0.230: distinguish "URL не словлен / не дотянулся из фида"
            // from real YT-page errors. The first set is yellow ⏳ — recoverable
            // by clicking Обновить позже когда видео проиндексируется. Real
            // errors (UNPLAYABLE, 404, region-block) stay red.
            const errMsg = r.stats_error || '';
            const isUrlGap = errMsg.startsWith('Ссылка не') || errMsg.startsWith('Не нашли');
            const shadow = isErr
                ? (isUrlGap
                    ? `<span class="ph-shadow-pending" title="${escHtml(errMsg)}">Ждём индексацию</span>`
                    : `<span class="ph-shadow-yes" title="${escHtml(errMsg)}">ОШИБКА</span>`)
                : (isPending
                    ? '<span class="ph-shadow-no">—</span>'
                    : (r.shadowban
                        ? '<span class="ph-shadow-yes">Да 🔴</span>'
                        : '<span class="ph-shadow-no">Нет</span>'));
            const rowCls = isErr && !isUrlGap ? 'ph-row-err' : (isUrlGap ? 'ph-row-pending' : '');
            return `<tr class="${rowCls}">
                <td>${fmtDate(r.upload_ts)}</td>
                <td>${profName}${meta}</td>
                <td>${geo}</td>
                <td>${link}</td>
                <td class="td-num ${viewsClass}">${isPending ? '—' : fmtNum(views)}</td>
                <td class="td-num">${isPending ? '—' : fmtNum(r.likes || 0)}</td>
                <td class="td-num">${isPending ? '—' : fmtNum(r.comments || 0)}</td>
                <td class="td-num">${isPending ? '—' : er.toFixed(1) + '%'}</td>
                <td>${shadow}</td>
            </tr>`;
        }).join('');
    }

    function renderSummary(s) {
        s = s || {};
        const set = (id, v) => { const e = document.getElementById(id); if (e) e.textContent = v; };
        set('ph-pill-errors', fmtNum(s.errors || 0));
        set('ph-pill-zeros',  fmtNum(s.zeros || 0));
        set('ph-pill-low',    fmtNum(s.bucket_low || 0));
        set('ph-pill-high',   fmtNum(s.bucket_high || 0));
        set('ph-pill-videos', fmtNum(s.videos || 0));
        set('ph-pill-views',  fmtNum(s.views || 0));
        set('ph-pill-likes',  fmtNum(s.likes || 0));
        set('ph-pill-er',     (s.er_percent || 0).toFixed(1) + '%');
    }

    let ALL_ROWS = [];

    function applyFilter() {
        const q = (document.getElementById('ph-filter') || {}).value || '';
        const bucket = (document.getElementById('ph-bucket-filter') || {}).value || 'all';
        const ql = q.trim().toLowerCase();
        const filtered = ALL_ROWS.filter(r => {
            if (bucket !== 'all' && bucketOf(r) !== bucket) return false;
            if (!ql) return true;
            const hay = [
                r.profile_name, r.profile_id, r.geo, r.video_id, r.video_title, r.channel_handle
            ].filter(Boolean).join(' ').toLowerCase();
            return hay.indexOf(ql) >= 0;
        });
        const cnt = document.getElementById('ph-row-count');
        if (cnt) cnt.textContent = `Строк: ${filtered.length}`;
        renderRows(filtered);
    }

    async function load() {
        try {
            const r = await fetch('/api/proliv/history');
            const j = await r.json();
            if (!j.ok) {
                if (window.EmberToast) window.EmberToast(j.error || 'Не удалось загрузить историю', 'err');
                if (window.EmberLog) window.EmberLog('WARN', `proliv-history /history FAIL err='${String(j.error||'').slice(0,160)}'`, {page:'proliv_history'});
                return;
            }
            ALL_ROWS = j.rows || [];
            renderSummary(j.summary);
            applyFilter();
            if (window.EmberLog) window.EmberLog('INFO', `proliv-history LOAD rows=${ALL_ROWS.length} videos=${(j.summary||{}).videos||0}`, {page:'proliv_history'});
        } catch (e) {
            if (window.EmberToast) window.EmberToast('Сеть: ' + (e.message || e), 'err');
            if (window.EmberLog) window.EmberLog('ERROR', `proliv-history fetch threw: ${e && e.message || e}`, {page:'proliv_history'});
        }
    }

    async function refresh() {
        const btn = document.getElementById('ph-refresh');
        const msg = document.getElementById('ph-msg');
        if (!btn) return;
        const orig = btn.textContent;
        btn.disabled = true;
        btn.textContent = 'Обновляю…';
        if (msg) { msg.textContent = 'Скрейпим YouTube партиями…'; msg.className = 'onb-msg'; }
        if (window.EmberLog) window.EmberLog('INFO', 'proliv-history REFRESH CLICK', {page:'proliv_history'});
        try {
            const r = await fetch('/api/proliv/history/refresh', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: '{}',
            });
            const j = await r.json();
            if (!j.ok) {
                if (window.EmberToast) window.EmberToast(j.error || 'Не удалось обновить', 'err');
                if (msg) { msg.textContent = j.error || 'Ошибка'; msg.className = 'onb-msg err'; }
                if (window.EmberLog) window.EmberLog('WARN', `proliv-history REFRESH FAIL err='${String(j.error||'').slice(0,160)}'`, {page:'proliv_history'});
                return;
            }
            if (window.EmberLog) window.EmberLog('INFO', `proliv-history REFRESH DONE refreshed=${j.refreshed} errors=${j.errors} backfilled=${j.backfilled||0} scanned=${j.total_scanned}`, {page:'proliv_history'});
            const extras = (j.backfilled || 0) ? ` · дотянули ссылок: ${j.backfilled}` : '';
            if (msg) {
                msg.textContent = j.message || `Обновлено: ${j.refreshed}, ошибок: ${j.errors}${extras}`;
                msg.className = 'onb-msg ' + (j.errors ? 'warn' : 'ok');
            }
            await load();
        } catch (e) {
            if (window.EmberToast) window.EmberToast('Сеть: ' + (e.message || e), 'err');
            if (window.EmberLog) window.EmberLog('ERROR', `proliv-history REFRESH fetch threw: ${e && e.message || e}`, {page:'proliv_history'});
        } finally {
            btn.disabled = false;
            btn.textContent = orig;
        }
    }

    const refBtn = document.getElementById('ph-refresh');
    if (refBtn) refBtn.addEventListener('click', refresh);
    const fil = document.getElementById('ph-filter');
    if (fil) {
        let t;
        fil.addEventListener('input', () => {
            clearTimeout(t);
            t = setTimeout(applyFilter, 120);
        });
    }
    const buck = document.getElementById('ph-bucket-filter');
    if (buck) buck.addEventListener('change', applyFilter);

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