{% extends "base.jinja2" %}

{% block title %}Debt by AI Profile{% endblock %}

{% block nav %}
<li class="nav-item">
    <a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/offensive">Offensive Mode</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/defensive">Defensive Mode</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/leaderboard">Leaderboard</a>
</li>
<li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/profile">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/logout">Logout</a>
</li>
{% endblock %}

{% block body %}

<div class="container my-4">
    <div class="card shadow-sm bg-dark text-light border-secondary">
        <div class="card-body">
            <h2 class="card-title">Profile Overview {% if not logged_in_account %} of {{ username}} {% endif %}</h2>

            {% if logged_in_account %}
                <p class="mb-1">Logged in as: {{ username }}</p>
            {% endif %}

            <p class="mt-1 mb-1">Offended Debt Amount: {{ user_data.0 }}</p>
            <p class="mb-1">Defended Debt Amount: {{ user_data.1 }}</p>
            <p class="mb-1">Offensive Wins: {{ user_data.2 }}</p>
            <p class="mb-1">Defensive Wins: {{ user_data.3 }}</p>
        </div>
    </div>

    <div class="card shadow-sm bg-dark text-light border-secondary mt-4">
        <div class="card-body">
            <h2 class="card-title">Achievements {% if not logged_in_account %} of {{ username }} {% endif %}</h2>

            <div class="row g-4">
                {% for achievement in achievements %}
                {% set unlocked = achievement[2] == "Completed" %}
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="card h-100 {% if unlocked %}border-success shadow{% else %}border-secondary text-muted{% endif %} bg-dark">
                            <div class="card-body">
                                <h5 class="card-title">
                                {% if unlocked %}
                                    ✅ {{ achievement[0] }}
                                {% else %}
                                    🔒 {{ achievement[0] }}
                                {% endif %}
                                </h5>
                                <h6 class="card-subtitle mb-2 {% if unlocked %}text-success{% else %}text-secondary{% endif %}">
                                    {{ achievement[2] }}
                                </h6>
                                <p class="card-text">{{ achievement[1] }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% if logged_in_account %}
    <div class="card shadow-sm mt-4 bg-dark text-light border-secondary">
        <div class="card-body">
            <h4>Change Username</h4>
            <form method="POST" action="/change_username">
                <div class="mb-3">
                    <label for="newusername" class="form-label">New Username</label>
                    <input type="text" class="form-control bg-secondary text-light" id="newusername" name="new_username" placeholder="Enter new username..." required>
                </div>
                <button type="submit" class="btn btn-primary">Update Username</button>
            </form>
        </div>
    </div>

    <div class="card shadow-sm mt-4 bg-dark text-light border-secondary">
        <div class="card-body">
            <h4>Change Password</h4>
            <form method="POST" action="/change_password">
                <div class="mb-3">
                    <label for="currentpassword" class="form-label">Current Password</label>
                    <input type="password" class="form-control bg-secondary text-light" id="currentpassword" name="current_password" placeholder="Enter current password..." required>
                </div>
                <div class="mb-3">
                    <label for="newpassword" class="form-label">New Password</label>
                    <input type="password" class="form-control bg-secondary text-light" id="newpassword" name="new_password" placeholder="Enter new password..." required>
                </div>
                <div class="mb-3">
                    <label for="confirmpassword" class="form-label">Confirm Password</label>
                    <input type="password" class="form-control bg-secondary text-light" id="confirmpassword" name="confirm_password" placeholder="Confirm your new password..." required>
                </div>
            </form>
            <button type="submit" class="btn btn-primary">Update Password</button>
        </div>
    </div>

    <div class="card shadow-sm mt-4 border-danger bg-dark text-light">
        <div class="card-body">
            <h4 class="text-danger">Danger Zone</h4>
            <p class="text-muted">These actions cannot be undone!</p>
            <form method="POST" action="/delete_account" class="d-inline">
                <button type="submit" class="btn btn-danger me-2" onclick="return confirm('Are you sure you want to delete your account?');">Delete Account</button>
            </form>
            <form method="POST" action="/reset_data" class="d-inline">
                <button type="submit" class="btn btn-warning" onclick="return confirm('Are you sure you want to reset all data?');">Reset all data</button>
            </form>
        </div>
    </div>
    {% endif %}
</div>

{% endblock %}