<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">Forgot Password</h2>
                <p class="text-gray-500 mt-2">
                    Enter your email to receive a password reset link
                </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="forgot-password-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>
                            <button
                            type="submit"
                            class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
                            >
                            Send Reset Link
                        </button>
                    </div>
                </form>
                <div class="mt-4 text-center text-sm">
                    <a href="/auth/login" class="text-blue-600 hover:underline">Back to Login</a>
                </div>
            </div>
        </div>
    </div>
</section>

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

        if (!email) {
            alert('Please enter your email address.');
            return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert('Please enter a valid email address.');
            return;
        }

        try {
            const response = await fetch('http://localhost:3001/api/v1/auth/forgot-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ email })
            });
            const data = await response.json();

            if (!response.ok) {
                document.getElementById('forgot-password-form').reset();
                alert(data.message || 'Failed to send reset link. Please try again.');
                return;
            }

            alert('Password reset link sent to your email.');
            window.location.href = '/auth/login';
        } catch (err) {
            console.error('Error sending reset link:', err);
            document.getElementById('forgot-password-form').reset();
            alert('An error occurred while sending the reset link. Please try again.');
        }
    });

    // Initialize Lucide icons
    lucide.createIcons();
</script>