@extends('layouts.app')

@section('title', 'Connexion Mobile QR Code')

@section('styles')
<style>
    .qr-container {
        max-width: 500px;
        margin: 2rem auto;
        text-align: center;
    }
    
    .qr-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        padding: 2rem;
    }
    
    .qr-header {
        margin-bottom: 1.5rem;
    }
    
    .qr-header h1 {
        color: #1565C0;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .qr-header p {
        color: #666;
        font-size: 0.9rem;
    }
    
    #qr-code-display {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
        margin: 1.5rem 0;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #qr-code-display svg {
        max-width: 250px;
        max-height: 250px;
    }
    
    .qr-timer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .qr-timer.warning {
        color: #ff9800;
    }
    
    .qr-timer.expired {
        color: #f44336;
    }
    
    .timer-value {
        font-weight: bold;
        font-size: 1.1rem;
        color: #1565C0;
    }
    
    .qr-timer.warning .timer-value {
        color: #ff9800;
    }
    
    .qr-timer.expired .timer-value {
        color: #f44336;
    }
    
    .btn-generate {
        background: #1565C0;
        color: white;
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-generate:hover {
        background: #0d47a1;
        transform: translateY(-1px);
    }
    
    .btn-generate:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }
    
    .instructions {
        background: #e3f2fd;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1.5rem;
        text-align: left;
    }
    
    .instructions h3 {
        color: #1565C0;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    .instructions ol {
        margin: 0;
        padding-left: 1.25rem;
        color: #333;
        font-size: 0.85rem;
    }
    
    .instructions li {
        margin-bottom: 0.5rem;
    }
    
    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #e3f2fd;
        border-top-color: #1565C0;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .success-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #e8f5e9;
        color: #2e7d32;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        margin-top: 1rem;
    }
</style>
@endsection

@section('content')
<div class="qr-container">
    <div class="qr-card">
        <div class="qr-header">
            <h1><i class="fas fa-qrcode"></i> Connexion Mobile</h1>
            <p>Scannez ce QR Code avec l'application Athena Contrôle</p>
        </div>
        
        <div id="qr-code-display">
            <button class="btn-generate" onclick="generateQRCode()">
                <i class="fas fa-sync-alt"></i>
                Générer un QR Code
            </button>
        </div>
        
        <div class="qr-timer" id="timer-display" style="display: none;">
            <i class="fas fa-clock"></i>
            <span>Expire dans <span class="timer-value" id="timer-value">5:00</span></span>
        </div>
        
        <button class="btn-generate" id="regenerate-btn" style="display: none;" onclick="generateQRCode()">
            <i class="fas fa-sync-alt"></i>
            Régénérer
        </button>
        
        <div class="instructions">
            <h3><i class="fas fa-info-circle"></i> Comment ça marche ?</h3>
            <ol>
                <li>Cliquez sur "Générer un QR Code"</li>
                <li>Ouvrez l'application <strong>Athena Contrôle</strong> sur votre téléphone</li>
                <li>Appuyez sur <strong>"Connexion par QR Code"</strong> sur l'écran de connexion</li>
                <li>Scannez le QR Code affiché ici</li>
                <li>Vous êtes connecté ! 🎉</li>
            </ol>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- QRCode.js library -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<script>
let timerInterval = null;
let expiresAt = null;

async function generateQRCode() {
    const display = document.getElementById('qr-code-display');
    const timerDisplay = document.getElementById('timer-display');
    const regenerateBtn = document.getElementById('regenerate-btn');
    
    // Afficher le loading
    display.innerHTML = '<div class="loading-spinner"></div>';
    timerDisplay.style.display = 'none';
    regenerateBtn.style.display = 'none';
    
    try {
        const response = await fetch('/api/qr-login/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Créer le canvas pour le QR code
            display.innerHTML = '<canvas id="qr-canvas"></canvas>';
            
            // Générer le QR code
            await QRCode.toCanvas(document.getElementById('qr-canvas'), data.qr_content, {
                width: 250,
                margin: 2,
                color: {
                    dark: '#1565C0',
                    light: '#ffffff'
                }
            });
            
            // Démarrer le timer
            expiresAt = Date.now() + (data.expires_in * 1000);
            startTimer();
            
            timerDisplay.style.display = 'flex';
            regenerateBtn.style.display = 'inline-flex';
            
        } else {
            display.innerHTML = `
                <div style="color: #f44336;">
                    <i class="fas fa-exclamation-circle" style="font-size: 2rem;"></i>
                    <p style="margin-top: 0.5rem;">${data.error || 'Erreur lors de la génération'}</p>
                    <button class="btn-generate" onclick="generateQRCode()" style="margin-top: 1rem;">
                        <i class="fas fa-redo"></i> Réessayer
                    </button>
                </div>
            `;
        }
    } catch (error) {
        display.innerHTML = `
            <div style="color: #f44336;">
                <i class="fas fa-exclamation-circle" style="font-size: 2rem;"></i>
                <p style="margin-top: 0.5rem;">Erreur de connexion</p>
                <button class="btn-generate" onclick="generateQRCode()" style="margin-top: 1rem;">
                    <i class="fas fa-redo"></i> Réessayer
                </button>
            </div>
        `;
    }
}

function startTimer() {
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    const timerDisplay = document.getElementById('timer-display');
    const timerValue = document.getElementById('timer-value');
    
    timerInterval = setInterval(() => {
        const remaining = Math.max(0, expiresAt - Date.now());
        const seconds = Math.floor(remaining / 1000);
        const minutes = Math.floor(seconds / 60);
        const secs = seconds % 60;
        
        timerValue.textContent = `${minutes}:${secs.toString().padStart(2, '0')}`;
        
        // Changer la couleur selon le temps restant
        timerDisplay.className = 'qr-timer';
        if (seconds <= 30) {
            timerDisplay.classList.add('warning');
        }
        
        if (seconds <= 0) {
            clearInterval(timerInterval);
            timerDisplay.classList.remove('warning');
            timerDisplay.classList.add('expired');
            timerValue.textContent = 'Expiré';
            
            // Afficher message d'expiration
            document.getElementById('qr-code-display').innerHTML = `
                <div style="color: #f44336;">
                    <i class="fas fa-clock" style="font-size: 2rem;"></i>
                    <p style="margin-top: 0.5rem;">QR Code expiré</p>
                    <button class="btn-generate" onclick="generateQRCode()" style="margin-top: 1rem;">
                        <i class="fas fa-sync-alt"></i> Générer un nouveau QR Code
                    </button>
                </div>
            `;
        }
    }, 1000);
}
</script>
@endsection