<!-- templates/login.html -->
{% extends 'base.html' %}
{% block title %}Login - BlickBox{% endblock %}
{% block content %}
<div class="form-box" style="position: relative; z-index: 2; background: rgba(0, 0, 0, 0.54); padding: 40px; border-radius: 8px; width: 100%; max-width: 400px; text-align: center; margin: auto;">
    <h2>Welcome Back!</h2>
    <form id="login-form">
        <div class="form-group" style="margin-bottom: 20px; text-align: left;">
            <label for="username" style="color: #FFFFFF; font-size: 16px; margin-bottom: 8px; display: block;">Username</label>
            <input type="text" id="username" name="username" required style="width: 100%; padding: 12px; border: 1px solid #FFFFFF; border-radius: 4px; background: rgba(0, 0, 0, 0.54); color: #FFFFFF; font-size: 16px;">
        </div>
        <div class="form-group" style="margin-bottom: 20px; text-align: left;">
            <label for="password" style="color: #FFFFFF; font-size: 16px; margin-bottom: 8px; display: block;">Password</label>
            <input type="password" id="password" name="password" required minlength="6" style="width: 100%; padding: 12px; border: 1px solid #FFFFFF; border-radius: 4px; background: rgba(0, 0, 0, 0.54); color: #FFFFFF; font-size: 16px;">
        </div>
        <button type="submit" id="login-btn" style="width: 100%; padding: 16px; background-color: #CE052D; border: none; border-radius: 4px; color: #FFFFFF; font-size: 18px; font-weight: bold; cursor: pointer;">Log In</button>
        <p class="error" id="error-message" style="display: none; margin-top: 10px; font-size: 14px; color: #FF4444; text-align: center;"></p>
        <p class="success" id="success-message" style="display: none; margin-top: 10px; font-size: 14px; color: #44FF44; text-align: center;"></p>
        <p style="margin-top: 20px;">
            Don’t have an account? <a href="{% url 'signup' %}" class="link" style="color: #CE052D; text-decoration: none;">Sign Up</a>
        </p>
    </form>
</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 %}