@extends('admin.layout')
@section('title', $video->title)

@section('content')
<div class="toolbar">
    <div>
        <a href="{{ route('admin.videos.index') }}" style="color:#888; font-size:12px; text-decoration:none;">← Kembali ke daftar</a>
        <h2 style="font-size:18px; color:#fff; margin-top:4px;">{{ $video->title }}</h2>
    </div>
    <div style="display:flex; gap:8px; align-items:center;">
        @if($video->isPlayable())
            <a href="{{ route('embed.show', $video) }}" target="_blank" class="btn btn-primary">▶ Play</a>
            <button type="button" class="btn btn-secondary" onclick="openShare('{{ $video->slug }}')" title="Share">📤 Share</button>
        @endif
        @if(!$video->isSelfHosted())
            <a href="{{ route('admin.videos.edit', $video) }}" class="btn btn-secondary">✏️ Edit</a>
        @endif
    </div>
</div>

{{-- Status Banner --}}
@if($video->isFailed())
    <div class="alert alert-error" style="display:flex; justify-content:space-between; align-items:center;">
        <div>
            <strong>❌ Encoding Gagal</strong>
            @if($video->error_message)
                <br><span style="font-size:12px; opacity:0.8;">{{ $video->error_message }}</span>
            @endif
        </div>
        <form method="POST" action="{{ route('admin.videos.retry', $video) }}" style="margin:0;">
            @csrf
            <button type="submit" class="btn btn-primary" onclick="return confirm('Re-encode video ini?')">🔄 Retry Encode</button>
        </form>
    </div>
@elseif($video->isEncoding())
    <div style="background:#2a2a1a; border:1px solid #4a4a2a; border-radius:6px; padding:12px 16px; margin-bottom:16px; font-size:14px; color:#cfcf6f;">
        ⏳ Video sedang dalam proses encoding...
    </div>
@elseif($video->isUploaded())
    <div style="background:#1a2a3a; border:1px solid #2a3a4a; border-radius:6px; padding:12px 16px; margin-bottom:16px; font-size:14px; color:#6fafdf;">
        ⬆ File telah diupload, menunggu encoding job...
    </div>
@elseif($video->status === 'disabled')
    <div style="background:#2a1a1a; border:1px solid #3a2a2a; border-radius:6px; padding:12px 16px; margin-bottom:16px; font-size:14px; color:#bf6f6f;">
        🚫 Video dinonaktifkan.
    </div>
@endif

{{-- Detail Grid --}}
<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px;">

    {{-- Left: Metadata --}}
    <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:20px;">
        <h3 style="font-size:13px; color:#666; text-transform:uppercase; margin-bottom:16px;">Metadata</h3>
        <table style="background:transparent; border:none; width:100%">
            <tr>
                <td style="border:none; color:#666; width:140px; padding:6px 0; font-size:13px">Slug</td>
                <td style="border:none; color:#fff; padding:6px 0; font-size:13px; font-family:monospace;">{{ $video->slug }}</td>
            </tr>
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Provider</td>
                <td style="border:none; padding:6px 0"><span class="badge badge-provider">{{ $video->provider }}</span></td>
            </tr>
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Play Mode</td>
                <td style="border:none; padding:6px 0">
                    <span class="badge badge-{{ $video->play_mode === 'hls' ? 'hls' : ($video->play_mode === 'iframe' ? 'iframe' : 'auto') }}">{{ $video->play_mode }}</span>
                </td>
            </tr>
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Status</td>
                <td style="border:none; padding:6px 0">
                    <span class="badge badge-{{ $video->statusBadgeClass() }}">{{ $video->status }}</span>
                </td>
            </tr>
            @if($video->embed_url)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Embed URL</td>
                <td style="border:none; color:#6fafdf; padding:6px 0; font-size:12px; word-break:break-all;">
                    <a href="{{ $video->embed_url }}" target="_blank" style="color:#6fafdf;">{{ Str::limit($video->embed_url, 80) }}</a>
                </td>
            </tr>
            @endif
            @if($video->hls_url)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">HLS URL</td>
                <td style="border:none; color:#6fbf6f; padding:6px 0; font-size:12px; word-break:break-all;">{{ Str::limit($video->hls_url, 80) }}</td>
            </tr>
            @endif
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Player URL</td>
                <td style="border:none; padding:6px 0; font-size:12px;">
                    <a href="{{ route('embed.show', $video) }}" target="_blank" style="color:#6fafdf;">/e/{{ $video->slug }}</a>
                </td>
            </tr>
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Created</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:13px">{{ $video->created_at->format('Y-m-d H:i:s') }}</td>
            </tr>
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Updated</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:13px">{{ $video->updated_at->format('Y-m-d H:i:s') }}</td>
            </tr>
        </table>
    </div>

    {{-- Right: Storage & Encoding --}}
    <div style="background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:20px;">
        <h3 style="font-size:13px; color:#666; text-transform:uppercase; margin-bottom:16px;">Storage & Encoding</h3>
        <table style="background:transparent; border:none; width:100%">
            @if($video->storage_driver)
            <tr>
                <td style="border:none; color:#666; width:140px; padding:6px 0; font-size:13px">Storage Driver</td>
                <td style="border:none; padding:6px 0"><span class="badge badge-auto">{{ strtoupper($video->storage_driver) }}</span></td>
            </tr>
            @endif
            @if($video->source_mp4_path)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Source MP4</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:12px; font-family:monospace; word-break:break-all;">{{ $video->source_mp4_path }}</td>
            </tr>
            @endif
            @if($video->asset_path)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">HLS Asset Path</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:12px; font-family:monospace; word-break:break-all;">{{ $video->asset_path }}</td>
            </tr>
            @endif
            @if($video->type)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Type</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:13px">{{ $video->type }}</td>
            </tr>
            @endif
            @if($video->duration)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">Duration</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:13px">{{ gmdate('H:i:s', (int) $video->duration) }}</td>
            </tr>
            @endif
            @if($video->file_size)
            <tr>
                <td style="border:none; color:#666; padding:6px 0; font-size:13px">File Size</td>
                <td style="border:none; color:#aaa; padding:6px 0; font-size:13px">
                    @if($video->file_size > 1073741824)
                        {{ number_format($video->file_size / 1073741824, 2) }} GB
                    @else
                        {{ number_format($video->file_size / 1048576, 1) }} MB
                    @endif
                </td>
            </tr>
            @endif
        </table>

        {{-- ═══ THUMBNAIL SECTION ═══ --}}
        <div style="margin-top:20px; padding-top:16px; border-top:1px solid #2a2a2a;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                <h4 style="font-size:12px; color:#555; text-transform:uppercase;">Thumbnail</h4>
                @if($video->isSelfHosted() && $video->storage_driver)
                <button type="button" class="btn btn-primary" onclick="openThumbGen()" style="font-size:11px; padding:4px 12px;">
                    🖼️ Generate Thumbnail
                </button>
                @endif
            </div>

            <div id="currentThumbWrap">
                @if($video->thumbnail_path)
                    <p style="font-size:12px; color:#666; margin-bottom:8px; font-family:monospace;">{{ $video->thumbnail_path }}</p>
                    <img src="{{ route('admin.videos.thumbnail-preview', $video) }}?v={{ $video->updated_at?->timestamp ?? time() }}"
                         alt="Thumbnail"
                         style="max-width:280px; border-radius:6px; border:1px solid #333;"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <p style="display:none; color:#bf6f6f; font-size:12px;">Thumbnail tidak bisa dimuat (mungkin private).</p>
                @else
                    <p style="color:#666; font-size:13px;">Belum ada thumbnail.</p>
                @endif
            </div>
        </div>

        {{-- Extract Status (for external videos) --}}
        @if(!$video->isSelfHosted())
        <div style="margin-top:20px; padding-top:16px; border-top:1px solid #2a2a2a;">
            <h4 style="font-size:12px; color:#555; text-transform:uppercase; margin-bottom:12px;">HLS Extract Status</h4>
            <table style="background:transparent; border:none; width:100%">
                <tr>
                    <td style="border:none; color:#666; width:140px; padding:4px 0; font-size:13px">Extract Failed</td>
                    <td style="border:none; padding:4px 0">
                        @if($video->extract_failed)
                            <span class="badge badge-fail">YA</span>
                        @else
                            <span class="badge badge-ready">TIDAK</span>
                        @endif
                    </td>
                </tr>
                <tr>
                    <td style="border:none; color:#666; padding:4px 0; font-size:13px">Last Extracted</td>
                    <td style="border:none; color:#aaa; padding:4px 0; font-size:13px">{{ $video->last_extracted_at?->diffForHumans() ?? '—' }}</td>
                </tr>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- Error Message (full) --}}
@if($video->error_message)
<div style="margin-top:20px; background:#2a1a1a; border:1px solid #3a2a2a; border-radius:8px; padding:20px;">
    <h3 style="font-size:13px; color:#bf6f6f; text-transform:uppercase; margin-bottom:8px;">Error Message</h3>
    <pre style="color:#bf6f6f; font-size:12px; white-space:pre-wrap; word-break:break-all; font-family:monospace; line-height:1.6;">{{ $video->error_message }}</pre>
</div>
@endif

{{-- Actions --}}
<div style="margin-top:24px; display:flex; gap:8px; flex-wrap:wrap;">
    @if($video->canRetryEncode())
        <form method="POST" action="{{ route('admin.videos.retry', $video) }}">
            @csrf
            <button type="submit" class="btn btn-primary" onclick="return confirm('Re-encode video ini?')">🔄 Retry Encode</button>
        </form>
    @endif

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

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

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

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

{{-- ═══════════════════ THUMBNAIL GENERATOR MODAL ═══════════════════ --}}
@if($video->isSelfHosted() && $video->storage_driver)
<div id="thumbGenModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:9999; overflow-y:auto;">
<div style="max-width:800px; margin:40px auto; background:#1a1a1a; border:1px solid #333; border-radius:10px; padding:28px; position:relative;">

    {{-- Close --}}
    <button type="button" onclick="closeThumbGen()" style="position:absolute; top:12px; right:16px; background:none; border:none; color:#888; font-size:20px; cursor:pointer;">&times;</button>

    <h2 style="color:#fff; font-size:16px; margin-bottom:20px;">🖼️ Generate Thumbnail</h2>

    {{-- Mode Selector --}}
    <div style="margin-bottom:16px;">
        <label style="color:#888; font-size:12px; text-transform:uppercase; display:block; margin-bottom:8px;">Mode</label>
        <div style="display:flex; gap:8px;">
            <button type="button" class="tg-mode-btn" data-mode="single" data-count="1" onclick="setThumbMode(this)"
                    style="padding:8px 18px; border-radius:6px; border:2px solid #4fa3e3; background:#1e3a5a; color:#fff; font-size:13px; cursor:pointer;">
                Single (1)
            </button>
            <button type="button" class="tg-mode-btn" data-mode="collage3" data-count="3" onclick="setThumbMode(this)"
                    style="padding:8px 18px; border-radius:6px; border:2px solid #333; background:#222; color:#aaa; font-size:13px; cursor:pointer;">
                Collage (3)
            </button>
            <button type="button" class="tg-mode-btn" data-mode="grid2x2" data-count="4" onclick="setThumbMode(this)"
                    style="padding:8px 18px; border-radius:6px; border:2px solid #333; background:#222; color:#aaa; font-size:13px; cursor:pointer;">
                Grid 2×2 (4)
            </button>
            <button type="button" class="tg-mode-btn" data-mode="grid3x3" data-count="9" onclick="setThumbMode(this)"
                    style="padding:8px 18px; border-radius:6px; border:2px solid #333; background:#222; color:#aaa; font-size:13px; cursor:pointer;">
                Grid 3×3 (9)
            </button>
        </div>
    </div>

    {{-- Seconds Input --}}
    <div style="margin-bottom:16px;">
        <label style="color:#888; font-size:12px; text-transform:uppercase; display:block; margin-bottom:8px;">
            Detik <span id="tgSecondsHint" style="color:#555; text-transform:none;">(1 untuk Single, 3 untuk Collage, 4 untuk 2×2, 9 untuk 3×3 — pisahkan koma)</span>
        </label>
        <div style="display:flex; gap:8px; align-items:center;">
            <input type="text" id="tgSeconds" placeholder="contoh: 10"
                   style="flex:1; background:#111; border:1px solid #333; border-radius:6px; color:#fff; padding:8px 12px; font-size:14px; font-family:monospace;">
            <button type="button" id="tgAutoBtn" onclick="autoFillSeconds()" title="Auto-isi merata dari durasi"
                    style="padding:8px 14px; border-radius:6px; border:1px solid #555; background:#2a2a2a; color:#ccc; font-size:12px; cursor:pointer;">
                ⏱ Auto
            </button>
        </div>
        <p id="tgDurationInfo" style="color:#555; font-size:12px; margin-top:4px;">
            Durasi: <span id="tgDurVal">{{ $video->duration ? gmdate('H:i:s', (int)$video->duration) . ' (' . (int)$video->duration . 's)' : 'belum diketahui' }}</span>
        </p>
    </div>

    {{-- Generate Button --}}
    <button type="button" id="tgGenerateBtn" onclick="generatePreviews()"
            style="padding:10px 24px; border-radius:6px; border:none; background:#4fa3e3; color:#fff; font-size:14px; font-weight:600; cursor:pointer; margin-bottom:20px;">
        🔍 Generate Preview
    </button>

    {{-- Loading --}}
    <div id="tgLoading" style="display:none; text-align:center; padding:30px; color:#888;">
        <div style="border:3px solid #333; border-top:3px solid #4fa3e3; border-radius:50%; width:32px; height:32px; animation:spin 1s linear infinite; margin:0 auto 12px;"></div>
        <p>Extracting frames… <span id="tgLoadingDetail" style="color:#555;"></span></p>
    </div>

    {{-- Error --}}
    <div id="tgError" style="display:none; background:#3a1a1a; border:1px solid #6f3333; border-radius:6px; padding:12px; color:#e66; margin-bottom:16px; font-size:13px;"></div>

    {{-- Preview Grid --}}
    <div id="tgPreviewArea" style="display:none;">
        <label style="color:#888; font-size:12px; text-transform:uppercase; display:block; margin-bottom:8px;">
            Pilih thumbnail — klik gambar untuk memilih
        </label>
        <div id="tgPreviewGrid" style="display:grid; gap:10px;"></div>

        {{-- Apply Button --}}
        <div style="margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
            <button type="button" id="tgApplyBtn" onclick="applyThumbnail()" disabled
                    style="padding:10px 24px; border-radius:6px; border:none; background:#444; color:#888; font-size:14px; font-weight:600; cursor:not-allowed;">
                ✅ Apply Thumbnail
            </button>
            <button type="button" id="tgApplyGridBtn" onclick="applyGridThumbnail()" style="display:none; padding:10px 24px; border-radius:6px; border:none; background:#6f42c1; color:#fff; font-size:14px; font-weight:600; cursor:pointer;">
                🖼️ Apply sebagai Grid
            </button>
            <span id="tgApplyInfo" style="color:#555; font-size:12px;">Pilih salah satu gambar terlebih dahulu</span>
        </div>
    </div>

    {{-- Apply Loading --}}
    <div id="tgApplyLoading" style="display:none; text-align:center; padding:20px; color:#888;">
        <div style="border:3px solid #333; border-top:3px solid #28a745; border-radius:50%; width:28px; height:28px; animation:spin 1s linear infinite; margin:0 auto 10px;"></div>
        <p>Applying thumbnail…</p>
    </div>

    {{-- Success --}}
    <div id="tgSuccess" style="display:none; background:#1a3a1a; border:1px solid #336f33; border-radius:6px; padding:12px; color:#6e6; margin-top:12px; font-size:13px;"></div>

</div>
</div>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
.tg-preview-item { position:relative; cursor:pointer; border-radius:6px; overflow:hidden; border:3px solid transparent; transition:border-color .15s; }
.tg-preview-item:hover { border-color:#4fa3e3; }
.tg-preview-item.selected { border-color:#28a745; box-shadow:0 0 12px rgba(40,167,69,.4); }
.tg-preview-item img { width:100%; display:block; }
.tg-preview-item .tg-second-badge {
    position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,.7); color:#fff; font-size:11px;
    padding:2px 8px; border-radius:4px; font-family:monospace;
}
.tg-preview-item .tg-check {
    position:absolute; top:6px; left:6px; width:24px; height:24px; border-radius:50%;
    background:#28a745; color:#fff; font-size:14px; display:none; align-items:center; justify-content:center;
}
.tg-preview-item.selected .tg-check { display:flex; }
</style>

<script>
(function(){
    const GENERATE_URL = @json(route('admin.videos.generate-thumbnails', $video));
    const APPLY_URL    = @json(route('admin.videos.apply-thumbnail', $video));
    const APPLY_GRID_URL = @json(route('admin.videos.apply-grid-thumbnail', $video));
    const CSRF         = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
    const videoDuration = {{ (int)($video->duration ?? 0) }};

    let currentMode = 'single';
    let currentCount = 1;
    let selectedSecond = null;
    let previews = [];

    window.openThumbGen = function() {
        document.getElementById('thumbGenModal').style.display = '';
        document.body.style.overflow = 'hidden';
        resetState();
    };

    window.closeThumbGen = function() {
        document.getElementById('thumbGenModal').style.display = 'none';
        document.body.style.overflow = '';
    };

    // Close on backdrop click
    document.getElementById('thumbGenModal').addEventListener('click', function(e) {
        if (e.target === this) closeThumbGen();
    });

    window.setThumbMode = function(btn) {
        currentMode  = btn.dataset.mode;
        currentCount = parseInt(btn.dataset.count);

        document.querySelectorAll('.tg-mode-btn').forEach(b => {
            b.style.borderColor = '#333';
            b.style.background = '#222';
            b.style.color = '#aaa';
        });
        btn.style.borderColor = '#4fa3e3';
        btn.style.background = '#1e3a5a';
        btn.style.color = '#fff';

        // Update placeholder
        const placeholders = { single: 'contoh: 10', collage3: 'contoh: 10,30,50', grid2x2: 'contoh: 5,20,40,55', grid3x3: 'contoh: 5,10,20,30,40,50,60,70,80' };
        document.getElementById('tgSeconds').placeholder = placeholders[currentMode] || '';
    };

    window.autoFillSeconds = function() {
        const dur = videoDuration;
        if (!dur || dur <= 0) {
            alert('Durasi video belum diketahui. Generate preview dulu, sistem akan mendeteksi durasi.');
            return;
        }
        const count = currentCount;
        const secs = [];
        const skip = 2;
        const usable = dur - (skip * 2);
        if (usable <= 0) {
            secs.push(Math.floor(dur / 2));
        } else {
            for (let i = 0; i < count; i++) {
                secs.push(Math.round(skip + (usable * (i + 1)) / (count + 1)));
            }
        }
        document.getElementById('tgSeconds').value = secs.join(',');
    };

    window.generatePreviews = function() {
        const secondsStr = document.getElementById('tgSeconds').value.trim();

        hideEl('tgError');
        hideEl('tgPreviewArea');
        hideEl('tgSuccess');
        showEl('tgLoading');
        document.getElementById('tgLoadingDetail').textContent = currentMode === 'single' ? '1 frame…' : currentCount + ' frames…';
        document.getElementById('tgGenerateBtn').disabled = true;

        fetch(GENERATE_URL, {
            method: 'POST',
            headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept':'application/json' },
            body: JSON.stringify({ mode: currentMode, seconds: secondsStr })
        })
        .then(r => r.json())
        .then(data => {
            hideEl('tgLoading');
            document.getElementById('tgGenerateBtn').disabled = false;

            if (!data.success) {
                showError(data.message || 'Generate gagal.');
                return;
            }

            // Update duration display if returned
            if (data.duration) {
                const h = Math.floor(data.duration / 3600);
                const m = Math.floor((data.duration % 3600) / 60);
                const s = data.duration % 60;
                const fmt = [h, m, s].map(v => String(v).padStart(2,'0')).join(':');
                document.getElementById('tgDurVal').textContent = fmt + ' (' + data.duration + 's)';
            }

            previews = data.previews || [];
            renderPreviews();
        })
        .catch(err => {
            hideEl('tgLoading');
            document.getElementById('tgGenerateBtn').disabled = false;
            showError('Network error: ' + err.message);
        });
    };

    function renderPreviews() {
        const grid = document.getElementById('tgPreviewGrid');
        grid.innerHTML = '';
        selectedSecond = null;
        updateApplyBtn();

        // Show/hide Apply Grid button for grid/collage modes
        const gridBtn = document.getElementById('tgApplyGridBtn');
        if (currentMode === 'collage3' || currentMode === 'grid2x2' || currentMode === 'grid3x3') {
            gridBtn.style.display = '';
        } else {
            gridBtn.style.display = 'none';
        }

        const cols = currentMode === 'grid3x3' ? 3 : (currentMode === 'grid2x2' ? 2 : (currentMode === 'collage3' ? 3 : 1));
        grid.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';

        previews.forEach((p, idx) => {
            const div = document.createElement('div');
            div.className = 'tg-preview-item';
            div.dataset.second = p.second;
            div.innerHTML =
                '<img src="' + p.base64 + '" alt="Frame @' + p.second + 's">' +
                '<span class="tg-second-badge">' + p.second + 's</span>' +
                '<span class="tg-check">✓</span>';
            div.addEventListener('click', function() {
                document.querySelectorAll('.tg-preview-item').forEach(el => el.classList.remove('selected'));
                this.classList.add('selected');
                selectedSecond = parseInt(this.dataset.second);
                updateApplyBtn();
            });
            grid.appendChild(div);
        });

        showEl('tgPreviewArea');
    }

    function updateApplyBtn() {
        const btn = document.getElementById('tgApplyBtn');
        const info = document.getElementById('tgApplyInfo');
        if (selectedSecond !== null) {
            btn.disabled = false;
            btn.style.background = '#28a745';
            btn.style.color = '#fff';
            btn.style.cursor = 'pointer';
            info.textContent = 'Frame @' + selectedSecond + 's akan digunakan.';
            info.style.color = '#6e6';
        } else {
            btn.disabled = true;
            btn.style.background = '#444';
            btn.style.color = '#888';
            btn.style.cursor = 'not-allowed';
            info.textContent = 'Pilih salah satu gambar terlebih dahulu';
            info.style.color = '#555';
        }
    }

    window.applyThumbnail = function() {
        if (selectedSecond === null) return;

        hideEl('tgError');
        hideEl('tgSuccess');
        showEl('tgApplyLoading');
        document.getElementById('tgApplyBtn').disabled = true;

        fetch(APPLY_URL, {
            method: 'POST',
            headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept':'application/json' },
            body: JSON.stringify({ second: selectedSecond })
        })
        .then(r => r.json())
        .then(data => {
            hideEl('tgApplyLoading');
            if (!data.success) {
                showError(data.message || 'Apply gagal.');
                document.getElementById('tgApplyBtn').disabled = false;
                return;
            }

            const suc = document.getElementById('tgSuccess');
            suc.innerHTML = '✅ Thumbnail berhasil di-apply! Path: <code style="color:#8e8;">' + (data.path || '') + '</code><br>Halaman akan refresh dalam 2 detik…';
            showEl('tgSuccess');

            setTimeout(() => location.reload(), 2000);
        })
        .catch(err => {
            hideEl('tgApplyLoading');
            showError('Network error: ' + err.message);
            document.getElementById('tgApplyBtn').disabled = false;
        });
    };

    window.applyGridThumbnail = function() {
        if (previews.length < 2) {
            alert('Minimal 2 frame diperlukan untuk membuat grid thumbnail.');
            return;
        }

        const secondsArr = previews.map(p => p.second);

        hideEl('tgError');
        hideEl('tgSuccess');
        showEl('tgApplyLoading');
        document.getElementById('tgApplyGridBtn').disabled = true;

        fetch(APPLY_GRID_URL, {
            method: 'POST',
            headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept':'application/json' },
            body: JSON.stringify({ mode: currentMode, seconds: secondsArr.join(',') })
        })
        .then(r => r.json())
        .then(data => {
            hideEl('tgApplyLoading');
            if (!data.success) {
                showError(data.message || 'Apply grid gagal.');
                document.getElementById('tgApplyGridBtn').disabled = false;
                return;
            }

            const suc = document.getElementById('tgSuccess');
            suc.innerHTML = '✅ Grid thumbnail berhasil di-apply! Path: <code style="color:#8e8;">' + (data.path || '') + '</code><br>Halaman akan refresh dalam 2 detik…';
            showEl('tgSuccess');

            setTimeout(() => location.reload(), 2000);
        })
        .catch(err => {
            hideEl('tgApplyLoading');
            showError('Network error: ' + err.message);
            document.getElementById('tgApplyGridBtn').disabled = false;
        });
    };

    function resetState() {
        selectedSecond = null;
        previews = [];
        hideEl('tgPreviewArea');
        hideEl('tgLoading');
        hideEl('tgApplyLoading');
        hideEl('tgError');
        hideEl('tgSuccess');
        document.getElementById('tgGenerateBtn').disabled = false;
        document.getElementById('tgSeconds').value = '';
        // Reset to single mode
        const singleBtn = document.querySelector('.tg-mode-btn[data-mode="single"]');
        if (singleBtn) setThumbMode(singleBtn);
    }

    function showEl(id) { document.getElementById(id).style.display = ''; }
    function hideEl(id) { document.getElementById(id).style.display = 'none'; }
    function showError(msg) {
        const el = document.getElementById('tgError');
        el.textContent = msg;
        el.style.display = '';
    }
})();
</script>
@endif

@endsection