@extends('admin.layout')
@section('title', 'Scan Storage')

@section('content')
<h2 style="font-size:18px; color:#fff; margin-bottom:20px;">🔍 Scan Storage Bucket</h2>

<div style="background:#1a2a3a; border:1px solid #2a3a4a; border-radius:6px; padding:12px 16px; margin-bottom:20px; font-size:13px; color:#6fafdf;">
    <strong>Scan & Import.</strong> Scan file video (.mp4, .m3u8) dari bucket storage, auto-detect thumbnail, lalu import ke database.
    Laravel <u>TIDAK download, TIDAK copy, TIDAK reupload</u> — hanya mendaftarkan pointer.
</div>

<div style="background:#1a1f2d; border:1px solid #2a3a4a; border-radius:8px; padding:16px; margin-bottom:20px;">
    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;">
        <h3 style="margin:0; font-size:15px; color:#fff;">⏱️ Auto Scan Storage (Job)</h3>
        @php $autoEnabled = (bool) data_get($autoScanSettings ?? [], 'enabled', false); @endphp
        <span class="badge {{ $autoEnabled ? 'badge-active' : 'badge-disabled' }}">{{ $autoEnabled ? 'AKTIF' : 'NONAKTIF' }}</span>
    </div>

    <form method="POST" action="{{ route('admin.videos.scan.auto-settings.save') }}">
        @csrf
        @method('PUT')

        <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px;">
            <div class="form-group" style="margin-bottom:0;">
                <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                    <input type="checkbox" name="auto_scan_enabled" value="1" {{ old('auto_scan_enabled', data_get($autoScanSettings ?? [], 'enabled', false)) ? 'checked' : '' }}>
                    <span>Aktifkan auto-scan</span>
                </label>
            </div>

            <div class="form-group" style="margin-bottom:0;">
                <label for="auto_scan_interval">Interval</label>
                <select id="auto_scan_interval" name="auto_scan_interval" class="form-control">
                    @php $selectedInterval = (int) old('auto_scan_interval', data_get($autoScanSettings ?? [], 'interval_minutes', 10)); @endphp
                    <option value="5" {{ $selectedInterval === 5 ? 'selected' : '' }}>Setiap 5 menit</option>
                    <option value="10" {{ $selectedInterval === 10 ? 'selected' : '' }}>Setiap 10 menit</option>
                    <option value="15" {{ $selectedInterval === 15 ? 'selected' : '' }}>Setiap 15 menit</option>
                </select>
            </div>

            <div class="form-group" style="margin-bottom:0;">
                <label for="auto_scan_driver">Storage Driver</label>
                <select id="auto_scan_driver" name="auto_scan_driver" class="form-control">
                    @foreach($drivers as $driver => $label)
                        <option value="{{ $driver }}" {{ old('auto_scan_driver', data_get($autoScanSettings ?? [], 'driver', config('video_storage.default_driver'))) === $driver ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div style="display:grid; grid-template-columns:1fr 2fr; gap:12px; margin-bottom:12px;">
            <div class="form-group" style="margin-bottom:0;">
                <label for="auto_scan_thumb_prefix">Thumbnail Prefix</label>
                <input type="text" id="auto_scan_thumb_prefix" name="auto_scan_thumb_prefix" class="form-control"
                       value="{{ old('auto_scan_thumb_prefix', data_get($autoScanSettings ?? [], 'thumb_prefix', config('video.thumbnail_prefix', 'image'))) }}"
                       placeholder="image">
            </div>

            <div class="form-group" style="margin-bottom:0;">
                <label>Pilih Prefix yang di-auto-scan</label>
                <div style="max-height:110px; overflow:auto; border:1px solid #2a3a4a; border-radius:6px; padding:8px; background:#101826;">
                    @php
                        $selectedPrefixes = old('auto_scan_prefixes', $selectedAutoPrefixes ?? []);
                    @endphp
                    @forelse(($autoScanPrefixes ?? []) as $prefix)
                        <label style="display:flex; align-items:center; gap:6px; font-size:12px; color:#ccc; margin-bottom:6px;">
                            <input type="checkbox" name="auto_scan_prefixes[]" value="{{ $prefix }}" {{ in_array($prefix, $selectedPrefixes, true) ? 'checked' : '' }}>
                            <span>{{ $prefix }}</span>
                        </label>
                    @empty
                        <div style="font-size:12px; color:#666;">Prefix belum terdeteksi untuk driver ini.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
            <button type="submit" class="btn btn-primary">💾 Simpan Auto Scan</button>
            <form method="POST" action="{{ route('admin.videos.scan.auto-run-now') }}" style="display:inline; margin:0;">
                @csrf
                <button type="submit" class="btn btn-sm" style="background:#16a34a; color:#fff; border-color:#16a34a;">
                    ▶️ Run Auto Scan Now
                </button>
            </form>
            <span style="font-size:12px; color:#888;">Cron tetap jalankan <code>php artisan schedule:run</code> tiap menit agar job ini berjalan.</span>
        </div>
    </form>

    @if(session('auto_scan_output'))
        <div style="margin-top:12px; padding:10px; border:1px solid #2a3a4a; border-radius:6px; background:#0b1320;">
            <div style="font-size:12px; color:#9fb4cf; margin-bottom:6px;"><strong style="color:#dbeafe;">Output Run Auto Scan Now:</strong></div>
            <pre style="font-size:11px; color:#8ad0ff; margin:0; white-space:pre-wrap;">{{ session('auto_scan_output') }}</pre>
        </div>
    @endif

    @if(!empty($autoScanLastStatus))
        <div style="margin-top:12px; padding:10px; border:1px solid #2a3a4a; border-radius:6px; background:#0f1724; font-size:12px; color:#9fb4cf;">
            <strong style="color:#dbeafe;">Last Auto Scan:</strong>
            {{ data_get($autoScanLastStatus, 'ran_at', '-') }} |
            New: <span style="color:#facc15;">{{ data_get($autoScanLastStatus, 'new_found', 0) }}</span> |
            Imported: <span style="color:#22c55e;">{{ data_get($autoScanLastStatus, 'imported', 0) }}</span> |
            Skipped: <span style="color:#f59e0b;">{{ data_get($autoScanLastStatus, 'skipped', 0) }}</span>
        </div>
    @endif

    @if(!empty($autoScanHeartbeat))
        @php
            $heartbeatAt = data_get($autoScanHeartbeat, 'at');
            $hbFresh = false;
            if ($heartbeatAt) {
                try {
                    $hbFresh = \Illuminate\Support\Carbon::parse($heartbeatAt)->gt(now()->subMinutes(2));
                } catch (\Throwable $e) {
                    $hbFresh = false;
                }
            }
        @endphp
        <div style="margin-top:8px; padding:10px; border:1px solid #2a3a4a; border-radius:6px; background:#0b1320; font-size:12px; color:#9fb4cf;">
            <strong style="color:#dbeafe;">Scheduler Heartbeat:</strong>
            <span style="color:{{ $hbFresh ? '#22c55e' : '#f59e0b' }}; font-weight:600;">{{ $hbFresh ? 'AKTIF' : 'LAMBAT/TIDAK TERBARU' }}</span>
            | Last ping: {{ $heartbeatAt ?: '-' }}
            @if(data_get($autoScanHeartbeat, 'host')) | Host: {{ data_get($autoScanHeartbeat, 'host') }} @endif
            @if(data_get($autoScanHeartbeat, 'pid')) | PID: {{ data_get($autoScanHeartbeat, 'pid') }} @endif
        </div>
    @endif
</div>

@if($errors->any())
    <div class="alert alert-error">
        <ul style="margin-left:16px;">
            @foreach($errors->all() as $err)
                <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
@endif

{{-- ═══════════════════════════════════════════ --}}
{{-- SCAN FORM --}}
{{-- ═══════════════════════════════════════════ --}}
<form method="POST" action="{{ route('admin.videos.scan.post') }}" id="scanForm">
    @csrf

    <div style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:20px;">
        {{-- Storage Driver --}}
        <div class="form-group" style="margin-bottom:0;">
            <label for="storage_driver">Storage Driver</label>
            <select id="storage_driver" name="storage_driver" class="form-control" style="max-width:200px" required>
                @foreach($drivers as $driver => $label)
                    <option value="{{ $driver }}" {{ ($scanDriver ?? old('storage_driver', config('video_storage.default_driver'))) === $driver ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Video Prefix --}}
        <div class="form-group" style="margin-bottom:0;">
            <label for="video_prefix">Video Prefix</label>
            <div style="display:flex; gap:4px; align-items:center;">
                <input type="text" id="video_prefix" name="video_prefix" class="form-control"
                       style="max-width:200px" required
                       value="{{ $videoPrefix ?? old('video_prefix', config('video.video_prefix', 'video1')) }}"
                       placeholder="video1">
                <select id="video_prefix_select" class="form-control" style="max-width:140px; font-size:12px; display:none;"
                        onchange="if(this.value) document.getElementById('video_prefix').value=this.value;">
                </select>
            </div>
        </div>

        {{-- Thumbnail Prefix --}}
        <div class="form-group" style="margin-bottom:0;">
            <label for="thumb_prefix">Thumbnail Prefix</label>
            <div style="display:flex; gap:4px; align-items:center;">
                <input type="text" id="thumb_prefix" name="thumb_prefix" class="form-control"
                       style="max-width:200px" required
                       value="{{ $thumbPrefix ?? old('thumb_prefix', config('video.thumbnail_prefix', 'image')) }}"
                       placeholder="image">
                <select id="thumb_prefix_select" class="form-control" style="max-width:140px; font-size:12px; display:none;"
                        onchange="if(this.value) document.getElementById('thumb_prefix').value=this.value;">
                </select>
            </div>
        </div>

        {{-- Scan Button --}}
        <div>
            <button type="submit" class="btn btn-primary" id="scanBtn">
                🔍 Scan
            </button>
            <button type="button" class="btn btn-success" id="scanNewBtn" onclick="startScanNew()" style="background:#22c55e; border-color:#22c55e;">
                🚀 Scan & Import New
            </button>
            <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">Kembali</a>
        </div>
    </div>
</form>

{{-- ═══════════════════════════════════════════ --}}
{{-- SCAN NEW PROGRESS PANEL --}}
{{-- ═══════════════════════════════════════════ --}}
<div id="scanNewPanel" style="display:none; margin-bottom:20px; background:#0d1b2a; border:1px solid #1b3a5a; border-radius:8px; padding:20px;">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
        <h3 style="font-size:14px; color:#fff; margin:0;">🚀 Scan & Import New — Progress</h3>
        <button type="button" id="scanCancelBtn" onclick="cancelScanNew()" style="display:none; background:#dc2626; color:#fff; border:none; border-radius:4px; padding:4px 12px; font-size:11px; cursor:pointer;">
            ✕ Cancel
        </button>
    </div>

    {{-- Progress Bar --}}
    <div style="background:#1a2a3a; border-radius:6px; height:28px; overflow:hidden; margin-bottom:10px; position:relative;">
        <div id="scanNewBar" style="background:linear-gradient(90deg, #22c55e, #16a34a); height:100%; width:0%; transition:width 0.3s ease; border-radius:6px;"></div>
        <span id="scanNewPercent" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:12px; font-weight:bold; color:#fff;">0%</span>
    </div>

    {{-- Status --}}
    <div id="scanNewStatus" style="font-size:13px; color:#6fafdf; margin-bottom:8px;">Memulai...</div>

    {{-- Stats --}}
    <div id="scanNewStats" style="display:none; margin-bottom:12px;">
        <div style="display:flex; gap:16px; font-size:13px;">
            <span>✅ Imported: <strong id="scanNewImported" style="color:#22c55e;">0</strong></span>
            <span>⏭️ Skipped: <strong id="scanNewSkipped" style="color:#eab308;">0</strong></span>
            <span>📦 Batch: <strong id="scanNewBatch" style="color:#6fafdf;">—</strong></span>
        </div>
    </div>

    {{-- Log --}}
    <div style="background:#0a1622; border:1px solid #1b2a3a; border-radius:6px; padding:10px; max-height:200px; overflow-y:auto; font-family:monospace; font-size:11px;" id="scanNewLog"></div>

    {{-- Result --}}
    <div id="scanNewResult" style="display:none; margin-top:12px; padding:12px; border-radius:6px;"></div>
</div>

{{-- ═══════════════════════════════════════════ --}}
{{-- SCAN RESULTS --}}
{{-- ═══════════════════════════════════════════ --}}
@if($scanResults !== null)
    <div style="margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
        <div style="font-size:13px; color:#888;">
            Ditemukan <strong style="color:#fff;">{{ $scanResults['total'] }}</strong> file
            @if($scanResults['truncated'])
                <span style="color:#cfcf6f;">(menampilkan max {{ count($scanResults['files']) }})</span>
            @endif
        </div>

        {{-- Filter Buttons --}}
        <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap;">
            {{-- Prefix Search --}}
            <input type="text" id="prefixSearch" class="form-control" placeholder="Filter prefix/path..."
                   style="max-width:200px; font-size:12px; padding:4px 10px; height:30px;"
                   oninput="applyPrefixSearch()">

            <span style="font-size:12px; color:#666; margin-right:4px;">Filter:</span>
            <button type="button" class="btn btn-sm filter-btn active" data-filter="all" onclick="applyFilter('all')" style="font-size:12px; padding:4px 12px;">
                Semua (<span id="countAll">{{ count($scanResults['files']) }}</span>)
            </button>
            <button type="button" class="btn btn-sm filter-btn" data-filter="new" onclick="applyFilter('new')" style="font-size:12px; padding:4px 12px;">
                🆕 Belum Import (<span id="countNew">{{ collect($scanResults['files'])->where('already_imported', false)->count() }}</span>)
            </button>
            <button type="button" class="btn btn-sm filter-btn" data-filter="imported" onclick="applyFilter('imported')" style="font-size:12px; padding:4px 12px;">
                🔵 Sudah Import (<span id="countImported">{{ collect($scanResults['files'])->where('already_imported', true)->count() }}</span>)
            </button>
        </div>
    </div>

    <style>
        .filter-btn {
            background: #1a2a3a;
            color: #888;
            border: 1px solid #2a3a4a;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .filter-btn:hover { background: #243444; color: #aaa; }
        .filter-btn.active { background: #e50914; color: #fff; border-color: #e50914; }
        tr.row-hidden { display: none !important; }

        /* Pagination */
        .scan-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin: 16px 0;
            flex-wrap: wrap;
        }
        .scan-pagination button {
            min-width: 36px;
            height: 32px;
            padding: 0 8px;
            background: #1a2a3a;
            color: #aaa;
            border: 1px solid #2a3a4a;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.15s;
        }
        .scan-pagination button:hover { background: #243444; color: #fff; }
        .scan-pagination button.active { background: #e50914; color: #fff; border-color: #e50914; }
        .scan-pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
        .scan-pagination .page-info {
            font-size: 12px;
            color: #666;
            margin: 0 8px;
        }
        .per-page-select {
            background: #1a2a3a;
            color: #aaa;
            border: 1px solid #2a3a4a;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            margin-left: 12px;
        }
    </style>

    @if(count($scanResults['files']) > 0)

        <form method="POST" action="{{ route('admin.videos.scan.import') }}" id="importForm">
            @csrf
            <input type="hidden" name="storage_driver" value="{{ $scanDriver }}">

            {{-- Toolbar --}}
            <div style="display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap;">
                <button type="submit" class="btn btn-success" id="importBtn" disabled>
                    📦 Import Selected (<span id="selectedCount">0</span>)
                </button>

                {{-- Import All New button --}}
                @php $newCount = collect($scanResults['files'])->where('already_imported', false)->count(); @endphp
                @if($newCount > 0)
                <button type="button" class="btn btn-sm" id="importAllNewBtn"
                        onclick="importAllNew()"
                        style="background:#e50914; color:#fff; font-size:12px; padding:6px 16px; border:none; border-radius:4px; cursor:pointer;">
                    🚀 Import All New ({{ $newCount }})
                </button>
                @endif

                <button type="button" class="btn btn-secondary btn-sm" onclick="toggleSelectAll()">
                    ☑ Select All New
                </button>
                <button type="button" class="btn btn-secondary btn-sm" onclick="deselectAll()">
                    ☐ Deselect All
                </button>
                <span style="font-size:11px; color:#555; margin-left:8px;">
                    ✅ = thumbnail detected &nbsp; ⬜ = no thumbnail &nbsp; 🔵 = already imported
                </span>
            </div>

            {{-- Pagination Top --}}
            <div class="scan-pagination" id="paginationTop"></div>

            {{-- Results Table --}}
            <table>
                <thead>
                    <tr>
                        <th style="width:40px;">
                            <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this.checked)" style="accent-color:#e50914;">
                        </th>
                        <th>File Path</th>
                        <th style="width:70px;">Type</th>
                        <th style="width:100px;">Size</th>
                        <th style="width:120px;">Thumbnail</th>
                        <th style="width:100px;">Status</th>
                    </tr>
                </thead>
                <tbody id="scanTableBody">
                    @foreach($scanResults['files'] as $index => $file)
                    <tr data-imported="{{ $file['already_imported'] ? '1' : '0' }}" data-row-index="{{ $index }}" style="{{ $file['already_imported'] ? 'opacity:0.5;' : '' }}">
                        <td>
                            @if(!$file['already_imported'])
                                <input type="checkbox"
                                       class="file-checkbox"
                                       data-index="{{ $index }}"
                                       onchange="updateSelection()"
                                       style="accent-color:#e50914;">
                                <input type="hidden" class="file-path-input"
                                       name="files[{{ $index }}][path]"
                                       value="{{ $file['path'] }}" disabled>
                                <input type="hidden" class="file-type-input"
                                       name="files[{{ $index }}][type]"
                                       value="{{ $file['type'] }}" disabled>
                                <input type="hidden" class="file-thumb-input"
                                       name="files[{{ $index }}][thumbnail_path]"
                                       value="{{ $file['thumbnail_path'] ?? '' }}" disabled>
                            @else
                                <span style="color:#6fafdf; font-size:14px;" title="Already imported">🔵</span>
                            @endif
                        </td>
                        <td>
                            <div style="font-size:13px; word-break:break-all;">{{ $file['path'] }}</div>
                            <div style="font-size:11px; color:#555;">{{ $file['filename'] }}</div>
                        </td>
                        <td>
                            <span class="badge {{ $file['type'] === 'hls' ? 'badge-hls' : 'badge-auto' }}">
                                {{ strtoupper($file['type']) }}
                            </span>
                        </td>
                        <td>
                            <span style="font-size:12px; color:#888;">
                                {{ $file['size_human'] ?? '—' }}
                            </span>
                        </td>
                        <td>
                            @if($file['has_thumbnail'])
                                <span style="color:#6fbf6f; font-size:12px;" title="{{ $file['thumbnail_path'] }}">
                                    ✅ {{ basename($file['thumbnail_path']) }}
                                </span>
                            @else
                                <span style="color:#555; font-size:12px;">⬜ not found</span>
                            @endif
                        </td>
                        <td>
                            @if($file['already_imported'])
                                <span class="badge badge-encoding">imported</span>
                            @else
                                <span class="badge badge-ready">new</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- Pagination Bottom --}}
            <div class="scan-pagination" id="paginationBottom"></div>
        </form>
    @else
        <div class="empty-state">
            <p style="font-size:14px;">Tidak ditemukan file video di prefix "{{ $videoPrefix }}".</p>
            <p style="font-size:12px; color:#555; margin-top:8px;">Pastikan video prefix dan storage driver sudah benar.</p>
        </div>
    @endif
@endif

<script>
    // ═══════════════════════════════════════════
    //  PAGINATION + FILTER ENGINE
    // ═══════════════════════════════════════════

    var currentFilter = 'all';
    var currentPage = 1;
    var perPage = 50;
    var allRows = [];
    var filteredRows = [];

    // Collect all rows on load
    (function init() {
        var rows = document.querySelectorAll('#scanTableBody tr');
        rows.forEach(function(row) {
            allRows.push(row);
            row.style.display = 'none'; // hide all initially
        });
        applyFilter('all');
    })();

    function applyFilter(filter) {
        currentFilter = filter;
        currentPage = 1;

        // Update active button
        document.querySelectorAll('.filter-btn').forEach(function(btn) {
            btn.classList.toggle('active', btn.dataset.filter === filter);
        });

        // Build filtered list (combining status filter + prefix search)
        buildFilteredRows();
        renderPage();
    }

    function applyPrefixSearch() {
        currentPage = 1;
        buildFilteredRows();
        renderPage();
    }

    function buildFilteredRows() {
        var prefixQuery = (document.getElementById('prefixSearch')?.value || '').toLowerCase().trim();

        filteredRows = [];
        allRows.forEach(function(row) {
            var isImported = row.dataset.imported === '1';

            // Status filter
            if (currentFilter === 'new' && isImported) return;
            if (currentFilter === 'imported' && !isImported) return;

            // Prefix/path search filter
            if (prefixQuery) {
                var pathCell = row.querySelector('td:nth-child(2)');
                var pathText = pathCell ? pathCell.textContent.toLowerCase() : '';
                if (pathText.indexOf(prefixQuery) === -1) return;
            }

            filteredRows.push(row);
        });
    }

    function renderPage() {
        var totalFiltered = filteredRows.length;
        var totalPages = Math.max(1, Math.ceil(totalFiltered / perPage));

        if (currentPage > totalPages) currentPage = totalPages;

        var start = (currentPage - 1) * perPage;
        var end = start + perPage;

        // Hide all rows first
        allRows.forEach(function(row) { row.style.display = 'none'; });

        // Show only rows for current page
        for (var i = start; i < end && i < totalFiltered; i++) {
            filteredRows[i].style.display = '';
        }

        // Render pagination controls
        renderPagination('paginationTop', totalFiltered, totalPages);
        renderPagination('paginationBottom', totalFiltered, totalPages);

        // Update select-all checkbox
        updateSelectAllState();
    }

    function renderPagination(containerId, totalItems, totalPages) {
        var container = document.getElementById(containerId);
        if (!container) return;

        if (totalItems <= perPage) {
            container.innerHTML = '<span class="page-info">Menampilkan ' + totalItems + ' file</span>';
            return;
        }

        var html = '';

        // Prev button
        html += '<button ' + (currentPage <= 1 ? 'disabled' : '') + ' onclick="goToPage(' + (currentPage - 1) + ')">‹</button>';

        // Page numbers with smart ellipsis
        var pages = getPageNumbers(currentPage, totalPages);
        for (var i = 0; i < pages.length; i++) {
            if (pages[i] === '...') {
                html += '<span class="page-info">…</span>';
            } else {
                html += '<button class="' + (pages[i] === currentPage ? 'active' : '') + '" onclick="goToPage(' + pages[i] + ')">' + pages[i] + '</button>';
            }
        }

        // Next button
        html += '<button ' + (currentPage >= totalPages ? 'disabled' : '') + ' onclick="goToPage(' + (currentPage + 1) + ')">›</button>';

        // Page info
        var startItem = (currentPage - 1) * perPage + 1;
        var endItem = Math.min(currentPage * perPage, totalItems);
        html += '<span class="page-info">' + startItem + '–' + endItem + ' dari ' + totalItems + '</span>';

        // Per-page selector
        html += '<select class="per-page-select" onchange="changePerPage(this.value)">';
        [25, 50, 100, 200].forEach(function(n) {
            html += '<option value="' + n + '"' + (n === perPage ? ' selected' : '') + '>' + n + ' / halaman</option>';
        });
        html += '</select>';

        container.innerHTML = html;
    }

    function getPageNumbers(current, total) {
        if (total <= 7) {
            var arr = [];
            for (var i = 1; i <= total; i++) arr.push(i);
            return arr;
        }

        var pages = [1];
        if (current > 3) pages.push('...');

        var rangeStart = Math.max(2, current - 1);
        var rangeEnd = Math.min(total - 1, current + 1);
        for (var p = rangeStart; p <= rangeEnd; p++) pages.push(p);

        if (current < total - 2) pages.push('...');
        pages.push(total);

        return pages;
    }

    function goToPage(page) {
        currentPage = page;
        renderPage();
        // Scroll to top of table
        var table = document.querySelector('table');
        if (table) table.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function changePerPage(val) {
        perPage = parseInt(val);
        currentPage = 1;
        renderPage();
    }

    // ═══════════════════════════════════════════
    //  CHECKBOX SELECTION
    // ═══════════════════════════════════════════

    function updateSelection() {
        var checkboxes = document.querySelectorAll('.file-checkbox');
        var count = 0;

        checkboxes.forEach(function(cb) {
            var row = cb.closest('tr');
            var pathInput = row.querySelector('.file-path-input');
            var typeInput = row.querySelector('.file-type-input');
            var thumbInput = row.querySelector('.file-thumb-input');

            if (cb.checked) {
                count++;
                pathInput.disabled = false;
                typeInput.disabled = false;
                thumbInput.disabled = false;
            } else {
                pathInput.disabled = true;
                typeInput.disabled = true;
                thumbInput.disabled = true;
            }
        });

        document.getElementById('selectedCount').textContent = count;
        document.getElementById('importBtn').disabled = (count === 0);
        updateSelectAllState();
    }

    function updateSelectAllState() {
        var selectAll = document.getElementById('selectAllCheckbox');
        if (!selectAll) return;

        // Only count visible checkboxes on current page
        var visibleCheckboxes = [];
        document.querySelectorAll('#scanTableBody tr').forEach(function(row) {
            if (row.style.display !== 'none') {
                var cb = row.querySelector('.file-checkbox');
                if (cb) visibleCheckboxes.push(cb);
            }
        });

        var checkedCount = visibleCheckboxes.filter(function(cb) { return cb.checked; }).length;
        selectAll.checked = (checkedCount === visibleCheckboxes.length && checkedCount > 0);
        selectAll.indeterminate = (checkedCount > 0 && checkedCount < visibleCheckboxes.length);
    }

    function toggleSelectAll(checked) {
        if (typeof checked === 'undefined') checked = true;

        // Only toggle checkboxes on visible rows (current page)
        document.querySelectorAll('#scanTableBody tr').forEach(function(row) {
            if (row.style.display !== 'none') {
                var cb = row.querySelector('.file-checkbox');
                if (cb) cb.checked = checked;
            }
        });
        updateSelection();
    }

    function deselectAll() {
        // Deselect ALL checkboxes (all pages)
        document.querySelectorAll('.file-checkbox').forEach(function(cb) {
            cb.checked = false;
        });
        document.getElementById('selectAllCheckbox').checked = false;
        updateSelection();
    }

    // ═══════════════════════════════════════════
    //  IMPORT ALL NEW / SELECTED (via server-side cache — tiny request)
    // ═══════════════════════════════════════════

    var IMPORT_DIRECT_URL = '{{ route("admin.videos.scan.import-direct") }}';

    function importAllNew() {
        var newCount = parseInt(document.getElementById('countNew')?.textContent || '0');
        if (newCount === 0) {
            alert('Tidak ada video baru untuk diimport.');
            return;
        }
        if (!confirm('Import semua ' + newCount + ' video baru?\n\nProses akan berjalan dalam batch.')) {
            return;
        }
        startBatchImport('all', [], newCount, 'Import All New: ');
    }

    function importSelected() {
        // Collect checked file paths only (tiny payload)
        var paths = [];
        document.querySelectorAll('.file-checkbox:checked').forEach(function(cb) {
            var row = cb.closest('tr');
            var pathInput = row.querySelector('.file-path-input');
            if (pathInput) {
                paths.push(pathInput.value);
            }
        });
        if (paths.length === 0) {
            alert('Pilih minimal 1 file untuk diimport.');
            return;
        }
        if (!confirm('Import ' + paths.length + ' video yang dipilih?')) return;
        startBatchImport('selected', paths, paths.length, 'Import Selected: ');
    }

    function startBatchImport(mode, paths, count, logPrefix) {
        // Show progress panel
        showPanel();
        disableButtons();
        addLog(logPrefix + 'Memulai import ' + count + ' video...', '#6fafdf');
        updateScanUI(0, 'Menyiapkan batch...', 0, 0, '—');
        document.getElementById('scanNewStats').style.display = 'block';
        document.getElementById('scanNewResult').style.display = 'none';

        // Tiny POST — files already cached server-side during scan
        fetch(IMPORT_DIRECT_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ mode: mode, paths: paths })
        })
        .then(function(r) {
            if (!r.ok) return r.text().then(function(t) { throw new Error('HTTP ' + r.status + ': ' + t.substring(0, 200)); });
            return r.json();
        })
        .then(function(data) {
            if (data.error) {
                addLog('❌ ' + data.error, '#ef4444');
                finishScanNew(0, 0, [data.error]);
                return;
            }
            addLog(logPrefix + data.total_files + ' file dalam ' + data.total_batches + ' batch', '#6fafdf');
            scanNewRunning = true;
            runNextBatch();
        })
        .catch(function(err) {
            addLog('❌ Error: ' + err.message, '#ef4444');
            finishScanNew(0, 0, [err.message]);
        });
    }

    // ═══════════════════════════════════════════
    //  LOADING STATES
    // ═══════════════════════════════════════════

    document.getElementById('scanForm').addEventListener('submit', function() {
        var btn = document.getElementById('scanBtn');
        btn.disabled = true;
        btn.textContent = '⏳ Scanning...';
    });

    // ═══════════════════════════════════════════
    //  LOAD AVAILABLE PREFIXES FROM STORAGE
    // ═══════════════════════════════════════════

    var PREFIXES_URL = '{{ route("admin.videos.upload.prefixes") }}';

    function loadPrefixes() {
        var driver = document.getElementById('storage_driver').value;
        var videoSelect = document.getElementById('video_prefix_select');
        var thumbSelect = document.getElementById('thumb_prefix_select');

        videoSelect.style.display = 'none';
        thumbSelect.style.display = 'none';

        fetch(PREFIXES_URL + '?storage_driver=' + encodeURIComponent(driver))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var prefixes = data.prefixes || [];
                if (prefixes.length === 0) return;

                // Populate video prefix dropdown
                videoSelect.innerHTML = '<option value="">— pilih —</option>';
                thumbSelect.innerHTML = '<option value="">— pilih —</option>';
                prefixes.forEach(function(p) {
                    videoSelect.innerHTML += '<option value="' + p + '">' + p + '</option>';
                    thumbSelect.innerHTML += '<option value="' + p + '">' + p + '</option>';
                });
                videoSelect.style.display = '';
                thumbSelect.style.display = '';
            })
            .catch(function() { /* ignore */ });
    }

    // Load prefixes on page load and when driver changes
    document.getElementById('storage_driver').addEventListener('change', loadPrefixes);
    loadPrefixes();

    var importForm = document.getElementById('importForm');
    if (importForm) {
        importForm.addEventListener('submit', function(e) {
            e.preventDefault();
            importSelected();
        });
    }

    // ═══════════════════════════════════════════
    //  SCAN & IMPORT NEW (AJAX Chunked + Resume)
    // ═══════════════════════════════════════════

    var scanNewRunning = false;
    var SCAN_URL       = '{{ route("admin.videos.scan.new-scan") }}';
    var BATCH_URL      = '{{ route("admin.videos.scan.import-batch") }}';
    var PROGRESS_URL   = '{{ route("admin.videos.scan.progress") }}';
    var CANCEL_URL     = '{{ route("admin.videos.scan.cancel") }}';
    var CSRF_TOKEN     = '{{ csrf_token() }}';

    // ── Check for active task on page load ──
    (function checkResume() {
        fetch(PROGRESS_URL)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.active) {
                    // There's an active task — show panel and resume
                    showPanel();
                    addLog('♻️ Task aktif ditemukan — melanjutkan import...', '#eab308');
                    updateScanUI(data.percent, 'Melanjutkan dari batch ' + data.current_batch + '/' + data.total_batches + '...', data.imported, data.skipped, data.current_batch + '/' + data.total_batches);
                    document.getElementById('scanNewStats').style.display = 'block';
                    disableButtons();
                    scanNewRunning = true;
                    runNextBatch();
                } else if (data.status === 'done' && (data.imported > 0 || data.skipped > 0)) {
                    // Last task finished — show result
                    showPanel();
                    updateScanUI(100, 'Selesai!', data.imported, data.skipped, '✓');
                    document.getElementById('scanNewStats').style.display = 'block';
                    showResult(data.imported, data.skipped, data.errors || []);
                }
            })
            .catch(function() { /* ignore */ });
    })();

    function startScanNew() {
        if (scanNewRunning) return;
        if (!confirm('Scan bucket dan import semua video baru?\n\nAnda bisa meninggalkan halaman dan kembali lagi — proses akan dilanjutkan.')) return;

        scanNewRunning = true;
        disableButtons();
        showPanel();
        updateScanUI(0, 'Scanning bucket...', 0, 0, '—');
        document.getElementById('scanNewLog').innerHTML = '';
        document.getElementById('scanNewResult').style.display = 'none';

        var driver = document.getElementById('storage_driver').value;
        var videoPrefix = document.getElementById('video_prefix').value;
        var thumbPrefix = document.getElementById('thumb_prefix').value;

        addLog('Memulai scan bucket...', '#6fafdf');

        fetch(SCAN_URL +
              '?storage_driver=' + encodeURIComponent(driver) +
              '&video_prefix=' + encodeURIComponent(videoPrefix) +
              '&thumb_prefix=' + encodeURIComponent(thumbPrefix))
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.error) {
                    addLog('❌ ' + data.error, '#ef4444');
                    finishScanNew(0, 0, [data.error]);
                    return;
                }

                addLog('Scan selesai. Total: ' + data.total + ' file, Baru: ' + data.new_count, '#6fafdf');

                if (data.new_count === 0) {
                    addLog('✅ Tidak ada video baru.', '#22c55e');
                    finishScanNew(0, 0, []);
                    return;
                }

                addLog('Mulai import ' + data.new_count + ' video dalam ' + data.total_batches + ' batch...', '#6fafdf');
                document.getElementById('scanNewStats').style.display = 'block';

                // Start importing batches
                runNextBatch();
            })
            .catch(function(err) {
                addLog('❌ Scan error: ' + err.message, '#ef4444');
                finishScanNew(0, 0, [err.message]);
            });
    }

    function runNextBatch() {
        fetch(BATCH_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'Accept': 'application/json',
            },
            body: JSON.stringify({})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.done) {
                addLog('✅ Selesai! Imported: ' + (data.imported || 0) + ', Skipped: ' + (data.skipped || 0), '#22c55e');
                finishScanNew(data.imported || 0, data.skipped || 0, data.errors || []);
                return;
            }

            updateScanUI(data.percent, 'Batch ' + data.batch + ' selesai', data.imported, data.skipped, data.batch);

            if (data.batch_imported > 0 || data.batch_skipped > 0) {
                addLog('Batch ' + data.batch + ': +' + data.batch_imported + ' imported, ' + data.batch_skipped + ' skipped', '#22c55e');
            }
            if (data.errors && data.errors.length > 0) {
                data.errors.forEach(function(e) { addLog('⚠ ' + e, '#eab308'); });
            }

            // Next batch with small delay
            setTimeout(runNextBatch, 200);
        })
        .catch(function(err) {
            addLog('❌ Network error: ' + err.message + ' — retrying in 3s...', '#ef4444');
            // Auto-retry after delay
            setTimeout(runNextBatch, 3000);
        });
    }

    function cancelScanNew() {
        if (!confirm('Batalkan proses import?')) return;
        fetch(CANCEL_URL, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
        }).then(function() {
            addLog('🛑 Proses dibatalkan.', '#ef4444');
            finishScanNew(0, 0, ['Dibatalkan oleh user']);
        });
    }

    // ── UI Helpers ──

    function showPanel() {
        var panel = document.getElementById('scanNewPanel');
        panel.style.display = 'block';
        document.getElementById('scanCancelBtn').style.display = 'inline-block';
        panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function disableButtons() {
        var btn = document.getElementById('scanNewBtn');
        btn.disabled = true;
        btn.textContent = '⏳ Running...';
        btn.style.opacity = '0.6';
        document.getElementById('scanBtn').disabled = true;
    }

    function updateScanUI(percent, status, imported, skipped, batch) {
        document.getElementById('scanNewBar').style.width = percent + '%';
        document.getElementById('scanNewPercent').textContent = percent + '%';
        document.getElementById('scanNewStatus').textContent = status;
        document.getElementById('scanNewImported').textContent = imported;
        document.getElementById('scanNewSkipped').textContent = skipped;
        document.getElementById('scanNewBatch').textContent = batch;
    }

    function addLog(msg, color) {
        var log = document.getElementById('scanNewLog');
        var ts = new Date().toLocaleTimeString();
        log.innerHTML += '<div style="color:' + color + ';">[' + ts + '] ' + msg + '</div>';
        log.scrollTop = log.scrollHeight;
    }

    function showResult(imported, skipped, errors) {
        var resultDiv = document.getElementById('scanNewResult');
        resultDiv.style.display = 'block';
        if (imported > 0) {
            resultDiv.style.background = '#0a2a1a';
            resultDiv.style.border = '1px solid #166534';
            resultDiv.innerHTML = '<span style="color:#22c55e; font-size:14px; font-weight:bold;">✅ Selesai!</span>' +
                '<span style="color:#ccc; font-size:13px; margin-left:8px;">' + imported + ' video diimport, ' + skipped + ' dilewati.</span>';
        } else {
            resultDiv.style.background = '#1a2a3a';
            resultDiv.style.border = '1px solid #2a3a4a';
            resultDiv.innerHTML = '<span style="color:#6fafdf; font-size:14px;">ℹ️ Tidak ada video baru untuk diimport.</span>';
        }
        if (errors.length > 0) {
            var errHtml = '<div style="margin-top:8px; font-size:11px; color:#ef4444;">';
            errors.slice(0, 10).forEach(function(e) { errHtml += '<div>• ' + e + '</div>'; });
            errHtml += '</div>';
            resultDiv.innerHTML += errHtml;
        }
    }

    function finishScanNew(imported, skipped, errors) {
        scanNewRunning = false;
        var btn = document.getElementById('scanNewBtn');
        btn.disabled = false;
        btn.textContent = '🚀 Scan & Import New';
        btn.style.opacity = '1';
        document.getElementById('scanBtn').disabled = false;
        document.getElementById('scanCancelBtn').style.display = 'none';
        updateScanUI(100, 'Selesai!', imported, skipped, '✓');
        showResult(imported, skipped, errors);
    }
</script>
@endsection