@extends('layouts.app')

@section('title', $playlist->name . ' | ' . config('app.name'))

@section('extra_styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.css">
    <style>
        .playlist-header {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
            padding: 24px;
            background: var(--bg-secondary);
            border-radius: 12px;
        }

        .playlist-thumbnail {
            width: 240px;
            height: 135px;
            border-radius: 12px;
            overflow: hidden;
            background: #333;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .playlist-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .playlist-thumbnail .placeholder {
            font-size: 48px;
            color: var(--text-secondary);
        }

        .playlist-info {
            flex: 1;
        }

        .playlist-title {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .playlist-meta {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 12px;
        }

        .playlist-description {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 16px;
            line-height: 1.5;
        }

        .playlist-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .yt-play-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            background: var(--brand-red);
            color: white;
            border: none;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
            text-decoration: none;
        }

        .yt-play-btn:hover {
            background: #cc1a1a;
        }

        .yt-shuffle-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
            text-decoration: none;
        }

        .yt-shuffle-btn:hover {
            background: var(--border-color);
        }

        .playlist-video-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .playlist-video-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px;
            border-radius: 8px;
            background: var(--bg-secondary);
            transition: background 0.2s;
        }

        .playlist-video-item:hover {
            background: var(--border-color);
        }

        .video-position {
            width: 32px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 16px;
            font-weight: 500;
        }

        .video-position.with-drag-handle {
            margin-left: 8px;
        }

        .video-thumb {
            width: 160px;
            height: 90px;
            border-radius: 8px;
            overflow: hidden;
            background: #333;
            flex-shrink: 0;
            position: relative;
            cursor: pointer;
        }

        .video-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-duration {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .video-details {
            flex: 1;
            min-width: 0;
        }

        .video-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-title a {
            color: inherit;
            text-decoration: none;
        }

        .video-meta {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .video-channel {
            color: var(--text-secondary);
            text-decoration: none;
        }

        .video-channel:hover {
            color: var(--text-primary);
        }

        .video-actions {
            display: flex;
            gap: 8px;
        }

        .remove-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: background 0.2s, color 0.2s;
        }

        .remove-btn:hover {
            background: var(--brand-red);
            color: white;
        }

        .drag-handle {
            cursor: grab;
            color: var(--text-secondary);
            padding: 8px;
            display: flex;
            align-items: center;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .drag-handle i {
            font-size: 16px;
        }

        /* Drag and drop styles */
        .playlist-video-list.sortable-ghost {
            opacity: 0.4;
            background: var(--border-color);
        }

        .playlist-video-list.sortable-drag {
            background: var(--bg-secondary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .playlist-video-item.sortable-chosen {
            background: var(--border-color);
        }

        .playlist-video-item.dragging {
            cursor: grabbing !important;
        }

        .drag-overlay {
            display: none;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-icon {
            font-size: 64px;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

        .empty-title {
            font-size: 20px;
            margin-bottom: 8px;
        }

        .empty-text {
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .playlist-header {
                flex-direction: column;
            }

            .playlist-thumbnail {
                width: 100%;
                height: 180px;
            }

            .video-thumb {
                width: 120px;
                height: 68px;
            }

            .playlist-video-item {
                flex-wrap: wrap;
            }

            .video-position {
                display: none;
            }
        }
    </style>
@endsection

@section('content')
    <div class="playlist-header">
        <div class="playlist-thumbnail">
            @if($playlist->thumbnail_url)
                <img src="{{ $playlist->thumbnail_url }}" alt="{{ $playlist->name }}">
            @else
                <span class="placeholder">
                    <i class="bi bi-collection-play"></i>
                </span>
            @endif
        </div>
        <div class="playlist-info">
            <h1 class="playlist-title">{{ $playlist->name }}</h1>
            <div class="playlist-meta">
                {{ $playlist->video_count }} videos • {{ $playlist->formatted_duration }} •
                {{ $playlist->visibility === 'public' ? 'Public' : 'Private' }}
                @if($playlist->is_default)
                    <span style="background: var(--brand-red); color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; margin-left: 8px;">Watch Later</span>
                @endif
            </div>
            @if($playlist->description)
                <div class="playlist-description">{{ $playlist->description }}</div>
            @endif
            <div class="playlist-actions">
                @if($playlist->video_count > 0)
                    <a href="{{ route('playlists.playAll', $playlist->id) }}" class="yt-play-btn">
                        <i class="bi bi-play-fill"></i> Play All
                    </a>
                    <a href="{{ route('playlists.shuffle', $playlist->id) }}" class="yt-shuffle-btn">
                        <i class="bi bi-shuffle"></i> Shuffle
                    </a>
                @endif
                @if($playlist->canEdit(Auth::user()))
                    <button class="yt-shuffle-btn" onclick="openEditPlaylistModal()">
                        <i class="bi bi-pencil"></i> Edit
                    </button>
                @endif
            </div>
        </div>
    </div>

    @if($videos->isEmpty())
        <div class="empty-state">
            <i class="bi bi-collection-play empty-icon"></i>
            <h2 class="empty-title">No videos in this playlist</h2>
            <p class="empty-text">Add videos to this playlist to watch them here.</p>
        </div>
    @else
        <div class="playlist-video-list" id="playlistVideoList" data-current-page="{{ $videos->currentPage() }}" data-per-page="{{ $videos->perPage() }}">
            @foreach($videos as $index => $video)
                <div class="playlist-video-item{{ $playlist->canEdit(Auth::user()) ? ' has-drag-handle' : '' }}" data-video-id="{{ $video->id }}" data-global-position="{{ $index + ($videos->currentPage() - 1) * $videos->perPage() }}">
                    @if($playlist->canEdit(Auth::user()))
                        <div class="drag-handle" title="Drag to reorder">
                            <i class="bi bi-grip-vertical"></i>
                        </div>
                    @endif
                    <div class="video-position{{ !$playlist->canEdit(Auth::user()) ? '' : ' with-drag-handle' }}">{{ $index + 1 + ($videos->currentPage() - 1) * $videos->perPage() }}</div>
                    <a href="{{ route('videos.show', $video->id) }}?playlist={{ $playlist->id }}" class="video-thumb">
                        <img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}">
                        <span class="video-duration">{{ $video->formatted_duration }}</span>
                    </a>
                    <div class="video-details">
                        <div class="video-title">
                            <a href="{{ route('videos.show', $video->id) }}?playlist={{ $playlist->id }}">{{ $video->title }}</a>
                        </div>
                        <div class="video-meta">
<a href="{{ route('channel', $video->user_id) }}" class="video-channel">{{ $video->user->name }}</a>
                            • {{ $video->view_count }} views
                            • {{ $video->created_at->diffForHumans() }}
                        </div>
                    </div>
                    @if($playlist->canEdit(Auth::user()))
                        <div class="video-actions">
                            <form action="{{ route('playlists.removeVideo', [$playlist->id, $video->id]) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="remove-btn" title="Remove from playlist">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        <div style="margin-top: 24px;">
            {{ $videos->links() }}
        </div>
    @endif

    <!-- SortableJS Library -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <!-- Edit Playlist Modal -->
    @if($playlist->canEdit(Auth::user()))
    <div id="editPlaylistModal" class="edit-playlist-modal-overlay" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center;">
        <div class="edit-playlist-modal-content" style="background: #282828; border-radius: 16px; width: 90%; max-width: 480px; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,0.6); overflow: hidden; animation: modalSlideIn 0.3s ease;">
            <!-- Header -->
            <div class="edit-playlist-modal-header" style="display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #3f3f3f;">
                <h2 style="font-size: 20px; font-weight: 600; margin: 0; color: #fff;">Edit Details</h2>
                <button type="button" onclick="closeEditPlaylistModal()" style="background: transparent; border: none; color: #aaa; cursor: pointer; font-size: 24px; padding: 4px; line-height: 1; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: all 0.2s;">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <!-- Body -->
            <div style="padding: 24px; flex: 1; overflow-y: auto;">
                <!-- Thumbnail Upload -->
                <div style="margin-bottom: 24px;">
                    <label style="display: block; margin-bottom: 12px; font-weight: 500; color: #fff; font-size: 14px;">Thumbnail</label>
                    <div id="playlistThumbnailContainer" style="position: relative; width: 100%; aspect-ratio: 16/9; max-width: 240px; border-radius: 12px; overflow: hidden; background: #1a1a1a; cursor: pointer; transition: all 0.2s; margin: 0 auto;" onclick="document.getElementById('playlistThumbnailInput').click()">
                        @if($playlist->thumbnail_url && strpos($playlist->thumbnail_url, 'ui-avatars.com') === false)
                            <img id="playlistThumbnailPreview" src="{{ $playlist->thumbnail_url }}" style="width: 100%; height: 100%; object-fit: cover;">
                        @else
                            <img id="playlistThumbnailPreview" src="" style="width: 100%; height: 100%; object-fit: cover; display: none;">
                        @endif
                        <div id="playlistThumbnailPlaceholder" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #1a1a1a; @if($playlist->thumbnail_url && strpos($playlist->thumbnail_url, 'ui-avatars.com') === false)display: none;@endif">
                            <i class="bi bi-image" style="font-size: 32px; color: #555; margin-bottom: 8px;"></i>
                            <span style="font-size: 12px; color: #777;">Upload thumbnail</span>
                        </div>
                        <div style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); padding: 6px 10px; border-radius: 6px; display: flex; align-items: center; gap: 4px;">
                            <i class="bi bi-camera" style="color: white; font-size: 14px;"></i>
                            <span style="color: white; font-size: 12px;">Change</span>
                        </div>
                    </div>
                    <input type="file" id="playlistThumbnailInput" name="thumbnail" accept="image/*" style="display: none;" onchange="handlePlaylistThumbnailUpload(this)">
                    @if($playlist->thumbnail_url && strpos($playlist->thumbnail_url, 'ui-avatars.com') === false)
                        <button type="button" onclick="removePlaylistThumbnail(event)" style="display: block; margin: 12px auto 0; background: transparent; border: 1px solid #555; color: #aaa; padding: 6px 16px; border-radius: 18px; cursor: pointer; font-size: 12px; transition: all 0.2s;">Remove thumbnail</button>
                    @endif
                </div>

                <!-- Name Input -->
                <div class="form-group" style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #fff; font-size: 14px;">Name</label>
                    <input type="text" name="name" value="{{ $playlist->name }}" required
                        style="width: 100%; padding: 14px 16px; border: 1px solid #3f3f3f; border-radius: 10px; background: #1a1a1a; color: #fff; font-size: 14px; outline: none; transition: all 0.2s;">
                </div>

                <!-- Description Input -->
                <div class="form-group" style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #fff; font-size: 14px;">Description</label>
                    <textarea name="description" class="form-control" rows="3" placeholder="Tell viewers about your playlist"
                        style="width: 100%; padding: 14px 16px; border: 1px solid #3f3f3f; border-radius: 10px; background: #1a1a1a; color: #fff; font-size: 14px; outline: none; transition: all 0.2s; resize: none;">{{ $playlist->description }}</textarea>
                </div>

                <!-- Visibility Toggle -->
                <div class="form-group" style="margin-bottom: 20px;">
                    <label style="display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 16px; background: #1a1a1a; border-radius: 10px; border: 1px solid #3f3f3f; transition: all 0.2s;">
                        <input type="checkbox" name="visibility" value="public" {{ $playlist->visibility === 'public' ? 'checked' : '' }}
                            style="width: 20px; height: 20px; accent-color: #e61e1e; cursor: pointer;">
                        <div style="flex: 1;">
                            <span style="color: #fff; font-size: 14px; font-weight: 500;">Make playlist public</span>
                            <p style="margin: 2px 0 0; font-size: 12px; color: #777;">Anyone can search for and view this playlist</p>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Footer -->
            <div style="padding: 16px 24px; border-top: 1px solid #3f3f3f; display: flex; gap: 12px; justify-content: space-between;">
                @if(!$playlist->is_default)
                    <button type="button" onclick="deletePlaylist()" style="background: transparent; border: 1px solid #e61e1e; color: #e61e1e; padding: 12px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s;">
                        <i class="bi bi-trash" style="margin-right: 6px;"></i>Delete
                    </button>
                @else
                    <div></div>
                @endif
                <div style="display: flex; gap: 12px;">
                    <button type="button" onclick="closeEditPlaylistModal()" style="background: #3f3f3f; border: none; color: #fff; padding: 12px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s;">Cancel</button>
                    <button type="submit" form="editPlaylistForm" style="background: #e61e1e; border: none; color: #fff; padding: 12px 24px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s;">
                        <i class="bi bi-check-lg" style="margin-right: 4px;"></i>Save
                    </button>
                </div>
            </div>
        </div>
    </div>

    <form id="editPlaylistForm" method="POST" action="{{ route('playlists.update', $playlist->id) }}" enctype="multipart/form-data" style="display: none;">
        @csrf
        @method('PUT')
        <input type="hidden" name="name" value="{{ $playlist->name }}">
        <input type="hidden" name="description" value="{{ $playlist->description }}">
        <input type="hidden" name="visibility" value="{{ $playlist->visibility }}">
        <input type="file" name="thumbnail" id="editPlaylistThumbnailFile" accept="image/*">
    </form>

    <script>
    // Open Edit Playlist Modal
    function openEditPlaylistModal() {
        const modal = document.getElementById('editPlaylistModal');
        modal.style.display = 'flex';

        // Sync form values
        const nameInput = modal.querySelector('input[name="name"]');
        const descInput = modal.querySelector('textarea[name="description"]');
        const visInput = modal.querySelector('input[name="visibility"]');

        if (nameInput) nameInput.value = '{{ $playlist->name }}';
        if (descInput) descInput.value = '{{ $playlist->description }}';
    }

    // Close Edit Playlist Modal
    function closeEditPlaylistModal() {
        const modal = document.getElementById('editPlaylistModal');
        modal.style.display = 'none';
    }

    // Handle Thumbnail Upload
    function handlePlaylistThumbnailUpload(input) {
        if (input.files && input.files[0]) {
            const file = input.files[0];

            // Validate file type
            if (!file.type.startsWith('image/')) {
                alert('Please select an image file');
                return;
            }

            // Validate file size (max 5MB)
            if (file.size > 5 * 1024 * 1024) {
                alert('Image size must be less than 5MB');
                return;
            }

            // Preview image
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('playlistThumbnailPreview');
                const placeholder = document.getElementById('playlistThumbnailPlaceholder');

                preview.src = e.target.result;
                preview.style.display = 'block';
                if (placeholder) placeholder.style.display = 'none';
            };
            reader.readAsDataURL(file);

            // Copy file to hidden form input
            const formFileInput = document.getElementById('editPlaylistThumbnailFile');
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            formFileInput.files = dataTransfer.files;
        }
    }

    // Remove Thumbnail
    function removePlaylistThumbnail(event) {
        event.stopPropagation();

        if (confirm('Are you sure you want to remove the thumbnail?')) {
            // Show placeholder
            const preview = document.getElementById('playlistThumbnailPreview');
            const placeholder = document.getElementById('playlistThumbnailPlaceholder');

            preview.src = '';
            preview.style.display = 'none';
            if (placeholder) placeholder.style.display = 'flex';

            // Clear file inputs
            document.getElementById('playlistThumbnailInput').value = '';
            document.getElementById('editPlaylistThumbnailFile').value = '';

            // Add hidden input to indicate thumbnail removal
            const form = document.getElementById('editPlaylistForm');
            let removeInput = form.querySelector('input[name="remove_thumbnail"]');
            if (!removeInput) {
                removeInput = document.createElement('input');
                removeInput.type = 'hidden';
                removeInput.name = 'remove_thumbnail';
                removeInput.value = '1';
                form.appendChild(removeInput);
            }
        }
    }

    // Submit Edit Playlist Form
    document.addEventListener('DOMContentLoaded', function() {
        const editForm = document.getElementById('editPlaylistForm');
        if (editForm) {
            editForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // Sync visible form values to hidden form
                const modal = document.getElementById('editPlaylistModal');
                const visibleName = modal.querySelector('input[name="name"]');
                const visibleDesc = modal.querySelector('textarea[name="description"]');
                const visibleVis = modal.querySelector('input[name="visibility"]');

                const hiddenName = editForm.querySelector('input[name="name"]');
                const hiddenDesc = editForm.querySelector('input[name="description"]');
                const hiddenVis = editForm.querySelector('input[name="visibility"]');

                if (hiddenName) hiddenName.value = visibleName ? visibleName.value : '';
                if (hiddenDesc) hiddenDesc.value = visibleDesc ? visibleDesc.value : '';
                if (hiddenVis) hiddenVis.value = visibleVis.checked ? 'public' : 'private';

                // Submit the form via AJAX
                const formData = new FormData(editForm);

                fetch(editForm.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast('Playlist updated!');
                        closeEditPlaylistModal();
                        // Reload page to show updated info
                        window.location.reload();
                    } else {
                        alert(data.message || 'Failed to update playlist');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Failed to update playlist');
                });
            });
        }
    });

    // Simple toast notification
    function showToast(message) {
        const existing = document.querySelector('.edit-playlist-toast');
        if (existing) existing.remove();

        const toast = document.createElement('div');
        toast.className = 'edit-playlist-toast';
        toast.style.cssText = `
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            color: #0f0f0f;
            padding: 14px 28px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            z-index: 10001;
            animation: fadeInUp 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            max-width: 90%;
            text-align: center;
        `;
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.style.animation = 'fadeOutDown 0.3s ease';
            setTimeout(() => toast.remove(), 300);
        }, 2500);
    }

    // Initialize Sortable for drag and drop reordering
    document.addEventListener('DOMContentLoaded', function() {
        const videoList = document.getElementById('playlistVideoList');

        if (videoList && typeof Sortable !== 'undefined') {
            new Sortable(videoList, {
                handle: '.drag-handle',
                animation: 150,
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                dragClass: 'sortable-drag',
                easing: 'cubic-bezier(1, 0, 0, 1)',
                delay: 0,
                forceFallback: false,

                onStart: function(evt) {
                    evt.item.classList.add('dragging');
                },

                onEnd: function(evt) {
                    evt.item.classList.remove('dragging');

                    // Get the new order of video IDs with their global positions
                    const items = videoList.querySelectorAll('.playlist-video-item');

                    // Collect video IDs in new order
                    const videoIds = Array.from(items).map(item => parseInt(item.dataset.videoId));

                    // Get global starting position from the first item
                    const firstItem = items[0];
                    const startPosition = firstItem ? parseInt(firstItem.dataset.globalPosition) : 0;

                    // Update position numbers visually (relative to current page)
                    items.forEach((item, index) => {
                        const positionEl = item.querySelector('.video-position');
                        if (positionEl) {
                            positionEl.textContent = index + 1;
                        }
                        // Update global position data attribute for future reorders
                        item.dataset.globalPosition = startPosition + index;
                    });

                    // Send AJAX request to save the new order
                    fetch('{{ route("playlists.reorder", $playlist->id) }}', {
                        method: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ video_ids: videoIds })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            console.log('Playlist reordered successfully');
                        } else {
                            console.error('Failed to reorder playlist:', data.message);
                            // Optionally reload to restore original order on error
                        }
                    })
                    .catch(error => {
                        console.error('Error reordering playlist:', error);
                    });
                }
            });
        }
    });

    function deletePlaylist() {
        if (confirm('Are you sure you want to delete this playlist?')) {
            fetch('{{ route("playlists.destroy", $playlist->id) }}', {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '{{ route("playlists.index") }}';
                }
            });
        }
    }

    // Close modal when clicking outside
    document.getElementById('editPlaylistModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeEditPlaylistModal();
        }
    });

    // Close on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const modal = document.getElementById('editPlaylistModal');
            if (modal && modal.style.display === 'flex') {
                closeEditPlaylistModal();
            }
        }
    });
    </script>

    <style>
    /* Toast animations */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateX(-50%) translateY(20px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes fadeOutDown {
        from { opacity: 1; transform: translateX(-50%) translateY(0); }
        to { opacity: 0; transform: translateX(-50%) translateY(20px); }
    }

    /* Modal animations */
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Modal overlay */
    .edit-playlist-modal-overlay {
        backdrop-filter: blur(4px);
    }

    /* Header button hover */
    .edit-playlist-modal-header button:hover {
        background: #3f3f3f !important;
        color: #fff !important;
    }

    /* Input focus states */
    .edit-playlist-modal-content input:focus,
    .edit-playlist-modal-content textarea:focus {
        border-color: #e61e1e !important;
        box-shadow: 0 0 0 2px rgba(230, 30, 30, 0.2);
    }

    /* Thumbnail container hover */
    #playlistThumbnailContainer:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    /* Button hover effects */
    .edit-playlist-modal-footer button:hover {
        opacity: 0.9;
    }

    /* Delete button hover */
    button[onclick="deletePlaylist()"]:hover {
        background: #cc1a1a !important;
        color: white !important;
    }

    /* Save button hover */
    button[type="submit"][form="editPlaylistForm"]:hover {
        background: #cc1a1a !important;
    }
    </style>
    @endif
@endsection