@extends('admin.layout')
@section('title', 'Bulk Thumbnail Generator')

@section('content')
<div class="toolbar">
    <h2 style="font-size:18px; color:#fff;">🖼️ Bulk Thumbnail Generator</h2>
    <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">← Back to Videos</a>
</div>

{{-- ═══════════════════════════════════════════ --}}
{{-- START NEW BATCH --}}
{{-- ═══════════════════════════════════════════ --}}
@if(!$activeBatch)
<div class="card" style="margin-bottom:24px;">
    <h3 style="font-size:15px; margin-bottom:12px; color:#6fafdf;">Generate Thumbnail Otomatis</h3>
    <p style="font-size:13px; color:#888; margin-bottom:16px;">
        Akan memproses semua video self-hosted yang belum punya thumbnail.
        Thumbnail dihasilkan otomatis sebagai <strong>grid 3×3</strong> (9 frame dari video).
        Ukuran output 494×875.
        Proses berjalan di background — browser bisa ditutup.
    </p>

    <div style="background:#1a2a3a; padding:12px 16px; border-radius:6px; margin-bottom:16px;">
        <span style="font-size:14px; color:#6fbf6f;">📊 Video tanpa thumbnail:</span>
        <strong style="font-size:18px; color:#fff; margin-left:8px;">{{ $pendingCount }}</strong>
    </div>

    @if($pendingCount > 0)
    <form method="POST" action="{{ route('admin.bulk-thumbnails.start') }}">
        @csrf
        <div style="display:flex; gap:12px; align-items:center;">
            <select name="mode" class="form-control" style="max-width:200px;">
                <option value="grid3x3" selected>Grid 3×3 (9 frame)</option>
                <option value="single">Single (1 frame)</option>
            </select>
            <button type="submit" class="btn btn-success" style="font-size:14px; padding:10px 24px;"
                    onclick="return confirm('Mulai generate thumbnail untuk {{ $pendingCount }} video? Proses berjalan di background.')">
                🚀 Mulai Generate
            </button>
        </div>
    </form>
    @else
    <p style="color:#6fbf6f; font-size:14px;">✅ Semua video sudah punya thumbnail!</p>
    @endif
</div>
@endif

{{-- ═══════════════════════════════════════════ --}}
{{-- ACTIVE BATCH PROGRESS --}}
{{-- ═══════════════════════════════════════════ --}}
@if($activeBatch)
<div class="card" id="progressCard" style="margin-bottom:24px;" data-batch-id="{{ $activeBatch->batch_id }}">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
        <h3 style="font-size:15px; color:#cfcf6f;">
            ⏳ Batch Sedang Berjalan
            <span class="badge badge-encoding" id="batchStatus">{{ $activeBatch->status }}</span>
        </h3>
        <form method="POST" action="{{ route('admin.bulk-thumbnails.cancel', $activeBatch->batch_id) }}">
            @csrf
            <button type="submit" class="btn btn-danger btn-sm"
                    onclick="return confirm('Cancel batch ini? Video yang sudah selesai tetap tersimpan.')">
                ✖ Cancel
            </button>
        </form>
    </div>

    {{-- Progress Bar --}}
    <div class="progress-bar-wrap" style="margin-bottom:12px;">
        <div class="progress-bar" id="progressBar" style="width: {{ $activeBatch->progressPercent() }}%"></div>
    </div>

    {{-- Stats --}}
    <div class="stats-grid" id="statsGrid">
        <div class="stat-item">
            <div class="stat-value" id="statProcessed">{{ $activeBatch->processed }}</div>
            <div class="stat-label">Processed</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" id="statTotal">{{ $activeBatch->total_videos }}</div>
            <div class="stat-label">Total</div>
        </div>
        <div class="stat-item stat-success">
            <div class="stat-value" id="statSuccess">{{ $activeBatch->success_count }}</div>
            <div class="stat-label">✅ Success</div>
        </div>
        <div class="stat-item stat-failed">
            <div class="stat-value" id="statFailed">{{ $activeBatch->failed_count }}</div>
            <div class="stat-label">❌ Failed</div>
        </div>
        <div class="stat-item stat-skipped">
            <div class="stat-value" id="statSkipped">{{ $activeBatch->skipped_count }}</div>
            <div class="stat-label">⏭ Skipped</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" id="statPercent">{{ $activeBatch->progressPercent() }}%</div>
            <div class="stat-label">Progress</div>
        </div>
    </div>

    <p style="font-size:12px; color:#555; margin-top:8px;">
        Mode: <strong>{{ $activeBatch->mode }}</strong> •
        Started: <span id="startedAt">{{ $activeBatch->started_at?->diffForHumans() ?? 'queued...' }}</span>
    </p>

    {{-- Live Log --}}
    <h4 style="font-size:13px; color:#888; margin-top:20px; margin-bottom:8px;">📋 Live Log</h4>
    <div class="log-container" id="logContainer">
        <div class="log-empty" id="logEmpty">Menunggu proses dimulai...</div>
    </div>
</div>
@endif

{{-- ═══════════════════════════════════════════ --}}
{{-- BATCH HISTORY --}}
{{-- ═══════════════════════════════════════════ --}}
@if($history->count() > 0)
<div class="card">
    <h3 style="font-size:15px; margin-bottom:12px; color:#888;">📜 Riwayat Batch</h3>
    <table>
        <thead>
            <tr>
                <th>Batch ID</th>
                <th>Mode</th>
                <th>Status</th>
                <th>Total</th>
                <th>✅</th>
                <th>❌</th>
                <th>⏭</th>
                <th>Waktu</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($history as $h)
            <tr>
                <td><code style="font-size:11px; color:#6fafdf;">{{ Str::limit($h->batch_id, 8, '...') }}</code></td>
                <td>{{ $h->mode }}</td>
                <td>
                    <span class="badge {{ $h->status === 'completed' ? 'badge-ready' : 'badge-disabled' }}">
                        {{ $h->status }}
                    </span>
                </td>
                <td>{{ $h->total_videos }}</td>
                <td style="color:#6fbf6f;">{{ $h->success_count }}</td>
                <td style="color:#bf6f6f;">{{ $h->failed_count }}</td>
                <td style="color:#888;">{{ $h->skipped_count }}</td>
                <td style="font-size:12px; color:#666;">
                    {{ $h->finished_at?->diffForHumans() ?? '—' }}
                </td>
                <td>
                    <a href="{{ route('admin.bulk-thumbnails.logs', $h->batch_id) }}" class="btn btn-sm btn-secondary">View Logs</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif

{{-- ═══════════════════════════════════════════ --}}
{{-- STYLES --}}
{{-- ═══════════════════════════════════════════ --}}
<style>
    .card {
        background: #1a1a1a;
        border-radius: 8px;
        padding: 20px;
        border: 1px solid #2a2a2a;
    }
    .progress-bar-wrap {
        width: 100%;
        height: 24px;
        background: #111;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #333;
    }
    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #1a5a1a, #2a8a2a);
        border-radius: 12px;
        transition: width 0.5s ease;
        min-width: 0;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
        margin-top: 12px;
    }
    .stat-item {
        text-align: center;
        background: #111;
        padding: 10px;
        border-radius: 6px;
    }
    .stat-value {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }
    .stat-label {
        font-size: 11px;
        color: #666;
        margin-top: 2px;
    }
    .stat-success .stat-value { color: #6fbf6f; }
    .stat-failed .stat-value { color: #bf6f6f; }
    .stat-skipped .stat-value { color: #888; }

    .log-container {
        background: #0a0a0a;
        border: 1px solid #222;
        border-radius: 6px;
        max-height: 400px;
        overflow-y: auto;
        padding: 8px;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 12px;
    }
    .log-empty {
        color: #444;
        text-align: center;
        padding: 20px;
    }
    .log-entry {
        padding: 6px 10px;
        border-bottom: 1px solid #1a1a1a;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .log-entry:last-child { border-bottom: none; }
    .log-entry.log-success { color: #6fbf6f; }
    .log-entry.log-failed { color: #bf6f6f; }
    .log-entry.log-skipped { color: #666; }
    .log-entry.log-processing { color: #cfcf6f; }
    .log-icon { width: 18px; text-align: center; flex-shrink: 0; }
    .log-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .log-meta { color: #555; font-size: 11px; flex-shrink: 0; }

    @media (max-width: 768px) {
        .stats-grid { grid-template-columns: repeat(3, 1fr); }
    }
</style>

{{-- ═══════════════════════════════════════════ --}}
{{-- POLLING SCRIPT --}}
{{-- ═══════════════════════════════════════════ --}}
@if($activeBatch)
<script>
(function() {
    const batchId = '{{ $activeBatch->batch_id }}';
    const pollUrl = '{{ route("admin.bulk-thumbnails.progress", $activeBatch->batch_id) }}';
    let polling = true;

    function updateUI(data) {
        // Update stats
        document.getElementById('statProcessed').textContent = data.processed;
        document.getElementById('statTotal').textContent = data.total_videos;
        document.getElementById('statSuccess').textContent = data.success_count;
        document.getElementById('statFailed').textContent = data.failed_count;
        document.getElementById('statSkipped').textContent = data.skipped_count;
        document.getElementById('statPercent').textContent = data.percent + '%';
        document.getElementById('progressBar').style.width = data.percent + '%';

        if (data.started_at) {
            document.getElementById('startedAt').textContent = data.started_at;
        }

        // Update status badge
        const statusEl = document.getElementById('batchStatus');
        statusEl.textContent = data.status;
        if (data.status === 'completed') {
            statusEl.className = 'badge badge-ready';
        } else if (data.status === 'cancelled') {
            statusEl.className = 'badge badge-disabled';
        }

        // Update logs
        const logContainer = document.getElementById('logContainer');
        const logEmpty = document.getElementById('logEmpty');

        if (data.recent_logs && data.recent_logs.length > 0) {
            if (logEmpty) logEmpty.remove();

            let html = '';
            data.recent_logs.forEach(function(log) {
                let cls = 'log-' + log.status;
                let icon = '⏳';
                if (log.status === 'success') icon = '✅';
                else if (log.status === 'failed') icon = '❌';
                else if (log.status === 'skipped') icon = '⏭';
                else if (log.status === 'processing') icon = '⚙️';

                let meta = '';
                if (log.duration_ms) meta = log.duration_ms + 'ms';
                if (log.error_message && log.status === 'failed') {
                    meta = log.error_message.substring(0, 60);
                }

                html += '<div class="log-entry ' + cls + '">'
                    + '<span class="log-icon">' + icon + '</span>'
                    + '<span class="log-title">' + escapeHtml(log.video_title) + '</span>'
                    + '<span class="log-meta">' + escapeHtml(meta) + '</span>'
                    + '<span class="log-meta">' + log.updated_at + '</span>'
                    + '</div>';
            });

            logContainer.innerHTML = html;
        }

        // Stop polling if batch is done
        if (data.status === 'completed' || data.status === 'cancelled') {
            polling = false;
            // Reload page to show start form again
            setTimeout(function() { window.location.reload(); }, 2000);
        }
    }

    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function poll() {
        if (!polling) return;

        fetch(pollUrl, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            updateUI(data);
            if (polling) {
                setTimeout(poll, 2000); // Poll every 2 seconds
            }
        })
        .catch(function(err) {
            console.error('Poll error:', err);
            if (polling) {
                setTimeout(poll, 5000); // Retry after 5s on error
            }
        });
    }

    // Start polling immediately
    poll();
})();
</script>
@endif
@endsection