@props(['video'])

<style>
    .action-btn {
        border: none;
        border-radius: 8px;
        padding: 0 14px;
        height: 36px;
        font-size: 0.82rem;
        font-weight: 500;
        cursor: pointer;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s ease;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
        box-sizing: border-box;
    }

    .action-btn i,
    .action-btn svg {
        font-size: 14px;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }

    .action-btn:hover {
        background: var(--border-color);
        transform: translateY(-1px);
    }

    .action-btn:active {
        transform: translateY(0);
    }

    .action-btn svg,
    .action-btn i {
        flex-shrink: 0;
    }

    .action-btn.comment-btn {
        background: var(--brand-red);
        color: white;
        border-color: var(--brand-red);
    }

    .action-btn.liked {
        color: var(--brand-red) !important;
    }

    .mobile-action-dropdown .dropdown-item.liked {
        color: var(--brand-red) !important;
    }

    .action-btn.subscribed {
        background: var(--brand-red);
        border-color: var(--brand-red);
        color: #fff !important;
    }

    .mobile-action-dropdown .dropdown-item.subscribed {
        color: var(--brand-red) !important;
    }

    /* Single Action dropdown for every viewport — the individual
       .desktop-action buttons are collapsed into this one menu. */
    .mobile-action-dropdown {
        display: inline-block;
        position: relative;
        margin-left: auto;
    }
    .video-actions > .desktop-action { display: none !important; }

    .mobile-action-dropdown .dropdown-menu {
        right: 0;
        left: auto;
        min-width: 200px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 6px 0;
        z-index: 1200;
    }

    .mobile-action-dropdown .dropdown-item {
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        padding: 8px 12px;
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        text-decoration: none;
    }

    .mobile-action-dropdown .dropdown-item:hover {
        background: var(--border-color);
    }

    @media (max-width: 576px) {
        .video-actions>.desktop-action {
            display: none !important;
        }

        .mobile-action-dropdown {
            display: block;
            margin-left: auto;
        }

        .action-btn {
            width: 100%;
        }
    }
</style>

<div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: visible;">
    @auth
        @if (Auth::id() === $video->user_id)
            <button class="action-btn desktop-action" onclick="openEditVideoModal('{{ $video->getRouteKey() }}')">
                <i class="bi bi-pencil"></i>
                <span>Edit</span>
            </button>
            @if($video->type === 'music')
                <button class="action-btn desktop-action" onclick="openMergeModal('{{ $video->getRouteKey() }}')">
                    <i class="bi bi-signpost-split"></i>
                    <span>Merge</span>
                </button>
            @endif
            {{-- Lyrics generate/regenerate + edit now live inside the player's gear menu
                 so they're always reachable on both mobile and desktop. --}}
            <button class="action-btn desktop-action" onclick="showDeleteModal('{{ $video->getRouteKey() }}', {{ json_encode($video->title) }})"
                style="color:#ef4444;border-color:rgba(239,68,68,.35);">
                <i class="bi bi-trash"></i>
                <span>Delete</span>
            </button>
        @elseif (Auth::id() !== $video->user_id)
            @php $isSubscribed = Auth::user()->isSubscribedTo($video->user); @endphp
            <button type="button"
                class="action-btn desktop-action subscribe-toggle-btn {{ $isSubscribed ? 'subscribed' : '' }}"
                data-channel-id="{{ $video->user_id }}"
                data-subscribe-url="{{ route('channel.subscribe', $video->user_id) }}"
                data-source-video-id="{{ $video->id }}"
                data-subscribed="{{ $isSubscribed ? 'true' : 'false' }}">
                <i class="bi {{ $isSubscribed ? 'bi-bell-fill' : 'bi-bell' }}"></i>
                <span class="subscribe-label">{{ $isSubscribed ? 'Subscribed' : 'Subscribe' }}</span>
            </button>
        @endif
    @else
        {{-- Guest Subscribe: showToast first so the user understands what's
             happening, then redirect to the login page with intended=
             preserving the current URL so after login they land back on
             this video. 600 ms gives the toast a moment to be seen. --}}
        <button type="button" class="action-btn desktop-action"
                onclick="(function(){ if (typeof showToast==='function') showToast('Sign in to subscribe to {{ addslashes($video->user->name ?? 'this channel') }}', 'info'); setTimeout(function(){ window.location.href='{{ route('login') }}?intended=' + encodeURIComponent(window.location.pathname + window.location.search); }, 600); })();">
            <i class="bi bi-bell" aria-hidden="true"></i><span>Subscribe</span>
        </button>
    @endauth

    @auth
        {{-- Like + Dislike pair. Mutually exclusive on the server; clicking
             one clears the other via the controllers' detach() call. --}}
        <button type="button"
            class="action-btn desktop-action like-toggle-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
            data-video-id="{{ $video->id }}"
            data-toggle-url="{{ route('videos.toggleLike', $video) }}"
            data-liked="{{ $video->isLikedBy(Auth::user()) ? 'true' : 'false' }}"
            aria-label="{{ $video->isLikedBy(Auth::user()) ? 'Remove like' : 'Like' }}">
            <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}" aria-hidden="true"></i>
            <span class="like-count-label">{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
        </button>
        <button type="button"
            class="action-btn desktop-action dislike-toggle-btn {{ $video->isDislikedBy(Auth::user()) ? 'disliked' : '' }}"
            data-video-id="{{ $video->id }}"
            data-toggle-url="{{ route('videos.toggleDislike', $video) }}"
            data-disliked="{{ $video->isDislikedBy(Auth::user()) ? 'true' : 'false' }}"
            aria-label="{{ $video->isDislikedBy(Auth::user()) ? 'Remove dislike' : 'Dislike' }}">
            <i class="bi {{ $video->isDislikedBy(Auth::user()) ? 'bi-hand-thumbs-down-fill' : 'bi-hand-thumbs-down' }}" aria-hidden="true"></i>
        </button>
    @else
        <button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action">
            <i class="bi bi-hand-thumbs-up" aria-hidden="true"></i>
            {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
        </button>
        <button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action" aria-label="Dislike">
            <i class="bi bi-hand-thumbs-down" aria-hidden="true"></i>
        </button>
    @endauth

    @if ($video->isShareable())
        <button class="action-btn desktop-action"
            onclick="shareCurrent('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}', '{{ Auth::check() ? route('videos.shareEmail', $video) : '' }}', '{{ Auth::check() ? route('videos.shareMembers', $video) : '' }}')">
            <i class="bi bi-share"></i><span>Share</span>
        </button>
    @endif

    <!-- Save to Playlist Button -->
    <x-save-to-playlist-button :video="$video" class="action-btn desktop-action">
        <i class="bi bi-bookmark"></i>
        <span>Save</span>
    </x-save-to-playlist-button>

    @php
        $dlAccess = $video->download_access ?? 'disabled';
        $dlUser   = Auth::user();
        $showDl   = match($dlAccess) {
            'everyone'    => true,
            'registered'  => (bool) $dlUser,
            'subscribers' => $dlUser && ($dlUser->id === $video->user_id || $dlUser->isSubscribedTo($video->user)),
            default       => false,
        };
    @endphp
    @if($showDl)
    @php $isAudioDl = $video->isAudioOnly(); @endphp
    <!-- Download Dropdown -->
    <div class="dropdown desktop-action" style="display:inline-flex;">
        <button class="action-btn dropdown-toggle" type="button" id="downloadDropdown{{ $video->id }}"
            data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-download"></i>
            <span>Download</span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="downloadDropdown{{ $video->id }}"
            style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:6px 0;min-width:160px;">
            <li>
                @if($isAudioDl)
                <a class="dropdown-item" href="#"
                    onclick="startSlideshowDownload('{{ $video->getRouteKey() }}'); return false;"
                    style="color:var(--text-primary);display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;text-decoration:none;">
                    <i class="bi bi-film"></i> Download Video
                </a>
                @else
                <a class="dropdown-item" href="{{ route('videos.download', $video) }}"
                    style="color:var(--text-primary);display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;text-decoration:none;">
                    <i class="bi bi-film"></i> Download Video
                </a>
                @endif
            </li>
            <li>
                <a class="dropdown-item ytp-mp3-dl-link" href="{{ route('videos.downloadMp3', $video) }}"
                    style="color:var(--text-primary);display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;text-decoration:none;">
                    <i class="bi bi-music-note-beamed"></i> Download MP3
                </a>
            </li>
        </ul>
    </div>
    @endif

    <div class="dropdown mobile-action-dropdown">
        <button class="action-btn dropdown-toggle" type="button" id="dropdownMenuLinkMusic{{ $video->id }}"
            data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-lightning-charge-fill"></i>
            <span>Action</span>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLinkMusic{{ $video->id }}">
            @auth
                @if (Auth::id() !== $video->user_id)
                    @php $isSubscribed = Auth::user()->isSubscribedTo($video->user); @endphp
                    <button type="button"
                        class="dropdown-item subscribe-toggle-btn {{ $isSubscribed ? 'subscribed' : '' }}"
                        data-channel-id="{{ $video->user_id }}"
                        data-subscribe-url="{{ route('channel.subscribe', $video->user_id) }}"
                        data-source-video-id="{{ $video->id }}"
                        data-subscribed="{{ $isSubscribed ? 'true' : 'false' }}">
                        <i class="bi {{ $isSubscribed ? 'bi-bell-fill' : 'bi-bell' }}"></i>
                        <span class="subscribe-label">{{ $isSubscribed ? 'Subscribed' : 'Subscribe' }}</span>
                    </button>
                @else
                    <button type="button" class="dropdown-item" onclick="openEditVideoModal('{{ $video->getRouteKey() }}')">
                        <i class="bi bi-pencil"></i> Edit
                    </button>
                    @if($video->type === 'music')
                        <button type="button" class="dropdown-item" onclick="openMergeModal('{{ $video->getRouteKey() }}')">
                            <i class="bi bi-signpost-split"></i> Merge
                        </button>
                    @endif
                @endif
            @else
                <button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
                    <i class="bi bi-bell"></i> Subscribe
                </button>
            @endauth

            @auth
                <button type="button"
                    class="dropdown-item like-toggle-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
                    data-video-id="{{ $video->id }}"
                    data-toggle-url="{{ route('videos.toggleLike', $video) }}"
                    data-liked="{{ $video->isLikedBy(Auth::user()) ? 'true' : 'false' }}">
                    <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
                    <span class="like-count-label">{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
                </button>
            @else
                <button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
                    <i class="bi bi-hand-thumbs-up"></i>
                    {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
                </button>
            @endauth

            @if ($video->isShareable())
                <button class="dropdown-item"
                    onclick="shareCurrent('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}', '{{ Auth::check() ? route('videos.shareEmail', $video) : '' }}', '{{ Auth::check() ? route('videos.shareMembers', $video) : '' }}')">
                    <i class="bi bi-share"></i> Share
                </button>
            @endif

            <x-save-to-playlist-button :video="$video" class="dropdown-item">
                <i class="bi bi-bookmark"></i> <span>Save</span>
            </x-save-to-playlist-button>
            @if($showDl)
            @if($isAudioDl)
            <a class="dropdown-item" href="#"
                onclick="startSlideshowDownload('{{ $video->getRouteKey() }}'); return false;"
                style="color:var(--text-primary);display:flex;align-items:center;gap:8px;">
                <i class="bi bi-film"></i> Download Video
            </a>
            @else
            <a class="dropdown-item" href="{{ route('videos.download', $video) }}"
                style="color:var(--text-primary);display:flex;align-items:center;gap:8px;">
                <i class="bi bi-film"></i> Download Video
            </a>
            @endif
            <a class="dropdown-item ytp-mp3-dl-link" href="{{ route('videos.downloadMp3', $video) }}"
                style="color:var(--text-primary);display:flex;align-items:center;gap:8px;">
                <i class="bi bi-music-note-beamed"></i> Download MP3
            </a>
            @endif
            @if(Auth::check() && Auth::id() === $video->user_id)
            <button type="button" class="dropdown-item text-danger" onclick="showDeleteModal('{{ $video->getRouteKey() }}', {{ json_encode($video->title) }})">
                <i class="bi bi-trash"></i> Delete
            </button>
            @endif
        </div>
    </div>
</div>

<script>
(function () {
    var csrfToken = '{{ csrf_token() }}';

    // ── Subscribe toggle ─────────────────────────────────────────
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.subscribe-toggle-btn');
        if (!btn) return;

        var url        = btn.dataset.subscribeUrl;
        var subscribed = btn.dataset.subscribed === 'true';
        var channelId  = btn.dataset.channelId;
        var nowSub     = !subscribed;

        // Optimistic update on all matching buttons (desktop + mobile)
        document.querySelectorAll('.subscribe-toggle-btn[data-channel-id="' + channelId + '"]').forEach(function (b) {
            b.dataset.subscribed = nowSub ? 'true' : 'false';
            b.classList.toggle('subscribed', nowSub);
            var icon  = b.querySelector('i');
            var label = b.querySelector('.subscribe-label');
            if (icon)  icon.className  = 'bi ' + (nowSub ? 'bi-bell-fill' : 'bi-bell');
            if (label) label.textContent = nowSub ? 'Subscribed' : 'Subscribe';
        });

        // Also update channel-row subscriber counts on the page
        document.querySelectorAll('.channel-subs[data-channel-id="' + channelId + '"]').forEach(function (el) {
            var n = parseInt(el.dataset.count || 0);
            el.dataset.count = nowSub ? n + 1 : Math.max(0, n - 1);
            el.textContent = Number(el.dataset.count).toLocaleString() + ' subscribers';
        });

        var srcVid = btn.dataset.sourceVideoId || '';
        var body = srcVid && nowSub ? new URLSearchParams({ source_video_id: srcVid }).toString() : null;
        fetch(url, {
            method: 'POST',
            headers: Object.assign(
                { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                body ? { 'Content-Type': 'application/x-www-form-urlencoded' } : {}
            ),
            body: body,
            credentials: 'same-origin',
        })
        .then(function (r) {
            if (!r.ok) throw new Error(r.status);
            return r.json();
        })
        .then(function (data) {
            document.querySelectorAll('.subscribe-toggle-btn[data-channel-id="' + channelId + '"]').forEach(function (b) {
                b.dataset.subscribed = data.subscribed ? 'true' : 'false';
                b.classList.toggle('subscribed', data.subscribed);
                var icon  = b.querySelector('i');
                var label = b.querySelector('.subscribe-label');
                if (icon)  icon.className  = 'bi ' + (data.subscribed ? 'bi-bell-fill' : 'bi-bell');
                if (label) label.textContent = data.subscribed ? 'Subscribed' : 'Subscribe';
            });
            document.querySelectorAll('.channel-subs[data-channel-id="' + channelId + '"]').forEach(function (el) {
                el.dataset.count = data.subscriber_count;
                el.textContent = Number(data.subscriber_count).toLocaleString() + ' subscribers';
            });
        })
        .catch(function (err) {
            // Revert optimistic update
            document.querySelectorAll('.subscribe-toggle-btn[data-channel-id="' + channelId + '"]').forEach(function (b) {
                b.dataset.subscribed = subscribed ? 'true' : 'false';
                b.classList.toggle('subscribed', subscribed);
                var icon  = b.querySelector('i');
                var label = b.querySelector('.subscribe-label');
                if (icon)  icon.className  = 'bi ' + (subscribed ? 'bi-bell-fill' : 'bi-bell');
                if (label) label.textContent = subscribed ? 'Subscribed' : 'Subscribe';
            });
            if (typeof showToast === 'function') showToast('Could not update subscription. Please try again.', 'error');
        });
    });

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.like-toggle-btn');
        if (!btn) return;

        var url   = btn.dataset.toggleUrl;
        var liked = btn.dataset.liked === 'true';

        // Optimistic UI update
        var allBtns = document.querySelectorAll('.like-toggle-btn[data-video-id="' + btn.dataset.videoId + '"]');
        allBtns.forEach(function (b) {
            var icon  = b.querySelector('i');
            var label = b.querySelector('.like-count-label');
            var nowLiked = !liked;
            b.dataset.liked = nowLiked ? 'true' : 'false';
            b.classList.toggle('liked', nowLiked);
            if (icon) {
                icon.className = 'bi ' + (nowLiked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
            }
            if (label) {
                var current = parseInt(label.textContent.replace(/,/g, '')) || 0;
                var next    = nowLiked ? current + 1 : Math.max(0, current - 1);
                label.textContent = next > 0 ? next.toLocaleString() : 'Like';
            }
        });

        fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            // Reconcile with server truth
            allBtns.forEach(function (b) {
                var icon  = b.querySelector('i');
                var label = b.querySelector('.like-count-label');
                b.dataset.liked = data.liked ? 'true' : 'false';
                b.classList.toggle('liked', data.liked);
                if (icon) icon.className = 'bi ' + (data.liked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
                if (label) label.textContent = data.like_count > 0 ? data.like_count.toLocaleString() : 'Like';
            });
        })
        .catch(function () {
            // Revert optimistic update on failure
            allBtns.forEach(function (b) {
                var icon  = b.querySelector('i');
                b.dataset.liked = liked ? 'true' : 'false';
                b.classList.toggle('liked', liked);
                if (icon) icon.className = 'bi ' + (liked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
            });
            if (typeof toast === 'function') toast('Could not update like. Try again.', 'error');
        });
    });

    // ── Dislike button ─────────────────────────────────────────────
    // Dislike is mutually exclusive with like on the server side; whenever
    // the server returns a new state, we reconcile BOTH buttons in one
    // sweep so the pair always reflects the authoritative truth.
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.dislike-toggle-btn');
        if (!btn) return;

        var url      = btn.dataset.toggleUrl;
        var videoId  = btn.dataset.videoId;

        fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            // Reconcile dislike pair.
            document.querySelectorAll('.dislike-toggle-btn[data-video-id="' + videoId + '"]').forEach(function (b) {
                var icon = b.querySelector('i');
                b.dataset.disliked = data.disliked ? 'true' : 'false';
                b.classList.toggle('disliked', data.disliked);
                if (icon) icon.className = 'bi ' + (data.disliked ? 'bi-hand-thumbs-down-fill' : 'bi-hand-thumbs-down');
                b.setAttribute('aria-label', data.disliked ? 'Remove dislike' : 'Dislike');
            });
            // Reconcile like pair in parallel — may have flipped off.
            document.querySelectorAll('.like-toggle-btn[data-video-id="' + videoId + '"]').forEach(function (b) {
                var icon  = b.querySelector('i');
                var label = b.querySelector('.like-count-label');
                b.dataset.liked = data.liked ? 'true' : 'false';
                b.classList.toggle('liked', data.liked);
                if (icon)  icon.className = 'bi ' + (data.liked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
                if (label) label.textContent = data.like_count > 0 ? data.like_count.toLocaleString() : 'Like';
            });
        })
        .catch(function () {
            if (typeof toast === 'function') toast('Could not update dislike. Try again.', 'error');
        });
    });
})();

// ── Slideshow video generation progress ──────────────────────────────
if (!window._slideshowDlInit) {
    window._slideshowDlInit = true;

    // Inject progress overlay once
    var _overlay = document.createElement('div');
    _overlay.id = 'sl-dl-overlay';
    _overlay.innerHTML = `
        <div id="sl-dl-box">
            <div id="sl-dl-icon"><i class="bi bi-film"></i></div>
            <h5 id="sl-dl-title">Generating Video</h5>
            <p id="sl-dl-status">Starting...</p>
            <div id="sl-dl-track">
                <div id="sl-dl-bar"></div>
            </div>
            <div id="sl-dl-pct">0%</div>
            <p id="sl-dl-hint">This may take a minute for long tracks</p>
            <button id="sl-dl-cancel" onclick="window._slideshowDlCancel()">Cancel</button>
        </div>`;
    document.body.appendChild(_overlay);

    // Styles
    var _style = document.createElement('style');
    _style.textContent = `
        #sl-dl-overlay {
            display: none; position: fixed; inset: 0; z-index: 99999;
            background: rgba(0,0,0,.85); align-items: center; justify-content: center;
        }
        #sl-dl-overlay.active { display: flex; }
        #sl-dl-box {
            background: #1e1e1e; border: 1px solid #333; border-radius: 18px;
            padding: 36px 32px; width: 90%; max-width: 400px; text-align: center;
            box-shadow: 0 24px 80px rgba(0,0,0,.7);
        }
        #sl-dl-icon { font-size: 44px; color: #e61e1e; margin-bottom: 14px; }
        #sl-dl-title { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 6px; }
        #sl-dl-status { color: #aaa; font-size: 13px; margin: 0 0 20px; min-height: 18px; }
        #sl-dl-track {
            background: #2a2a2a; border-radius: 6px; height: 10px;
            overflow: hidden; margin-bottom: 10px;
        }
        #sl-dl-bar {
            background: linear-gradient(90deg, #e61e1e, #ff4757);
            height: 100%; width: 0%; border-radius: 6px;
            transition: width .6s ease;
        }
        #sl-dl-pct { color: #e61e1e; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
        #sl-dl-hint { color: #555; font-size: 11px; margin: 8px 0 16px; }
        #sl-dl-cancel {
            background: none; border: 1px solid #444; color: #888;
            border-radius: 8px; padding: 6px 18px; font-size: 13px; cursor: pointer;
        }
        #sl-dl-cancel:hover { border-color: #e61e1e; color: #e61e1e; }
    `;
    document.head.appendChild(_style);

    var _pollTimer = null;
    var _currentKey = null;
    var _maxPct = 0;  // progress only ever moves forward

    window._slideshowDlCancel = function () {
        clearInterval(_pollTimer);
        _pollTimer = null;
        _currentKey = null;
        _maxPct = 0;
        document.getElementById('sl-dl-overlay').classList.remove('active');
    };

    function _setProgress(pct, status) {
        // Never decrease the bar — only move forward (unless resetting to 0 on error/cancel)
        pct = Math.max(pct, _maxPct);
        _maxPct = pct;
        document.getElementById('sl-dl-bar').style.width = pct + '%';
        document.getElementById('sl-dl-pct').textContent = pct + '%';
        document.getElementById('sl-dl-status').textContent = status;
    }

    function _setError(msg) {
        _maxPct = 0;
        document.getElementById('sl-dl-bar').style.width = '0%';
        document.getElementById('sl-dl-bar').style.background = '#e61e1e';
        document.getElementById('sl-dl-pct').textContent = '✕';
        document.getElementById('sl-dl-status').textContent = msg || 'Generation failed. Please try again.';
        document.getElementById('sl-dl-cancel').textContent = 'Close';
    }

    // Share the version the viewer is on: append ?track={id} so the recipient's player
    // opens directly on that language (window._ytpTrackId; 0 = primary → plain link).
    window.shareCurrent = function (baseUrl, title, recordUrl, emailUrl, membersUrl) {
        var t = window._ytpTrackId || 0;
        var url = t ? baseUrl + (baseUrl.indexOf('?') === -1 ? '?' : '&') + 'track=' + t : baseUrl;
        if (typeof window.openShareModal === 'function') window.openShareModal(url, title, recordUrl, emailUrl, membersUrl);
    };

    window.startSlideshowDownload = function (routeKey) {
        if (_currentKey && _currentKey !== routeKey) {
            // Different video — reset
            clearInterval(_pollTimer);
            _pollTimer = null;
        }
        _currentKey = routeKey;

        // Act on the version the viewer is currently playing: the visualizer toggle AND
        // the selected language track (window._ytpTrackId; 0 = primary).
        var vizOn   = localStorage.getItem('audioBarsOn') === '1';
        var trackId = window._ytpTrackId || 0;
        // Burn lyrics into the download only when the viewer has them enabled AND
        // they actually exist for the current track (the toggle button is visible).
        var lyrBtn  = document.getElementById('ytpLyricsBtn');
        var lyrOn   = localStorage.getItem('ytpLyricsOn') === '1' && lyrBtn && lyrBtn.style.display !== 'none';
        var _p = [];
        if (vizOn)   _p.push('visualizer=1');
        if (trackId) _p.push('track=' + trackId);
        if (lyrOn)   _p.push('lyrics=1');
        var qs    = _p.length ? '?' + _p.join('&') : '';   // generate + download
        var qsAmp = _p.length ? '&' + _p.join('&') : '';   // appended to progress ?duration=

        _maxPct = 0;
        document.getElementById('sl-dl-bar').style.background = '';  // restore gradient
        document.getElementById('sl-dl-cancel').textContent = 'Cancel';
        _setProgress(0, 'Starting...');
        document.getElementById('sl-dl-overlay').classList.add('active');
        document.getElementById('sl-dl-cancel').style.display = '';

        // Use the global csrf variable set by the layout, with meta tag as fallback
        var csrfMeta = document.querySelector('meta[name="csrf-token"]');
        var token = (typeof csrf !== 'undefined' ? csrf : '') || (csrfMeta ? csrfMeta.getAttribute('content') : '');

        fetch('/videos/' + routeKey + '/slideshow/generate' + qs, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.status === 'ready') {
                _maxPct = 100;
                document.getElementById('sl-dl-bar').style.width = '100%';
                document.getElementById('sl-dl-pct').textContent = '100%';
                document.getElementById('sl-dl-status').textContent = 'Ready! Starting download...';
                document.getElementById('sl-dl-cancel').style.display = 'none';
                setTimeout(function () {
                    window._slideshowDlCancel();
                    window.location.href = '/videos/' + routeKey + '/download' + qs;
                }, 600);
                return;
            }
            if (data.error) {
                _setError('Error: ' + data.error);
                return;
            }

            var duration = data.duration || 0;
            _setProgress(2, 'Generating video...');

            _pollTimer = setInterval(function () {
                fetch('/videos/' + routeKey + '/slideshow/progress?duration=' + duration + qsAmp, {
                    headers: { 'Accept': 'application/json' }
                })
                .then(function (r) { return r.json(); })
                .then(function (prog) {
                    if (prog.status === 'error') {
                        clearInterval(_pollTimer);
                        _pollTimer = null;
                        _setError(prog.message || null);
                        return;
                    }

                    if (prog.status === 'ready') {
                        clearInterval(_pollTimer);
                        _pollTimer = null;
                        _maxPct = 100;
                        document.getElementById('sl-dl-bar').style.width = '100%';
                        document.getElementById('sl-dl-pct').textContent = '100%';
                        document.getElementById('sl-dl-status').textContent = 'Ready! Starting download...';
                        document.getElementById('sl-dl-cancel').style.display = 'none';
                        setTimeout(function () {
                            window._slideshowDlCancel();
                            window.location.href = '/videos/' + routeKey + '/download' + qs;
                        }, 600);
                        return;
                    }

                    // 'waiting' means the process just started — keep the current bar position
                    if (prog.status === 'waiting') return;

                    var pct = prog.percent || 0;
                    var remaining = '';
                    if (duration > 0 && pct > 2) {
                        var secs = Math.round(duration * (100 - pct) / pct);
                        remaining = secs > 60
                            ? ' (~' + Math.ceil(secs / 60) + ' min left)'
                            : ' (~' + secs + 's left)';
                    }
                    _setProgress(pct, 'Generating video...' + remaining);
                })
                .catch(function () { /* ignore transient poll errors */ });
            }, 1500);
        })
        .catch(function () {
            _setProgress(0, 'Failed to start. Please try again.');
        });
    };
}

// ── Video delete dialog ──────────────────────────────────────────────
@auth
@if(Auth::id() === $video->user_id)
(function () {
    var _videoDeleteUrl  = '{{ route('videos.destroy', $video) }}';
    var _videoCsrf       = '{{ csrf_token() }}';
    var _owner2fa        = {{ (Auth::user()->two_factor_enabled && Auth::user()->two_factor_secret) ? 'true' : 'false' }};
    var _dlgId           = 'vaDlg_{{ $video->id }}';
    var _dlgHtml = '<div id="' + _dlgId + '" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;" onclick="if(event.target===this)_closeVaDlg()">'
        + '<div style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);">'
        + '<div style="padding:20px 24px 16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;">'
        + '<div style="display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#ef4444;"><i class="bi bi-trash"></i> Delete Video</div>'
        + '<button onclick="_closeVaDlg()" style="background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;line-height:1;padding:4px;"><i class="bi bi-x-lg"></i></button>'
        + '</div>'
        + '<div style="padding:20px 24px;">'
        + '<p id="' + _dlgId + '_title" style="margin:0 0 12px;font-size:14px;color:var(--text-primary);"></p>'
        + '<div style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:10px 14px;font-size:13px;color:#fca5a5;display:flex;gap:8px;align-items:flex-start;">'
        + '<i class="bi bi-exclamation-triangle-fill" style="flex-shrink:0;margin-top:1px;"></i>'
        + '<span>All views, likes, comments and HLS files will be deleted. This cannot be undone.</span>'
        + '</div>'
        + (_owner2fa ? '<div style="margin-top:16px;"><label style="font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;margin-bottom:8px;"><i class="bi bi-shield-lock-fill" style="color:#a78bfa;"></i>Enter your <strong style=\'color:var(--text-primary);\'>2FA code</strong> to confirm</label>'
        + '<input type="text" id="' + _dlgId + '_otp" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" placeholder="000000"'
        + ' style="width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;color:#fff;font-size:22px;letter-spacing:.3em;text-align:center;box-sizing:border-box;"></div>' : '')
        + '<div id="' + _dlgId + '_err" style="display:none;margin-top:12px;padding:8px 12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#f87171;font-size:13px;"></div>'
        + '</div>'
        + '<div style="padding:12px 24px 20px;display:flex;gap:10px;justify-content:flex-end;">'
        + '<button onclick="_closeVaDlg()" class="action-btn">Cancel</button>'
        + '<button id="' + _dlgId + '_btn" onclick="_confirmVaDlg()" class="action-btn" style="background:#ef4444;color:#fff;border-color:#ef4444;"><i class="bi bi-trash"></i> Delete</button>'
        + '</div>'
        + '</div></div>';

    var _dlgInserted = false;
    function _ensureDlg() {
        if (_dlgInserted) return;
        document.body.insertAdjacentHTML('beforeend', _dlgHtml);
        _dlgInserted = true;
    }

    window.showDeleteModal = function (routeKey, title) {
        _ensureDlg();
        var dlg = document.getElementById(_dlgId);
        document.getElementById(_dlgId + '_title').textContent = 'You are about to permanently delete "' + title + '".';
        document.getElementById(_dlgId + '_err').style.display = 'none';
        if (_owner2fa) { document.getElementById(_dlgId + '_otp').value = ''; }
        dlg.style.display = 'flex';
        dlg.style.alignItems = 'center';
        dlg.style.justifyContent = 'center';
        if (_owner2fa) setTimeout(function () { document.getElementById(_dlgId + '_otp').focus(); }, 100);
        document.addEventListener('keydown', _escHandler);
    };

    window._closeVaDlg = function () {
        var dlg = document.getElementById(_dlgId);
        if (dlg) dlg.style.display = 'none';
        document.removeEventListener('keydown', _escHandler);
    };

    function _escHandler(e) { if (e.key === 'Escape') _closeVaDlg(); }

    window._confirmVaDlg = function () {
        var btn   = document.getElementById(_dlgId + '_btn');
        var errEl = document.getElementById(_dlgId + '_err');
        var otp   = _owner2fa ? document.getElementById(_dlgId + '_otp').value.replace(/\s/g, '') : '';

        if (_owner2fa && otp.length !== 6) {
            errEl.textContent = 'Please enter your 6-digit 2FA code.';
            errEl.style.display = 'block';
            document.getElementById(_dlgId + '_otp').focus();
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Deleting…';
        errEl.style.display = 'none';

        var body = new URLSearchParams({ '_token': _videoCsrf, '_method': 'DELETE' });
        if (_owner2fa) body.append('otp_code', otp);

        fetch(_videoDeleteUrl, {
            method: 'POST',
            headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
            body: body.toString()
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.success) {
                window.location.href = '/';
            } else {
                errEl.textContent = data.message || 'Delete failed.';
                errEl.style.display = 'block';
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-trash"></i> Delete';
                if (_owner2fa) { document.getElementById(_dlgId + '_otp').value = ''; document.getElementById(_dlgId + '_otp').focus(); }
            }
        })
        .catch(function () {
            errEl.textContent = 'An error occurred. Please try again.';
            errEl.style.display = 'block';
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-trash"></i> Delete';
        });
    };
})();
@endif
@endauth
</script>