@extends('layouts.app')

@section('title', $playlist->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Back link --}}
    @auth
        @if(auth()->id() === $playlist->user_id)
            <a href="{{ route('playlists.index') }}" class="inline-flex items-center gap-1 text-gray-400 hover:text-yellow-400 transition-colors text-sm mb-6">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                Back to My Playlists
            </a>
        @endif
    @endauth

    {{-- Playlist Header --}}
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 sm:p-8 mb-6">
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
            <div class="flex-1">
                <div class="flex items-center gap-3 mb-2">
                    <h1 class="text-3xl font-bold text-white">{{ $playlist->name }}</h1>
                    @if($playlist->is_public)
                        <span class="inline-flex items-center gap-1 bg-green-900/40 text-green-400 text-xs font-medium px-2.5 py-1 rounded-full border border-green-800/50">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            Public
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 bg-gray-700/50 text-gray-400 text-xs font-medium px-2.5 py-1 rounded-full border border-gray-600/50">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                            </svg>
                            Private
                        </span>
                    @endif
                </div>

                @if($playlist->description)
                    <p class="text-gray-400 mt-2">{{ $playlist->description }}</p>
                @endif

                <p class="text-gray-500 text-sm mt-3">
                    {{ $playlist->videos->count() }} {{ Str::plural('video', $playlist->videos->count()) }}
                </p>
            </div>

            <div class="flex flex-wrap items-center gap-3">
                {{-- Play All button --}}
                @if($playlist->videos->count() > 0)
                    <button onclick="playFromIndex(0)"
                            id="play-all-btn"
                            class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors shadow-lg shadow-red-900/30">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                        Play All
                    </button>
                @endif

                {{-- Loop toggle --}}
                @if($playlist->videos->count() > 1)
                    <button onclick="toggleLoop()"
                            id="loop-btn"
                            class="inline-flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2.5 rounded-lg font-medium transition-colors border border-gray-600"
                            title="Loop playlist">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        <span id="loop-text">Loop Off</span>
                    </button>
                @endif

                {{-- Shuffle toggle --}}
                @if($playlist->videos->count() > 1)
                    <button onclick="toggleShuffle()"
                            id="shuffle-btn"
                            class="inline-flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2.5 rounded-lg font-medium transition-colors border border-gray-600"
                            title="Shuffle playlist">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                        </svg>
                        <span id="shuffle-text">Shuffle</span>
                    </button>
                @endif

                {{-- Share button --}}
                @if($playlist->is_public)
                    <button onclick="copyPlaylistUrl()"
                            id="share-btn"
                            class="inline-flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-300 px-4 py-2.5 rounded-lg font-medium transition-colors border border-gray-600"
                            title="Copy playlist link">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                        </svg>
                        <span id="share-text">Share</span>
                    </button>
                @endif

                {{-- Owner actions --}}
                @auth
                    @if(auth()->id() === $playlist->user_id)
                        <button onclick="document.getElementById('editModal').classList.remove('hidden')"
                                class="inline-flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-white px-4 py-2.5 rounded-lg font-medium transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                            Edit
                        </button>

                        <form method="POST"
                              action="{{ route('playlists.destroy', $playlist) }}"
                              onsubmit="return confirm('Are you sure you want to delete this playlist? This action cannot be undone.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="inline-flex items-center gap-2 bg-red-900/40 hover:bg-red-900/60 text-red-400 hover:text-red-300 px-4 py-2.5 rounded-lg font-medium transition-colors border border-red-800/50">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                Delete
                            </button>
                        </form>
                    @endif
                @endauth
            </div>
        </div>
    </div>

    @if($playlist->videos->count() > 0)
        <div class="flex flex-col lg:flex-row gap-6">

            {{-- Video Player --}}
            <div class="flex-1 min-w-0">
                <div id="player-wrapper" class="hidden">
                    {{-- YouTube Player Container --}}
                    <div class="relative aspect-video rounded-xl overflow-hidden shadow-2xl shadow-red-900/20 ring-1 ring-gray-800/50 bg-black">
                        <div id="yt-player" class="absolute inset-0 w-full h-full"></div>
                    </div>

                    {{-- Now Playing Info --}}
                    <div class="mt-4 bg-gray-900 rounded-lg border border-gray-800 p-4">
                        <div class="flex items-center justify-between gap-4">
                            <div class="min-w-0">
                                <p class="text-xs text-gray-500 uppercase tracking-wider font-medium mb-1">Now Playing</p>
                                <h2 id="now-playing-title" class="text-lg font-bold text-white truncate"></h2>
                            </div>
                            <div class="flex items-center gap-3 shrink-0">
                                {{-- Previous --}}
                                <button onclick="playPrevious()" id="prev-btn"
                                        class="text-gray-400 hover:text-white transition-colors p-2 rounded-lg hover:bg-gray-800" title="Previous">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                                    </svg>
                                </button>
                                {{-- Next --}}
                                <button onclick="playNext()" id="next-btn"
                                        class="text-gray-400 hover:text-white transition-colors p-2 rounded-lg hover:bg-gray-800" title="Next">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                                    </svg>
                                </button>
                                {{-- Track counter --}}
                                <span id="track-counter" class="text-gray-500 text-sm font-mono"></span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Placeholder before playing --}}
                <div id="player-placeholder" class="relative aspect-video rounded-xl overflow-hidden bg-gray-900 border border-gray-800 flex items-center justify-center cursor-pointer group"
                     onclick="playFromIndex(0)">
                    @if($playlist->videos->first())
                        <img src="{{ $playlist->videos->first()->thumbnail }}"
                             alt="{{ $playlist->name }}"
                             class="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-50 transition-opacity">
                    @endif
                    <div class="relative z-10 text-center">
                        <div class="w-20 h-20 rounded-full bg-red-600 hover:bg-red-700 flex items-center justify-center mx-auto mb-4 shadow-2xl shadow-red-900/50 transition-colors group-hover:scale-110 transform duration-200">
                            <svg class="w-10 h-10 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        </div>
                        <p class="text-white font-bold text-lg">Play All</p>
                        <p class="text-gray-400 text-sm mt-1">{{ $playlist->videos->count() }} {{ Str::plural('video', $playlist->videos->count()) }}</p>
                    </div>
                </div>
            </div>

            {{-- Video List (Sidebar on desktop, below on mobile) --}}
            <div class="lg:w-96 flex-shrink-0">
                <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
                    {{-- List Header --}}
                    <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">
                            Playlist
                        </h3>
                        <span class="text-xs text-gray-500 font-mono">{{ $playlist->videos->count() }} videos</span>
                    </div>

                    {{-- Scrollable Video List --}}
                    <div class="max-h-[600px] overflow-y-auto" id="videoList">
                        @foreach($playlist->videos as $index => $video)
                            <div class="playlist-item group flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-gray-800/70 transition-colors border-b border-gray-800/50 last:border-b-0"
                                 data-video-id="{{ $video->id }}"
                                 data-youtube-id="{{ $video->youtube_id }}"
                                 data-title="{{ $video->title }}"
                                 data-index="{{ $index }}"
                                 onclick="playFromIndex({{ $index }})">

                                {{-- Position / Now Playing Indicator --}}
                                <div class="w-6 text-center shrink-0">
                                    <span class="position-number text-gray-500 text-sm font-mono">{{ $index + 1 }}</span>
                                    <span class="playing-icon hidden text-red-500">
                                        <svg class="w-4 h-4 mx-auto animate-pulse" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 3v18M6 8v8M18 8v8M3 11v2M21 11v2M9 5v14M15 5v14"/>
                                        </svg>
                                    </span>
                                </div>

                                {{-- Thumbnail --}}
                                <div class="shrink-0 relative">
                                    <img src="{{ $video->thumbnail }}"
                                         alt="{{ $video->title }}"
                                         class="w-24 h-14 object-cover rounded"
                                         loading="lazy">
                                    <div class="absolute bottom-0.5 right-0.5 bg-black/80 text-white text-[10px] font-medium px-1 py-0.5 rounded">
                                        {{ $video->formatted_duration }}
                                    </div>
                                </div>

                                {{-- Video Info --}}
                                <div class="flex-1 min-w-0">
                                    <p class="video-title text-sm text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug font-medium">
                                        {{ $video->title }}
                                    </p>
                                </div>

                                {{-- Remove button (owner only, stops propagation) --}}
                                @auth
                                    @if(auth()->id() === $playlist->user_id)
                                        <form method="POST"
                                              action="{{ route('playlists.removeVideo', [$playlist, $video]) }}"
                                              class="shrink-0"
                                              onclick="event.stopPropagation()">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="text-gray-500 hover:text-red-400 transition-colors p-1 opacity-0 group-hover:opacity-100"
                                                    title="Remove from playlist">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                                </svg>
                                            </button>
                                        </form>
                                    @endif
                                @endauth
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @else
        {{-- Empty State --}}
        <div class="flex flex-col items-center justify-center py-20 text-center bg-gray-900 rounded-xl border border-gray-800">
            <div class="w-20 h-20 rounded-full bg-gray-700 flex items-center justify-center mb-6">
                <svg class="w-10 h-10 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                </svg>
            </div>
            <h2 class="text-xl font-semibold text-white mb-2">No videos in this playlist</h2>
            <p class="text-gray-400">Browse videos and add them to this playlist to get started.</p>
            <a href="{{ route('videos.index') }}"
               class="mt-6 inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors">
                Browse Videos
            </a>
        </div>
    @endif
</div>

{{-- Edit Modal --}}
@auth
    @if(auth()->id() === $playlist->user_id)
        <div id="editModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
            {{-- Backdrop --}}
            <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"
                 onclick="document.getElementById('editModal').classList.add('hidden')"></div>

            {{-- Modal Content --}}
            <div class="relative bg-gray-900 rounded-xl border border-gray-800 w-full max-w-lg p-6 shadow-2xl">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-bold text-white">Edit Playlist</h2>
                    <button onclick="document.getElementById('editModal').classList.add('hidden')"
                            class="text-gray-400 hover:text-white transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <form method="POST" action="{{ route('playlists.update', $playlist) }}">
                    @csrf
                    @method('PUT')

                    <div class="mb-4">
                        <label for="edit_name" class="block text-sm font-medium text-gray-300 mb-2">
                            Playlist Name <span class="text-red-400">*</span>
                        </label>
                        <input type="text"
                               name="name"
                               id="edit_name"
                               value="{{ old('name', $playlist->name) }}"
                               required
                               maxlength="255"
                               class="w-full bg-gray-900 border border-gray-600 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors">
                        @error('name')
                            <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="edit_description" class="block text-sm font-medium text-gray-300 mb-2">
                            Description
                        </label>
                        <textarea name="description"
                                  id="edit_description"
                                  rows="3"
                                  class="w-full bg-gray-900 border border-gray-600 text-white placeholder-gray-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors resize-none">{{ old('description', $playlist->description) }}</textarea>
                        @error('description')
                            <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6">
                        <label class="flex items-center gap-3 cursor-pointer group">
                            <div class="relative">
                                <input type="hidden" name="is_public" value="0">
                                <input type="checkbox"
                                       name="is_public"
                                       value="1"
                                       {{ old('is_public', $playlist->is_public) ? 'checked' : '' }}
                                       class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-600 rounded-full peer-checked:bg-red-600 transition-colors"></div>
                                <div class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow-md transform peer-checked:translate-x-5 transition-transform"></div>
                            </div>
                            <span class="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">Make playlist public</span>
                        </label>
                    </div>

                    <div class="flex items-center gap-3">
                        <button type="submit"
                                class="bg-red-600 hover:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors">
                            Save Changes
                        </button>
                        <button type="button"
                                onclick="document.getElementById('editModal').classList.add('hidden')"
                                class="text-gray-400 hover:text-white px-4 py-2.5 rounded-lg font-medium transition-colors">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif
@endauth
@endsection

@push('scripts')
{{-- YouTube IFrame API --}}
<script>
    // Playlist data from server
    @php
        $videoData = $playlist->videos->map(function($v) {
            return ['id' => $v->id, 'youtube_id' => $v->youtube_id, 'title' => $v->title];
        })->values();
    @endphp
    const playlistVideos = @json($videoData);

    let player = null;
    let currentIndex = -1;
    let loopEnabled = false;
    let shuffleEnabled = false;
    let shuffleOrder = [];
    let playerReady = false;

    // Load YouTube IFrame API
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    document.head.appendChild(tag);

    // Called by YouTube API when ready
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('yt-player', {
            height: '100%',
            width: '100%',
            playerVars: {
                autoplay: 0,
                rel: 0,
                modestbranding: 1,
                origin: window.location.origin,
            },
            events: {
                onReady: function() {
                    playerReady = true;
                },
                onStateChange: onPlayerStateChange,
            }
        });
    }

    function getNextShuffleIndex() {
        if (!shuffleEnabled || shuffleOrder.length === 0) return currentIndex + 1;
        const currentShufflePos = shuffleOrder.indexOf(currentIndex);
        if (currentShufflePos === -1 || currentShufflePos >= shuffleOrder.length - 1) {
            return loopEnabled ? shuffleOrder[0] : playlistVideos.length; // end or loop
        }
        return shuffleOrder[currentShufflePos + 1];
    }

    function getPrevShuffleIndex() {
        if (!shuffleEnabled || shuffleOrder.length === 0) return currentIndex - 1;
        const currentShufflePos = shuffleOrder.indexOf(currentIndex);
        if (currentShufflePos <= 0) {
            return loopEnabled ? shuffleOrder[shuffleOrder.length - 1] : -1;
        }
        return shuffleOrder[currentShufflePos - 1];
    }

    function generateShuffleOrder() {
        shuffleOrder = Array.from({ length: playlistVideos.length }, function(_, i) { return i; });
        // Fisher-Yates shuffle
        for (let i = shuffleOrder.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            const temp = shuffleOrder[i];
            shuffleOrder[i] = shuffleOrder[j];
            shuffleOrder[j] = temp;
        }
    }

    function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
            const nextIndex = shuffleEnabled ? getNextShuffleIndex() : currentIndex + 1;
            if (nextIndex >= 0 && nextIndex < playlistVideos.length) {
                playFromIndex(nextIndex);
            } else if (loopEnabled) {
                if (shuffleEnabled) {
                    generateShuffleOrder();
                    playFromIndex(shuffleOrder[0]);
                } else {
                    playFromIndex(0);
                }
            }
        }
    }

    function playFromIndex(index) {
        if (index < 0 || index >= playlistVideos.length) return;

        currentIndex = index;
        const video = playlistVideos[index];

        // Show the player, hide placeholder
        document.getElementById('player-wrapper').classList.remove('hidden');
        const placeholder = document.getElementById('player-placeholder');
        if (placeholder) placeholder.classList.add('hidden');

        // Load video
        if (playerReady && player) {
            player.loadVideoById(video.youtube_id);
        }

        // Update now playing title
        document.getElementById('now-playing-title').textContent = video.title;

        // Update track counter
        document.getElementById('track-counter').textContent = (index + 1) + ' / ' + playlistVideos.length;

        // Highlight active item in list
        highlightActive(index);

        // Scroll the active item into view
        const activeItem = document.querySelector('.playlist-item[data-index="' + index + '"]');
        if (activeItem) {
            activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        // Scroll player into view on mobile
        if (window.innerWidth < 1024) {
            document.getElementById('player-wrapper').scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }

    function playNext() {
        const nextIndex = shuffleEnabled ? getNextShuffleIndex() : currentIndex + 1;
        if (nextIndex >= 0 && nextIndex < playlistVideos.length) {
            playFromIndex(nextIndex);
        } else if (loopEnabled) {
            if (shuffleEnabled) { generateShuffleOrder(); playFromIndex(shuffleOrder[0]); }
            else { playFromIndex(0); }
        }
    }

    function playPrevious() {
        const prevIndex = shuffleEnabled ? getPrevShuffleIndex() : currentIndex - 1;
        if (prevIndex >= 0 && prevIndex < playlistVideos.length) {
            playFromIndex(prevIndex);
        } else if (loopEnabled) {
            if (shuffleEnabled) { playFromIndex(shuffleOrder[shuffleOrder.length - 1]); }
            else { playFromIndex(playlistVideos.length - 1); }
        }
    }

    function highlightActive(index) {
        // Remove active state from all items
        document.querySelectorAll('.playlist-item').forEach(function(item) {
            item.classList.remove('bg-red-900/20', 'border-l-2', 'border-l-red-500');
            item.querySelector('.position-number').classList.remove('hidden');
            item.querySelector('.playing-icon').classList.add('hidden');
            item.querySelector('.video-title').classList.remove('text-yellow-400');
            item.querySelector('.video-title').classList.add('text-gray-300');
        });

        // Add active state to current item
        const activeItem = document.querySelector('.playlist-item[data-index="' + index + '"]');
        if (activeItem) {
            activeItem.classList.add('bg-red-900/20', 'border-l-2', 'border-l-red-500');
            activeItem.querySelector('.position-number').classList.add('hidden');
            activeItem.querySelector('.playing-icon').classList.remove('hidden');
            activeItem.querySelector('.video-title').classList.remove('text-gray-300');
            activeItem.querySelector('.video-title').classList.add('text-yellow-400');
        }
    }

    function toggleLoop() {
        loopEnabled = !loopEnabled;
        const btn = document.getElementById('loop-btn');
        const text = document.getElementById('loop-text');

        if (loopEnabled) {
            btn.classList.remove('bg-gray-700', 'hover:bg-gray-600', 'text-gray-300', 'border-gray-600');
            btn.classList.add('bg-red-600/20', 'hover:bg-red-600/30', 'text-red-400', 'border-red-800/50');
            text.textContent = 'Loop On';
        } else {
            btn.classList.remove('bg-red-600/20', 'hover:bg-red-600/30', 'text-red-400', 'border-red-800/50');
            btn.classList.add('bg-gray-700', 'hover:bg-gray-600', 'text-gray-300', 'border-gray-600');
            text.textContent = 'Loop Off';
        }
    }

    function toggleShuffle() {
        shuffleEnabled = !shuffleEnabled;
        const btn = document.getElementById('shuffle-btn');
        const text = document.getElementById('shuffle-text');

        if (shuffleEnabled) {
            generateShuffleOrder();
            // If currently playing, put current index at front of shuffle
            if (currentIndex >= 0) {
                shuffleOrder = shuffleOrder.filter(function(i) { return i !== currentIndex; });
                shuffleOrder.unshift(currentIndex);
            }
            btn.classList.remove('bg-gray-700', 'hover:bg-gray-600', 'text-gray-300', 'border-gray-600');
            btn.classList.add('bg-yellow-400/20', 'hover:bg-yellow-400/30', 'text-yellow-400', 'border-yellow-800/50');
            text.textContent = 'Shuffle On';
        } else {
            shuffleOrder = [];
            btn.classList.remove('bg-yellow-400/20', 'hover:bg-yellow-400/30', 'text-yellow-400', 'border-yellow-800/50');
            btn.classList.add('bg-gray-700', 'hover:bg-gray-600', 'text-gray-300', 'border-gray-600');
            text.textContent = 'Shuffle';
        }
    }

    function copyPlaylistUrl() {
        const url = '{{ route("playlists.show", $playlist) }}';
        navigator.clipboard.writeText(url).then(function() {
            const shareText = document.getElementById('share-text');
            const btn = document.getElementById('share-btn');
            shareText.textContent = 'Copied!';
            btn.classList.add('ring-2', 'ring-red-500');
            setTimeout(function() {
                shareText.textContent = 'Share';
                btn.classList.remove('ring-2', 'ring-red-500');
            }, 2000);
        }).catch(function() {
            // Fallback
            const input = document.createElement('input');
            input.value = url;
            document.body.appendChild(input);
            input.select();
            document.execCommand('copy');
            document.body.removeChild(input);
            document.getElementById('share-text').textContent = 'Copied!';
            setTimeout(function() {
                document.getElementById('share-text').textContent = 'Share';
            }, 2000);
        });
    }
</script>

{{-- Drag-and-Drop Reorder Script (owner only) --}}
@auth
    @if(auth()->id() === $playlist->user_id && $playlist->videos->count() > 1)
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const videoList = document.getElementById('videoList');
            if (!videoList) return;

            let draggedItem = null;
            let placeholder = null;

            const items = videoList.querySelectorAll('.playlist-item');

            items.forEach(item => {
                item.addEventListener('mousedown', function(e) {
                    // Only start drag on long press or if holding shift
                    // Don't interfere with normal clicks (play) or form buttons
                    if (e.target.closest('form') || e.target.closest('button')) return;
                });
            });
        });
    </script>
    @endif
@endauth
@endpush