{% extends 'admin/_layout.html.twig' %}
{% block admin %}
    <h1 class="rule-gold font-display text-2xl font-semibold">{{ video.id ? 'Modifier la vidéo' : 'Nouvelle vidéo' }}</h1>

    {{ form_start(form, {attr: {class: 'card mt-6 max-w-xl space-y-5 p-6', enctype: 'multipart/form-data'}}) }}
    {{ form_errors(form) }}
    <div>
        {{ form_label(form.title, null, {label_attr: {class: 'label'}}) }}
        {{ form_widget(form.title, {attr: {'data-title-input': 'true'}}) }}
        {{ form_errors(form.title) }}
    </div>

    {# ——— Source de la vidéo : fichier réel (par défaut) ou lien YouTube (optionnel) ——— #}
    <div>
        <span class="label">Source de la vidéo</span>

        <div class="mt-2 inline-flex rounded-lg border border-night-700/50 p-1" data-video-source-tabs>
            <button type="button" class="video-source-tab rounded-md px-3 py-1.5 text-sm font-medium text-gold-300 bg-gold-500/15 transition-colors"
                    data-source-tab="file" aria-selected="true">📁 Fichier vidéo</button>
            <button type="button" class="video-source-tab rounded-md px-3 py-1.5 text-sm font-medium text-sand-dim transition-colors"
                    data-source-tab="youtube" aria-selected="false">▶ Lien YouTube</button>
        </div>

        {# Panneau fichier — actif par défaut #}
        <div data-source-panel="file" class="mt-3">
            <div id="video-dropzone"
                 class="relative flex min-h-[180px] flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-night-700/60 bg-night-900/40 px-4 py-8 text-center transition-colors hover:border-gold-500/50"
                 data-dropzone
                 {% if video.videoFilename %}data-existing-file="{{ video.videoFilename }}"{% endif %}>
                <input type="file" name="video_file" id="video-file-input" accept="video/mp4,video/webm,video/ogg,video/quicktime"
                       class="absolute inset-0 h-full w-full cursor-pointer opacity-0" data-file-input>

                <div data-dropzone-empty>
                    <p class="text-3xl">🎬</p>
                    <p class="mt-2 text-sm font-medium text-sand">Glissez-déposez un fichier vidéo ici</p>
                    <p class="mt-1 text-xs text-sand-dim">ou cliquez pour parcourir — MP4, WebM, MOV (2 Go max)</p>
                </div>

                <div data-dropzone-preview class="hidden w-full">
                    <video data-preview-video class="mx-auto max-h-40 rounded-lg" controls muted></video>
                    <p class="mt-2 truncate text-sm font-medium text-sand" data-preview-name></p>
                    <p class="text-xs text-sand-dim" data-preview-size></p>
                    <button type="button" class="btn-ghost mt-2 !px-3 !py-1 text-xs" data-remove-file>✕ Retirer</button>
                </div>
            </div>

            {% if video.videoFilename %}
                <p class="mt-2 text-xs text-sand-dim">Fichier actuel : {{ video.videoFilename }} — laissez vide pour le conserver.</p>
            {% endif %}
            <p class="mt-1 text-xs text-red-300 hidden" data-file-error></p>
        </div>

        {# Panneau YouTube — masqué par défaut, optionnel #}
        <div data-source-panel="youtube" class="mt-3 hidden">
            {{ form_widget(form.youtubeId) }}
            {{ form_help(form.youtubeId, {help_attr: {class: 'mt-1 text-xs text-sand-dim'}}) }}
            {{ form_errors(form.youtubeId) }}
        </div>
    </div>

    <div>
        {{ form_label(form.duration, 'Durée', {label_attr: {class: 'label'}}) }}
        {{ form_widget(form.duration, {attr: {
            id: 'video-duration-field',
            readonly: 'readonly',
            placeholder: 'Détectée automatiquement depuis le fichier…',
            class: 'field text-sm'
        }}) }}
        {{ form_help(form.duration, {help_attr: {class: 'mt-1 text-xs text-sand-dim'}}) }}
        {{ form_errors(form.duration) }}
    </div>

    <div>
        {{ form_label(form.thumbnail, null, {label_attr: {class: 'label'}}) }}
        {{ form_widget(form.thumbnail) }}
    </div>

    <div class="grid gap-5 sm:grid-cols-2 sm:items-center">
        <div>
            {{ form_label(form.position, null, {label_attr: {class: 'label'}}) }}
            {{ form_widget(form.position) }}
        </div>
        <label class="flex items-center gap-2 text-sm text-sand">
            {{ form_widget(form.published) }} Publiée
        </label>
    </div>

    <div class="flex gap-3 pt-2">
        <button class="btn-gold" type="submit">Enregistrer</button>
        <a class="btn-ghost" href="{{ path('admin_videos') }}">Annuler</a>
    </div>
    {{ form_end(form) }}

    <script src="{{ asset('js/video-dropzone.js') }}"></script>
{% endblock %}