{% extends 'base.html' %}
{% block title %}Sign Up - BlickBox{% endblock %}
{% block content %}
<div class="form-box" style="background-image: url('https://media.theeverymom.com/wp-content/uploads/2021/09/11181559/encanto-the-everymom-f-h.jpg');">
    <div>
        <h2>Create Your Account</h2>
        <form id="signup-form">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required minlength="6">
            </div>
            <button type="submit" id="signup-btn">Sign Up</button>
            <p class="error" id="error-message"></p>
            <p class="success" id="success-message"></p>
            <p>
                Already have an account? <a href="{% url 'login' %}" class="link">Log In</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    // Redirect to home if already logged in
    if (localStorage.getItem('access_token')) {
        window.location.href = '/home/';
    }

    document.getElementById('signup-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const username = document.getElementById('username').value.trim();
        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value;
        const signupBtn = document.getElementById('signup-btn');
        const errorMessage = document.getElementById('error-message');
        const successMessage = document.getElementById('success-message');

        if (username.length < 3) {
            errorMessage.textContent = 'Username must be at least 3 characters';
            errorMessage.style.display = 'block';
            return;
        }
        if (!email.includes('@') || !email.includes('.')) {
            errorMessage.textContent = 'Please enter a valid email address';
            errorMessage.style.display = 'block';
            return;
        }
        if (password.length < 6) {
            errorMessage.textContent = 'Password must be at least 6 characters';
            errorMessage.style.display = 'block';
            return;
        }

        signupBtn.disabled = true;
        errorMessage.style.display = 'none';
        successMessage.style.display = 'none';

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

            if (response.ok) {
                localStorage.setItem('access_token', data.access_token);
                localStorage.setItem('refresh_token', data.refresh_token);
                successMessage.textContent = 'Registration successful!';
                successMessage.style.display = 'block';
                setTimeout(() => { window.location.href = '/home/'; }, 1000);
            } else {
                errorMessage.textContent = data.error || data.message || 'Registration failed. Username or email may already exist.';
                errorMessage.style.display = 'block';
            }
        } catch (err) {
            errorMessage.textContent = 'Unable to connect to the server. Please try again.';
            errorMessage.style.display = 'block';
        } finally {
            signupBtn.disabled = false;
        }
    });
</script>
{% endblock %}