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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login to Your App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
        font-family: 'Inter', sans-serif;
        padding: 20px;
    }

    .login-container {
        background-color: #ffffff;
        padding: 40px 30px;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 100%;
        max-width: 400px;
        transition: transform 0.3s ease;
    }

    .login-container:hover {
        transform: translateY(-5px);
    }

    .login-container h2 {
        font-size: 2rem;
        margin-bottom: 10px;
        color: #333;
        font-weight: 700;
    }

    .login-container p {
        color: #6c757d;
        font-size: 1rem;
        margin-bottom: 0;
    }

    .google-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #4285F4;
        color: white;
        border-radius: 50px;
        padding: 12px 30px;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
        margin-top: 30px;
    }

    .google-btn:hover {
        background-color: #357ae8;
        box-shadow: 0 6px 16px rgba(66, 133, 244, 0.5);
        transform: translateY(-2px);
    }

    .google-btn i {
        margin-right: 10px;
        font-size: 1.2em;
    }

    .text-danger {
        color: #dc3545;
        margin-top: 15px;
        font-size: 0.95rem;
    }

    .mt-4 {
        margin-top: 30px;
    }

    .text-muted {
        color: #6c757d;
        font-size: 0.95rem;
    }

    .text-muted a {
        color: #4285F4;
        text-decoration: none;
        font-weight: 600;
    }

    .text-muted a:hover {
        text-decoration: underline;
    }

    @media (max-width: 500px) {
        .login-container {
            padding: 30px 20px;
        }

        .login-container h2 {
            font-size: 1.8rem;
        }

        .google-btn {
            width: 100%;
            padding: 12px 0;
        }
    }
</style>

</head>

<body>

    <div class="login-container">
        <h2 class="mb-4">Welcome Back!</h2>
        <p>Sign in to continue to your account.</p>

        <a id="googleLoginBtn" class="google-btn" href="https://lm.warals.codetorise.com/auth/google/login">
            <i class="fab fa-google"></i> Sign in with Google
        </a>

        <p class="text-danger" id="errorMessage" style="display:none;"></p>

        <p class="mt-4 text-muted">
            Don't have an account? <a href="#">Sign Up</a>
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
document.addEventListener('DOMContentLoaded', function () {
    // Check if there is an access token in localStorage
    const existingAccessToken = localStorage.getItem('access_token');
    console.log(existingAccessToken);
    if (existingAccessToken) {
        // If token exists, redirect to home page
        window.location.href = '/home'; // adjust path if needed
        return; // stop executing the rest
    }

    const errorMessageDiv = document.getElementById('errorMessage');
    const googleLoginBtn = document.getElementById('googleLoginBtn');

    // Function to get query parameters from the URL
    function getQueryParams() {
        const params = {};
        window.location.search.substring(1).split("&").forEach(part => {
            const [key, value] = part.split("=");
            if (key && value) {
                params[decodeURIComponent(key)] = decodeURIComponent(value);
            }
        });
        return params;
    }

    const queryParams = getQueryParams();

    // Check if there's an error from the FastAPI callback
    if (queryParams.error) {
        errorMessageDiv.textContent = "Login failed: " + queryParams.error;
        errorMessageDiv.style.display = 'block';
    }

    // Get access token from URL fragment if present
    const fragmentParams = new URLSearchParams(window.location.hash.substring(1));
    const fragmentAccessToken = fragmentParams.get('access_token');

    if (fragmentAccessToken) {
        try {
            // Store the token in localStorage
            localStorage.setItem('access_token', fragmentAccessToken);
            // Redirect to the home page
            window.location.href = '/home';
        } catch (e) {
            console.error("Login Error:", e);
            errorMessageDiv.textContent = "An error occurred during login. Please try again.";
            errorMessageDiv.style.display = 'block';
        } finally {
            // Clear hash for a cleaner URL
            if (window.location.hash) {
                window.location.hash = '';
            }
        }
    }
});
</script>

</body>

</html>