{% extends "base.jinja2" %}

{% block title %}Loginween 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="/pumpkin_roll">Pumpkin Roll</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/countdown">Countdown</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>
                <p class="mb-1" id="pumpkin_roll_highscore">Pumpkin Roll High Score: Loading...</p>
                <p class="mb-1" id="whackapumpkin_highscore">Whack a Pumpkin High Score: Loading...</p>
                <p class="mb-1" id="memory_best_easy">Pumpkin Memory (Easy) Best Time: Loading...</p>
                <p class="mb-1" id="memory_best_medium">Pumpkin Memory (Medium) Best Time: Loading...</p>
                <p class="mb-1" id="memory_best_hard">Pumpkin Memory (Hard) Best Time: Loading...</p>
                <p class="mb-1" id="memory_best_extrahard">Pumpkin Memory (Extra hard) Best Time: Loading...</p>
            {% endif %}
        </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 Pattern</h4>
            <div class="mt-3"></div>
            <form id="change_pattern_form" method="POST" action="/change_pattern">
                <div class="mb-3 d-block">
                    <h5>Current</h5>
                    <input type="hidden" name="current_pattern" id="current_pattern_field">
                    <canvas id="current_pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
                    <div class="buttons">
                        <button type="button" id="currentlightBtn" class="btn btn-warning">Light!</button>
                        <button type="button" id="currentclearBtn" class="btn btn-danger me-2">Clear</button>
                    </div>
                </div>
                <div class="mt-3"></div>
                <div class="mb-3 d-block">
                    <h5>New</h5>
                    <input type="hidden" name="new_pattern" id="new_pattern_field">
                    <canvas id="new_pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
                    <div class="buttons">
                        <button type="button" id="newlightBtn" class="btn btn-warning">Light!</button>
                        <button type="button" id="newclearBtn" class="btn btn-danger me-2">Clear</button>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">Update Pattern</button>
            </form>
        </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>
        </div>
    </div>
    {% endif %}
</div>

<script>
setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "currentlightBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }});
setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "newlightBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }});

function formatTime(time) {
    return time !== "None" ? `${time}s` : time;
}

pumpkin_roll_highscore = localStorage.getItem("pumpkin_roll_highscore") || "None"
whackapumpkin_highscore = localStorage.getItem("whackapumpkin_highscore") || "None"
memory_best_easy = localStorage.getItem("memory_best_easy") || "None"
memory_best_medium = localStorage.getItem("memory_best_medium") || "None"
memory_best_hard = localStorage.getItem("memory_best_hard") || "None"
memory_best_extrahard = localStorage.getItem("memory_best_extrahard") || "None"

document.getElementById("pumpkin_roll_highscore").textContent = `Pumpkin Roll High Score: ${pumpkin_roll_highscore}`;
document.getElementById("whackapumpkin_highscore").textContent = `Whack a Pumpkin High Score: ${whackapumpkin_highscore}`;
document.getElementById("memory_best_easy").textContent = `Pumpkin Memory (Easy) Best Time: ${formatTime(memory_best_easy)}`;
document.getElementById("memory_best_medium").textContent = `Pumpkin Memory (Medium) Best Time: ${formatTime(memory_best_medium)}`;
document.getElementById("memory_best_hard").textContent = `Pumpkin Memory (Hard) Best Time: ${formatTime(memory_best_hard)}`;
document.getElementById("memory_best_extrahard").textContent = `Pumpkin Memory (Extra Hard) Best Time: ${formatTime(memory_best_extrahard)}`;
</script>
{% endblock body %}