<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">Reset Password</h2>
                <p class="text-gray-500 mt-2">
                    Enter your new password
                </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="reset-password-form" action="#" method="POST">
                        <input type="hidden" name="token" value="<%= token %>">
                        <div class="grid gap-4">
                            <div class="grid gap-2">
                                <label for="newPassword" class="text-sm font-medium">New Password</label>
                                <input
                                id="newPassword"
                                name="newPassword"
                                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"
                            >
                            Reset Password
                        </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('reset-password-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const token = document.querySelector('input[name="token"]').value;
        const newPassword = document.getElementById('newPassword').value;

        if (!token || !newPassword) {
            alert('Please enter your new password.');
            return;
        }

        if (newPassword.length < 6) {
            alert('Password must be at least 6 characters long.');
            return;
        }

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

            if (!response.ok) {
                document.getElementById('reset-password-form').reset();
                alert(data.message || 'Password reset failed. Please try again.');
                return;
            }

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

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