<section class="w-full py-12 md:py-24 lg:py-32">
    <div class="container mx-auto px-4 md:px-6">
        <div class="mx-auto max-w-sm bg-white shadow-lg rounded-lg">
            <div class="p-6">
                <h2 class="text-xl font-headline font-bold">Login</h2>
                <p class="text-gray-500 mt-2">
                    Sign in to your account
                </p>
            </div>
            <div class="p-6 pt-0">
                <% if (error) { %>
                    <div class="mb-4 text-red-600 text-sm text-center"><%= error %></div>
                    <% } %>
                    <form id="login-form" action="#" method="POST">
                        <div class="grid gap-4">
                            <div class="grid gap-2">
                                <label for="email" class="text-sm font-medium">Email</label>
                                <input
                                id="email"
                                name="email"
                                type="email"
                                placeholder="m@example.com"
                                required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                                />
                            </div>
                            <div class="grid gap-2">
                                <label for="password" class="text-sm font-medium">Password</label>
                                <input
                                id="password"
                                name="password"
                                type="password"
                                required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"
                                />
                            </div>
                            <button
                            type="submit"
                            class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
                            >
                            Sign in
                        </button>
                    </div>
                </form>
                <div class="mt-4 text-center text-sm">
                    <a href="/auth/forgot-password" class="text-blue-600 hover:underline">Forgot password?</a>
                    <span class="mx-2">|</span>
                    <a href="/auth/register" class="text-blue-600 hover:underline">Create an account</a>
                </div>
            </div>
        </div>
    </div>
</section>

<script nonce="<%= nonce %>">
    document.getElementById('login-form').addEventListener('submit', async function(e) {
        e.preventDefault();

        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value;

        if (!email || !password) {
            return Swal.fire({
                icon: 'warning',
                title: 'Missing Fields',
                text: 'Please enter both email and password.'
            });
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            return Swal.fire({
                icon: 'error',
                title: 'Invalid Email',
                text: 'Please enter a valid email address.'
            });
        }

        try {
            const response = await api.post('/api/v1/auth/login', {
                email,
                password
            });

            localStorage.setItem('jwtToken', response.data.token);

            Swal.fire({
                icon: 'success',
                title: 'Login Successful',
                text: 'Welcome back!',
                timer: 2000,
                showConfirmButton: false
            }).then(() => {
                window.location.href = '/student/dashboard';
            });

        } catch (err) {
            console.error('Login error:', err);
            document.getElementById('login-form').reset();

            const message = err.response?.data?.message || 'Login failed. Please try again.';
            Swal.fire({
                icon: 'error',
                title: 'Login Failed',
                text: message
            });
        }
    });

    lucide.createIcons();
</script>
