<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Auth Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
            max-width: 500px;
            width: 100%;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .subtitle {
            color: #666;
            text-align: center;
            margin-bottom: 30px;
            font-size: 14px;
        }
        
        .btn {
            width: 100%;
            padding: 15px 20px;
            margin: 10px 0;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .btn-google {
            background: #4285f4;
            color: white;
        }
        
        .btn-google:hover {
            background: #357ae8;
        }
        
        .btn-github {
            background: #24292e;
            color: white;
        }
        
        .btn-github:hover {
            background: #1a1e22;
        }
        
        .result {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            display: none;
        }
        
        .result.show {
            display: block;
        }
        
        .result h3 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .json-output {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            word-wrap: break-word;
            margin-top: 10px;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            display: none;
        }
        
        .loading.show {
            display: block;
        }
        
        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .info {
            background: #e7f3ff;
            border: 1px solid #b3d9ff;
            color: #004085;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .icon {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔐 Social Auth Test</h1>
        <p class="subtitle">Django REST API - Social Authentication</p>
        
        <div class="info">
            <strong>⚠️ Not:</strong> Bu sayfa sadece test amaçlıdır. Google için callback URL'ini Google Console'da ayarlamanız gerekiyor: <code>http://localhost:8000/api/v1/social/complete/google-oauth2/</code>
        </div>
        
        <button class="btn btn-google" onclick="loginWithGoogle()">
            <span class="icon">🔵</span>
            Login with Google
        </button>
        
        <button class="btn btn-github" onclick="loginWithGithub()">
            <span class="icon">⚫</span>
            Login with GitHub
        </button>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p style="margin-top: 10px;">Processing...</p>
        </div>
        
        <div class="result" id="result">
            <h3 id="resultTitle">Result</h3>
            <div id="resultContent"></div>
        </div>
    </div>

    <!-- Google OAuth2 Library -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    
    <script>
        const API_BASE = 'http://localhost:8000/api/v1';
        const GOOGLE_CLIENT_ID = '915364976256-691m0s87as2r5vdbqr96f6humblseobt.apps.googleusercontent.com';
        
        // Initialize Google OAuth
        function initGoogleAuth() {
            google.accounts.id.initialize({
                client_id: GOOGLE_CLIENT_ID,
                callback: handleGoogleCallback
            });
        }
        
        // Google Login
        function loginWithGoogle() {
            showLoading();
            google.accounts.id.prompt();
        }
        
        // Handle Google OAuth callback
        async function handleGoogleCallback(response) {
            console.log('Google OAuth Response:', response);
            
            // Google'dan gelen credential (JWT token)
            const credential = response.credential;
            
            try {
                // Backend'e gönder
                const result = await fetch(`${API_BASE}/auth/social/google-oauth2/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        access_token: credential,
                        id_token: credential
                    })
                });
                
                const data = await result.json();
                hideLoading();
                
                if (result.ok) {
                    showResult('success', 'Google Login Successful! ✅', data);
                } else {
                    showResult('error', 'Google Login Failed ❌', data);
                }
            } catch (error) {
                hideLoading();
                showResult('error', 'Error', { message: error.message });
            }
        }
        
        // GitHub Login
        async function loginWithGithub() {
            showResult('error', 'GitHub OAuth Flow', {
                message: 'GitHub OAuth requires server-side redirect flow.',
                instruction: 'Use this endpoint instead:',
                url: `${API_BASE}/social/login/github/`,
                note: 'Or use the curl command below for testing with a real GitHub token'
            });
        }
        
        // Show loading
        function showLoading() {
            document.getElementById('loading').classList.add('show');
            document.getElementById('result').classList.remove('show');
        }
        
        // Hide loading
        function hideLoading() {
            document.getElementById('loading').classList.remove('show');
        }
        
        // Show result
        function showResult(type, title, data) {
            const resultDiv = document.getElementById('result');
            const resultTitle = document.getElementById('resultTitle');
            const resultContent = document.getElementById('resultContent');
            
            resultDiv.className = `result show ${type}`;
            resultTitle.textContent = title;
            
            if (type === 'success' && data.user) {
                resultContent.innerHTML = `
                    <p><strong>User Info:</strong></p>
                    <p>Email: ${data.user.email}</p>
                    <p>Name: ${data.user.first_name} ${data.user.last_name}</p>
                    <p>ID: ${data.user.id}</p>
                    <p><strong>Tokens:</strong></p>
                    <div class="json-output">${JSON.stringify(data, null, 2)}</div>
                `;
            } else {
                resultContent.innerHTML = `
                    <div class="json-output">${JSON.stringify(data, null, 2)}</div>
                `;
            }
        }
        
        // Initialize when page loads
        window.onload = function() {
            if (typeof google !== 'undefined') {
                initGoogleAuth();
            }
        };
    </script>
</body>
</html>

