@extends('admin.layouts.app')

@php
    $pageTitle = 'Admin - Storage Scan';
    $pageHeading = 'Storage Scan';
    $pageSubheading = 'Scan prefix video dari storage dan import ke database.';
@endphp

@push('head')
<style>
    .scan-wrap { max-width: 960px; }
    .scan-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
    .scan-form input, .scan-form select { padding:8px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; background:#fff; }
    .scan-help { font-size:12px; color:#6b7280; margin-top:8px; }
    .scan-progress { margin-top: 12px; font-size: 13px; color: #334155; }
    .preview-box { margin-top: 14px; }
    .preview-actions { display:flex; gap:8px; margin-bottom:8px; }
    .preview-table { width: 100%; border-collapse: collapse; }
    .preview-table th, .preview-table td { border-bottom:1px solid #e5e7eb; padding:8px; font-size:12px; text-align:left; }
    .preview-table th { background:#f8fafc; }
    .tag { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; color:#fff; }
    .tag-new { background:#16a34a; }
    .tag-old { background:#475569; }
    .select-count { font-size:12px; color:#334155; margin-top: 4px; }
</style>
@endpush

@section('content')
<div class="content-card scan-wrap">
    <form id="scan-form" class="scan-form" action="{{ route('admin.videos.scan-storage') }}" method="POST">
        @csrf
        <input type="hidden" name="import_only_new" value="1">
        <input type="number" id="batch-size" name="batch_size" min="1" max="200" value="50" title="Batch size per request">
        <select id="scan-storage-driver" name="storage_driver" required>
            @foreach (['s3', 'digitaloceanspaces', 'r2', 'wasabi'] as $driver)
                <option value="{{ $driver }}" @selected(old('storage_driver', $scanDefaults['storage_driver'] ?? 's3') === $driver)>
                    {{ $driver }}
                </option>
            @endforeach
        </select>

        <select id="scan-video-prefix" name="video_prefix" required>
            @php
                $selectedVideoPrefix = old('video_prefix', $scanDefaults['video_prefix'] ?? 'videos');
            @endphp
            @foreach ($prefixOptions as $prefix)
                <option value="{{ $prefix }}" @selected($selectedVideoPrefix === $prefix)>{{ $prefix }}</option>
            @endforeach
        </select>

        <input type="text" name="image_prefix" value="{{ old('image_prefix', $scanDefaults['image_prefix'] ?? 'image') }}" readonly>
        <button id="scan-submit" class="btn btn-secondary" type="submit">Import All New Videos</button>
    </form>

    <div class="preview-box">
        <div class="preview-actions">
            <button id="preview-btn" class="btn btn-primary" type="button">Lihat Daftar Video</button>
            <button id="preview-more-btn" class="btn btn-dark" type="button" style="display:none;">Load More</button>
            <button id="import-selected-btn" class="btn btn-secondary" type="button" disabled>Import Selected</button>
        </div>
        <div id="selected-count" class="select-count">Selected: 0</div>
        <table class="preview-table">
            <thead>
                <tr>
                    <th style="width:42px;"><input type="checkbox" id="select-all-page" title="Select all current rows"></th>
                    <th>File Code</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Play URL</th>
                </tr>
            </thead>
            <tbody id="preview-body">
                <tr><td colspan="5" style="color:#64748b;">Belum ada data preview.</td></tr>
            </tbody>
        </table>
    </div>

    @if($errors->any())
        <div class="alert err" style="margin-bottom:10px;">{{ $errors->first() }}</div>
    @endif

    <div class="scan-help">
        Scan akan import video baru ke database dan otomatis skip video yang sudah pernah diimport. URL play menggunakan format /e/filecode.
    </div>

    <div id="scan-progress" class="scan-progress"></div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const scanForm = document.getElementById('scan-form');
        const driverSelect = document.getElementById('scan-storage-driver');
        const prefixSelect = document.getElementById('scan-video-prefix');
        const batchSizeInput = document.getElementById('batch-size');
        const submitBtn = document.getElementById('scan-submit');
        const progressEl = document.getElementById('scan-progress');
        const previewBtn = document.getElementById('preview-btn');
        const previewMoreBtn = document.getElementById('preview-more-btn');
        const importSelectedBtn = document.getElementById('import-selected-btn');
        const selectedCountEl = document.getElementById('selected-count');
        const selectAllPage = document.getElementById('select-all-page');
        const previewBody = document.getElementById('preview-body');
        const prefixUrl = "{{ route('admin.videos.prefix-options') }}";
        const batchImportUrl = "{{ route('admin.videos.scan-storage-batch') }}";
        const previewUrl = "{{ route('admin.videos.scan-storage-preview') }}";
        const importSelectedUrl = "{{ route('admin.videos.scan-storage-import-selected') }}";
        const csrf = document.querySelector('input[name="_token"]').value;
        let previewCursor = null;
        const selectedPaths = new Set();

        if (!driverSelect || !prefixSelect) {
            return;
        }

        async function loadPrefixes() {
            const currentValue = prefixSelect.value;
            prefixSelect.innerHTML = '<option value="">Loading...</option>';

            try {
                const response = await fetch(`${prefixUrl}?storage_driver=${encodeURIComponent(driverSelect.value)}`, {
                    headers: {
                        'Accept': 'application/json',
                    },
                });

                if (!response.ok) {
                    throw new Error('Failed to load prefixes');
                }

                const data = await response.json();
                const prefixes = Array.isArray(data.prefixes) ? data.prefixes : [];

                prefixSelect.innerHTML = '';

                if (prefixes.length === 0) {
                    const option = document.createElement('option');
                    option.value = 'videos';
                    option.textContent = 'videos';
                    prefixSelect.appendChild(option);
                    return;
                }

                prefixes.forEach((prefix) => {
                    const option = document.createElement('option');
                    option.value = prefix;
                    option.textContent = prefix;
                    if (prefix === currentValue) {
                        option.selected = true;
                    }
                    prefixSelect.appendChild(option);
                });

                if (!prefixSelect.value && prefixes.length > 0) {
                    prefixSelect.value = prefixes[0];
                }
            } catch (error) {
                prefixSelect.innerHTML = '';
                const option = document.createElement('option');
                option.value = 'videos';
                option.textContent = 'videos';
                prefixSelect.appendChild(option);
            }
        }

        async function runBatchImport(event) {
            event.preventDefault();

            if (!scanForm || !submitBtn) {
                return;
            }

            submitBtn.disabled = true;
            submitBtn.textContent = 'Importing...';

            const payload = {
                storage_driver: driverSelect.value,
                video_prefix: prefixSelect.value,
                image_prefix: scanForm.querySelector('input[name="image_prefix"]').value,
                import_only_new: 1,
                batch_size: Math.max(1, Math.min(200, Number(batchSizeInput.value || 50))),
                cursor: null,
            };

            const total = { scanned: 0, imported: 0, updated: 0, skipped: 0, steps: 0 };
            const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

            try {
                while (true) {
                    let response = null;
                    let attempt = 0;

                    while (attempt < 3) {
                        response = await fetch(batchImportUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrf,
                                'Accept': 'application/json',
                            },
                            body: JSON.stringify(payload),
                        });

                        if (response.status === 429) {
                            attempt += 1;
                            progressEl.textContent = 'Terlalu banyak request, menunggu sebentar lalu lanjut...';
                            await delay(1200 * attempt);
                            continue;
                        }

                        break;
                    }

                    if (!response || !response.ok) {
                        const status = response ? response.status : 'unknown';
                        throw new Error(`Batch import request failed (${status})`);
                    }

                    const result = await response.json();
                    total.steps += 1;
                    total.scanned += Number(result.scanned || 0);
                    total.imported += Number(result.imported || 0);
                    total.updated += Number(result.updated || 0);
                    total.skipped += Number(result.skipped || 0);

                    progressEl.textContent = `Batch ${total.steps}: scanned ${total.scanned}, imported ${total.imported}, updated ${total.updated}, skipped ${total.skipped}`;

                    if (!result.has_more) {
                        break;
                    }

                    payload.cursor = result.next_cursor || null;
                    if (!payload.cursor) {
                        break;
                    }
                }

                progressEl.textContent = `Selesai. Scanned ${total.scanned}, imported ${total.imported}, updated ${total.updated}, skipped ${total.skipped}.`;
            } catch (error) {
                progressEl.textContent = `Terjadi error saat import batch (${error.message}). Silakan coba lagi.`;
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Import All New Videos';
            }
        }

        function updateSelectedUi() {
            if (selectedCountEl) {
                selectedCountEl.textContent = `Selected: ${selectedPaths.size}`;
            }

            if (importSelectedBtn) {
                importSelectedBtn.disabled = selectedPaths.size === 0;
            }
        }

        function renderPreviewRows(items, reset = false) {
            if (!previewBody) return;

            if (reset) {
                previewBody.innerHTML = '';
                selectedPaths.clear();
                if (selectAllPage) {
                    selectAllPage.checked = false;
                }
            }

            if (!items || items.length === 0) {
                if (reset) {
                    previewBody.innerHTML = '<tr><td colspan="5" style="color:#64748b;">Tidak ada video playable di prefix ini.</td></tr>';
                }
                updateSelectedUi();
                return;
            }

            items.forEach((item) => {
                const tr = document.createElement('tr');
                const statusTag = item.already_imported
                    ? '<span class="tag tag-old">Sudah Diimport</span>'
                    : '<span class="tag tag-new">Baru</span>';
                const playUrl = item.embed_url || '-';
                const fileCode = item.file_code || '-';
                const path = item.path || '';
                const canSelect = !item.already_imported && path !== '';
                const checked = canSelect && selectedPaths.has(path) ? 'checked' : '';
                const checkboxHtml = canSelect
                    ? `<input type="checkbox" class="preview-select" data-path="${path.replace(/"/g, '&quot;')}" ${checked}>`
                    : '';

                tr.innerHTML = `
                    <td>${checkboxHtml}</td>
                    <td>${fileCode}</td>
                    <td>${item.type}</td>
                    <td>${statusTag}</td>
                    <td>${item.embed_url ? `<a href="${item.embed_url}" target="_blank" rel="noopener">${playUrl}</a>` : playUrl}</td>
                `;
                previewBody.appendChild(tr);
            });

            updateSelectedUi();
        }

        async function importSelected() {
            if (selectedPaths.size === 0) {
                progressEl.textContent = 'Pilih minimal satu video untuk diimport.';
                return;
            }

            importSelectedBtn.disabled = true;
            importSelectedBtn.textContent = 'Importing...';

            try {
                const response = await fetch(importSelectedUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        storage_driver: driverSelect.value,
                        image_prefix: scanForm.querySelector('input[name="image_prefix"]').value,
                        import_only_new: 1,
                        selected_paths: Array.from(selectedPaths),
                    }),
                });

                if (!response.ok) {
                    throw new Error(`Import selected failed (${response.status})`);
                }

                const result = await response.json();
                progressEl.textContent = `Import selected selesai. Scanned ${result.scanned}, imported ${result.imported}, updated ${result.updated}, skipped ${result.skipped}.`;

                await loadPreview(true);
            } catch (error) {
                progressEl.textContent = `Gagal import selected (${error.message}).`;
            } finally {
                importSelectedBtn.textContent = 'Import Selected';
                updateSelectedUi();
            }
        }

        async function loadPreview(reset = true) {
            if (!previewBtn || !previewBody) {
                return;
            }

            if (reset) {
                previewCursor = null;
                renderPreviewRows([], true);
                progressEl.textContent = 'Memuat daftar video...';
            }

            previewBtn.disabled = true;
            previewMoreBtn.disabled = true;

            try {
                const response = await fetch(previewUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        storage_driver: driverSelect.value,
                        video_prefix: prefixSelect.value,
                        batch_size: Math.max(1, Math.min(200, Number(batchSizeInput.value || 50))),
                        cursor: previewCursor,
                    }),
                });

                if (!response.ok) {
                    throw new Error(`Preview request failed (${response.status})`);
                }

                const result = await response.json();
                renderPreviewRows(result.items || [], reset);

                previewCursor = result.next_cursor || null;
                const hasMore = Boolean(result.has_more);
                previewMoreBtn.style.display = hasMore ? 'inline-block' : 'none';
                progressEl.textContent = hasMore
                    ? 'Preview berhasil dimuat. Klik Load More untuk lanjut.'
                    : 'Preview selesai.';
            } catch (error) {
                progressEl.textContent = `Gagal memuat preview (${error.message}).`;
            } finally {
                previewBtn.disabled = false;
                previewMoreBtn.disabled = false;
            }
        }

        driverSelect.addEventListener('change', loadPrefixes);
        scanForm.addEventListener('submit', runBatchImport);
        previewBtn.addEventListener('click', () => loadPreview(true));
        previewMoreBtn.addEventListener('click', () => loadPreview(false));

        if (previewBody) {
            previewBody.addEventListener('change', (event) => {
                const target = event.target;
                if (!(target instanceof HTMLInputElement)) {
                    return;
                }

                if (!target.classList.contains('preview-select')) {
                    return;
                }

                const path = target.dataset.path || '';
                if (path === '') {
                    return;
                }

                if (target.checked) {
                    selectedPaths.add(path);
                } else {
                    selectedPaths.delete(path);
                }

                updateSelectedUi();
            });
        }

        if (selectAllPage) {
            selectAllPage.addEventListener('change', () => {
                const checkboxes = previewBody.querySelectorAll('input.preview-select');
                checkboxes.forEach((checkbox) => {
                    if (!(checkbox instanceof HTMLInputElement)) {
                        return;
                    }

                    checkbox.checked = selectAllPage.checked;
                    const path = checkbox.dataset.path || '';
                    if (path !== '') {
                        if (checkbox.checked) {
                            selectedPaths.add(path);
                        } else {
                            selectedPaths.delete(path);
                        }
                    }
                });

                updateSelectedUi();
            });
        }

        if (importSelectedBtn) {
            importSelectedBtn.addEventListener('click', importSelected);
        }

        updateSelectedUi();
        loadPrefixes();
    })();
</script>
@endpush