{% extends "layouts/app.html" %}

{% block title %}Login{% endblock %}

{% block additional_styles %}
<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh - 200px);
    }

    .login-container {
        width: 90%;
        max-width: 400px;
        padding: 30px;
        background-color: #343434;
        border-radius: 20px;
        margin-top: -50px;
    }

    .login-container h2 {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 8px;
        color: white;
    }

    .login-description {
        font-size: 14px;
        color: #8f8f8f;
        margin-bottom: 24px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: rgb(255, 255, 255);
        font-size: 14px;
    }

    .form-group input {
        width: 100%;
        padding: 10px;
        border: 1px solid #D9D9D9;
        border-radius: 6px;
        background-color: #D9D9D9;
        color: rgb(0, 0, 0);
        font-size: 20px;
        box-sizing: border-box;
    }

    .form-group input:focus {
        border-color: FDEFA8;
        outline: none;
    }

    button[type="submit"] {
        width: 100%;
        padding: 12px;
        background-color: #97988C;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 8px;
    }

    button[type="submit"]:hover {
        background-color: #6f6f6b;
    }

    .password-input {
        letter-spacing: 3px;
    }

    .signup-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .signup {
        font-size: 14px;
        color: #8f8f8f;
        margin-top: 14px;
        align-items: center;
        cursor: pointer;
    }

    .signup u:hover {
        color: #fff;
    }

    .hidden {
        display: none;
    }

    .error-message p {
        color: red;
    }
</style>
{% endblock %}

{% block content %}
<div class="spotlight"></div>
<div class="container">
    <div class="login-container">
        <!-- Login Form -->
        <div id="loginForm">
            <h2>Login</h2>
            <p class="login-description">Enter your credentials below to login to your account</p>

            <form method="POST" action="{{ url_for('main.login_route') }}" 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 class="password-input">
                </div>

                <button type="submit">Login</button>
            </form>
            <div class="signup-container">
                <p class="signup">Don't have an account? <u onclick="toggleForms()">Sign up</u></p>
            </div>
        </div>

        <!-- Signup Form -->
        <div id="signupForm" class="hidden">
            <h2>Sign Up</h2>
            <p class="login-description">Create your account to get started</p>

            <form method="POST" action="{{ url_for('main.signup_route') }}" id="signup-form" onsubmit="return validateForm()">
                <div class="form-group">
                    <label for="signup-username">Username</label>
                    <input type="text" id="signup-username" name="username" required>
                </div>

                <div class="form-group">
                    <label for="signup-email">Email</label>
                    <input type="email" id="signup-email" name="email" required>
                </div>

                <div class="form-group">
                    <label for="signup-password">Password</label>
                    <input type="password" id="signup-password" name="password" required class="password-input">
                </div>

                <button type="submit">Sign Up</button>
            </form>
            <div class="signup-container">
                <p class="signup">Already have an account? <u onclick="toggleForms()">Login</u></p>
            </div>
        </div>

        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div class="error-message">
            {% for message in messages %}
            <p class="text-danger">{{ message }}</p>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
    </div>
</div>

<script>
function toggleForms() {
    const loginForm = document.getElementById('loginForm');
    const signupForm = document.getElementById('signupForm');
    loginForm.classList.toggle('hidden');
    signupForm.classList.toggle('hidden');
}

function validateForm() {
    const username = document.getElementById('signup-username').value;
    const email = document.getElementById('signup-email').value;
    const password = document.getElementById('signup-password').value;

    // Username validation
    if (username.length < 5) {
        flash('Username must be at least 5 characters long');
        return false;
    }

    // Email validation
    const emailRegex = /^[a-zA-Z][a-zA-Z0-9._-]*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(email)) {
        flash('Please enter a valid email address');
        return false;
    }

    // Password validation
    const passwordRegex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
    if (!passwordRegex.test(password)) {
        flash('Password must be at least 8 characters long and contain a number and a special character');
        return false;
    }

    return true;
}

function flash(message) {
    const errorDiv = document.querySelector('.error-message');
    if (!errorDiv) {
        const newErrorDiv = document.createElement('div');
        newErrorDiv.className = 'error-message';
        const p = document.createElement('p');
        p.className = 'text-danger';
        p.textContent = message;
        newErrorDiv.appendChild(p);
        document.querySelector('.login-container').appendChild(newErrorDiv);
    } else {
        const p = errorDiv.querySelector('p') || document.createElement('p');
        p.className = 'text-danger';
        p.textContent = message;
        if (!errorDiv.contains(p)) {
            errorDiv.appendChild(p);
        }
    }
}
</script>
{% endblock %}