{% extends "base.html" %}

{% block title %}Authentification en attente - Debug{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1><i class="fas fa-key"></i> Authentification en attente</h1>
            <p class="text-muted">Complétez l'authentification manuellement</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Étape 1: Autoriser l'application</h5>
                </div>
                <div class="card-body">
                    <p>Allez sur l'URL suivante dans votre navigateur :</p>
                    <div class="mb-3">
                        <a href="{{ device_code_data.verification_uri }}" target="_blank" class="btn btn-primary">
                            <i class="fas fa-external-link-alt"></i> {{ device_code_data.verification_uri }}
                        </a>
                    </div>
                    <p>Et entrez le code d'utilisateur :</p>
                    <div class="text-center my-3">
                        <h3><code>{{ device_code_data.user_code }}</code></h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Étape 2: Compléter l'authentification</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('outlook_test.complete_auth') }}" id="manual-form">
                        <input type="hidden" name="account_id" value="{{ account.id }}">
                        <input type="hidden" name="device_code" value="{{ device_code_data.device_code }}">
                        <div class="mb-3">
                            <label for="refresh_token" class="form-label">Refresh Token (optionnel - le polling auto le récupère)</label>
                            <textarea class="form-control" id="refresh_token" name="refresh_token" rows="3" placeholder="Laissez vide pour polling automatique"></textarea>
                        </div>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check"></i> Activer le compte
                        </button>
                        <a href="{{ url_for('outlook_test.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Annuler
                        </a>
                    </form>
                    
                    <div id="polling-status" class="mt-3" style="display: none;">
                        <div class="alert alert-info">
                            <i class="fas fa-spinner fa-spin"></i> Attente de l'autorisation... (polling automatique)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
(function() {
    const deviceCode = "{{ device_code_data.device_code }}";
    const accountId = {{ account.id }};
    const pollUrl = "{{ url_for('outlook_test.poll_auth', account_id=account.id) }}";
    const statusDiv = document.getElementById('polling-status');
    
    function poll() {
        fetch(pollUrl + '?device_code=' + encodeURIComponent(deviceCode))
            .then(r => r.json())
            .then(data => {
                if (data.status === 'success') {
                    window.location.href = data.redirect;
                } else if (data.status === 'error') {
                    statusDiv.innerHTML = '<div class="alert alert-danger">Erreur: ' + data.message + '</div>';
                }
                // 'pending' : continuer le polling
            })
            .catch(err => {
                statusDiv.innerHTML = '<div class="alert alert-warning">Erreur réseau: ' + err + '</div>';
            });
    }
    
    // Démarrer le polling auto
    statusDiv.style.display = 'block';
    const interval = setInterval(poll, 5000); // Toutes les 5 secondes
    poll(); // Premier appel immédiat
})();
</script>

{% endblock %}