<!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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- Inter font — локально через style.css @font-face. Раньше был Google Fonts 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="TP-XXXXXXXX-XXXXXXXX-XXXXXXXX"
                    maxlength="30" 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>

                <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/boberkurvateh" 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();
    });

    // Auto-format key
    document.getElementById('license-key').addEventListener('input', function(e) {
        var v = e.target.value.toUpperCase().replace(/[^A-Z0-9\-]/g, '');
        e.target.value = v;
    });
    </script>
</body>
</html>
