@extends('admin.layout')

@section('title', 'Video Scraper')

@section('content')
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8">
            <h2 class="mb-4">
                <i class="fas fa-web"></i> Video Scraper
            </h2>
            <p class="text-muted">Extract video data dari folder URL dan import ke database</p>

            <form id="scraperForm" class="card p-4 shadow-sm">
                @csrf

                <!-- Folder URL Input -->
                <div class="form-group mb-3">
                    <label for="folder_url" class="form-label fw-bold">
                        <span class="text-danger">*</span> Folder URL
                    </label>
                    <input 
                        type="url" 
                        id="folder_url" 
                        name="folder_url" 
                        class="form-control form-control-lg" 
                        placeholder="https://vid30s.com/f/FOLDER_ID"
                        required
                    >
                    <small class="form-text text-muted">
                        Contoh: https://vid30s.com/f/xyz123
                    </small>
                </div>

                <!-- Provider Selection -->
                <div class="form-group mb-3">
                    <label for="provider" class="form-label fw-bold">
                        <span class="text-danger">*</span> Provider
                    </label>
                    <select id="provider" name="provider" class="form-select form-select-lg" required>
                        <option value="">-- Pilih Provider --</option>
                        @foreach($providers as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">
                        Pilih provider yang sesuai dengan source video
                    </small>
                </div>

                <!-- Play Mode Selection -->
                <div class="form-group mb-3">
                    <label for="play_mode" class="form-label fw-bold">
                        <span class="text-danger">*</span> Play Mode
                    </label>
                    <select id="play_mode" name="play_mode" class="form-select form-select-lg" required>
                        <option value="">-- Pilih Play Mode --</option>
                        @foreach($playModes as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">
                        Mode pemutaran video (auto untuk detect otomatis)
                    </small>
                </div>

                <!-- Max Videos -->
                <div class="form-group mb-3">
                    <label for="max_videos" class="form-label fw-bold">
                        Max Video yang Diimport (Opsional)
                    </label>
                    <input 
                        type="number" 
                        id="max_videos" 
                        name="max_videos" 
                        class="form-control" 
                        placeholder="Kosongkan untuk unlimited"
                        min="1"
                        max="5000"
                    >
                    <small class="form-text text-muted">
                        Batasi jumlah video yang akan diimport (default: unlimited)
                    </small>
                </div>

                <!-- Categories Selection -->
                <div class="form-group mb-3">
                    <label for="category_ids" class="form-label fw-bold">
                        Kategori (Opsional)
                    </label>
                    <div id="categoryList" class="d-flex flex-wrap gap-2">
                        @forelse(\App\Models\Category::all() as $category)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="category_ids[]" value="{{ $category->id }}" id="cat_{{ $category->id }}">
                                <label class="form-check-label" for="cat_{{ $category->id }}">
                                    {{ $category->name }}
                                </label>
                            </div>
                        @empty
                            <small class="text-muted">Tidak ada kategori tersedia</small>
                        @endforelse
                    </div>
                    <small class="form-text text-muted">
                        Pilih kategori untuk semua video yang diimport
                    </small>
                </div>

                <!-- Tags Input -->
                <div class="form-group mb-3">
                    <label for="tags" class="form-label fw-bold">
                        Tags (Opsional)
                    </label>
                    <input 
                        type="text" 
                        id="tags" 
                        name="tags" 
                        class="form-control" 
                        placeholder="Pisahkan dengan koma, contoh: action, movie, 2024"
                    >
                    <small class="form-text text-muted">
                        Tambahkan tags ke semua video yang diimport
                    </small>
                </div>

                <!-- Auto Enabled -->
                <div class="form-check mb-4">
                    <input 
                        type="checkbox" 
                        id="auto_enabled" 
                        name="auto_enabled" 
                        class="form-check-input"
                    >
                    <label class="form-check-label" for="auto_enabled">
                        Aktifkan auto-taxonomy (kategori & tags otomatis)
                    </label>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="btn btn-primary btn-lg w-100" id="submitBtn">
                    <i class="fas fa-play"></i> Start Scraping
                </button>
            </form>

            <!-- Progress Alert -->
            <div id="progressAlert" class="alert alert-info mt-3" style="display: none;">
                <div class="d-flex align-items-center">
                    <div class="spinner-border spinner-border-sm me-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <div>
                        <strong>Scraping in progress...</strong>
                        <p id="progressText" class="mb-0 mt-1">Extracting videos dari folder...</p>
                    </div>
                </div>
            </div>

            <!-- Result Alert -->
            <div id="resultAlert" class="alert mt-3" style="display: none;">
                <div id="resultMessage"></div>
                <div id="resultDetails" class="mt-2"></div>
            </div>
        </div>

        <!-- Info Sidebar -->
        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-info-circle"></i> Informasi</h5>
                </div>
                <div class="card-body">
                    <h6>Cara Menggunakan:</h6>
                    <ol class="small">
                        <li>Masukkan URL folder video (contoh: vid30s.com/f/xyz)</li>
                        <li>Pilih provider yang sesuai</li>
                        <li>Pilih play mode (auto/hls/iframe/direct)</li>
                        <li>Opsional: Tambahkan kategori, tags, atau batasi jumlah video</li>
                        <li>Klik "Start Scraping" untuk memulai</li>
                    </ol>

                    <hr>

                    <h6>Fitur Scraper:</h6>
                    <ul class="small">
                        <li>Extract title dari halaman video</li>
                        <li>Download & simpan thumbnail otomatis</li>
                        <li>Convert thumbnail ke WebP</li>
                        <li>Deteksi subfolder otomatis</li>
                        <li>Skip duplicate videos</li>
                        <li>Support batch import unlimited</li>
                    </ul>

                    <hr>

                    <h6>Provider yang Didukung:</h6>
                    <ul class="small mb-0">
                        <li>FileMoon, StreamWish, VidHide</li>
                        <li>Dood, MP4Upload, StreamTape</li>
                        <li>Vid30s, Vidara, dan 40+ provider lainnya</li>
                    </ul>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Catatan</h5>
                </div>
                <div class="card-body small">
                    <p>⚠️ <strong>Perhatian:</strong></p>
                    <ul>
                        <li>Pastikan folder URL valid dan accessible</li>
                        <li>Scraping besar mungkin memakan waktu beberapa menit</li>
                        <li>Video yang sudah ada di database akan di-skip</li>
                        <li>Thumbnail akan diconvert ke WebP untuk optimasi</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form submission
    document.getElementById('scraperForm').addEventListener('submit', function(e) {
        e.preventDefault();
        submitScraper();
    });
});

function submitScraper() {
    const form = document.getElementById('scraperForm');
    const formData = new FormData(form);

    // Show progress
    document.getElementById('progressAlert').style.display = 'block';
    document.getElementById('resultAlert').style.display = 'none';
    document.getElementById('submitBtn').disabled = true;

    // Get selected categories
    const categoryIds = Array.from(document.querySelectorAll('input[name="category_ids[]"]:checked')).map(el => el.value);
    
    const payload = {
        folder_url: formData.get('folder_url'),
        provider: formData.get('provider'),
        play_mode: formData.get('play_mode'),
        max_videos: formData.get('max_videos') || null,
        category_ids: categoryIds,
        tags: formData.get('tags'),
        auto_enabled: document.getElementById('auto_enabled').checked,
    };

    console.log('Scraper payload:', payload);
    
    fetch('{{ route("admin.videos.scraper.scrape") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error(`HTTP ${response.status}: ${text}`);
            });
        }
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        document.getElementById('progressAlert').style.display = 'none';
        document.getElementById('resultAlert').style.display = 'block';
        document.getElementById('submitBtn').disabled = false;

        if (data.status === 'success') {
            document.getElementById('resultAlert').className = 'alert alert-success mt-3';
            document.getElementById('resultMessage').innerHTML = `<strong>✅ ${data.message}</strong>`;
            
            if (data.data) {
                let details = `
                    <div class="row text-center">
                        <div class="col">
                            <strong>${data.data.total_found}</strong>
                            <br>Video Found
                        </div>
                        <div class="col">
                            <strong>${data.data.imported}</strong>
                            <br>Imported
                        </div>
                        <div class="col">
                            <strong>${data.data.failed}</strong>
                            <br>Failed
                        </div>
                    </div>
                `;
                
                if (data.data.errors && data.data.errors.length > 0) {
                    details += '<div class="mt-3"><strong>Errors:</strong><ul class="small">';
                    data.data.errors.forEach(error => {
                        details += `<li>${error}</li>`;
                    });
                    details += '</ul></div>';
                }
                
                document.getElementById('resultDetails').innerHTML = details;
            }
        } else if (data.status === 'warning') {
            document.getElementById('resultAlert').className = 'alert alert-warning mt-3';
            document.getElementById('resultMessage').innerHTML = `<strong>⚠️ ${data.message}</strong>`;
        } else {
            document.getElementById('resultAlert').className = 'alert alert-danger mt-3';
            document.getElementById('resultMessage').innerHTML = `<strong>❌ ${data.message}</strong>`;
            if (data.message) {
                console.error('Scraper error:', data.message);
            }
        }
    })
    .catch(error => {
        console.error('Fetch error:', error);
        document.getElementById('progressAlert').style.display = 'none';
        document.getElementById('resultAlert').style.display = 'block';
        document.getElementById('resultAlert').className = 'alert alert-danger mt-3';
        document.getElementById('resultMessage').innerHTML = `<strong>❌ Error: ${error.message}</strong>`;
        document.getElementById('submitBtn').disabled = false;
    });
}
</script>

<style>
    .form-label, .form-check-label {
        color: #333;
    }

    .card {
        border: none;
        border-radius: 8px;
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        font-weight: 600;
        transition: transform 0.2s;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .form-control, .form-select {
        border-radius: 6px;
        border: 1px solid #ddd;
    }

    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    #categoryList {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 6px;
        max-height: 200px;
        overflow-y: auto;
    }

    .card-header {
        border-radius: 8px 8px 0 0 !important;
    }
</style>
@endsection