{% extends 'base.html' %}
{% block title %}Login - BlickBox{% endblock %}
{% block content %}
<div class="form-box" style="background-image: url('https://lovethynerd.com/wp-content/uploads/2023/10/110723-article-BG.jpg');">
    <div>
        <h2>Welcome Back!</h2>
        <form id="login-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="password">Password</label>
                <input type="password" id="password" name="password" required minlength="6">
            </div>
            <button type="submit" id="login-btn">Log In</button>
            <p class="error" id="error-message"></p>
            <p class="success" id="success-message"></p>
            <p>
                <a href="{% url 'forgot_password' %}" class="link">Forgot Password?</a>
            </p>
            <p>
                Don’t have an account? <a href="{% url 'signup' %}" class="link">Sign Up</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('login-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const loginBtn = document.getElementById('login-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 (password.length < 6) {
            errorMessage.textContent = 'Password must be at least 6 characters';
            errorMessage.style.display = 'block';
            return;
        }

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

        try {
            const response = await fetch('/api/login/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, 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 = 'Login successful!';
                successMessage.style.display = 'block';
                setTimeout(() => { window.location.href = '/home/'; }, 1000);
            } else {
                errorMessage.textContent = data.error || data.message || 'Invalid username or password';
                errorMessage.style.display = 'block';
            }
        } catch (err) {
            errorMessage.textContent = 'Unable to connect to the server. Please try again.';
            errorMessage.style.display = 'block';
        } finally {
            loginBtn.disabled = false;
        }
    });
</script>
{% endblock %}