@extends('admin.layout')
@section('title', 'Batch Delete Videos')

@section('content')
<style>
    .batch-delete-container { max-width: 100%; }
    .batch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
    .batch-header h2 { font-size: 20px; color: #fff; }

    .input-section { margin-bottom: 24px; }
    .input-section textarea {
        width: 100%;
        max-width: 100%;
        min-height: 180px;
        padding: 12px;
        background: #111;
        border: 1px solid #333;
        border-radius: 6px;
        color: #e0e0e0;
        font-size: 13px;
        font-family: 'Courier New', monospace;
        resize: vertical;
        line-height: 1.6;
    }
    .input-section textarea:focus { outline: none; border-color: #e50914; }
    .input-section textarea::placeholder { color: #444; }

    .input-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }

    .scan-info {
        padding: 12px 16px;
        border-radius: 6px;
        margin-bottom: 16px;
        font-size: 14px;
        background: #1a2a3a;
        border: 1px solid #2a4a6a;
        color: #6fafdf;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .result-table { margin-top: 16px; }
    .result-table table { width: 100%; }
    .result-table .thumb-cell { width: 60px; }
    .result-table .thumb-cell img {
        width: 56px;
        height: 36px;
        object-fit: cover;
        border-radius: 3px;
        background: #222;
    }
    .result-table .title-cell { max-width: 300px; }
    .result-table .title-cell .video-title {
        font-weight: 600;
        color: #e0e0e0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 300px;
    }
    .result-table .title-cell .video-slug {
        font-size: 11px;
        color: #555;
        font-family: monospace;
    }
    .result-table .url-cell {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #666;
    }

    .btn-scan {
        background: #1a3a5a;
        color: #6fafdf;
        font-weight: 600;
    }
    .btn-scan:hover { background: #2a4a6a; }

    .btn-delete-all {
        background: #8b0000;
        color: #fff;
        font-weight: 600;
        padding: 8px 20px;
    }
    .btn-delete-all:hover { background: #a00; }

    .btn-clear {
        background: #333;
        color: #888;
    }
    .btn-clear:hover { background: #444; }

    .checkbox-cell { width: 30px; text-align: center; }
    .checkbox-cell input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #e50914;
        cursor: pointer;
    }

    .no-result {
        text-align: center;
        padding: 32px;
        color: #555;
        font-size: 14px;
    }

    .select-actions { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #888; }
    .select-actions a { color: #6fafdf; cursor: pointer; text-decoration: underline; font-size: 12px; }

    .delete-confirm-modal {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }
    .delete-confirm-modal.active { display: flex; }
    .delete-confirm-box {
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 24px;
        max-width: 480px;
        width: 90%;
        text-align: center;
    }
    .delete-confirm-box h3 { color: #bf6f6f; margin-bottom: 12px; font-size: 18px; }
    .delete-confirm-box p { color: #888; font-size: 14px; margin-bottom: 20px; }
    .delete-confirm-box .confirm-actions { display: flex; gap: 8px; justify-content: center; }
</style>

<div class="batch-delete-container">
    <div class="batch-header">
        <h2>🗑️ Batch Delete Videos</h2>
        <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary btn-sm">← Kembali ke Videos</a>
    </div>

    {{-- Input Form --}}
    <form method="POST" action="{{ route('admin.batch-delete.scan') }}" id="scanForm">
        @csrf
        <div class="input-section">
            <label style="display:block;margin-bottom:6px;font-size:13px;color:#888;">
                Masukkan slug, title, atau URL video (satu per baris):
            </label>
            <textarea
                name="input"
                id="batchInput"
                placeholder="Contoh:&#10;3s4cl9cN&#10;grok video 83952442&#10;https://ytube.youvid.org/e/3s4cl9cN&#10;https://ytube.youvid.org/play/Qrpzshtv"
            >{{ old('input', $input ?? '') }}</textarea>
            <div class="input-actions">
                <button type="submit" class="btn btn-scan">
                    🔍 Scan Video
                </button>
                <button type="button" class="btn btn-clear" onclick="clearInput()">
                    ✕ Clear
                </button>
                <span style="font-size:12px;color:#555;margin-left:8px;" id="lineCounter">0 baris</span>
            </div>
        </div>
    </form>

    {{-- Scan Results --}}
    @if($scanned)
        @if($videos->count() > 0)
            <div class="scan-info">
                <div>
                    📋 Ditemukan <strong>{{ $videos->count() }}</strong> video dari <strong>{{ $lineCount ?? 0 }}</strong> baris input
                </div>
                <div class="select-actions">
                    <a onclick="selectAll()">Pilih Semua</a>
                    <a onclick="deselectAll()">Hapus Pilihan</a>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.batch-delete.destroy') }}" id="deleteForm">
                @csrf
                <input type="hidden" name="video_ids" id="videoIdsInput" value="">

                <div style="margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
                    <span style="font-size:13px;color:#888;" id="selectedCount">{{ $videos->count() }} video dipilih</span>
                    <button type="button" class="btn btn-delete-all" onclick="confirmDelete()">
                        🗑️ Hapus Semua yang Dipilih
                    </button>
                </div>

                <div class="result-table">
                    <table>
                        <thead>
                            <tr>
                                <th class="checkbox-cell">
                                    <input type="checkbox" id="checkAll" checked onchange="toggleAll(this)">
                                </th>
                                <th style="width:60px">THUMB</th>
                                <th>TITLE</th>
                                <th>PROVIDER</th>
                                <th>STATUS</th>
                                <th>STORAGE</th>
                                <th>CREATED</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($videos as $video)
                            <tr>
                                <td class="checkbox-cell">
                                    <input type="checkbox" class="video-checkbox" value="{{ $video->id }}" checked>
                                </td>
                                <td class="thumb-cell">
                                    @if(isset($thumbUrls[$video->id]))
                                        <img src="{{ $thumbUrls[$video->id] }}" alt="thumb" loading="lazy">
                                    @else
                                        <div style="width:56px;height:36px;background:#222;border-radius:3px;display:flex;align-items:center;justify-content:center;">
                                            <span style="font-size:10px;color:#444;">—</span>
                                        </div>
                                    @endif
                                </td>
                                <td class="title-cell">
                                    <span class="video-title" title="{{ $video->title }}">{{ $video->title }}</span>
                                    <span class="video-slug">{{ $video->slug }}</span>
                                </td>
                                <td>
                                    <span class="badge badge-provider">{{ strtoupper($video->provider ?? '—') }}</span>
                                    @if($video->isSelfHosted())
                                        <span style="font-size:10px;color:#6fbf6f;">●</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-{{ $video->status }}">{{ $video->status }}</span>
                                </td>
                                <td style="font-size:11px;color:#555;">
                                    {{ $video->storage_driver ?? '—' }}
                                </td>
                                <td style="font-size:11px;color:#555;">
                                    {{ $video->created_at->format('Y-m-d H:i') }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </form>
        @else
            <div class="no-result">
                😕 Tidak ditemukan video yang cocok dengan input Anda.<br>
                <small style="color:#444;">Coba periksa kembali slug, title, atau URL yang dimasukkan.</small>
            </div>
        @endif
    @endif
</div>

{{-- Delete Confirmation Modal --}}
<div class="delete-confirm-modal" id="deleteModal">
    <div class="delete-confirm-box">
        <h3>⚠️ Konfirmasi Hapus</h3>
        <p>
            Anda akan menghapus <strong id="deleteCount">0</strong> video beserta semua asset-nya (HLS, MP4, thumbnail).
            <br><br>
            <span style="color:#bf6f6f;font-weight:600;">Tindakan ini tidak bisa dibatalkan!</span>
        </p>
        <div class="confirm-actions">
            <button type="button" class="btn btn-secondary" onclick="closeModal()">Batal</button>
            <button type="button" class="btn btn-delete-all" onclick="executeDelete()">
                🗑️ Ya, Hapus Semuanya
            </button>
        </div>
    </div>
</div>

<script>
// Line counter
const textarea = document.getElementById('batchInput');
const lineCounter = document.getElementById('lineCounter');

function updateLineCount() {
    if (!textarea) return;
    const lines = textarea.value.trim().split('\n').filter(l => l.trim() !== '');
    lineCounter.textContent = lines.length + ' baris';
}
if (textarea) {
    textarea.addEventListener('input', updateLineCount);
    updateLineCount();
}

function clearInput() {
    if (textarea) {
        textarea.value = '';
        updateLineCount();
    }
}

// Checkbox management
function getCheckedIds() {
    const checkboxes = document.querySelectorAll('.video-checkbox:checked');
    return Array.from(checkboxes).map(cb => cb.value);
}

function updateSelectedCount() {
    const ids = getCheckedIds();
    const counter = document.getElementById('selectedCount');
    if (counter) {
        counter.textContent = ids.length + ' video dipilih';
    }
}

function selectAll() {
    document.querySelectorAll('.video-checkbox').forEach(cb => cb.checked = true);
    document.getElementById('checkAll').checked = true;
    updateSelectedCount();
}

function deselectAll() {
    document.querySelectorAll('.video-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('checkAll').checked = false;
    updateSelectedCount();
}

function toggleAll(master) {
    document.querySelectorAll('.video-checkbox').forEach(cb => cb.checked = master.checked);
    updateSelectedCount();
}

// Attach change listener to individual checkboxes
document.querySelectorAll('.video-checkbox').forEach(cb => {
    cb.addEventListener('change', updateSelectedCount);
});

// Delete confirmation
function confirmDelete() {
    const ids = getCheckedIds();
    if (ids.length === 0) {
        alert('Pilih minimal 1 video untuk dihapus.');
        return;
    }
    document.getElementById('deleteCount').textContent = ids.length;
    document.getElementById('deleteModal').classList.add('active');
}

function closeModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

function executeDelete() {
    const ids = getCheckedIds();
    document.getElementById('videoIdsInput').value = ids.join(',');
    document.getElementById('deleteForm').submit();
}

// Close modal on background click
document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});
</script>
@endsection