<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">Sign Up</h2>
                <p class="text-gray-500 mt-2">
                    Enter your information to create an 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="register-form" action="#" method="POST">
                        <div class="grid gap-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div class="grid gap-2">
                                    <label for="first-name" class="text-sm font-medium">First name</label>
                                    <input
                                    id="first-name"
                                    name="firstName"
                                    placeholder="Max"
                                    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="last-name" class="text-sm font-medium">Last name</label>
                                    <input
                                    id="last-name"
                                    name="lastName"
                                    placeholder="Robinson"
                                    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>
                            <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"
                            >
                            Create an account
                        </button>
                    </div>
                </form>
                <div class="mt-4 text-center text-sm">
                    Already have an account?
                    <a href="/auth/login" class="text-blue-600 hover:underline">Login</a>
                </div>
            </div>
        </div>
    </div>
</section>

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

        const firstName = document.getElementById('first-name').value.trim();
        const lastName  = document.getElementById('last-name').value.trim();
        const email     = document.getElementById('email').value.trim();
        const password  = document.getElementById('password').value;

        if (!firstName || !lastName || !email || !password) {
            return Swal.fire({
                icon: 'warning',
                title: 'Missing Fields',
                text: 'Please fill out all required fields.'
            });
        }

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

        if (password.length < 6) {
            return Swal.fire({
                icon: 'error',
                title: 'Weak Password',
                text: 'Password must be at least 6 characters long.'
            });
        }

        try {
            const response = await api.post('/api/v1/auth/register', {
                fullName: `${firstName} ${lastName}`,
                email,
                password
            });

            Swal.fire({
                icon: 'success',
                title: 'Registration Successful',
                text: response.data.message || 'Account created successfully!',
                timer: 3000,
                showConfirmButton: false
            }).then(() => {
                window.location.href = '/auth/login';
            });

        } catch (err) {
            console.error('Error registering:', err);

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

            document.getElementById('register-form').reset();
        }
    });

    lucide.createIcons();
</script>
