{% extends "base.html" %}
{% block page_title %}{{ t('dashboard.title') }}{% endblock %}
{% block content %}
<div class="kpi-grid">
    <div class="kpi">
        <div class="kpi-label">{{ t('dashboard.kpi.running') }}</div>
        <div class="kpi-value" id="kpi-running">—</div>
        <div class="kpi-trend" id="kpi-running-hint">— {{ t('dashboard.kpi.running_hint') }}</div>
    </div>
    <div class="kpi">
        <div class="kpi-label">{{ t('dashboard.kpi.warmed') }}</div>
        <div class="kpi-value" id="kpi-warmed">—</div>
        <div class="kpi-trend" id="kpi-warmed-trend">{{ t('dashboard.kpi.delta_24h') }}</div>
    </div>
    <div class="kpi">
        <div class="kpi-label">Видео просмотрено всего</div>
        <div class="kpi-value" id="kpi-videos">—</div>
        <div class="kpi-trend" id="kpi-videos-trend">{{ t('dashboard.kpi.delta_24h') }}</div>
    </div>
    <div class="kpi">
        <div class="kpi-label">{{ t('dashboard.kpi.quota') }}</div>
        <div class="kpi-value">0 / 10000</div>
        <div class="kpi-trend">YouTube Data API</div>
    </div>
    <div class="kpi">
        <div class="kpi-label">{{ t('dashboard.kpi.antidetect') }}</div>
        <div class="kpi-value" style="font-size:18px;">{{ ANTIDETECTS[active_adapter].label }}</div>
        <div class="kpi-trend" id="adapter-state">{{ t('dashboard.kpi.checking') }}</div>
    </div>
    {# Health KPI — counts profiles missing Google credentials. Highlights
       the most common reason warmup fails to start ("0 задач, пропущено
       без учёток: N"). Click navigates to Прогрев where the user can
       fill them via the key icon on each card. #}
    <div class="kpi" style="cursor:pointer" data-nav="warmup" id="kpi-creds-health" title="Сколько профилей без сохранённого логина Google. Клик — перейти в Прогрев и заполнить.">
        <div class="kpi-label">Без учёток</div>
        <div class="kpi-value" id="kpi-creds-value" style="color: var(--text-mute);">—</div>
        <div class="kpi-trend" id="kpi-creds-hint">проверяю…</div>
    </div>
</div>

<script>
(function(){
    // Real KPI values — counts come from account_repo via /api/dashboard/kpi.
    // Pre-1.0.144 these tiles displayed hardcoded `0` and the operator
    // legitimately asked «после обновы данные не сохраняются?» — they
    // were saved, just never queried by the dashboard.
    fetch('/api/dashboard/kpi').then(r => r.json()).then(d => {
        if (!d || !d.ok) return;
        const set = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
        // Numeric KPIs count up from 0 (GSAP). Falls back to plain text if
        // EmberAnim is absent / reduced-motion (see ember-anim.js).
        const setNum = (id, v) => {
            const el = document.getElementById(id);
            if (!el) return;
            if (window.EmberAnim && window.EmberAnim.countUp) window.EmberAnim.countUp(el, v);
            else el.textContent = v;
        };
        setNum('kpi-running',  d.running || 0);
        setNum('kpi-warmed',   d.warmed_total || 0);
        setNum('kpi-videos',   d.videos_total || 0);
        const trend = (n) => n > 0 ? ('+' + n + ' за сутки') : '+0 за сутки';
        set('kpi-warmed-trend', trend(d.warmed_24h));
        set('kpi-videos-trend', trend(d.videos_24h));
        const runHint = document.getElementById('kpi-running-hint');
        if (runHint) {
            runHint.textContent = (d.running || 0) > 0
                ? d.running + ' профилей в работе сейчас'
                : '— ничего ещё не запущено';
        }
    }).catch(() => {});

    // Lazy probe of the bulk-creds endpoint to populate the «Без учёток»
    // KPI tile. Reuses the cached profile list if present so we don't
    // re-fetch on every dashboard visit.
    const valEl = document.getElementById('kpi-creds-value');
    const hintEl = document.getElementById('kpi-creds-hint');
    if (!valEl) return;
    Promise.all([
        fetch('/api/adapters/{{ active_adapter }}/profiles').then(r => r.json()).catch(() => null),
        fetch('/api/accounts/credentials/bulk').then(r => r.json()).catch(() => null),
    ]).then(([profD, credD]) => {
        const profiles = (profD && profD.ok && profD.profiles) || [];
        const creds = (credD && credD.ok && credD.accounts) || {};
        if (!profiles.length) {
            valEl.textContent = '—';
            hintEl.textContent = 'нет профилей в антидетекте';
            return;
        }
        const missing = profiles.filter(p => {
            const acc = creds[p.id];
            return !acc || !acc.has_password;
        }).length;
        valEl.textContent = missing;
        if (missing === 0) {
            valEl.style.color = 'var(--success)';
            hintEl.innerHTML = '<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px"><polyline points="20 6 9 17 4 12"/></svg>все ' + profiles.length + ' профилей готовы к прогреву';
        } else {
            valEl.style.color = missing > profiles.length / 2 ? 'var(--danger)' : 'var(--warning)';
            hintEl.textContent = 'из ' + profiles.length + ' профилей — клик заполнить';
        }
    });
})();
</script>

<div class="card" style="margin-top:18px;">
    <h2>{{ t('dashboard.quick.title') }}</h2>
    {# All are navigation shortcuts, not actions — no primary/ghost hierarchy. #}
    <div class="nav-group-label" style="margin-top:2px; color:var(--accent-hi);">YouTube</div>
    <div class="btn-row compact">
        <button class="btn ghost" data-nav="warmup">{{ t('dashboard.quick.warmup') }}</button>
        <button class="btn ghost" data-nav="accounts">{{ t('dashboard.quick.accounts') }}</button>
        <button class="btn ghost" data-nav="analytics">{{ t('dashboard.quick.analytics') }}</button>
        {% if mode == "advanced" %}
        <button class="btn ghost" data-nav="profiles">{{ t('dashboard.quick.profiles') }}</button>
        <button class="btn ghost" data-nav="proliv">{{ t('dashboard.quick.proliv') }}</button>
        {% endif %}
    </div>
    <div class="nav-group-label" style="margin-top:14px; color:#A66BFF;">RuTube</div>
    <div class="btn-row compact">
        <button class="btn ghost" data-nav="rutube_proliv">RuTube Залив</button>
        <button class="btn ghost" data-nav="rutube_warmup">RuTube Прогрев</button>
        <button class="btn ghost" data-nav="rutube_channel">RuTube Каналы</button>
        <button class="btn ghost" data-nav="rutube_accounts">RuTube Акки</button>
    </div>
</div>
{% endblock %}