spotify-cantina/app/templates/admin/stats.html

{% extends "base.html" %}
{% block title %}Estadísticas — Cantina{% endblock %}

{% block content %}
<div class="admin-container">

    <!-- Encabezado -->
    <div class="admin-header">
        <h1>Estadísticas de reproducción</h1>
    </div>

    <!-- Selector de fecha -->
    <div class="card date-nav">
        <a href="/stats/?day={{ prev_date }}" class="btn-sm">← Día anterior</a>

        <form method="get" action="/stats/" class="date-form">
            <input type="date" name="day" value="{{ selected_date }}"
                   max="{{ selected_date if is_today else '' }}"
                   class="input date-input" onchange="this.form.submit()">
        </form>

        {% if not is_today %}
        <a href="/stats/?day={{ next_date }}" class="btn-sm">Día siguiente →</a>
        {% else %}
        <span class="btn-sm" style="opacity:.4;cursor:default">Día siguiente →</span>
        {% endif %}

        <span class="total-badge">{{ total_plays }} reproduccion{{ 'es' if total_plays != 1 else '' }}</span>
    </div>

    {% if total_plays == 0 %}
    <div class="card">
        <p class="empty-msg" style="text-align:center;padding:2rem 0">
            Sin reproducciones registradas para este día.<br>
            <small>El historial se carga automáticamente desde Spotify cada 30 segundos.</small>
        </p>
    </div>
    {% else %}

    <div class="stats-grid">

        <!-- Top Canciones -->
        <div class="card">
            <h2>🎵 Canciones más escuchadas</h2>
            <div class="chart">
                {% for item in top_tracks %}
                <div class="chart-row">
                    <span class="rank">{{ loop.index }}</span>
                    <div class="chart-info">
                        <span class="chart-label">{{ item.label }}</span>
                        <div class="bar-wrap">
                            <div class="bar" style="width:{{ item.pct }}%"></div>
                        </div>
                    </div>
                    <span class="chart-count">{{ item.count }}x</span>
                </div>
                {% else %}
                <p class="empty-msg">Sin datos</p>
                {% endfor %}
            </div>
        </div>

        <!-- Top Artistas -->
        <div class="card">
            <h2>🎤 Artistas más escuchados</h2>
            <div class="chart">
                {% for item in top_artists %}
                <div class="chart-row">
                    <span class="rank">{{ loop.index }}</span>
                    <div class="chart-info">
                        <span class="chart-label">{{ item.label }}</span>
                        <div class="bar-wrap">
                            <div class="bar bar-artist" style="width:{{ item.pct }}%"></div>
                        </div>
                    </div>
                    <span class="chart-count">{{ item.count }}x</span>
                </div>
                {% else %}
                <p class="empty-msg">Sin datos</p>
                {% endfor %}
            </div>
        </div>

        <!-- Top Géneros -->
        <div class="card" style="grid-column: 1 / -1">
            <h2>🎸 Géneros más escuchados</h2>
            {% if top_genres %}
            <div class="genre-bars">
                {% for item in top_genres %}
                <div class="genre-row">
                    <span class="genre-name">{{ item.label }}</span>
                    <div class="bar-wrap genre-bar-wrap">
                        <div class="bar bar-genre" style="width:{{ item.pct }}%">
                            <span class="bar-label-inside">{{ item.count }}x</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="empty-msg">Sin información de géneros (los géneros se obtienen desde la API de artistas de Spotify).</p>
            {% endif %}
        </div>

    </div>
    {% endif %}

</div>

<style>
.date-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.date-form { display: flex; }
.date-input { width: auto; min-width: 160px; }
.total-badge {
    margin-left: auto;
    background: rgba(29,185,84,.12);
    color: var(--green);
    border: 1px solid rgba(29,185,84,.3);
    border-radius: 20px;
    padding: .3rem .9rem;
    font-size: .82rem;
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 700px) {
    .stats-grid { grid-template-columns: 1fr; }
}

.chart { display: flex; flex-direction: column; gap: .55rem; margin-top: .25rem; }

.chart-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.rank {
    width: 18px;
    text-align: right;
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}
.chart-info { flex: 1; display: flex; flex-direction: column; gap: .2rem; overflow: hidden; }
.chart-label {
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bar-wrap {
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
}
.bar {
    height: 100%;
    background: var(--green);
    border-radius: 3px;
    transition: width .5s ease;
}
.bar-artist { background: #a855f7; }
.chart-count {
    font-size: .78rem;
    color: var(--text-muted);
    min-width: 28px;
    text-align: right;
}

/* Géneros — barras horizontales grandes */
.genre-bars { display: flex; flex-direction: column; gap: .55rem; margin-top: .5rem; }
.genre-row { display: flex; align-items: center; gap: .75rem; }
.genre-name {
    width: 160px;
    font-size: .85rem;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    flex-shrink: 0;
}
.genre-bar-wrap { flex: 1; height: 22px; background: #2a2a2a; border-radius: 4px; overflow: hidden; }
.bar-genre {
    height: 100%;
    background: #f59e0b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: width .5s ease;
    min-width: 36px;
}
.bar-label-inside { font-size: .72rem; font-weight: 600; color: #000; padding: 0 8px; white-space: nowrap; }
</style>

{% endblock %}