<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Auth - SPA Test (Token-Based)</title>
    <link rel="stylesheet" href="/static/spa-test.css">
    <!-- Google OAuth2 -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
    <div id="app">
        <!-- Navigation -->
        <nav class="navbar" id="navbar" style="display: none;">
            <div class="nav-container">
                <div class="nav-brand">🔐 Django Auth</div>
                <div class="nav-menu">
                    <span id="userEmail" class="user-email"></span>
                    <button onclick="logout()" class="btn-logout">Logout</button>
                </div>
            </div>
        </nav>

        <!-- Login Page -->
        <div id="loginPage" class="page">
            <div class="container">
                <div class="card">
                    <h1>Welcome Back! 👋</h1>
                    <p class="subtitle">Sign in to continue</p>
                    
                    <!-- Email/Password Login -->
                    <form id="loginForm" onsubmit="handleLogin(event)">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" id="email" placeholder="your@email.com" required>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" id="password" placeholder="••••••••" required>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            Sign In
                        </button>
                    </form>
                    
                    <div class="divider">OR</div>
                    
                    <!-- Social Login (Token-Based) -->
                    <div class="social-buttons">
                        <button onclick="loginWithGoogle()" class="btn btn-google">
                            🔵 Continue with Google
                        </button>
                        <button onclick="loginWithGitHub()" class="btn btn-github">
                            ⚫ Continue with GitHub
                        </button>
                    </div>
                    
                    <p class="footer-text">
                        Don't have an account? <a href="#" onclick="showRegister()">Sign up</a>
                    </p>
                </div>
                
                <div id="errorAlert" class="alert alert-error" style="display: none;"></div>
                <div class="info-box">
                    <strong>ℹ️ Token-Based Flow:</strong>
                    <p>Bu sayfa Nuxt/Next.js gibi çalışır:</p>
                    <ol>
                        <li>Frontend'de Google/GitHub OAuth</li>
                        <li>Access token alınır</li>
                        <li>Token Django'ya POST edilir</li>
                        <li>Django JWT token döner</li>
                        <li>JWT localStorage'a kaydedilir</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Register Page -->
        <div id="registerPage" class="page" style="display: none;">
            <div class="container">
                <div class="card">
                    <h1>Create Account 🎉</h1>
                    <p class="subtitle">Join us today</p>
                    
                    <form id="registerForm" onsubmit="handleRegister(event)">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" id="regEmail" placeholder="your@email.com" required>
                        </div>
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" id="firstName" placeholder="John" required>
                        </div>
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" id="lastName" placeholder="Doe" required>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" id="regPassword" placeholder="••••••••" required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" id="regPasswordConfirm" placeholder="••••••••" required>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            Create Account
                        </button>
                    </form>
                    
                    <p class="footer-text">
                        Already have an account? <a href="#" onclick="showLogin()">Sign in</a>
                    </p>
                </div>
                
                <div id="registerSuccess" class="alert alert-success" style="display: none;">
                    ✅ Account created! Please check your email to activate your account.
                </div>
            </div>
        </div>

        <!-- Dashboard Page -->
        <div id="dashboardPage" class="page" style="display: none;">
            <div class="container">
                <div class="card">
                    <h1>Dashboard 🎯</h1>
                    <p class="subtitle">Welcome to your account</p>
                    
                    <div class="profile-section">
                        <div class="profile-avatar">👤</div>
                        <div class="profile-info">
                            <h2 id="profileName">Loading...</h2>
                            <p id="profileEmail" class="text-muted">Loading...</p>
                            <span id="profileStatus" class="badge"></span>
                        </div>
                    </div>
                    
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon">📧</div>
                            <div class="stat-info">
                                <h3 id="userEmailStat">-</h3>
                                <p>Email Address</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">🔑</div>
                            <div class="stat-info">
                                <h3>JWT</h3>
                                <p>Authentication</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">📅</div>
                            <div class="stat-info">
                                <h3 id="joinedDate">-</h3>
                                <p>Member Since</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="token-section">
                        <h3>Your JWT Tokens 🔐</h3>
                        <div class="token-box">
                            <label>Access Token (from Django)</label>
                            <textarea id="accessToken" readonly></textarea>
                            <button onclick="copyToken('access')" class="btn btn-small">Copy</button>
                        </div>
                        <div class="token-box">
                            <label>Refresh Token (from Django)</label>
                            <textarea id="refreshToken" readonly></textarea>
                            <button onclick="copyToken('refresh')" class="btn btn-small">Copy</button>
                        </div>
                    </div>
                    
                    <button onclick="testProtectedEndpoint()" class="btn btn-primary">
                        🧪 Test Protected Endpoint
                    </button>
                </div>
            </div>
        </div>

        <!-- Loading Overlay -->
        <div id="loadingOverlay" class="loading-overlay" style="display: none;">
            <div class="spinner"></div>
            <p>Loading...</p>
        </div>
    </div>

    <script src="/static/spa-test.js"></script>
    
    <!-- Google OAuth Initialization -->
    <script>
        window.onload = function() {
            // Initialize Google OAuth
            if (typeof google !== 'undefined') {
                google.accounts.id.initialize({
                    client_id: '915364976256-691m0s87as2r5vdbqr96f6humblseobt.apps.googleusercontent.com',
                    callback: handleGoogleCallback
                });
            }
        };
    </script>
</body>
</html>
