@extends('admin.layout')
@section('title', 'Videos')

@section('content')
<div class="toolbar">
    <h2 style="font-size:18px; color:#fff;">Videos</h2>
    <div style="display:flex; gap:8px;">
        <button onclick="openExportModal()" class="btn btn-secondary">⬇ Export CSV</button>
        <a href="{{ route('admin.videos.import') }}" class="btn btn-secondary">📄 Import CSV</a>
        <a href="{{ route('admin.videos.providers') }}" class="btn btn-secondary">📚 Providers</a>
        <a href="{{ route('admin.iframe-whitelist.index') }}" class="btn btn-secondary">🛡️ Iframe Whitelist</a>
        <a href="{{ route('admin.videos.proxy-settings') }}" class="btn btn-secondary">🛰️ Proxy HLS</a>
        <a href="{{ route('admin.categories.index') }}" class="btn btn-secondary">🗂️ Setting Kategori</a>
        <a href="{{ route('admin.tags.index') }}" class="btn btn-secondary">🏷️ Setting Tags</a>
        <a href="{{ route('admin.videos.scan') }}" class="btn btn-warning">🔍 Scan Storage</a>
        <a href="{{ route('admin.videos.import-asset') }}" class="btn btn-warning">📦 Import Asset</a>
        <a href="{{ route('admin.videos.upload') }}" class="btn btn-success">☁️ Upload Video</a>
        <a href="{{ route('admin.bulk-thumbnails.index') }}" class="btn btn-warning">🖼️ Bulk Thumbnail</a>
        <a href="{{ route('admin.videos.create') }}" class="btn btn-primary">+ Tambah Video</a>
    </div>
</div>

@if(session('import_errors') && count(session('import_errors')) > 0)
    <div class="alert alert-error">
        <strong>Detail import:</strong>
        <ul style="margin-left:16px; margin-top:6px;">
            @foreach(session('import_errors') as $err)
                <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if(session('import_report_rows') && count(session('import_report_rows')) > 0)
    <div class="alert" style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
        <div>
            <strong>Hasil import tersimpan.</strong>
            <div style="font-size:12px; color:#aaa; margin-top:4px;">
                Generate: {{ session('import_report_generated_at') ?? '-' }}
            </div>
        </div>
        <a href="{{ route('admin.videos.import.result-export') }}" class="btn btn-secondary">⬇ Export Hasil Import CSV</a>
    </div>
@endif

{{-- Search + Filter --}}
<form method="GET" class="search-bar">
    <input type="text" name="s" class="form-control" placeholder="Cari title, provider, slug..." value="{{ request('s') }}">
    <select name="status" class="form-control" style="max-width:160px">
        <option value="">Semua Status</option>
        <option value="uploaded" {{ request('status') === 'uploaded' ? 'selected' : '' }}>Uploaded</option>
        <option value="encoding" {{ request('status') === 'encoding' ? 'selected' : '' }}>Encoding</option>
        <option value="ready" {{ request('status') === 'ready' ? 'selected' : '' }}>Ready</option>
        <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
        <option value="disabled" {{ request('status') === 'disabled' ? 'selected' : '' }}>Disabled</option>
    </select>
    <select name="provider" class="form-control" style="max-width:170px">
        <option value="">Semua Provider</option>
        @foreach($providers as $p)
            <option value="{{ $p }}" {{ request('provider') === $p ? 'selected' : '' }}>{{ $p }}</option>
        @endforeach
    </select>
    <select name="thumbnail" class="form-control" style="max-width:170px">
        <option value="">Semua Thumbnail</option>
        <option value="no_image" {{ request('thumbnail') === 'no_image' ? 'selected' : '' }}>🚫 Tanpa Gambar</option>
        <option value="has_image" {{ request('thumbnail') === 'has_image' ? 'selected' : '' }}>🖼️ Ada Gambar</option>
    </select>
    @if(isset($prefixes) && $prefixes->count() > 0)
    <select name="prefix" class="form-control" style="max-width:170px">
        <option value="">Semua Prefix</option>
        @foreach($prefixes as $pfx)
            <option value="{{ $pfx }}" {{ request('prefix') === $pfx ? 'selected' : '' }}>📁 {{ $pfx }}</option>
        @endforeach
    </select>
    @endif
    <button type="submit" class="btn btn-secondary">Cari</button>
    @if(request()->hasAny(['s', 'status', 'provider', 'thumbnail', 'prefix']))
        <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">Reset</a>
    @endif
</form>

@if($videos->count() > 0)
    {{-- Bulk Action Bar --}}
    <div id="bulkBar" style="display:none; background:#2a1520; border:1px solid #5a2030; border-radius:6px; padding:10px 16px; margin-bottom:12px; align-items:center; gap:12px; flex-wrap:wrap;">
        <span style="color:#ff6b6b; font-size:13px; font-weight:bold;">🗑 <span id="bulkCount">0</span> video dipilih</span>
        <button type="button" onclick="bulkDeleteSelected()" class="btn btn-sm btn-danger" style="font-size:12px;">🗑 Hapus Selected</button>
        <button type="button" onclick="bulkGenerateThumbnailsSelected()" class="btn btn-sm btn-warning" style="font-size:12px;">🖼️ Regenerate Thumbnail Selected</button>
        @if(request('prefix') || request('status') || request('provider') || request('s') || request('thumbnail'))
        <button type="button" onclick="bulkDeleteAllFiltered()" class="btn btn-sm" style="background:#dc2626; color:#fff; border:none; font-size:12px; border-radius:4px; padding:4px 12px; cursor:pointer;">💀 Hapus SEMUA Hasil Filter</button>
        @endif
        <button type="button" onclick="bulkDeselectAll()" class="btn btn-sm btn-secondary" style="font-size:12px;">☐ Batal</button>
    </div>

    <form id="bulkThumbForm" method="POST" action="{{ route('admin.bulk-thumbnails.start-selected') }}" style="display:none;">
        @csrf
    </form>

    {{-- Bulk Progress --}}
    <div id="bulkProgress" style="display:none; background:#0d1b2a; border:1px solid #1b3a5a; border-radius:8px; padding:16px; margin-bottom:12px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
            <span style="color:#fff; font-size:14px; font-weight:bold;">🗑 Menghapus video...</span>
            <span id="bulkProgressText" style="color:#6fafdf; font-size:13px;">0%</span>
        </div>
        <div style="background:#1a2a3a; border-radius:6px; height:24px; overflow:hidden;">
            <div id="bulkProgressBar" style="background:linear-gradient(90deg,#dc2626,#ef4444); height:100%; width:0%; transition:width 0.3s ease; border-radius:6px;"></div>
        </div>
        <div id="bulkProgressStatus" style="font-size:12px; color:#888; margin-top:6px;"></div>
    </div>

    <table>
        <thead>
            <tr>
                <th style="width:36px;">
                    <input type="checkbox" id="bulkSelectAll" onchange="bulkToggleAll(this.checked)" style="accent-color:#e50914;">
                </th>
                <th style="width:60px">Thumb</th>
                <th>Title</th>
                <th>Provider</th>
                <th>Status</th>
                <th>Error</th>
                <th>Player</th>
                <th style="width:220px">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($videos as $video)
            <tr>
                <td style="padding:4px 8px; vertical-align:middle;">
                    <input type="checkbox" class="bulk-cb" value="{{ $video->id }}" onchange="bulkUpdateCount()" style="accent-color:#e50914;">
                </td>
                <td style="padding:4px 8px; vertical-align:middle;">
                    @php
                        $thumbUrl = $thumbUrls[$video->id] ?? null;
                    @endphp
                    @if($thumbUrl)
                        <img src="{{ $thumbUrl }}" alt="" class="video-thumb" loading="lazy"
                             onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                        <div class="thumb-placeholder" style="display:none;">🎬</div>
                    @else
                        <div class="thumb-placeholder">🎬</div>
                    @endif
                </td>
                <td>
                    <div class="title-cell" data-video-id="{{ $video->slug }}">
                        {{-- Display mode --}}
                        <div class="title-display">
                            <a href="{{ route('admin.videos.show', $video) }}" style="color:#6fafdf; text-decoration:none;">{{ $video->title ?? '—' }}</a>
                            <button type="button" class="title-edit-btn" onclick="startEditTitle(this)" title="Edit title">✏️</button>
                        </div>
                        {{-- Edit mode (hidden by default) --}}
                        <div class="title-edit" style="display:none;">
                            <input type="text" class="title-input" value="{{ $video->title ?? '' }}" maxlength="255">
                            <div style="display:flex; gap:4px; margin-top:4px;">
                                <button type="button" class="btn btn-sm btn-success title-save-btn" onclick="saveTitle(this)">✓</button>
                                <button type="button" class="btn btn-sm btn-secondary title-cancel-btn" onclick="cancelEditTitle(this)">✕</button>
                            </div>
                        </div>
                    </div>
                    <div class="text-muted" style="font-size:11px">{{ $video->slug }}</div>
                </td>
                <td>
                    <span class="badge badge-provider">{{ $video->provider }}</span>
                    @if($video->isSelfHosted())
                        <span class="badge badge-hls" style="margin-left:2px;" title="Self-hosted">☁️</span>
                    @endif
                </td>
                <td>
                    <span class="badge badge-{{ $video->statusBadgeClass() }}">
                        @switch($video->status)
                            @case('uploaded')  ⬆ uploaded @break
                            @case('encoding')  ⏳ encoding @break
                            @case('ready')     ✅ ready @break
                            @case('failed')    ❌ failed @break
                            @case('disabled')  🚫 disabled @break
                            @default           {{ $video->status }}
                        @endswitch
                    </span>
                </td>
                <td>
                    @if($video->error_message)
                        <span class="text-error" title="{{ $video->error_message }}">
                            {{ Str::limit($video->error_message, 60) }}
                        </span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td>
                    @if($video->isPlayable())
                        <a href="{{ route('embed.show', $video) }}" target="_blank" class="btn btn-sm btn-secondary">▶ Play</a>
                        <button type="button" class="btn btn-sm btn-share" onclick="openShare('{{ $video->slug }}')" title="Share">📤</button>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td>
                    <div style="display:flex; gap:4px; align-items:center; flex-wrap:wrap;">
                        <a href="{{ route('admin.videos.show', $video) }}" class="btn btn-sm btn-secondary">Detail</a>

                        @if(!$video->isSelfHosted())
                            <a href="{{ route('admin.videos.edit', $video) }}" class="btn btn-sm btn-secondary">Edit</a>
                        @endif

                        @if($video->canRetryEncode())
                            <form method="POST" action="{{ route('admin.videos.retry', $video) }}">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-warning" onclick="return confirm('Re-encode video ini?')">🔄 Retry</button>
                            </form>
                        @endif

                        @if($video->isReady())
                            <form method="POST" action="{{ route('admin.videos.disable', $video) }}">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Nonaktifkan video ini?')">Disable</button>
                            </form>
                        @elseif($video->status === 'disabled')
                            <form method="POST" action="{{ route('admin.videos.enable', $video) }}">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-success">Enable</button>
                            </form>
                        @endif

                        <form method="POST" action="{{ route('admin.videos.destroy', $video) }}"
                              onsubmit="return confirm('HAPUS PERMANEN video &quot;{{ $video->title }}&quot; beserta semua file storage? Tidak bisa di-undo!')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger" title="Hapus permanen">🗑</button>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div class="pagination" style="display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px;">
        <div style="display:flex; gap:8px; align-items:center;">
            <form id="paginationForm" method="GET" style="display:flex; gap:8px; align-items:center;">
                @foreach(request()->except(['page','per_page']) as $k=>$v)
                    @if(is_array($v))
                        @foreach($v as $vv)
                            <input type="hidden" name="{{ $k }}[]" value="{{ $vv }}">
                        @endforeach
                    @else
                        <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                    @endif
                @endforeach

                <label style="color:#ccc; font-size:13px;">Per halaman:</label>
                <select name="per_page" onchange="document.getElementById('paginationForm').submit()" style="padding:6px;">
                    @foreach([25,50,100,500] as $opt)
                        <option value="{{ $opt }}" {{ (isset($perPage) && $perPage == $opt) ? 'selected' : (request('per_page') == $opt ? 'selected' : '') }}>{{ $opt }}</option>
                    @endforeach
                </select>

                <label style="color:#ccc; font-size:13px; margin-left:8px;">Halaman</label>
                <input type="number" name="page" min="1" max="{{ $videos->lastPage() }}" value="{{ $videos->currentPage() }}" style="width:80px; padding:6px;" />
                <button type="submit" class="btn btn-secondary">Go</button>
            </form>
        </div>

        <div style="display:flex; gap:8px; align-items:center;">
            <div style="color:#aaa; font-size:13px;">Menampilkan <strong>{{ $videos->firstItem() ?? 0 }}</strong> - <strong>{{ $videos->lastItem() ?? 0 }}</strong> dari <strong>{{ $videos->total() }}</strong></div>

            <div style="display:flex; gap:6px; align-items:center;">
                {{-- Previous link --}}
                @if($videos->onFirstPage())
                    <span class="btn btn-secondary" style="opacity:0.5;">&laquo;</span>
                @else
                    <a class="btn btn-secondary" href="{{ $videos->previousPageUrl() }}">&laquo;</a>
                @endif

                {{-- Page numbers (show up to 7 pages with window) --}}
                @php
                    $start = max(1, $videos->currentPage() - 3);
                    $end = min($videos->lastPage(), $videos->currentPage() + 3);
                @endphp
                @if($start > 1)
                    <a class="btn btn-secondary" href="{{ $videos->url(1) }}">1</a>
                    @if($start > 2)
                        <span style="padding:6px 8px;">…</span>
                    @endif
                @endif

                @for($p = $start; $p <= $end; $p++)
                    @if($p == $videos->currentPage())
                        <span class="btn btn-primary">{{ $p }}</span>
                    @else
                        <a class="btn btn-secondary" href="{{ $videos->url($p) }}">{{ $p }}</a>
                    @endif
                @endfor

                @if($end < $videos->lastPage())
                    @if($end < $videos->lastPage() - 1)
                        <span style="padding:6px 8px;">…</span>
                    @endif
                    <a class="btn btn-secondary" href="{{ $videos->url($videos->lastPage()) }}">{{ $videos->lastPage() }}</a>
                @endif

                {{-- Next link --}}
                @if($videos->hasMorePages())
                    <a class="btn btn-secondary" href="{{ $videos->nextPageUrl() }}">&raquo;</a>
                @else
                    <span class="btn btn-secondary" style="opacity:0.5;">&raquo;</span>
                @endif
            </div>
        </div>
    </div>
@else
    <div class="empty-state">
        <p>Belum ada video. Klik "Tambah Video" untuk mulai.</p>
    </div>
@endif

{{-- ═══════════════════════════════════════════════════════ --}}
{{-- THUMBNAIL STYLES --}}
{{-- ═══════════════════════════════════════════════════════ --}}
<style>
    .video-thumb {
        width: 56px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
        background: #1a1a1a;
        display: block;
    }
    .thumb-placeholder {
        width: 56px;
        height: 40px;
        background: #1a1a1a;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #444;
    }
</style>

{{-- ═══════════════════════════════════════════════════════ --}}
{{-- INLINE TITLE EDIT STYLES & SCRIPT --}}
{{-- ═══════════════════════════════════════════════════════ --}}
<style>
    .title-cell .title-display {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .title-edit-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 12px;
        padding: 2px 4px;
        border-radius: 3px;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .title-cell:hover .title-edit-btn {
        opacity: 0.6;
    }
    .title-edit-btn:hover {
        opacity: 1 !important;
        background: rgba(255,255,255,0.08);
    }
    .title-input {
        width: 100%;
        padding: 5px 8px;
        background: #0d1b2a;
        border: 1px solid #3a6fa0;
        border-radius: 4px;
        color: #fff;
        font-size: 13px;
        outline: none;
    }
    .title-input:focus {
        border-color: #6fafdf;
        box-shadow: 0 0 0 2px rgba(111,175,223,0.2);
    }
    .title-saving {
        font-size: 11px;
        color: #cfcf6f;
        margin-top: 4px;
    }
</style>

<script>
    function startEditTitle(btn) {
        var cell = btn.closest('.title-cell');
        cell.querySelector('.title-display').style.display = 'none';
        var editDiv = cell.querySelector('.title-edit');
        editDiv.style.display = 'block';
        var input = editDiv.querySelector('.title-input');
        input.focus();
        input.select();
    }

    function cancelEditTitle(btn) {
        var cell = btn.closest('.title-cell');
        cell.querySelector('.title-edit').style.display = 'none';
        cell.querySelector('.title-display').style.display = 'flex';
    }

    function saveTitle(btn) {
        var cell = btn.closest('.title-cell');
        var videoId = cell.dataset.videoId;
        var input = cell.querySelector('.title-input');
        var newTitle = input.value.trim();

        if (!newTitle) {
            input.style.borderColor = '#e50914';
            return;
        }

        // Disable buttons while saving
        var saveBtn = cell.querySelector('.title-save-btn');
        var cancelBtn = cell.querySelector('.title-cancel-btn');
        saveBtn.disabled = true;
        saveBtn.textContent = '⏳';
        cancelBtn.disabled = true;

        fetch('/admin/videos/' + videoId + '/title', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
            },
            body: JSON.stringify({ title: newTitle }),
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            if (data.success) {
                // Update displayed title
                var link = cell.querySelector('.title-display a');
                link.textContent = data.title;

                // Switch back to display mode
                cell.querySelector('.title-edit').style.display = 'none';
                cell.querySelector('.title-display').style.display = 'flex';

                // Brief green flash to indicate success
                link.style.color = '#6fbf6f';
                setTimeout(function() { link.style.color = '#6fafdf'; }, 1000);
            } else {
                alert('Gagal update title: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(function(err) {
            alert('Gagal update title: ' + err.message);
        })
        .finally(function() {
            saveBtn.disabled = false;
            saveBtn.textContent = '✓';
            cancelBtn.disabled = false;
        });
    }

    // Allow Enter to save, Escape to cancel
    document.addEventListener('keydown', function(e) {
        if (e.target.classList.contains('title-input')) {
            if (e.key === 'Enter') {
                e.preventDefault();
                e.target.closest('.title-edit').querySelector('.title-save-btn').click();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                e.target.closest('.title-edit').querySelector('.title-cancel-btn').click();
            }
        }
    });
</script>

{{-- ═══════════════════════════════════════════════════════ --}}
{{-- EXPORT CSV MODAL --}}
{{-- ═══════════════════════════════════════════════════════ --}}
<div id="exportModal" class="export-modal-overlay" onclick="if(event.target===this)closeExportModal()">
    <div class="export-modal">
        <div class="export-modal-header">
            <h3>⬇ Export CSV</h3>
            <button onclick="closeExportModal()" class="share-close">&times;</button>
        </div>
        <div class="export-modal-body">
            <p style="color:#aaa; margin-bottom:14px; font-size:13px;">Pilih provider yang ingin diekspor, atau pilih "Semua Provider" untuk ekspor semua data.</p>
            <div class="export-field">
                <label style="color:#ccc; font-size:13px; margin-bottom:6px; display:block;">Provider</label>
                <select id="exportProvider" class="form-control" style="width:100%; padding:8px 10px; background:#222; color:#fff; border:1px solid #444; border-radius:6px;">
                    <option value="">Semua Provider</option>
                    @foreach($providers as $p)
                        <option value="{{ $p }}">{{ $p }}</option>
                    @endforeach
                </select>
            </div>
            <div class="export-field" style="margin-top:12px;">
                <label style="color:#ccc; font-size:13px; margin-bottom:6px; display:block;">Status</label>
                <select id="exportStatus" class="form-control" style="width:100%; padding:8px 10px; background:#222; color:#fff; border:1px solid #444; border-radius:6px;">
                    <option value="">Semua Status</option>
                    <option value="uploaded">Uploaded</option>
                    <option value="encoding">Encoding</option>
                    <option value="ready">Ready</option>
                    <option value="failed">Failed</option>
                    <option value="disabled">Disabled</option>
                </select>
            </div>
            @if(isset($prefixes) && $prefixes->count() > 0)
            <div class="export-field" style="margin-top:12px;">
                <label style="color:#ccc; font-size:13px; margin-bottom:6px; display:block;">Prefix</label>
                <select id="exportPrefix" class="form-control" style="width:100%; padding:8px 10px; background:#222; color:#fff; border:1px solid #444; border-radius:6px;">
                    <option value="">Semua Prefix</option>
                    @foreach($prefixes as $pfx)
                        <option value="{{ $pfx }}">📁 {{ $pfx }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div style="margin-top:20px; display:flex; gap:8px; justify-content:flex-end;">
                <button onclick="closeExportModal()" class="btn btn-secondary">Batal</button>
                <button onclick="doExport()" class="btn btn-primary">⬇ Download CSV</button>
            </div>
        </div>
    </div>
</div>

<style>
    .export-modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    .export-modal-overlay.active { display: flex; }
    .export-modal {
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 10px;
        width: 440px;
        max-width: 95vw;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .export-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #2a2a2a;
    }
    .export-modal-header h3 {
        margin: 0; font-size: 16px; color: #fff;
    }
    .export-modal-body {
        padding: 20px;
    }
</style>

<script>
    function openExportModal() {
        // Pre-select from current page filters
        var currentProvider = '{{ request('provider') }}';
        var currentStatus = '{{ request('status') }}';
        var currentPrefix = '{{ request('prefix') }}';
        document.getElementById('exportProvider').value = currentProvider;
        document.getElementById('exportStatus').value = currentStatus;
        var prefixEl = document.getElementById('exportPrefix');
        if (prefixEl) prefixEl.value = currentPrefix;
        document.getElementById('exportModal').classList.add('active');
    }
    function closeExportModal() {
        document.getElementById('exportModal').classList.remove('active');
    }
    function doExport() {
        var provider = document.getElementById('exportProvider').value;
        var status = document.getElementById('exportStatus').value;
        var prefixEl = document.getElementById('exportPrefix');
        var prefix = prefixEl ? prefixEl.value : '';
        var params = new URLSearchParams();
        var search = '{{ request('s') }}';
        if (search) params.set('s', search);
        if (status) params.set('status', status);
        if (provider) params.set('provider', provider);
        if (prefix) params.set('prefix', prefix);
        var url = '{{ route('admin.videos.export') }}' + '?' + params.toString();
        window.location.href = url;
        closeExportModal();
    }
</script>

{{-- ═══════════════════════════════════════════════════════ --}}
{{-- SHARE MODAL --}}
{{-- ═══════════════════════════════════════════════════════ --}}
@include('admin.videos._share-modal')

{{-- ═══════════════════════════════════════════════════════ --}}
{{-- BULK DELETE JS --}}
{{-- ═══════════════════════════════════════════════════════ --}}
<script>
    const CSRF = '{{ csrf_token() }}';
    const BULK_DELETE_URL = '{{ route("admin.videos.bulk-destroy") }}';
    const BULK_DELETE_FILTERED_URL = '{{ route("admin.videos.bulk-destroy-filtered") }}';
    const BULK_DELETE_BATCH_URL = '{{ route("admin.videos.bulk-destroy-batch") }}';
    const BATCH_SIZE = 10;

    /* ── Helper: POST FormData (avoid mod_security JSON block) ── */
    async function postForm(url, params) {
        const fd = new FormData();
        fd.append('_token', CSRF);
        for (const [key, val] of Object.entries(params)) {
            if (Array.isArray(val)) {
                val.forEach(v => fd.append(key + '[]', v));
            } else {
                fd.append(key, val);
            }
        }
        const res = await fetch(url, { method: 'POST', body: fd });
        if (!res.ok) {
            const txt = await res.text();
            throw new Error('HTTP ' + res.status + ': ' + txt.substring(0, 200));
        }
        return await res.json();
    }

    /* ── Checkbox helpers ── */
    function bulkToggleAll(checked) {
        document.querySelectorAll('.bulk-cb').forEach(cb => cb.checked = checked);
        bulkUpdateCount();
    }
    function bulkDeselectAll() {
        document.getElementById('bulkSelectAll').checked = false;
        bulkToggleAll(false);
    }
    function bulkUpdateCount() {
        const checked = document.querySelectorAll('.bulk-cb:checked');
        const bar = document.getElementById('bulkBar');
        document.getElementById('bulkCount').textContent = checked.length;
        bar.style.display = checked.length > 0 ? 'flex' : 'none';
    }

    /* ── Delete selected IDs (client-side chunking) ── */
    async function bulkDeleteSelected() {
        const ids = [...document.querySelectorAll('.bulk-cb:checked')].map(cb => parseInt(cb.value));
        if (!ids.length) return;
        if (!confirm('Hapus ' + ids.length + ' video? Data & file HLS akan dihapus permanen!')) return;

        showProgress(ids.length);
        let deleted = 0, errors = 0;

        for (let i = 0; i < ids.length; i += BATCH_SIZE) {
            const batch = ids.slice(i, i + BATCH_SIZE);
            try {
                const data = await postForm(BULK_DELETE_URL, { ids: batch });
                deleted += data.deleted || 0;
                errors += (data.errors || []).length;
            } catch (e) {
                console.error('Batch error:', e);
                errors += batch.length;
            }
            updateProgress(Math.min(i + BATCH_SIZE, ids.length), ids.length, deleted, errors);
        }
        finishProgress(deleted, errors);
    }

    function bulkGenerateThumbnailsSelected() {
        const ids = [...document.querySelectorAll('.bulk-cb:checked')].map(cb => parseInt(cb.value));
        if (!ids.length) return;
        if (!confirm('Regenerate thumbnail untuk ' + ids.length + ' video terpilih? Thumbnail lama akan diganti.')) return;

        const form = document.getElementById('bulkThumbForm');
        form.innerHTML = '';

        const token = document.createElement('input');
        token.type = 'hidden';
        token.name = '_token';
        token.value = CSRF;
        form.appendChild(token);

        ids.forEach(id => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids[]';
            input.value = id;
            form.appendChild(input);
        });

        form.submit();
    }

    /* ── Delete ALL filtered (server-side cache approach) ── */
    async function bulkDeleteAllFiltered() {
        const total = {{ $videos->total() }};
        if (!confirm('Hapus SEMUA ' + total + ' video yang cocok filter ini? \nData & file HLS akan dihapus permanen!')) return;

        showProgress(total);

        // Step 1: tell server to cache ID batches
        let task;
        try {
            task = await postForm(BULK_DELETE_FILTERED_URL, {
                s: '{{ request('s') }}',
                status: '{{ request('status') }}',
                provider: '{{ request('provider') }}',
                thumbnail: '{{ request('thumbnail') }}',
                prefix: '{{ request('prefix') }}'
            });
        } catch (e) {
            alert('Gagal memulai proses hapus: ' + e.message);
            hideProgress();
            return;
        }
        if (!task.total) { alert('Tidak ada video untuk dihapus.'); hideProgress(); return; }

        // Step 2: process batches one by one
        let deleted = 0, errors = 0;
        for (let b = 0; b < task.total_batches; b++) {
            try {
                const d2 = await postForm(BULK_DELETE_BATCH_URL, { batch: b });
                deleted += d2.deleted || 0;
                errors += (d2.errors || []).length;
            } catch (e) {
                console.error('Batch error:', e);
                errors += BATCH_SIZE;
            }
            updateProgress(Math.min((b + 1) * BATCH_SIZE, task.total), task.total, deleted, errors);
        }
        finishProgress(deleted, errors);
    }

    /* ── Progress helpers ── */
    function showProgress(total) {
        document.getElementById('bulkBar').style.display = 'none';
        const el = document.getElementById('bulkProgress');
        el.style.display = 'block';
        document.getElementById('bulkProgressBar').style.width = '0%';
        document.getElementById('bulkProgressText').textContent = '0 / ' + total;
        document.getElementById('bulkProgressStatus').textContent = 'Memulai...';
    }
    function hideProgress() {
        document.getElementById('bulkProgress').style.display = 'none';
    }
    function updateProgress(current, total, deleted, errors) {
        const pct = Math.round(current / total * 100);
        document.getElementById('bulkProgressBar').style.width = pct + '%';
        document.getElementById('bulkProgressText').textContent = current + ' / ' + total + '  (' + pct + '%)';
        document.getElementById('bulkProgressStatus').textContent = 'Terhapus: ' + deleted + '  |  Error: ' + errors;
    }
    function finishProgress(deleted, errors) {
        document.getElementById('bulkProgressBar').style.width = '100%';
        document.getElementById('bulkProgressBar').style.background = errors ? '#d97706' : '#16a34a';
        document.getElementById('bulkProgressText').textContent = 'Selesai!';
        document.getElementById('bulkProgressStatus').innerHTML =
            '✅ Terhapus: <b>' + deleted + '</b>  |  ❌ Error: <b>' + errors + '</b>' +
            ' — <a href="' + window.location.href + '" style="color:#6fafdf; text-decoration:underline;">Refresh Halaman</a>';
    }
</script>
@endsection