@extends('layouts.admin')

@section('title', 'Manage Videos')

@section('admin')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Admin Navigation --}}
    @include('admin._nav', ['current' => 'admin.videos'])

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <h1 class="text-3xl font-bold bg-gradient-to-r from-red-400 to-yellow-400 bg-clip-text text-transparent">
            Manage Videos
        </h1>

        {{-- Sync Button --}}
        <form method="POST" action="{{ route('admin.videos.sync') }}">
            @csrf
            <button type="submit"
                    class="flex items-center gap-2 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white px-5 py-2.5 rounded-lg font-medium transition-all text-sm shadow-lg shadow-red-900/30">
                <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>
                Sync from YouTube
            </button>
        </form>
    </div>

    {{-- Search Bar --}}
    <div class="mb-6">
        <form method="GET" action="{{ route('admin.videos') }}" class="flex gap-3">
            <div class="flex-1 relative">
                <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="Search videos by title..."
                       class="w-full bg-gray-800 border border-gray-700 rounded-lg pl-10 pr-4 py-2.5 text-white placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors">
            </div>
            <button type="submit"
                    class="bg-gray-700 hover:bg-gray-600 text-white px-5 py-2.5 rounded-lg font-medium transition-colors text-sm">
                Search
            </button>
            @if(request('search'))
                <a href="{{ route('admin.videos') }}"
                   class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-5 py-2.5 rounded-lg font-medium transition-colors text-sm flex items-center">
                    Clear
                </a>
            @endif
        </form>
    </div>

    {{-- Videos Table --}}
    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-800 bg-gray-900/80">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Thumbnail</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Title</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">YouTube ID</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Duration</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    @forelse($videos as $video)
                        <tr class="hover:bg-gray-700/50 transition-colors" id="video-row-{{ $video->id }}">
                            <td class="px-4 py-3">
                                <img src="{{ $video->thumbnail }}"
                                     alt="{{ $video->title }}"
                                     class="w-24 h-14 object-cover rounded-md bg-gray-700">
                            </td>
                            <td class="px-4 py-3">
                                <p class="text-white font-medium text-sm truncate max-w-xs">{{ $video->title }}</p>
                                @if($video->description)
                                    <p class="text-gray-400 text-xs mt-1 truncate max-w-xs">{{ $video->description }}</p>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <code class="text-xs bg-gray-900 text-yellow-400 px-2 py-1 rounded font-mono">{{ $video->youtube_id }}</code>
                            </td>
                            <td class="px-4 py-3 text-gray-300 text-sm">
                                {{ $video->formatted_duration }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    {{-- Edit Toggle --}}
                                    <button type="button"
                                            onclick="toggleEdit({{ $video->id }})"
                                            class="text-yellow-400 hover:text-yellow-300 transition-colors p-1.5 rounded-lg hover:bg-gray-600/50"
                                            title="Edit">
                                        <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>
                                    </button>

                                    {{-- Delete --}}
                                    <form method="POST"
                                          action="{{ route('admin.videos.delete', $video) }}"
                                          onsubmit="return confirm('Are you sure you want to delete this video?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="text-red-400 hover:text-red-300 transition-colors p-1.5 rounded-lg hover:bg-gray-600/50"
                                                title="Delete">
                                            <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>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        {{-- Inline Edit Row --}}
                        <tr id="edit-row-{{ $video->id }}" class="hidden bg-gray-750">
                            <td colspan="5" class="px-4 py-4 bg-gray-900/50">
                                <form method="POST" action="{{ route('admin.videos.update', $video) }}" class="flex flex-col sm:flex-row gap-3 items-end">
                                    @csrf
                                    @method('PUT')
                                    <div class="flex-1">
                                        <label class="block text-xs font-medium text-gray-400 mb-1">Title</label>
                                        <input type="text"
                                               name="title"
                                               value="{{ $video->title }}"
                                               class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500">
                                    </div>
                                    <div class="flex-1">
                                        <label class="block text-xs font-medium text-gray-400 mb-1">Description</label>
                                        <input type="text"
                                               name="description"
                                               value="{{ $video->description }}"
                                               class="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500">
                                    </div>
                                    <div class="flex gap-2">
                                        <button type="submit"
                                                class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            Save
                                        </button>
                                        <button type="button"
                                                onclick="toggleEdit({{ $video->id }})"
                                                class="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-12 text-center">
                                <div class="flex flex-col items-center gap-3">
                                    <svg class="w-12 h-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              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>
                                    <p class="text-gray-400 text-lg">No videos found.</p>
                                    <p class="text-gray-500 text-sm">Click "Sync from YouTube" to import videos.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    @if($videos->hasPages())
        <div class="mt-6">
            {{ $videos->links() }}
        </div>
    @endif
</div>

@push('scripts')
<script>
    function toggleEdit(videoId) {
        const editRow = document.getElementById('edit-row-' + videoId);
        if (editRow) {
            editRow.classList.toggle('hidden');
        }
    }
</script>
@endpush
@endsection