{% extends 'base.html' %}
{% block title %}Forgot Password - BlickBox{% endblock %}
{% block content %}
<div class="form-bo" style="background-image: url('https://lovethynerd.com/wp-content/uploads/2023/10/110723-article-BG.jpg');">
    <div>
        <h2>Reset Your Password</h2>
        <p>Enter your username or email, new password, and confirm your new password.</p>
        <form id="forgot-password-form">
            <div class="form-group">
                <label for="username_or_email">Username or Email</label>
                <input type="text" id="username_or_email" name="username_or_email" required>
            </div>
            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" id="new_password" name="new_password" required minlength="6">
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required minlength="6">
            </div>
            <button type="submit" id="reset-btn">Reset Password</button>
            <p class="error" id="error-message"></p>
            <p class="success" id="success-message"></p>
            <p>
                Back to <a href="{% url 'login' %}" class="link">Login</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    document.getElementById('forgot-password-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const usernameOrEmail = document.getElementById('username_or_email').value.trim();
        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        const resetBtn = document.getElementById('reset-btn');
        const errorMessage = document.getElementById('error-message');
        const successMessage = document.getElementById('success-message');

        if (!usernameOrEmail) {
            errorMessage.textContent = 'Username or email is required';
            errorMessage.style.display = 'block';
            return;
        }
        if (newPassword.length < 6) {
            errorMessage.textContent = 'New password must be at least 6 characters';
            errorMessage.style.display = 'block';
            return;
        }
        if (newPassword !== confirmPassword) {
            errorMessage.textContent = 'Passwords do not match';
            errorMessage.style.display = 'block';
            return;
        }

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

        try {
            const response = await fetch('/api/password-reset/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username_or_email: usernameOrEmail, new_password: newPassword, confirm_password: confirmPassword })
            });
            const data = await response.json();

            if (response.ok) {
                successMessage.textContent = 'Password reset successfully! Redirecting to login...';
                successMessage.style.display = 'block';
                setTimeout(() => { window.location.href = '/login/'; }, 2000);
            } else {
                errorMessage.textContent = data.error || 'Unable to reset password. Please try again.';
                errorMessage.style.display = 'block';
            }
        } catch (err) {
            errorMessage.textContent = 'Unable to connect to the server. Please try again.';
            errorMessage.style.display = 'block';
        } finally {
            resetBtn.disabled = false;
        }
    });
</script>
{% endblock %}