{% extends "base.html" %}
{% block title %}Leaderboard — WeightTracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>🏆 Leaderboard</h1>
    <p>Ranked by % body weight lost. May the best loser win!</p>
</div>

<!-- Comparison Chart -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-header">
        <h2>📊 % Weight Lost Comparison</h2>
    </div>
    <div class="chart-container">
        <canvas id="comparisonChart"></canvas>
    </div>
</div>

<!-- Leaderboard Table -->
<div class="card">
    {% if ranked %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Start</th>
                    <th>Current</th>
                    <th>Lost (kg)</th>
                    <th>Lost (%)</th>
                    <th>Goal Progress</th>
                    <th>Check-ins</th>
                </tr>
            </thead>
            <tbody>
                {% for u in ranked %}
                <tr>
                    <td>
                        <span
                            class="rank-badge {{ 'rank-1' if loop.index == 1 else 'rank-2' if loop.index == 2 else 'rank-3' if loop.index == 3 else 'rank-other' }}">
                            {{ loop.index }}
                        </span>
                    </td>
                    <td style="font-weight: 600; color: var(--text-primary);">{{ u.display_name or u.username }}</td>
                    <td>{{ '%.1f' % (u.starting_weight_kg | float) if u.starting_weight_kg else '—' }}</td>
                    <td>{{ '%.1f' % (u.current_weight | float) if u.current_weight else '—' }}</td>
                    <td>
                        <span
                            style="color: {{ 'var(--success)' if u.weight_lost > 0 else 'var(--danger)' if u.weight_lost < 0 else 'var(--text-muted)' }}; font-weight: 600;">
                            {{ '%+.1f' % (-u.weight_lost) if u.weight_lost != 0 else '0.0' }}
                        </span>
                    </td>
                    <td>
                        <span
                            style="color: {{ 'var(--success)' if u.pct_lost > 0 else 'var(--danger)' if u.pct_lost < 0 else 'var(--text-muted)' }}; font-weight: 700;">
                            {{ '%.1f' % u.pct_lost }}%
                        </span>
                    </td>
                    <td>
                        {% if u.goal_progress is not none %}
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <div class="progress-bar-track" style="flex: 1;">
                                <div class="progress-bar-fill" style="width: {{ u.goal_progress }}%;"></div>
                            </div>
                            <span style="font-size: 0.75rem; color: var(--text-muted); white-space: nowrap;">{{ '%.0f' %
                                u.goal_progress }}%</span>
                        </div>
                        {% else %}
                        <span style="color: var(--text-muted);">—</span>
                        {% endif %}
                    </td>
                    <td>{{ u.total_checkins }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">🏆</div>
        <h3>No competitors yet</h3>
        <p>Start checking in to appear on the leaderboard!</p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/api/comparison')
            .then(r => r.json())
            .then(data => {
                if (data.names.length > 0) {
                    createComparisonChart('comparisonChart', data.names, data.pct_lost);
                }
            });
    });
</script>
{% endblock %}