{% extends "base.html" %}
{% block page_title %}{{ t('proxies.title') }}{% endblock %}
{% block content %}
<div class="card">
    <h2>{{ t('proxies.pool_title') }}</h2>
    <p class="card-hint">
        {{ t('proxies.pool_hint') }}
    </p>
    <div class="btn-row">
        <button class="btn" id="proxies-add" data-icon="plus">{{ t('common.add') }}</button>
        <button class="btn ghost" id="proxies-import" data-icon="save">{{ t('proxies.import_txt') }}</button>
        <button class="btn ghost" id="proxies-check" data-icon="spark">{{ t('proxies.checker') }}</button>
        <button class="btn ghost" id="proxies-check-api" data-icon="info" title="Глубокая проверка через proxycheck.io: страна, тип (Residential/Datacenter/Mobile), риск-скор. Free tier: 1000 запросов/день.">Чекер API</button>
        <span id="proxies-check-status" style="color:var(--text-lo);font-size:11.5px;margin-left:8px;align-self:center"></span>
    </div>
    <input type="file" id="proxies-file" accept=".txt,text/plain" hidden>
    <form id="proxies-add-form" hidden style="margin-top:14px; display:flex; align-items:center; flex-wrap:wrap;">
        <input type="text" class="input" id="proxies-add-input" style="flex:1; min-width:280px;" placeholder="host:port  или  host:port:user:pass  или  socks5://user:pass@host:port" autocomplete="off">
        <button type="submit" class="btn" data-icon="plus">{{ t('common.add') }}</button>
        <button type="button" class="btn ghost" id="proxies-add-cancel" data-icon="xmark">{{ t('common.cancel') }}</button>
    </form>
</div>

<div class="card">
    <h2>{{ t('proxies.list_title') }}</h2>
    <div id="proxies-list-wrap"></div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function(){
    const STORAGE_KEY = 'ember.proxies';

    function load() {
        try {
            const raw = localStorage.getItem(STORAGE_KEY);
            return raw ? JSON.parse(raw) : [];
        } catch (e) { return []; }
    }
    function save(list) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
    }

    // Parse one line into a structured proxy. Accepts:
    //   host:port
    //   host:port:user:pass
    //   proto://user:pass@host:port
    //   proto://host:port
    function parse(line) {
        line = (line || '').trim();
        if (!line) return null;
        // proto://[user:pass@]host:port
        const m1 = line.match(/^([a-z0-9]+):\/\/(?:([^:]+):([^@]+)@)?([^:]+):(\d+)\/?$/i);
        if (m1) return { proto: m1[1].toLowerCase(), user: m1[2] || null, pass: m1[3] || null, host: m1[4], port: parseInt(m1[5], 10), raw: line };
        // host:port:user:pass
        const m2 = line.match(/^([^:]+):(\d+):([^:]+):(.+)$/);
        if (m2) return { proto: 'http', user: m2[3], pass: m2[4], host: m2[1], port: parseInt(m2[2], 10), raw: line };
        // host:port
        const m3 = line.match(/^([^:]+):(\d+)$/);
        if (m3) return { proto: 'http', user: null, pass: null, host: m3[1], port: parseInt(m3[2], 10), raw: line };
        return null;
    }

    // Shared helper exposed by app.js — see window.EmberHelpers. Inline
    // fallback kept in case this template loads before app.js (shouldn't
    // happen with current ordering, but cheap insurance).
    const escapeHtml = (window.EmberHelpers && window.EmberHelpers.escapeHtml)
        || (s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])));

    function render() {
        const list = load();
        const wrap = document.getElementById('proxies-list-wrap');
        if (!wrap) return;
        if (list.length === 0) {
            wrap.innerHTML = `
                <div class="empty-state es-empty">
                    <div class="es-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div>
                    <div class="es-title">{{ t('proxies.list_empty') }}</div>
                    <div class="es-hint">Нажмите «Добавить» или «Импорт из txt», чтобы пополнить пул.</div>
                </div>`;
            return;
        }
        const rows = list.map((p, i) => {
            const auth = (p.user && p.pass) ? `${escapeHtml(p.user)}:••••@` : '';
            // Status cell — populated by check() with alive / latency / IP.
            // Default empty so the column doesn't take space when nothing
            // has been checked.
            const checkSvg = '<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"><polyline points="20 6 9 17 4 12"/></svg>';
            const xSvg = '<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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
            // Build status cell: live latency + IP, plus optional API
            // enrichment line below (country / type / risk).
            let status;
            if (!p._check) {
                status = `<span style="color:var(--text-mute);font-size:11px">не проверен</span>`;
            } else if (!p._check.alive) {
                status = `<span style="color:var(--danger);font-size:11px;display:inline-flex;align-items:center;gap:4px" title="${escapeHtml(p._check.error || 'unreachable')}">${xSvg} мёртвый</span>`;
            } else {
                const headLine = `<span style="color:var(--success);font-size:11px;display:inline-flex;align-items:center;gap:4px">${checkSvg} ${p._check.latency_ms}ms${p._check.ip_seen ? ' · ' + escapeHtml(p._check.ip_seen) : ''}</span>`;
                let apiLine = '';
                if (p._check.api && Object.keys(p._check.api).length) {
                    const a = p._check.api;
                    const bits = [];
                    if (a.country) bits.push(escapeHtml(a.country));
                    if (a.type) {
                        const typeColor = a.type === 'Residential' || a.type === 'Mobile'
                            ? 'var(--success)'
                            : (a.type === 'Datacenter' ? 'var(--warning)' : 'var(--text-lo)');
                        bits.push(`<span style="color:${typeColor}">${escapeHtml(a.type)}</span>`);
                    }
                    if (a.risk != null) {
                        const riskColor = a.risk >= 67 ? 'var(--danger)' : (a.risk >= 34 ? 'var(--warning)' : 'var(--success)');
                        bits.push(`<span style="color:${riskColor}" title="risk-score 0-100">risk ${a.risk}</span>`);
                    }
                    if (a.vpn) bits.push('<span style="color:var(--warning)" title="VPN flag from proxycheck.io">VPN</span>');
                    if (bits.length) apiLine = `<div style="font-size:10.5px;color:var(--text-lo);margin-top:2px">${bits.join(' · ')}</div>`;
                }
                status = headLine + apiLine;
            }
            return `<tr>
                <td><code style="font-family:var(--font-mono); font-size:12px;">${escapeHtml(p.proto)}</code></td>
                <td><code style="font-family:var(--font-mono); font-size:12px;">${auth}${escapeHtml(p.host)}:${p.port}</code></td>
                <td>${status}</td>
                <td style="text-align:right;"><button class="btn ghost btn-sm" data-proxy-del="${i}">×</button></td>
            </tr>`;
        }).join('');
        wrap.innerHTML = `
            <div style="margin-bottom:8px; color: var(--text-lo); font-size:12px;">Всего: ${list.length}</div>
            <table style="width:100%; border-collapse: collapse;">
                <thead>
                    <tr style="color:var(--text-lo); font-size:11px; text-transform:uppercase; letter-spacing:0.4px;">
                        <th style="text-align:left; padding:6px 10px; width:80px;">Протокол</th>
                        <th style="text-align:left; padding:6px 10px;">Адрес</th>
                        <th style="text-align:left; padding:6px 10px; width:200px">Статус</th>
                        <th style="width:48px;"></th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>`;
        wrap.querySelectorAll('[data-proxy-del]').forEach(btn => {
            btn.addEventListener('click', () => {
                const idx = parseInt(btn.dataset.proxyDel, 10);
                const list = load();
                list.splice(idx, 1);
                save(list);
                render();
                if (window.EmberToast) window.EmberToast('Прокси удалена', 'info');
            });
        });
    }

    function add(line) {
        const p = parse(line);
        if (!p) {
            if (window.EmberToast) window.EmberToast('Не получилось разобрать строку: ' + line, 'err');
            return false;
        }
        const list = load();
        list.push(p);
        save(list);
        render();
        return true;
    }

    function importTxt(text) {
        const lines = (text || '').split(/\r?\n/).map(s => s.trim()).filter(Boolean);
        let ok = 0, fail = 0;
        const list = load();
        for (const line of lines) {
            const p = parse(line);
            if (p) { list.push(p); ok++; } else { fail++; }
        }
        save(list);
        render();
        if (window.EmberToast) {
            window.EmberToast(`Импортировано ${ok}, пропущено ${fail}`, fail ? 'warn' : 'ok');
        }
    }

    // Wire buttons
    const addBtn = document.getElementById('proxies-add');
    const form   = document.getElementById('proxies-add-form');
    const inp    = document.getElementById('proxies-add-input');
    const cancel = document.getElementById('proxies-add-cancel');
    const impBtn = document.getElementById('proxies-import');
    const file   = document.getElementById('proxies-file');

    if (addBtn && form) {
        addBtn.addEventListener('click', () => {
            form.hidden = false;
            inp.focus();
        });
    }
    if (cancel) {
        cancel.addEventListener('click', () => {
            form.hidden = true;
            inp.value = '';
        });
    }
    if (form) {
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const line = inp.value;
            if (window.EmberLog) window.EmberLog('INFO', `proxies-add CLICK line_len=${(line||'').length}`, {page:'proxies'});
            if (add(line)) {
                if (window.EmberToast) window.EmberToast('Прокси добавлена', 'ok');
                inp.value = '';
                form.hidden = true;
            } else {
                if (window.EmberLog) window.EmberLog('WARN', `proxies-add: parse FAIL '${String(line).slice(0,80)}'`, {page:'proxies'});
            }
        });
    }
    if (impBtn && file) {
        impBtn.addEventListener('click', () => {
            if (window.EmberLog) window.EmberLog('INFO', 'proxies-import CLICK', {page:'proxies'});
            file.click();
        });
        file.addEventListener('change', () => {
            const f = file.files && file.files[0];
            if (!f) return;
            const r = new FileReader();
            r.onload = () => {
                const text = String(r.result || '');
                if (window.EmberLog) window.EmberLog('INFO', `proxies-import file=${f.name} bytes=${text.length}`, {page:'proxies'});
                importTxt(text);
            };
            r.readAsText(f, 'utf-8');
            file.value = '';  // allow re-importing the same file later
        });
    }

    // Checker — POSTs all proxies to backend in one batch, attaches the
    // result to each row's _check field and re-renders. Backend handles
    // concurrency (sem=20) so we just await the whole list.
    const checkBtn = document.getElementById('proxies-check');
    const checkApiBtn = document.getElementById('proxies-check-api');
    const checkStatus = document.getElementById('proxies-check-status');

    async function runChecker(mode, btn) {
        const list = load();
        if (window.EmberLog) window.EmberLog('INFO', `proxies-check CLICK mode=${mode} count=${list.length}`, {page:'proxies'});
        if (!list.length) {
            if (window.EmberLog) window.EmberLog('WARN', 'proxies-check: empty list', {page:'proxies'});
            if (window.EmberToast) window.EmberToast('Сначала добавьте прокси', 'err');
            return;
        }
        const all = [checkBtn, checkApiBtn].filter(Boolean);
        all.forEach(b => b.disabled = true);
        const origText = btn.textContent;
        btn.textContent = mode === 'api' ? 'API проверка…' : 'Проверяю…';
        if (checkStatus) checkStatus.textContent = `проверяю ${list.length} прокси${mode === 'api' ? ' (через API)' : ''}…`;
        try {
            const res = await fetch('/api/proxies/check', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ proxies: list, mode: mode }),
            });
            const d = await res.json();
            if (!d || !d.ok) throw new Error(d && d.error || 'unknown');
            const results = d.results || [];
            let alive = 0, dead = 0;
            results.forEach((r, i) => {
                if (list[i]) {
                    list[i]._check = r;
                    if (r.alive) alive++; else dead++;
                }
            });
            save(list);
            render();
            if (checkStatus) checkStatus.textContent = `готово: ${alive} живых, ${dead} мёртвых`;
            if (window.EmberLog) window.EmberLog('INFO', `proxies-check DONE mode=${mode} alive=${alive} dead=${dead}`, {page:'proxies'});
            if (window.EmberToast) {
                window.EmberToast(`Чекер: ${alive} живых, ${dead} мёртвых`, dead > 0 ? 'warn' : 'ok');
            }
        } catch (e) {
            if (window.EmberLog) window.EmberLog('ERROR', `proxies-check FAIL mode=${mode} err='${String(e && e.message || e).slice(0,160)}'`, {page:'proxies'});
            if (checkStatus) checkStatus.textContent = '';
            if (window.EmberToast) window.EmberToast('Ошибка: ' + (e.message || e), 'err');
        } finally {
            all.forEach(b => b.disabled = false);
            btn.textContent = origText;
        }
    }
    if (checkBtn)    checkBtn.addEventListener('click',    () => runChecker('fast', checkBtn));
    if (checkApiBtn) checkApiBtn.addEventListener('click', () => runChecker('api',  checkApiBtn));

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