<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TelePush — Активация</title>
    <link href="{{ url_for('static', filename='bootstrap-icons.min.css') }}" rel="stylesheet">
    <!-- Inter font — локально через style.css @font-face (не CDN, иначе ломается рендер без интернета). -->
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <div class="login-logo">
                <img src="{{ url_for('static', filename='logo.svg') }}" alt="TelePush" style="width:72px;height:72px;margin-bottom:12px;">
                <h1>TelePush</h1>
                <p>Войдите по лицензионному ключу</p>
            </div>

            <div id="login-form">
                <label class="form-label">Лицензионный ключ</label>
                <input type="text" class="form-control key-input" id="license-key"
                    placeholder="Вставьте ключ"
                    maxlength="40" autocomplete="off" spellcheck="false">

                <button class="btn btn-accent btn-lg w-100 mt-3" onclick="activate()" id="btn-activate">
                    <i class="bi bi-key"></i> Активировать
                </button>

                {% if restore_available %}
                <div style="margin-top:14px;padding:10px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;font-size:0.85rem;color:var(--text-muted);">
                    <div style="margin-bottom:8px;">
                        <i class="bi bi-shield-check" style="color:var(--accent-light);"></i>
                        Этот ПК уже активировался ранее — найден локальный бэкап ключа.
                    </div>
                    <button class="btn btn-outline w-100" onclick="restore()" id="btn-restore">
                        <i class="bi bi-arrow-counterclockwise"></i> Восстановить из бэкапа
                    </button>
                </div>
                {% endif %}

                <div id="login-error" style="display:none;margin-top:12px;text-align:center;color:var(--danger);font-size:0.85rem;"></div>
                <div id="login-loading" style="display:none;margin-top:12px;text-align:center;color:var(--text-muted);font-size:0.85rem;">
                    <i class="bi bi-arrow-repeat" style="animation:spin 1s linear infinite;display:inline-block;"></i>
                    Проверка ключа...
                </div>
            </div>

            <div style="margin-top:24px;text-align:center;font-size:0.75rem;color:var(--text-muted);">
                Нет ключа? <a href="https://t.me/TP_supports" style="color:var(--accent-light);text-decoration:none;">Напишите нам</a>
            </div>
        </div>
    </div>

    <style>
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    </style>

    <script>
    function activate() {
        var key = document.getElementById('license-key').value.trim();
        if (!key) return;

        var btn = document.getElementById('btn-activate');
        var err = document.getElementById('login-error');
        var loading = document.getElementById('login-loading');

        btn.disabled = true;
        err.style.display = 'none';
        loading.style.display = 'block';

        fetch('/auth/license', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({key: key})
        })
        .then(function(r) { return r.json(); })
        .then(function(d) {
            loading.style.display = 'none';
            if (d.ok) {
                window.location.href = d.redirect || '/';
            } else {
                err.textContent = d.error || 'Неверный ключ';
                err.style.display = 'block';
                btn.disabled = false;
            }
        })
        .catch(function(e) {
            loading.style.display = 'none';
            err.textContent = 'Ошибка сети: ' + e.message;
            err.style.display = 'block';
            btn.disabled = false;
        });
    }

    // Enter key
    document.getElementById('license-key').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') activate();
    });

    function restore() {
        var btn = document.getElementById('btn-restore');
        var actBtn = document.getElementById('btn-activate');
        var err = document.getElementById('login-error');
        var loading = document.getElementById('login-loading');
        if (!btn) return;
        btn.disabled = true;
        actBtn.disabled = true;
        err.style.display = 'none';
        loading.style.display = 'block';
        loading.innerHTML = '<i class="bi bi-arrow-repeat" style="animation:spin 1s linear infinite;display:inline-block;"></i> Восстанавливаю...';
        fetch('/auth/license/restore', {method: 'POST'})
            .then(function(r) { return r.json(); })
            .then(function(d) {
                loading.style.display = 'none';
                if (d.ok) {
                    window.location.href = d.redirect || '/';
                } else {
                    err.textContent = d.error || 'Не удалось восстановить';
                    err.style.display = 'block';
                    btn.disabled = false;
                    actBtn.disabled = false;
                }
            })
            .catch(function(e) {
                loading.style.display = 'none';
                err.textContent = 'Ошибка сети: ' + e.message;
                err.style.display = 'block';
                btn.disabled = false;
                actBtn.disabled = false;
            });
    }

    // Auto-format key: uppercase только для TP-формата; промо/legacy-ключи mixed-case оставляем как есть.
    document.getElementById('license-key').addEventListener('input', function(e) {
        var v = e.target.value.replace(/[^a-zA-Z0-9\-]/g, '');
        if (/^tp-/i.test(v)) v = v.toUpperCase();
        e.target.value = v;
    });
    </script>
</body>
</html>
