{% extends 'base.html.twig' %}
{% block title %}Mon compte — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}Votre compte : playlists, historique d'écoute et paramètres.{% endblock %}

{% macro duree(seconds) %}
    {%- if seconds < 60 -%}moins d'une minute
    {%- elseif seconds < 3600 -%}{{ (seconds // 60) }} min
    {%- else -%}{{ (seconds // 3600) }} h {{ ((seconds % 3600) // 60)|format('%02d') }}
    {%- endif -%}
{% endmacro %}
{% import _self as fmt %}

{% block body %}
    <section class="mx-auto max-w-3xl px-4 py-10 sm:py-14">

        {# ——— Identité ——— #}
        <div class="panel flex flex-col items-center gap-5 p-6 text-center sm:flex-row sm:text-left sm:p-8">
            {% if app.user.avatarUrl %}
                <img src="{{ app.user.avatarUrl }}" alt="" referrerpolicy="no-referrer"
                     class="h-20 w-20 shrink-0 rounded-full border border-night-700 object-cover">
            {% else %}
                <span class="grid h-20 w-20 shrink-0 place-items-center rounded-full bg-gradient-to-br from-gold-600 to-gold-300 font-display text-2xl font-bold text-night-950">
                    {{ app.user.displayName|slice(0, 1)|upper }}
                </span>
            {% endif %}

            <div class="min-w-0 flex-1">
                <h1 class="font-display text-2xl font-semibold">{{ app.user.displayName }}</h1>
                <p class="mt-1 truncate text-sm text-sand-dim">{{ app.user.email }}</p>
                <p class="mt-1 text-xs text-sand-dim">
                    Membre depuis {{ app.user.createdAt|date('d/m/Y') }}
                    {% if app.user.googleId %} · connexion via Google{% endif %}
                </p>
            </div>

            <a href="{{ path('app_logout') }}" class="btn-ghost !px-4 !py-2 shrink-0 text-sm">Déconnexion</a>
        </div>

        {# ——— Chiffres d'écoute ——— #}
        <div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
            {% set cards = [
                {label: 'Playlists', value: stats.playlists},
                {label: 'Conférences ouvertes', value: stats.listened},
                {label: 'Terminées', value: stats.completed},
                {label: "Temps d'écoute", value: fmt.duree(stats.seconds)}
            ] %}
            {% for card in cards %}
                <div class="panel p-4 text-center">
                    <p class="font-display text-xl font-semibold text-gold-300">{{ card.value }}</p>
                    <p class="mt-1 text-[11px] uppercase tracking-wider text-sand-dim">{{ card.label }}</p>
                </div>
            {% endfor %}
        </div>

        {# ——— Reprendre l'écoute ——— #}
        {% if inProgress|length %}
            <h2 class="rule-gold mt-10 font-display text-lg font-semibold">Reprendre l'écoute</h2>
            <div class="panel mt-4 divide-y divide-night-700/40 !p-0">
                {% for entry in inProgress %}
                    {% include 'partials/track_row.html.twig' with {
                        podcast: entry.podcast,
                        queue: 'profil'
                    } only %}
                {% endfor %}
            </div>
        {% endif %}

        {# ——— Playlists ——— #}
        <div class="mt-10 flex items-end justify-between gap-3">
            <h2 class="rule-gold font-display text-lg font-semibold">Mes playlists</h2>
            <a href="{{ path('app_playlists') }}" class="nav-link text-sm">Tout voir →</a>
        </div>

        {% if playlists|length %}
            <ul class="mt-4 grid gap-3 sm:grid-cols-2">
                {% for playlist in playlists|slice(0, 6) %}
                    <li class="panel flex items-center justify-between gap-3 p-4">
                        <span class="min-w-0">
                            <span class="block truncate font-medium">{{ playlist.name }}</span>
                            <span class="text-xs text-sand-dim">{{ playlist.items|length }} conférence(s)</span>
                        </span>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="panel mt-4 p-5 text-sm text-sand-dim">
                Aucune playlist pour le moment. Utilisez le bouton ＋ à côté d'une conférence pour en créer une.
            </p>
        {% endif %}

        {# ——— Paramètres ——— #}
        <h2 class="rule-gold mt-10 font-display text-lg font-semibold">Paramètres</h2>
        <form method="post" class="panel mt-4 p-6">
            <input type="hidden" name="_token" value="{{ csrf_token('profile') }}">
            <label class="label" for="display_name">Nom affiché</label>
            <div class="flex flex-col gap-3 sm:flex-row">
                <input class="field" id="display_name" name="display_name" maxlength="100"
                       value="{{ app.user.displayName }}" placeholder="Comment vous appeler ?">
                <button type="submit" class="btn-gold shrink-0">Enregistrer</button>
            </div>
            <p class="mt-2 text-xs text-sand-dim">
                Laissez vide pour utiliser la partie gauche de votre adresse email.
            </p>
        </form>

        <div class="panel mt-4 p-6">
            <h3 class="font-medium text-ivory">Vos données</h3>
            <p class="mt-2 text-sm text-sand-dim">
                Votre historique d'écoute est effaçable à tout moment depuis le panneau « Historique » du lecteur.
                Pour supprimer définitivement votre compte et tout ce qui s'y rattache, écrivez-nous — voir la
                <a class="text-gold-300 hover:underline" href="{{ path('app_privacy') }}">politique de confidentialité</a>.
            </p>
        </div>
    </section>
{% endblock %}