<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Verification - GadgetGo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
</head>

<body class="bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl p-8 max-w-md w-full text-center">
        <div id="loading" class="space-y-4">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                <span class="material-symbols-outlined text-5xl text-blue-600 animate-spin">sync</span>
            </div>
            <h1 class="text-2xl font-bold text-gray-900">Verifying your email...</h1>
            <p class="text-gray-500">Please wait while we confirm your account.</p>
        </div>

        <div id="success" class="hidden space-y-4">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
                <span class="material-symbols-outlined text-5xl text-green-600">check_circle</span>
            </div>
            <h1 class="text-2xl font-bold text-gray-900">Email Verified!</h1>
            <p class="text-gray-600">Your account has been successfully verified.</p>
            <p class="text-sm text-gray-500">Redirecting you to the app...</p>
            <div class="animate-pulse flex justify-center gap-2">
                <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                <div class="w-2 h-2 bg-blue-600 rounded-full" style="animation-delay: 0.2s"></div>
                <div class="w-2 h-2 bg-blue-600 rounded-full" style="animation-delay: 0.4s"></div>
            </div>
        </div>

        <div id="error" class="hidden space-y-4">
            <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto">
                <span class="material-symbols-outlined text-5xl text-red-600">error</span>
            </div>
            <h1 class="text-2xl font-bold text-gray-900">Verification Failed</h1>
            <p id="error-message" class="text-gray-600"></p>
            <a href="home.html" class="inline-block px-6 py-3 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 transition">
                Go to App
            </a>
        </div>
    </div>

    <script>
        // Get token from URL
        const urlParams = new URLSearchParams(window.location.search);
        const token = urlParams.get('token');

        if (!token) {
            showError('Invalid verification link');
        } else {
            verifyEmail(token);
        }

        async function verifyEmail(token) {
            try {
                const response = await fetch(`../server/auth_v2.php?action=verify&token=${token}`);
                const data = await response.json();

                if (data.success) {
                    // Store user data and token
                    localStorage.setItem('ghadget_user', JSON.stringify(data.user));
                    localStorage.setItem('ghadget_token', data.token);

                    // Show success
                    document.getElementById('loading').classList.add('hidden');
                    document.getElementById('success').classList.remove('hidden');

                    // Redirect after 2 seconds
                    setTimeout(() => {
                        window.location.href = 'home.html';
                    }, 2000);
                } else {
                    showError(data.error || 'Verification failed');
                }
            } catch (error) {
                console.error('Verification error:', error);
                showError('Network error. Please try again.');
            }
        }

        function showError(message) {
            document.getElementById('loading').classList.add('hidden');
            document.getElementById('error').classList.remove('hidden');
            document.getElementById('error-message').textContent = message;
        }
    </script>
</body>

</html>