{% extends 'base.html.twig' %}

{% set audio_url = podcast.audioPath starts with '/' ? podcast.audioPath : '/' ~ podcast.audioPath %}
{% set audio_abs = absolute_url(audio_url) %}
{# Formatage m:ss sans dépendance externe (twig/intl-extra n'est pas installé). #}
{% macro mmss(seconds) %}{{ '%d:%02d'|format(seconds // 60, seconds % 60) }}{% endmacro %}
{% import _self as fmt %}
{% set range_label = isExcerpt
    ? (start ? fmt.mmss(start) : '0:00') ~ ' → ' ~ (end ? fmt.mmss(end) : podcast.durationLabel)
    : null %}

{% block title %}{{ podcast.title }}{{ isExcerpt ? ' (extrait)' }} — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}{{ isExcerpt
    ? 'Extrait ' ~ range_label ~ ' de la conférence « ' ~ podcast.title ~ ' » de Serigne Sam Mbaye. Écoute libre et gratuite.'
    : (podcast.description ? podcast.description|slice(0, 155) ~ '…' : 'Conférence de Serigne Sam Mbaye : ' ~ podcast.title ~ '. Écoute libre et gratuite.') }}{% endblock %}

{# Ces trois blocs sont ce qui transforme un lien partagé en aperçu lisible
   (vignette, titre, lecture intégrée) au lieu d'une simple ligne d'URL. #}
{# Toutes les variantes d'extrait servent le même contenu que la page de la
   conférence : on désigne celle-ci comme référence, pour ne pas disperser le
   référencement sur autant d'URL que de bornes partagées. #}
{% block canonical %}{{ url('app_podcast_show', {slug: podcast.slug}) }}{% endblock %}
{% block og_type %}music.song{% endblock %}
{% block twitter_card %}player{% endblock %}
{% block open_graph_extra %}
    <meta property="og:audio" content="{{ audio_abs }}">
    <meta property="og:audio:secure_url" content="{{ audio_abs }}">
    <meta property="og:audio:type" content="audio/mpeg">
    {% if podcast.durationSeconds %}<meta property="music:duration" content="{{ podcast.durationSeconds }}">{% endif %}
    <meta name="twitter:player:stream" content="{{ audio_abs }}">
    <meta name="twitter:player:stream:content_type" content="audio/mpeg">
{% endblock %}

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

        <div class="panel overflow-hidden">
            <div class="flex flex-col items-center gap-5 p-6 text-center sm:flex-row sm:items-start sm:gap-6 sm:p-8 sm:text-left">
                <div class="pp-art h-28 w-28 shrink-0 sm:h-32 sm:w-32">
                    <img src="{{ asset('images/cover.webp') }}" alt="" loading="eager" decoding="async">
                </div>

                <div class="min-w-0 flex-1">
                    {% if podcast.theme %}
                        <a href="{{ path('app_theme_show', {slug: podcast.theme.slug}) }}" class="chip">{{ podcast.theme.name }}</a>
                    {% endif %}
                    <h1 class="mt-2 font-display text-xl font-semibold leading-snug sm:text-2xl">{{ podcast.title }}</h1>
                    <p class="mt-1 text-sm text-sand-dim">
                        Serigne Sam Mbaye · {{ podcast.durationLabel }}{{ podcast.recordedYear ? ' · ' ~ podcast.recordedYear }}
                    </p>

                    {% if isExcerpt %}
                        <p class="mt-3 inline-flex items-center gap-2 rounded-full border border-gold-600/40 bg-gold-500/10 px-3 py-1 text-xs font-semibold text-gold-300">
                            Extrait partagé · {{ range_label }}
                        </p>
                    {% endif %}
                </div>
            </div>

            {# Lecteur autonome, indépendant de celui du site : un lien partagé
               doit pouvoir être écouté immédiatement, sans dépendre de l'état
               d'un lecteur global qui n'a rien à lire à l'arrivée. #}
            <div class="border-t border-night-700/50 px-6 py-6 sm:px-8"
                 data-excerpt-player
                 data-src="{{ audio_url }}"
                 data-start="{{ start ?? '' }}"
                 data-end="{{ end ?? '' }}"
                 data-duration="{{ podcast.durationSeconds ?? 0 }}"
                 data-title="{{ podcast.title|e('html_attr') }}">

                <div class="flex items-center gap-4">
                    <button type="button" class="pp-play h-14 w-14 shrink-0" data-excerpt-toggle
                            aria-label="Lancer la lecture">
                        <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><polygon points="7 4 20 12 7 20" fill="currentColor"/></svg>
                    </button>

                    <div class="min-w-0 flex-1">
                        <input type="range" class="pp-volume w-full" min="0" max="1000" value="0" step="1"
                               data-excerpt-seek aria-label="Progression de la lecture">
                        <div class="mt-1.5 flex justify-between text-[11px] text-sand-dim">
                            <span class="tabular" data-excerpt-current>0:00</span>
                            <span class="tabular" data-excerpt-total>{{ podcast.durationLabel }}</span>
                        </div>
                    </div>
                </div>

                <div class="mt-4 flex flex-wrap items-center justify-center gap-2 sm:justify-start">
                    <button type="button" class="pp-pill" data-excerpt-skip="-15">− 15 s</button>
                    <button type="button" class="pp-pill" data-excerpt-skip="30">+ 30 s</button>
                    {% if isExcerpt %}
                        <button type="button" class="pp-pill" data-excerpt-full>Écouter l'intégralité</button>
                    {% endif %}
                    <a class="pp-pill" href="{{ audio_url }}"
                       download="{{ podcast.title|replace({'/': ' ', '\\': ' ', ':': ' ', '*': ' ', '?': ' ', '"': ' ', '<': ' ', '>': ' ', '|': ' '})|trim }}.{{ (audio_url|split('.')|length > 1) ? audio_url|split('.')|last|lower : 'mp3' }}">Télécharger</a>
                </div>

                <p class="mt-3 text-center text-[11px] text-sand-dim sm:text-left" data-excerpt-note hidden></p>
            </div>
        </div>

        <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            {% include 'partials/share_links.html.twig' with {
                url: app.request.uri,
                title: podcast.title
            } only %}

            <a class="nav-link shrink-0" href="{{ path('app_podcast_show', {slug: podcast.slug}) }}">
                Page de la conférence →
            </a>
        </div>

        {% if podcast.description %}
            <div class="panel mt-6 p-6 text-sm leading-relaxed text-sand">{{ podcast.description|nl2br }}</div>
        {% endif %}

        <div class="mt-8 rounded-2xl border border-night-700/50 p-5 text-center">
            <p class="text-sm text-sand">
                {{ total_count|default(null) ? total_count ~ ' conférences' : 'Toutes les conférences' }} de Serigne Sam Mbaye,
                en écoute libre et gratuite.
            </p>
            <a href="{{ path('app_podcasts') }}" class="btn-gold mt-4">Découvrir la plateforme</a>
            <p class="mt-3 text-[11px] text-sand-dim">Plateforme à but non lucratif · Sans publicité</p>
        </div>
    </section>
{% endblock %}

{% block extra_scripts %}
    <script src="{{ asset('js/excerpt-player.js') }}" defer></script>
{% endblock %}