@extends('admin.layout')
@section('title', 'Upload Video')

@section('content')
<h2 style="font-size:18px; color:#fff; margin-bottom:20px;">☁️ Upload Video (Self-Hosted)</h2>

<div style="background:#1a2a3a; border:1px solid #2a3a4a; border-radius:6px; padding:12px 16px; margin-bottom:20px; font-size:13px; color:#6fafdf;">
    <strong>Server Upload:</strong> File MP4 diupload ke server via chunked upload, lalu di-encode ke HLS dan dikirim ke cloud storage. <strong>Bandwidth efisien</strong> — tidak ada double transfer. <strong>Multiple upload</strong> didukung.
</div>

{{-- Step 1: Config & File Selection --}}
<div id="step1">
    {{-- Storage & Prefix Config --}}
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;">
        <div class="form-group">
            <label for="storage_driver">Storage Driver (tujuan HLS) *</label>
            <select id="storage_driver" class="form-control" onchange="loadPrefixes()">
                @foreach($drivers as $driver => $label)
                    <option value="{{ $driver }}" {{ ($defaultDriver ?? config('video_storage.default_driver')) === $driver ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
            <div class="form-hint">HLS output akan di-upload ke storage ini.</div>
        </div>

        <div class="form-group">
            <label for="thumb_prefix">Thumbnail Prefix (Folder) *</label>
            <select id="thumb_prefix" class="form-control">
                @foreach($thumbPrefixes as $prefix)
                    <option value="{{ $prefix }}" {{ $prefix === 'image' ? 'selected' : '' }}>{{ $prefix }}/</option>
                @endforeach
            </select>
            <div class="form-hint">Folder tujuan thumbnail.</div>
        </div>
    </div>

    <div style="display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px;">
        <div class="form-group">
            <label for="video_prefix">Video Prefix (Folder tujuan HLS) *</label>
            <select id="video_prefix" class="form-control">
                @foreach($videoPrefixes as $prefix)
                    <option value="{{ $prefix }}" {{ $prefix === 'videos' ? 'selected' : '' }}>{{ $prefix }}/</option>
                @endforeach
            </select>
            <div class="form-hint">Folder tujuan HLS output pada bucket (misal: videos/)</div>
        </div>
    </div>

    {{-- Options --}}
    <div style="display:flex; gap:20px; margin-bottom:20px; align-items:center; flex-wrap:wrap;">
        <label style="display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:#ccc;">
            <input type="checkbox" id="auto_thumbnail" checked style="width:16px; height:16px;">
            🖼️ Auto-generate thumbnail setelah encoding
        </label>
        <label style="display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:#ccc;">
            <input type="checkbox" id="auto_title" checked style="width:16px; height:16px;">
            📝 Auto-title dari nama file
        </label>
        <label style="display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:#ccc;">
            <input type="checkbox" id="watermark_enabled" {{ ($watermarkConfig['enabled'] ?? false) ? 'checked' : '' }} style="width:16px; height:16px;">
            💧 Tambah watermark
        </label>
    </div>

    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;">
        <div class="form-group" style="margin-bottom:0;">
            <label for="description">Description (opsional)</label>
            <textarea id="description" class="form-control" rows="3" placeholder="Kosongkan untuk otomatis isi sama dengan title (per video)"></textarea>
            <div class="form-hint">Akan dipakai untuk semua video di batch ini. Jika kosong, description tiap video = title.</div>
        </div>

        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
            <div class="form-group" style="margin-bottom:0;">
                <label>Kategori</label>
                <div style="max-height:120px; overflow:auto; border:1px solid #2a3a4a; border-radius:6px; padding:8px; background:#111;">
                    @forelse($categories as $category)
                        <label style="display:flex; align-items:center; gap:6px; font-size:12px; color:#ccc; margin-bottom:6px;">
                            <input type="checkbox" name="category_ids[]" value="{{ $category->id }}">
                            <span>{{ $category->name }}</span>
                        </label>
                    @empty
                        <div style="font-size:12px; color:#666;">Belum ada kategori.</div>
                    @endforelse
                </div>
            </div>

            <div class="form-group" style="margin-bottom:0;">
                <label>Tags</label>
                <div style="max-height:120px; overflow:auto; border:1px solid #2a3a4a; border-radius:6px; padding:8px; background:#111;">
                    @forelse($tags as $tag)
                        <label style="display:flex; align-items:center; gap:6px; font-size:12px; color:#ccc; margin-bottom:6px;">
                            <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}">
                            <span>{{ $tag->name }}</span>
                        </label>
                    @empty
                        <div style="font-size:12px; color:#666;">Belum ada tags.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Watermark Settings (collapsible) --}}
    <div id="watermarkOptions" style="display:{{ ($watermarkConfig['enabled'] ?? false) ? 'block' : 'none' }}; background:#1a1a2a; border:1px solid #2a2a3a; border-radius:6px; padding:16px; margin-bottom:20px;">
        <div style="display:flex; align-items:center; gap:12px; margin-bottom:12px;">
            <h4 style="font-size:13px; color:#6fafdf; margin:0;">💧 Pengaturan Watermark</h4>
            <a href="{{ route('admin.videos.watermark') }}" style="font-size:11px; color:#888;">Kelola watermark →</a>
        </div>

        {{-- Watermark Type Toggle --}}
        <div style="display:flex; gap:8px; margin-bottom:16px;">
            <button type="button" class="wm-type-btn {{ ($watermarkConfig['type'] ?? 'image') === 'image' ? 'active' : '' }}" data-type="image"
                    style="padding:6px 16px; border-radius:4px; border:1px solid #3a3a4a; cursor:pointer; font-size:12px; background:{{ ($watermarkConfig['type'] ?? 'image') === 'image' ? '#2a3a5a' : '#1a1a2a' }}; color:{{ ($watermarkConfig['type'] ?? 'image') === 'image' ? '#6fafdf' : '#666' }};"
                    onclick="setWatermarkType('image')">
                🖼️ Gambar
            </button>
            <button type="button" class="wm-type-btn {{ ($watermarkConfig['type'] ?? 'image') === 'text' ? 'active' : '' }}" data-type="text"
                    style="padding:6px 16px; border-radius:4px; border:1px solid #3a3a4a; cursor:pointer; font-size:12px; background:{{ ($watermarkConfig['type'] ?? 'image') === 'text' ? '#2a3a5a' : '#1a1a2a' }}; color:{{ ($watermarkConfig['type'] ?? 'image') === 'text' ? '#6fafdf' : '#666' }};"
                    onclick="setWatermarkType('text')">
                ✏️ Teks
            </button>
            <input type="hidden" id="watermark_type" value="{{ $watermarkConfig['type'] ?? 'image' }}">
        </div>

        {{-- Image Watermark Notice --}}
        <div id="wmImageNotice" style="display:{{ ($watermarkConfig['type'] ?? 'image') === 'image' ? 'block' : 'none' }}; margin-bottom:12px;">
            @if($watermarkExists)
                <div style="font-size:12px; color:#6fbf6f;">✅ Watermark gambar tersedia</div>
            @else
                <div style="font-size:12px; color:#bf6f6f;">⚠️ Belum ada gambar watermark — <a href="{{ route('admin.videos.watermark') }}" style="color:#6fafdf;">upload dulu</a></div>
            @endif
        </div>

        {{-- Text Watermark Fields --}}
        <div id="wmTextFields" style="display:{{ ($watermarkConfig['type'] ?? 'image') === 'text' ? 'block' : 'none' }}; margin-bottom:12px;">
            <div class="form-group" style="margin-bottom:10px;">
                <label for="watermark_text" style="font-size:12px;">Teks Watermark *</label>
                <input type="text" id="watermark_text" class="form-control" value="{{ $watermarkConfig['text'] ?? '' }}" placeholder="Contoh: youvid.org" maxlength="200" style="max-width:100%;">
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                <div class="form-group" style="margin-bottom:0;">
                    <label for="watermark_font_size" style="font-size:12px;">Ukuran Font</label>
                    <div style="display:flex; align-items:center; gap:8px;">
                        <input type="range" id="watermark_font_size" min="10" max="120" step="2" value="{{ $watermarkConfig['font_size'] ?? 24 }}" style="flex:1;">
                        <span id="fontSizeValue" style="font-size:12px; color:#6fafdf; min-width:35px;">{{ $watermarkConfig['font_size'] ?? 24 }}px</span>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label for="watermark_font_color" style="font-size:12px;">Warna Font</label>
                    <div style="display:flex; align-items:center; gap:8px;">
                        <input type="color" id="watermark_font_color" value="{{ $watermarkConfig['font_color'] ?? '#FFFFFF' }}" style="width:40px; height:30px; border:1px solid #3a3a4a; border-radius:4px; cursor:pointer; background:#111;">
                        <span id="fontColorValue" style="font-size:12px; color:#6fafdf;">{{ $watermarkConfig['font_color'] ?? '#FFFFFF' }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Common fields: Position + Opacity + Motion --}}
        <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;">
            <div class="form-group" style="margin-bottom:0;">
                <label for="watermark_position" style="font-size:12px;">Posisi</label>
                <select id="watermark_position" class="form-control">
                    <option value="top-left" {{ ($watermarkConfig['position'] ?? '') === 'top-left' ? 'selected' : '' }}>↖ Kiri Atas</option>
                    <option value="top-right" {{ ($watermarkConfig['position'] ?? '') === 'top-right' ? 'selected' : '' }}>↗ Kanan Atas</option>
                    <option value="bottom-left" {{ ($watermarkConfig['position'] ?? '') === 'bottom-left' ? 'selected' : '' }}>↙ Kiri Bawah</option>
                    <option value="bottom-right" {{ ($watermarkConfig['position'] ?? 'bottom-right') === 'bottom-right' ? 'selected' : '' }}>↘ Kanan Bawah</option>
                    <option value="center" {{ ($watermarkConfig['position'] ?? '') === 'center' ? 'selected' : '' }}>⊕ Tengah</option>
                </select>
            </div>
            <div class="form-group" style="margin-bottom:0;">
                <label for="watermark_opacity" style="font-size:12px;">Opacity (transparansi)</label>
                <div style="display:flex; align-items:center; gap:8px;">
                    <input type="range" id="watermark_opacity" min="0.1" max="1.0" step="0.1" value="{{ $watermarkConfig['opacity'] ?? 0.7 }}" style="flex:1;">
                    <span id="opacityValue" style="font-size:12px; color:#6fafdf; min-width:35px;">{{ $watermarkConfig['opacity'] ?? 0.7 }}</span>
                </div>
            </div>
            <div class="form-group" style="margin-bottom:0;">
                <label for="watermark_motion" style="font-size:12px;">Mode Gerak</label>
                <select id="watermark_motion" class="form-control">
                    <option value="static" {{ ($watermarkConfig['motion'] ?? 'static') === 'static' ? 'selected' : '' }}>Diam (Static)</option>
                    <option value="bounce" {{ ($watermarkConfig['motion'] ?? '') === 'bounce' ? 'selected' : '' }}>Bounce</option>
                </select>
            </div>
        </div>

        {{-- Preview --}}
        <div style="margin-top:12px; position:relative; width:320px; height:180px; background:#000; border-radius:4px; overflow:hidden;">
            <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#333; font-size:12px;">VIDEO PREVIEW</div>
            {{-- Image preview --}}
            <img id="wmPreviewImg"
                 src="{{ $watermarkExists ? asset('storage/watermark/watermark_preview.' . pathinfo($watermarkConfig['path'] ?? '', PATHINFO_EXTENSION)) . '?t=' . time() : '' }}"
                 style="position:absolute; width:15%; opacity:{{ $watermarkConfig['opacity'] ?? 0.7 }}; pointer-events:none; transition:all 0.3s; animation:none; display:{{ ($watermarkConfig['type'] ?? 'image') === 'image' && $watermarkExists ? 'block' : 'none' }};"
                 onerror="this.style.display='none'"
                 alt="watermark">
            {{-- Text preview --}}
            <div id="wmPreviewText"
                 style="position:absolute; pointer-events:none; transition:all 0.3s; animation:none; font-weight:bold; text-shadow:2px 2px 4px rgba(0,0,0,0.5); white-space:nowrap; display:{{ ($watermarkConfig['type'] ?? 'image') === 'text' ? 'block' : 'none' }}; font-size:{{ min(20, max(10, ($watermarkConfig['font_size'] ?? 24) * 0.6)) }}px; color:{{ $watermarkConfig['font_color'] ?? '#FFFFFF' }}; opacity:{{ $watermarkConfig['opacity'] ?? 0.7 }};">
                {{ $watermarkConfig['text'] ?? 'Preview Text' }}
            </div>
        </div>
    </div>

    {{-- File Selection --}}
    <div class="form-group">
        <label>File Video (MP4) * — bisa pilih multiple</label>
        <div id="dropZone" style="border:2px dashed #3a4a5a; border-radius:8px; padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.2s; background:#111;">
            <div style="font-size:32px; margin-bottom:8px;">📁</div>
            <div style="font-size:14px; color:#6fafdf;">Klik atau drag & drop file MP4 di sini</div>
            <div style="font-size:12px; color:#666; margin-top:4px;">Format: MP4 saja. Maks {{ round(config('video_storage.upload.max_size', 5368709120) / 1024 / 1024 / 1024, 1) }} GB per file.</div>
            <input type="file" id="video_files" multiple accept="video/mp4,.mp4" style="display:none;">
        </div>
    </div>

    {{-- File Queue Table --}}
    <div id="fileQueueContainer" style="display:none; margin-top:16px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
            <h3 style="font-size:14px; color:#fff;">📋 Antrian Upload (<span id="fileCount">0</span> file)</h3>
            <div style="display:flex; gap:8px;">
                <button type="button" class="btn btn-secondary btn-sm" onclick="clearQueue()">🗑️ Hapus Semua</button>
                <button type="button" class="btn btn-sm" onclick="document.getElementById('video_files').click()" style="background:#2a3a4a; color:#6fafdf;">+ Tambah File</button>
            </div>
        </div>
        <table id="fileQueueTable" style="font-size:13px;">
            <thead>
                <tr>
                    <th style="width:30px">#</th>
                    <th>Title</th>
                    <th style="width:100px">Size</th>
                    <th style="width:120px">Status</th>
                    <th style="width:60px">Aksi</th>
                </tr>
            </thead>
            <tbody id="fileQueueBody"></tbody>
        </table>
    </div>

    <div class="form-actions" style="margin-top:20px;">
        <button type="button" class="btn btn-primary" id="uploadBtn" onclick="startBatchUpload()" disabled>
            🚀 Upload & Encode (<span id="uploadCount">0</span> file)
        </button>
        <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">Batal</a>
    </div>
</div>

{{-- Step 2: Batch Upload Progress --}}
<div id="step2" style="display:none; margin-top:24px;">
    <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:20px;">
        <h3 style="font-size:14px; color:#fff; margin-bottom:16px;" id="batchStatus">⏳ Mengupload batch...</h3>

        {{-- Overall progress --}}
        <div style="margin-bottom:16px;">
            <div style="display:flex; justify-content:space-between; font-size:12px; color:#888; margin-bottom:4px;">
                <span id="overallLabel">Total: 0/0</span>
                <span id="overallPercent">0%</span>
            </div>
            <div style="background:#222; border-radius:4px; overflow:hidden; height:8px;">
                <div id="overallBar" style="height:100%; background:#6fafdf; width:0%; transition:width 0.3s;"></div>
            </div>
        </div>

        {{-- Current file progress --}}
        <div style="margin-bottom:16px;">
            <div style="display:flex; justify-content:space-between; font-size:12px; color:#888; margin-bottom:4px;">
                <span id="currentLabel">File saat ini: -</span>
                <span id="currentPercent">0%</span>
            </div>
            <div style="background:#222; border-radius:4px; overflow:hidden; height:12px;">
                <div id="currentBar" style="height:100%; background:#e50914; width:0%; transition:width 0.3s;"></div>
            </div>
            <div id="currentSpeed" style="font-size:11px; color:#555; margin-top:3px;"></div>
        </div>

        {{-- Result log --}}
        <div id="uploadLog" style="max-height:300px; overflow-y:auto; font-size:12px; font-family:monospace; background:#111; border-radius:4px; padding:10px; margin-top:12px;"></div>
    </div>

    <div style="margin-top:16px; display:flex; gap:10px;">
        <a href="{{ route('admin.videos.index') }}" class="btn btn-primary" id="doneBtn" style="display:none;">📋 Lihat Video List</a>
        <button type="button" class="btn btn-secondary" id="cancelBatchBtn" onclick="cancelBatch()">✋ Batalkan</button>
    </div>
</div>

{{-- Pipeline explanation --}}
<div style="margin-top:32px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:20px;">
    <h3 style="font-size:14px; color:#888; margin-bottom:12px;">🔄 Pipeline Encoding</h3>

    <div style="font-size:13px; color:#aaa; line-height:1.8;">
        <p style="margin-bottom:12px;">Setelah upload, video akan melalui pipeline berikut:</p>

        <ol style="margin-left:20px; color:#999;">
            <li><strong style="color:#6fafdf">Chunked Upload</strong> — Browser mengirim file MP4 ke server dalam potongan 5MB (bypass upload limit)</li>
            <li><strong style="color:#6fafdf">Queue</strong> — Job encoding masuk antrian <code style="color:#6f6fbf">video-encode</code></li>
            <li><strong style="color:#6fafdf">Encode</strong> — FFmpeg mengubah MP4 → HLS Adaptive Bitrate langsung dari file lokal</li>
            <li><strong style="color:#6fafdf">Thumbnail</strong> — Auto-generate thumbnail dari frame video (jika diaktifkan)</li>
            <li><strong style="color:#6fafdf">Upload HLS</strong> — Hanya file .m3u8 + .ts dikirim ke {{ strtoupper(config('video_storage.default_driver', 'S3')) }}</li>
            <li><strong style="color:#6fafdf">Cleanup</strong> — File MP4 lokal dihapus otomatis setelah selesai</li>
            <li><strong style="color:#6fafdf">Ready</strong> — Video siap ditonton dengan HLS streaming</li>
        </ol>
    </div>

    <div style="margin-top:16px; padding:12px; background:#111; border-radius:4px; font-size:12px; color:#666;">
        <strong>Resolusi encoding:</strong>
        @php $profiles = config('video.encoding.profiles', config('video.profiles', [])); @endphp
        @foreach($profiles as $name => $p)
            <span class="badge badge-auto" style="margin-left:4px;">{{ $name }} ({{ $p['bitrate'] ?? '?' }})</span>
        @endforeach
        <br><br>
        <strong>Catatan:</strong> Video tidak akan di-upscale. Jika source 480p, hanya profil ≤480p yang dihasilkan.
    </div>
</div>

<style>
    #dropZone.drag-over {
        border-color: #6fafdf !important;
        background: #1a2a3a !important;
    }
    #fileQueueTable tr.uploading td { background: #1a2a1a; }
    #fileQueueTable tr.done td { opacity: 0.6; }
    #fileQueueTable tr.error td { background: #2a1a1a; }
    .status-pending { color: #888; }
    .status-uploading { color: #6fafdf; }
    .status-done { color: #6fbf6f; }
    .status-error { color: #bf6f6f; }
    .log-success { color: #6fbf6f; }
    .log-error { color: #bf6f6f; }
    .log-info { color: #6fafdf; }
    .title-input {
        background: #222;
        border: 1px solid #333;
        color: #fff;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 13px;
        width: 100%;
    }
    .title-input:focus { border-color: #6fafdf; outline: none; }
    .remove-btn {
        background: none;
        border: none;
        color: #bf6f6f;
        cursor: pointer;
        font-size: 16px;
        padding: 2px 6px;
    }
    .remove-btn:hover { color: #ff6f6f; }
    .wm-bounce-preview {
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        animation: wmPreviewBounce 4s linear infinite !important;
    }
    @keyframes wmPreviewBounce {
        0% {
            top: 8px;
            left: 8px;
        }
        25% {
            top: 8px;
            left: calc(100% - var(--wm-preview-width, 64px) - 8px);
        }
        50% {
            top: calc(100% - var(--wm-preview-height, 24px) - 8px);
            left: calc(100% - var(--wm-preview-width, 64px) - 8px);
        }
        75% {
            top: calc(100% - var(--wm-preview-height, 24px) - 8px);
            left: 8px;
        }
        100% {
            top: 8px;
            left: 8px;
        }
    }
</style>

<script>
const CSRF_TOKEN = '{{ csrf_token() }}';
const INIT_CHUNK_URL = '{{ route("admin.videos.upload.init-chunk") }}';
const CHUNK_URL = '{{ route("admin.videos.upload.chunk") }}';
const CONFIRM_URL = '{{ route("admin.videos.upload.confirm") }}';
const PREFIX_URL = '{{ route("admin.videos.upload.prefixes") }}';
const INDEX_URL = '{{ route("admin.videos.index") }}';
const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB per chunk

// ── State ──
let fileQueue = [];
let nextId = 0;
let batchCancelled = false;

// ── Drop Zone ──
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('video_files');

dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    addFiles(e.dataTransfer.files);
});

fileInput.addEventListener('change', () => {
    if (fileInput.files.length > 0) {
        addFiles(fileInput.files);
        fileInput.value = '';
    }
});

function addFiles(files) {
    const autoTitle = document.getElementById('auto_title').checked;

    for (const file of files) {
        if (!file.name.toLowerCase().endsWith('.mp4')) {
            alert(`"${file.name}" bukan file MP4 — dilewati.`);
            continue;
        }
        if (fileQueue.some(q => q.file.name === file.name && q.file.size === file.size)) {
            continue;
        }

        const title = autoTitle ? file.name.replace(/\.mp4$/i, '').replace(/[_-]/g, ' ') : '';
        fileQueue.push({ id: nextId++, file, title, status: 'pending', error: null });
    }

    renderQueue();
}

function renderQueue() {
    const tbody = document.getElementById('fileQueueBody');
    const container = document.getElementById('fileQueueContainer');
    const uploadBtn = document.getElementById('uploadBtn');
    const countEl = document.getElementById('fileCount');
    const uploadCountEl = document.getElementById('uploadCount');

    if (fileQueue.length === 0) {
        container.style.display = 'none';
        uploadBtn.disabled = true;
        uploadCountEl.textContent = '0';
        return;
    }

    container.style.display = 'block';
    countEl.textContent = fileQueue.length;
    uploadCountEl.textContent = fileQueue.filter(f => f.status === 'pending').length;
    uploadBtn.disabled = fileQueue.filter(f => f.status === 'pending').length === 0;

    tbody.innerHTML = '';
    fileQueue.forEach((item, idx) => {
        const size = formatSize(item.file.size);
        const statusHtml = getStatusHtml(item);
        const tr = document.createElement('tr');
        tr.className = item.status;
        tr.id = `row-${item.id}`;
        tr.innerHTML = `
            <td>${idx + 1}</td>
            <td><input type="text" class="title-input" value="${escapeHtml(item.title)}" onchange="updateTitle(${item.id}, this.value)" placeholder="Judul video..." ${item.status !== 'pending' ? 'disabled' : ''}></td>
            <td style="white-space:nowrap">${size}</td>
            <td>${statusHtml}</td>
            <td>${item.status === 'pending' ? `<button class="remove-btn" onclick="removeFile(${item.id})" title="Hapus">✕</button>` : ''}</td>
        `;
        tbody.appendChild(tr);
    });
}

function getStatusHtml(item) {
    switch (item.status) {
        case 'pending':   return '<span class="status-pending">⬜ Menunggu</span>';
        case 'uploading': return '<span class="status-uploading">🔵 Uploading...</span>';
        case 'done':      return '<span class="status-done">✅ Selesai</span>';
        case 'error':     return `<span class="status-error" title="${escapeHtml(item.error || '')}">❌ Gagal</span>`;
        default:          return item.status;
    }
}

function updateTitle(id, value) {
    const item = fileQueue.find(f => f.id === id);
    if (item) item.title = value;
}

function removeFile(id) {
    fileQueue = fileQueue.filter(f => f.id !== id);
    renderQueue();
}

function clearQueue() {
    fileQueue = fileQueue.filter(f => f.status !== 'pending');
    renderQueue();
}

// ── Batch Upload ──
async function startBatchUpload() {
    const pending = fileQueue.filter(f => f.status === 'pending');
    if (pending.length === 0) { alert('Tidak ada file dalam antrian.'); return; }

    for (const item of pending) {
        if (!item.title.trim()) {
            alert(`Title kosong untuk file: ${item.file.name}`);
            return;
        }
    }

    batchCancelled = false;
    document.getElementById('step1').style.display = 'none';
    document.getElementById('step2').style.display = 'block';

    const driver = document.getElementById('storage_driver').value;
    const thumbPrefix = document.getElementById('thumb_prefix').value;
    const videoPrefix = document.getElementById('video_prefix') ? document.getElementById('video_prefix').value : null;
    const autoThumbnail = document.getElementById('auto_thumbnail').checked;
    const descriptionValue = (document.getElementById('description')?.value || '').trim();
    const categoryIds = Array.from(document.querySelectorAll('input[name="category_ids[]"]:checked')).map(el => parseInt(el.value, 10)).filter(Number.isFinite);
    const tagIds = Array.from(document.querySelectorAll('input[name="tag_ids[]"]:checked')).map(el => parseInt(el.value, 10)).filter(Number.isFinite);

    // Watermark settings
    const wmCheckbox = document.getElementById('watermark_enabled');
    const watermarkEnabled = wmCheckbox ? wmCheckbox.checked : false;
    const watermarkPosition = document.getElementById('watermark_position')?.value || 'bottom-right';
    const watermarkOpacity = parseFloat(document.getElementById('watermark_opacity')?.value || '0.7');
    const watermarkType = document.getElementById('watermark_type')?.value || 'image';
    const watermarkMotion = document.getElementById('watermark_motion')?.value || 'static';
    const watermarkText = document.getElementById('watermark_text')?.value || '';
    const watermarkFontSize = parseInt(document.getElementById('watermark_font_size')?.value || '24');
    const watermarkFontColor = document.getElementById('watermark_font_color')?.value || '#FFFFFF';

    const total = pending.length;
    let completed = 0;
    let failed = 0;

    for (const item of pending) {
        if (batchCancelled) {
            logMessage('info', `⚠️ Batch dibatalkan. ${completed} selesai, ${total - completed - failed} dilewati.`);
            break;
        }

        item.status = 'uploading';
        renderQueue();
        const fileIdx = `[${completed + 1}/${total}]`;

        try {
            updateOverall(completed, total);
            updateCurrent(item.file.name, 0);
            logMessage('info', `${fileIdx} Uploading: ${item.title}...`);

            // Phase 1: Init chunked upload session
            const initRes = await fetch(INIT_CHUNK_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
                body: JSON.stringify({ filename: item.file.name, file_size: item.file.size }),
            });

            if (!initRes.ok) {
                const err = await initRes.json().catch(() => ({ error: 'Init upload gagal' }));
                throw new Error(err.error || 'Init upload gagal: ' + initRes.status);
            }
            const initData = await initRes.json();

            // Phase 2: Upload file in chunks to server
            const totalChunks = Math.ceil(item.file.size / CHUNK_SIZE);
            let uploadedBytes = 0;
            const startTime = Date.now();

            for (let i = 0; i < totalChunks; i++) {
                if (batchCancelled) throw new Error('Dibatalkan');

                const start = i * CHUNK_SIZE;
                const end = Math.min(start + CHUNK_SIZE, item.file.size);
                const chunkBlob = item.file.slice(start, end);

                const formData = new FormData();
                formData.append('upload_id', initData.upload_id);
                formData.append('chunk_index', i);
                formData.append('chunk', chunkBlob, `chunk_${i}`);

                const chunkRes = await fetch(CHUNK_URL, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
                    body: formData,
                });

                if (!chunkRes.ok) {
                    const err = await chunkRes.json().catch(() => ({ error: 'Chunk upload gagal' }));
                    throw new Error(err.error || `Chunk ${i} gagal: ` + chunkRes.status);
                }

                uploadedBytes = end;
                const pct = Math.round((uploadedBytes / item.file.size) * 100);
                updateCurrent(item.file.name, pct);

                const elapsed = (Date.now() - startTime) / 1000;
                if (elapsed > 0) {
                    const speed = uploadedBytes / elapsed;
                    const remaining = (item.file.size - uploadedBytes) / speed;
                    document.getElementById('currentSpeed').textContent =
                        `${formatSize(speed)}/s · sisa ~${Math.ceil(remaining)}s · chunk ${i+1}/${totalChunks}`;
                }
            }

            // Phase 3: Confirm upload + dispatch encoding
            const confirmRes = await fetch(CONFIRM_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' },
                body: JSON.stringify({
                    title: item.title.trim(),
                    description: descriptionValue,
                    category_ids: categoryIds,
                    tag_ids: tagIds,
                    storage_driver: driver,
                    video_prefix: videoPrefix,
                    upload_id: initData.upload_id,
                    thumb_prefix: thumbPrefix,
                    auto_thumbnail: autoThumbnail,
                    watermark_enabled: watermarkEnabled,
                    watermark_position: watermarkPosition,
                    watermark_opacity: watermarkOpacity,
                    watermark_type: watermarkType,
                    watermark_motion: watermarkMotion,
                    watermark_text: watermarkText,
                    watermark_font_size: watermarkFontSize,
                    watermark_font_color: watermarkFontColor,
                }),
            });

            if (!confirmRes.ok) {
                const err = await confirmRes.json().catch(() => ({ error: 'Confirm gagal' }));
                throw new Error(err.error || 'Confirm gagal');
            }

            const confirmData = await confirmRes.json();
            item.status = 'done';
            completed++;
            logMessage('success', `${fileIdx} ✅ ${item.title} — encoding dispatched (slug: ${confirmData.slug})`);

        } catch (error) {
            item.status = 'error';
            item.error = error.message;
            failed++;
            logMessage('error', `${fileIdx} ❌ ${item.title} — ${error.message}`);
        }

        renderQueue();
        updateCurrent('-', 0);
        document.getElementById('currentSpeed').textContent = '';
    }

    updateOverall(completed, total);

    const batchStatusEl = document.getElementById('batchStatus');
    if (batchCancelled) {
        batchStatusEl.textContent = `⚠️ Batch dibatalkan — ${completed} selesai, ${failed} gagal`;
        batchStatusEl.style.color = '#dfaf6f';
    } else if (failed === 0) {
        batchStatusEl.textContent = `✅ Semua ${total} video berhasil diupload!`;
        batchStatusEl.style.color = '#6fbf6f';
    } else {
        batchStatusEl.textContent = `⚠️ Selesai: ${completed} berhasil, ${failed} gagal`;
        batchStatusEl.style.color = failed === total ? '#bf6f6f' : '#dfaf6f';
    }

    document.getElementById('doneBtn').style.display = 'inline-block';
    document.getElementById('cancelBatchBtn').style.display = 'none';
}

function cancelBatch() {
    batchCancelled = true;
    document.getElementById('cancelBatchBtn').disabled = true;
    document.getElementById('cancelBatchBtn').textContent = '⏳ Membatalkan...';
}

// ── UI Helpers ──
function updateOverall(done, total) {
    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
    document.getElementById('overallLabel').textContent = `Total: ${done}/${total}`;
    document.getElementById('overallPercent').textContent = pct + '%';
    document.getElementById('overallBar').style.width = pct + '%';
}

function updateCurrent(name, pct) {
    document.getElementById('currentLabel').textContent = `File saat ini: ${name}`;
    document.getElementById('currentPercent').textContent = pct + '%';
    document.getElementById('currentBar').style.width = pct + '%';
}

function logMessage(type, msg) {
    const log = document.getElementById('uploadLog');
    const ts = new Date().toLocaleTimeString();
    const line = document.createElement('div');
    line.className = 'log-' + type;
    line.textContent = `[${ts}] ${msg}`;
    log.appendChild(line);
    log.scrollTop = log.scrollHeight;
}

function formatSize(bytes) {
    if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(2) + ' GB';
    if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
    if (bytes >= 1024) return (bytes / 1024).toFixed(0) + ' KB';
    return bytes + ' B';
}

function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str || '';
    return div.innerHTML;
}

// ── Watermark UI ──
function setWatermarkType(type) {
    document.getElementById('watermark_type').value = type;
    document.querySelectorAll('.wm-type-btn').forEach(btn => {
        const isActive = btn.dataset.type === type;
        btn.style.background = isActive ? '#2a3a5a' : '#1a1a2a';
        btn.style.color = isActive ? '#6fafdf' : '#666';
    });
    document.getElementById('wmTextFields').style.display = type === 'text' ? 'block' : 'none';
    document.getElementById('wmImageNotice').style.display = type === 'image' ? 'block' : 'none';

    // Toggle preview
    const imgPreview = document.getElementById('wmPreviewImg');
    const textPreview = document.getElementById('wmPreviewText');
    if (imgPreview) imgPreview.style.display = type === 'image' ? 'block' : 'none';
    if (textPreview) textPreview.style.display = type === 'text' ? 'block' : 'none';

    if (typeof window.syncWatermarkPreviewMotion === 'function') {
        window.syncWatermarkPreviewMotion();
    }
}

(function() {
    const wmCheck = document.getElementById('watermark_enabled');
    const wmOpts = document.getElementById('watermarkOptions');
    const wmOpacity = document.getElementById('watermark_opacity');
    const wmOpacityVal = document.getElementById('opacityValue');
    const wmPosition = document.getElementById('watermark_position');
    const wmMotion = document.getElementById('watermark_motion');
    const wmPreviewImg = document.getElementById('wmPreviewImg');
    const wmPreviewText = document.getElementById('wmPreviewText');
    const wmFontSize = document.getElementById('watermark_font_size');
    const wmFontSizeVal = document.getElementById('fontSizeValue');
    const wmFontColor = document.getElementById('watermark_font_color');
    const wmFontColorVal = document.getElementById('fontColorValue');
    const wmTextInput = document.getElementById('watermark_text');

    if (wmCheck && wmOpts) {
        wmCheck.addEventListener('change', () => {
            wmOpts.style.display = wmCheck.checked ? 'block' : 'none';
        });
    }

    if (wmOpacity && wmOpacityVal) {
        wmOpacity.addEventListener('input', () => {
            wmOpacityVal.textContent = wmOpacity.value;
            if (wmPreviewImg) wmPreviewImg.style.opacity = wmOpacity.value;
            if (wmPreviewText) wmPreviewText.style.opacity = wmOpacity.value;
        });
    }

    // Font size slider
    if (wmFontSize && wmFontSizeVal) {
        wmFontSize.addEventListener('input', () => {
            wmFontSizeVal.textContent = wmFontSize.value + 'px';
            if (wmPreviewText) wmPreviewText.style.fontSize = Math.min(20, Math.max(10, wmFontSize.value * 0.6)) + 'px';
        });
    }

    // Font color picker
    if (wmFontColor && wmFontColorVal) {
        wmFontColor.addEventListener('input', () => {
            wmFontColorVal.textContent = wmFontColor.value;
            if (wmPreviewText) wmPreviewText.style.color = wmFontColor.value;
        });
    }

    // Text input live preview
    if (wmTextInput && wmPreviewText) {
        wmTextInput.addEventListener('input', () => {
            wmPreviewText.textContent = wmTextInput.value || 'Preview Text';
        });
    }

    // Position preview (shared for both image and text)
    const posMap = {
        'top-left':     { top: '8px', left: '8px', bottom: 'auto', right: 'auto', transform: 'none' },
        'top-right':    { top: '8px', right: '8px', bottom: 'auto', left: 'auto', transform: 'none' },
        'bottom-left':  { bottom: '8px', left: '8px', top: 'auto', right: 'auto', transform: 'none' },
        'bottom-right': { bottom: '8px', right: '8px', top: 'auto', left: 'auto', transform: 'none' },
        'center':       { top: '50%', left: '50%', bottom: 'auto', right: 'auto', transform: 'translate(-50%,-50%)' },
    };

    function updatePreviewPosition() {
        const pos = posMap[wmPosition.value] || posMap['bottom-right'];
        if (wmPreviewImg) Object.assign(wmPreviewImg.style, pos);
        if (wmPreviewText) Object.assign(wmPreviewText.style, pos);
        if (typeof window.syncWatermarkPreviewMotion === 'function') {
            window.syncWatermarkPreviewMotion();
        }
    }

    window.syncWatermarkPreviewMotion = function() {
        const isBounce = wmMotion && wmMotion.value === 'bounce';
        [wmPreviewImg, wmPreviewText].forEach((el) => {
            if (!el) return;

            if (isBounce) {
                el.classList.add('wm-bounce-preview');
                const parentRect = el.parentElement ? el.parentElement.getBoundingClientRect() : { width: 320, height: 180 };
                const rect = el.getBoundingClientRect();
                const width = Math.max(24, Math.min(Math.round(rect.width || 64), Math.round(parentRect.width - 16)));
                const height = Math.max(16, Math.min(Math.round(rect.height || 24), Math.round(parentRect.height - 16)));
                el.style.setProperty('--wm-preview-width', width + 'px');
                el.style.setProperty('--wm-preview-height', height + 'px');
            } else {
                el.classList.remove('wm-bounce-preview');
            }
        });
    }

    if (wmPosition) {
        wmPosition.addEventListener('change', updatePreviewPosition);
        updatePreviewPosition(); // init
    }

    if (wmMotion) {
        wmMotion.addEventListener('change', () => {
            if (typeof window.syncWatermarkPreviewMotion === 'function') {
                window.syncWatermarkPreviewMotion();
            }
        });
    }
})();

// ── Load Prefixes via AJAX ──
async function loadPrefixes() {
    const driver = document.getElementById('storage_driver').value;

    try {
        const res = await fetch(PREFIX_URL + '?storage_driver=' + driver, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
        });

        if (!res.ok) return;
        const data = await res.json();

        if (data.prefixes && data.prefixes.length > 0) {
            const thumbSel = document.getElementById('thumb_prefix');
            const videoSel = document.getElementById('video_prefix');
            if (!thumbSel && !videoSel) return;

            const currentThumb = thumbSel ? thumbSel.value : null;
            const currentVideo = videoSel ? videoSel.value : null;

            if (thumbSel) thumbSel.innerHTML = '';
            if (videoSel) videoSel.innerHTML = '';

            data.prefixes.forEach(p => {
                if (thumbSel) thumbSel.add(new Option(p + '/', p, false, p === currentThumb));
                if (videoSel) videoSel.add(new Option(p + '/', p, false, p === currentVideo));
            });
        }
    } catch (e) {
        console.warn('Failed to load prefixes:', e);
    }
}
</script>
@endsection