{% extends "base.html" %}

{% block title %}Register | Crawlio Intelligence{% endblock %}

{% block content %}
<section class="hero"
    style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--slack-purple);">
    <div class="container" style="display: flex; justify-content: center; width: 100%;">
        <div class="auth-card"
            style="width: 100%; max-width: 420px; padding: 2.5rem; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);">
            <div class="text-center" style="margin-bottom: 2rem;">
                <h1 style="color: #1d1c1d; margin-bottom: 0.5rem; font-weight: 800; font-size: 2rem;">Create Account
                </h1>
                <p style="color: #616061; font-size: 1.1rem;">Join Crawlio Intelligence today</p>
            </div>

            <form id="registerForm" style="text-align: left;">
                <div style="margin-bottom: 1.25rem;">
                    <label for="full_name"
                        style="display: block; margin-bottom: 0.5rem; color: #1d1c1d; font-weight: 600;">Full
                        Name</label>
                    <input type="text" id="full_name" name="full_name" placeholder="John Doe" required
                        style="width: 100%; padding: 0.9rem; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; color: #1d1c1d; transition: border 0.2s;">
                </div>

                <div style="margin-bottom: 1.25rem;">
                    <label for="email"
                        style="display: block; margin-bottom: 0.5rem; color: #1d1c1d; font-weight: 600;">Email</label>
                    <input type="email" id="email" name="email" placeholder="name@work-email.com" required
                        style="width: 100%; padding: 0.9rem; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; color: #1d1c1d; transition: border 0.2s;">
                </div>

                <div style="margin-bottom: 1.5rem;">
                    <label for="password"
                        style="display: block; margin-bottom: 0.5rem; color: #1d1c1d; font-weight: 600;">Password</label>
                    <input type="password" id="password" name="password" placeholder="Create a password" required
                        style="width: 100%; padding: 0.9rem; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; color: #1d1c1d; transition: border 0.2s;">
                </div>

                <button type="submit" class="btn-primary" style="width: 100%; font-size: 1.1rem; padding: 1rem;">
                    Sign Up
                </button>
            </form>

            <div class="text-center" style="margin-top: 2rem;">
                <p style="font-size: 0.95rem; color: #616061;">
                    Already have an account? <a href="/login"
                        style="color: var(--slack-blue); font-weight: 600; text-decoration: none;">Sign in</a>
                </p>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('registerForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData.entries());

        try {
            const response = await fetch('/auth/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                const result = await response.json();
                // Store in cookie
                document.cookie = `access_token=Bearer ${result.access_token}; path=/; max-age=1800; SameSite=Lax`;
                window.location.href = '/dashboard';
            } else {
                const err = await response.json();
                alert('Registration failed: ' + (err.detail || 'Unknown error'));
            }
        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        }
    });
</script>
{% endblock %}