{% extends "base.html" %}
{% block title %}Connexion — Aura{% endblock %}

{% block content %}
    <div style="max-width: 420px; margin: 5rem auto;">
        <div style="text-align: center; margin-bottom: 2rem;">
            <div style="font-size: 3rem;">⬡</div>
            <h1 style="font-size: 1.5rem; font-weight: 700; color: #7c6af7; margin-top: 0.5rem;">Aura</h1>
            <p style="color: #9ca3af; margin-top: 0.5rem;">Connectez-vous pour configurer votre installation</p>
        </div>

        <div class="card">
            <div id="alert" style="display:none;"></div>

            <div>
                <label>Email</label>
                <input type="email" id="email" placeholder="vous@exemple.com">
            </div>
            <div>
                <label>Clé API</label>
                <input type="password" id="api_key" placeholder="ak_••••••••••••••••">
                <p style="color: #6b7280; font-size: 0.75rem; margin-top: -0.6rem; margin-bottom: 1rem;">
                    Générée depuis votre dashboard → Paramètres → Clés API
                </p>
            </div>
            <button class="btn btn-primary" style="width:100%;" onclick="login()">
                Se connecter
            </button>
        </div>

        <p style="text-align:center; color:#4b5563; font-size:0.8rem; margin-top:1rem;">
            Aura v0.1.0 — CEVIA
        </p>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        async function login() {
            const btn = document.querySelector('button');
            const alertEl = document.getElementById('alert');
            btn.textContent = 'Connexion...';
            btn.disabled = true;
            alertEl.style.display = 'none';

            const payload = {
                email:   document.getElementById('email').value.trim(),
                api_key: document.getElementById('api_key').value.trim(),
            };

            if (!payload.email || !payload.api_key) {
                alertEl.className = 'alert alert-error';
                alertEl.textContent = 'Veuillez renseigner votre email et votre clé API.';
                alertEl.style.display = 'block';
                btn.textContent = 'Se connecter';
                btn.disabled = false;
                return;
            }

            try {
                const res = await fetch('/auth/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                const data = await res.json();

                if (res.ok) {
                    alertEl.className = 'alert alert-success';
                    alertEl.textContent = 'Connexion réussie ! Redirection...';
                    alertEl.style.display = 'block';
                    setTimeout(() => window.location.href = '/dashboard', 1000);
                } else {
                    alertEl.className = 'alert alert-error';
                    alertEl.textContent = data.detail || 'Erreur de connexion.';
                    alertEl.style.display = 'block';
                    btn.textContent = 'Se connecter';
                    btn.disabled = false;
                }
            } catch (e) {
                alertEl.className = 'alert alert-error';
                alertEl.textContent = 'Impossible de joindre le serveur Aura local.';
                alertEl.style.display = 'block';
                btn.textContent = 'Se connecter';
                btn.disabled = false;
            }
        }

        // Soumettre avec Entrée
        document.addEventListener('keydown', e => { if (e.key === 'Enter') login(); });
    </script>
{% endblock %}