{% extends 'admin/_layout.html.twig' %}

{% block admin %}
    <div class="flex items-center justify-between gap-3">
        <h1 class="rule-gold font-display text-2xl font-semibold">Vidéos</h1>
        <a href="{{ path('admin_video_new') }}" class="btn-gold !px-4 !py-2 text-sm">+ Ajouter une vidéo</a>
    </div>

    <div class="card mt-6 divide-y divide-night-700/50">
        {% for video in videos %}
            <div class="flex items-center gap-4 px-5 py-3 hover:bg-night-800/30 transition-colors">
                {# --- Miniature --- #}
                <div class="relative h-12 w-20 shrink-0 rounded bg-night-800 overflow-hidden">
                    {% if video.thumbnail %}
                        {# Thumbnail généré automatiquement #}
                        <img
                            src="{{ asset('uploads/thumbnails/' ~ video.thumbnail) }}"
                            alt="{{ video.title }}"
                            class="h-full w-full object-cover"
                            loading="lazy"
                        >
                    {% elseif video.youtubeId %}
                        {# Thumbnail YouTube #}
                        <img
                            src="https://i.ytimg.com/vi/{{ video.youtubeId }}/mqdefault.jpg"
                            alt="{{ video.title }}"
                            class="h-full w-full object-cover"
                            loading="lazy"
                        >
                    {% else %}
                        {# Placeholder par défaut #}
                        <div class="flex h-full w-full items-center justify-center bg-night-700/50">
                            <span class="text-2xl">🎬</span>
                        </div>
                    {% endif %}

                    {# Badge durée si disponible #}
                    {% if video.duration %}
                        <span class="absolute bottom-0.5 right-0.5 rounded bg-black/70 px-1 text-[10px] font-medium text-white">
                        {{ video.duration }}
                    </span>
                    {% endif %}
                </div>

                {# --- Informations --- #}
                <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-medium text-ivory group-hover:text-gold-300 transition-colors">
                        {{ video.title }}
                    </p>
                    <div class="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-sand-dim">
                        <span>{{ video.createdAt|date('d/m/Y') }}</span>

                        {% if video.theme %}
                            <span>·</span>
                            <span class="inline-flex items-center rounded-full bg-gold-500/10 px-2 py-0.5 text-[10px] text-gold-300">
                            {{ video.theme }}
                        </span>
                        {% endif %}

                        <span>·</span>

                        {# Statut de publication #}
                        {% if video.published %}
                            <span class="inline-flex items-center gap-1 text-emerald-400">
                            <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            Publiée
                        </span>
                        {% else %}
                            <span class="inline-flex items-center gap-1 text-amber-400">
                            <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                            </svg>
                            Brouillon
                        </span>
                        {% endif %}

                        {# Type de source #}
                        <span>·</span>
                        {% if video.videoFilename %}
                            <span class="text-blue-400">📁 Fichier</span>
                        {% elseif video.youtubeId %}
                            <span class="text-red-400">▶ YouTube</span>
                        {% endif %}

                        {# Taille du fichier si disponible #}
                        {% if video.videoSize %}
                            <span>·</span>
                            <span>{{ (video.videoSize / 1024 / 1024)|round(1) }} Mo</span>
                        {% endif %}
                    </div>
                </div>

                {# --- Actions --- #}
                <div class="flex shrink-0 items-center gap-2">
                    {# Bouton Voir (si c'est une vidéo YouTube) #}
                    {% if video.youtubeId %}
                        <a
                            href="https://www.youtube.com/watch?v={{ video.youtubeId }}"
                            target="_blank"
                            class="btn-ghost !px-3 !py-1.5 text-xs"
                            title="Voir sur YouTube"
                        >
                            👁️
                        </a>
                    {% endif %}

                    {# Bouton Modifier #}
                    <a
                        class="btn-ghost !px-3 !py-1.5 text-xs"
                        href="{{ path('admin_video_edit', {id: video.id}) }}"
                    >
                        Modifier
                    </a>

                    {# Bouton Supprimer #}
                    <form
                        method="post"
                        action="{{ path('admin_video_delete', {id: video.id}) }}"
                        onsubmit="return confirm('Supprimer définitivement la vidéo « {{ video.title }} » ?');"
                        class="inline"
                    >
                        <input type="hidden" name="_token" value="{{ csrf_token('delete-video-' ~ video.id) }}">
                        <button
                            class="btn-ghost !px-3 !py-1.5 text-xs text-red-300 hover:text-red-400 hover:bg-red-500/10 transition-colors"
                            type="submit"
                        >
                            Supprimer
                        </button>
                    </form>
                </div>
            </div>
        {% else %}
            {# --- État vide --- #}
            <div class="flex flex-col items-center justify-center px-5 py-12 text-center">
                <div class="text-6xl mb-4">🎬</div>
                <p class="text-sm font-medium text-sand">Aucune vidéo</p>
                <p class="mt-1 text-sm text-sand-dim">Commencez par ajouter votre première vidéo.</p>
                <a href="{{ path('admin_video_new') }}" class="btn-gold mt-4 !px-4 !py-2 text-sm">
                    + Ajouter une vidéo
                </a>
            </div>
        {% endfor %}
    </div>

    {# --- Statistiques (optionnel) --- #}
    {% if videos is not empty %}
        <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div class="card p-4 text-center">
                <p class="text-2xl font-semibold text-gold-300">{{ videos|length }}</p>
                <p class="text-xs text-sand-dim">Total vidéos</p>
            </div>
            <div class="card p-4 text-center">
                <p class="text-2xl font-semibold text-emerald-400">
                    {{ videos|filter(v => v.published)|length }}
                </p>
                <p class="text-xs text-sand-dim">Publiées</p>
            </div>
            <div class="card p-4 text-center">
                <p class="text-2xl font-semibold text-amber-400">
                    {{ videos|filter(v => not v.published)|length }}
                </p>
                <p class="text-xs text-sand-dim">Brouillons</p>
            </div>
            <div class="card p-4 text-center">
                <p class="text-2xl font-semibold text-blue-400">
                    {{ videos|filter(v => v.videoFilename)|length }}
                </p>
                <p class="text-xs text-sand-dim">Fichiers uploadés</p>
            </div>
        </div>
    {% endif %}
{% endblock %}