@extends('layouts.admin')

@section('admin_content')
    <div x-data="videoManager()" x-init="init()">

        <div class="page-header">
            <h1 class="page-title">Video Gallery</h1>
            <button class="btn btn-primary" @click="openAddModal()">
                <i class="fas fa-plus"></i> Add Video
            </button>
        </div>

        <!-- Filter Bar -->
        <div class="filter-bar">
            <div class="form-group">
                <label class="form-label">Show</label>
                <select class="form-select" style="width:80px" x-model="per_page" @change="fetchItems(1)">
                    <option value="10">12</option>
                    <option value="25">24</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Search</label>
                <input type="text" class="form-control" placeholder="Search videos..." x-model="filters.search">
            </div>
            <div class="form-group">
                <label class="form-label">Category</label>
                <select class="form-select" x-model="filters.category_id">
                    <option value="">All Categories</option>
                    <template x-for="cat in categories" :key="cat.id">
                        <option :value="cat.id" x-text="cat.name"></option>
                    </template>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Status</label>
                <select class="form-select" x-model="filters.status">
                    <option value="">All</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="form-group align-self-end">
                <button class="btn btn-outline-secondary" @click="fetchItems(1)">
                    <i class="fas fa-filter"></i> Filter
                </button>
            </div>
        </div>

        <!-- Video Grid -->
        <div class="panel">
            <div class="panel-body">

                <div x-show="loading" class="text-center py-5">
                    <div class="spinner-border text-primary"></div>
                </div>

                <div x-show="!loading && items.length === 0" class="text-center py-5 text-muted">
                    No videos found.
                </div>

                <div class="row g-3" x-show="!loading && items.length > 0">
                    <template x-for="item in items" :key="item.id">
                        <div class="col-xl-3 col-lg-4 col-md-6">
                            <div class="video-grid-card rounded-3 overflow-hidden border bg-white shadow-sm">
                                <!-- Thumbnail -->
                                <div class="position-relative" style="aspect-ratio:16/9; background:#111;">
                                    <img :src="item.thumbnail" class="w-100 h-100" style="object-fit:cover; opacity:0.85;">
                                    <!-- Play Icon -->
                                    <div class="position-absolute top-50 start-50 translate-middle">
                                        <div class="bg-danger rounded-circle d-flex align-items-center justify-content-center"
                                            style="width:42px;height:42px;">
                                            <i class="fas fa-play text-white ms-1" style="font-size:14px;"></i>
                                        </div>
                                    </div>
                                    <!-- Platform badge -->
                                    <span class="position-absolute top-0 end-0 m-2 badge bg-dark">
                                        <i class="fab fa-youtube me-1"></i>
                                        <span x-text="item.platform"></span>
                                    </span>
                                </div>
                                <!-- Info -->
                                <div class="p-3">
                                    <h6 class="mb-1 text-truncate fw-semibold" x-text="item.category_name"></h6>
                                    <div class="d-flex align-items-center justify-content-between">
                                        <span class="badge"
                                            :class="item.status === 'active' ? 'bg-success' : 'bg-secondary'"
                                            x-text="item.status === 'active' ? 'Active' : 'Inactive'">
                                        </span>
                                        <div class="d-flex gap-1">
                                            <a :href="item.video_url" target="_blank"
                                                class="btn btn-sm btn-outline-danger py-0 px-2" title="Watch">
                                                <i class="fas fa-external-link-alt small"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-primary py-0 px-2"
                                                @click="openEditModal(item.id)" title="Edit">
                                                <i class="fas fa-edit small"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger py-0 px-2"
                                                @click="deleteItem(item.id)" title="Delete">
                                                <i class="fas fa-trash small"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-4" x-show="pagination.last_page > 1">
                    <div class="text-muted small">Total: <strong x-text="pagination.total"></strong> videos</div>
                    <nav>
                        <ul class="pagination pagination-sm mb-0">
                            <li class="page-item" :class="{ disabled: pagination.current_page === 1 }">
                                <button class="page-link" @click="goToPage(pagination.current_page - 1)">&laquo;</button>
                            </li>
                            <template x-for="page in pagination.last_page" :key="page">
                                <li class="page-item" :class="{ active: page === pagination.current_page }">
                                    <button class="page-link" x-text="page" @click="goToPage(page)"></button>
                                </li>
                            </template>
                            <li class="page-item" :class="{ disabled: pagination.current_page === pagination.last_page }">
                                <button class="page-link" @click="goToPage(pagination.current_page + 1)">&raquo;</button>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Add / Edit Modal -->
        <div class="modal fade" id="videoModal" tabindex="-1" data-bs-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" x-text="isEditing ? 'Edit Video' : 'Add Video'"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <!-- Title -->
                            <div class="mb-3">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" x-model="form.title"
                                    placeholder="Video title">
                                <div class="text-danger small mt-1" x-text="errors.title"></div>
                            </div>

                            <!-- YouTube URL -->
                            <div class="mb-3">
                                <label class="form-label">YouTube URL <span class="text-danger">*</span></label>
                                <input type="url" class="form-control" x-model="form.video_url"
                                    placeholder="https://www.youtube.com/watch?v=..." @input="previewYoutube()">
                                <div class="text-danger small mt-1" x-text="errors.video_url"></div>
                                <!-- Auto thumbnail preview -->
                                <div x-show="youtubeThumbnail" class="mt-2 position-relative d-inline-block">
                                    <img :src="youtubeThumbnail" class="rounded border"
                                        style="width:180px;height:101px;object-fit:cover;">
                                    <span
                                        class="position-absolute top-50 start-50 translate-middle
                                    bg-danger rounded-circle d-flex align-items-center justify-content-center"
                                        style="width:30px;height:30px;">
                                        <i class="fas fa-play text-white ms-1" style="font-size:10px;"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- Custom Thumbnail -->
                            <div class="mb-3">
                                <label class="form-label">
                                    Custom Thumbnail
                                    <span class="text-muted small">(optional — YouTube auto থাকবে)</span>
                                </label>
                                <input type="file" class="form-control" id="thumbInput" accept="image/*"
                                    @change="handleThumbChange($event)">
                                <div x-show="thumbPreview" class="mt-2">
                                    <img :src="thumbPreview" width="120" height="70" class="rounded border"
                                        style="object-fit:cover;">
                                </div>
                            </div>

                            <!-- Category -->
                            <div class="mb-3">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select" x-model="form.category_id">
                                    <option value="">Select Category</option>
                                    <template x-for="cat in categories" :key="cat.id">
                                        <option :value="cat.id" x-text="cat.name"></option>
                                    </template>
                                </select>
                                <div class="text-danger small mt-1" x-text="errors.category_id"></div>
                            </div>

                            <!-- Caption -->
                            <div class="mb-3">
                                <label class="form-label">Caption</label>
                                <textarea class="form-control" rows="2" x-model="form.caption" placeholder="Optional caption"></textarea>
                            </div>

                            <!-- Order & Status -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Order</label>
                                    <input type="number" class="form-control" x-model="form.order" min="0">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Status</label>
                                    <select class="form-select" x-model="form.status">
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                            @click="resetForm()">Cancel</button>
                        <button type="button" class="btn btn-primary" @click="saveItem()" :disabled="saving">
                            <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                            <span x-text="isEditing ? 'Update' : 'Save'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        function videoManager() {
            return {
                items: [],
                categories: [],
                loading: false,
                saving: false,
                isEditing: false,
                editingId: null,
                per_page: 12,
                thumbFile: null,
                thumbPreview: null,
                youtubeThumbnail: null,
                filters: {
                    search: '',
                    status: '',
                    category_id: ''
                },
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    per_page: 10,
                    total: 0
                },
                form: {
                    title: '',
                    video_url: '',
                    category_id: '',
                    caption: '',
                    order: 0,
                    status: 'active',
                },
                errors: {},

                async init() {
                    await this.loadCategories();
                    await this.fetchItems();
                },

                async loadCategories() {
                    try {
                        const res = await fetch('{{ route('admin.videos.categories') }}');
                        const json = await res.json();
                        this.categories = json.data;
                    } catch (e) {}
                },

                async fetchItems(page = 1) {
                    this.loading = true;
                    try {
                        const params = new URLSearchParams();
                        if (this.filters.search) params.append('search', this.filters.search);
                        if (this.filters.status) params.append('status', this.filters.status);
                        if (this.filters.category_id) params.append('category_id', this.filters.category_id);
                        params.append('per_page', this.per_page);
                        params.append('page', page);

                        const res = await fetch(`{{ route('admin.videos.list') }}?${params}`);
                        const json = await res.json();
                        this.items = json.data;
                        this.pagination = json.pagination;
                    } catch (e) {
                        showError('Failed to load videos.');
                    } finally {
                        this.loading = false;
                    }
                },

                goToPage(page) {
                    if (page < 1 || page > this.pagination.last_page) return;
                    this.fetchItems(page);
                },

                // YouTube URL থেকে thumbnail live preview
                previewYoutube() {
                    const url = this.form.video_url;
                    const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/);
                    if (match) {
                        this.youtubeThumbnail = `https://img.youtube.com/vi/${match[1]}/mqdefault.jpg`;
                    } else {
                        this.youtubeThumbnail = null;
                    }
                },

                handleThumbChange(event) {
                    const file = event.target.files[0];
                    if (!file) return;
                    this.thumbFile = file;
                    this.thumbPreview = URL.createObjectURL(file);
                },

                openAddModal() {
                    this.resetForm();
                    this.isEditing = false;
                    new bootstrap.Modal(document.getElementById('videoModal')).show();
                },

                async openEditModal(id) {
                    this.resetForm();
                    this.isEditing = true;
                    this.editingId = id;
                    try {
                        showLoading();
                        const res = await fetch(`{{ url('admin/videos') }}/${id}`);
                        const json = await res.json();
                        const s = json.data;
                        this.form.title = s.title;
                        this.form.video_url = s.video_url;
                        this.form.category_id = s.category_id;
                        this.form.caption = s.caption ?? '';
                        this.form.order = s.order;
                        this.form.status = s.status;
                        this.previewYoutube(); // thumbnail preview set
                    } catch (e) {
                        showError('Failed to load video.');
                        return;
                    } finally {
                        hideLoading();
                    }
                    new bootstrap.Modal(document.getElementById('videoModal')).show();
                },

                async saveItem() {
                    this.errors = {};
                    this.saving = true;

                    const formData = new FormData();
                    formData.append('title', this.form.title);
                    formData.append('video_url', this.form.video_url);
                    formData.append('category_id', this.form.category_id);
                    formData.append('caption', this.form.caption ?? '');
                    formData.append('order', this.form.order ?? 0);
                    formData.append('status', this.form.status);
                    formData.append('_token', '{{ csrf_token() }}');
                    if (this.thumbFile) formData.append('thumbnail', this.thumbFile);
                    if (this.isEditing) formData.append('_method', 'PUT');

                    const url = this.isEditing ?
                        `{{ url('admin/videos') }}/${this.editingId}` :
                        '{{ route('admin.videos.store') }}';

                    try {
                        const res = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json'
                            },
                            body: formData,
                        });
                        const json = await res.json();

                        if (res.ok && json.success) {
                            bootstrap.Modal.getInstance(document.getElementById('videoModal')).hide();
                            this.resetForm();
                            this.fetchItems(this.pagination.current_page);
                            showSuccess(json.message);
                        } else if (res.status === 422) {
                            Object.keys(json.errors).forEach(k => this.errors[k] = json.errors[k][0]);
                        } else {
                            showError(json.message ?? 'Something went wrong.');
                        }
                    } catch (e) {
                        showError('Request failed.');
                    } finally {
                        this.saving = false;
                    }
                },

                deleteItem(id) {
                    showConfirm('This video will be permanently deleted.', 'Delete Video?', async () => {
                        try {
                            showLoading();
                            const res = await fetch(`{{ url('admin/videos') }}/${id}`, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                            });
                            const json = await res.json();
                            if (json.success) {
                                this.fetchItems(this.pagination.current_page);
                                showSuccess(json.message);
                            } else {
                                showError(json.message ?? 'Delete failed.');
                            }
                        } catch (e) {
                            showError('Request failed.');
                        } finally {
                            hideLoading();
                        }
                    });
                },

                resetForm() {
                    this.form = {
                        title: '',
                        video_url: '',
                        category_id: '',
                        caption: '',
                        order: 0,
                        status: 'active',
                    };
                    this.errors = {};
                    this.thumbFile = null;
                    this.thumbPreview = null;
                    this.youtubeThumbnail = null;
                    this.editingId = null;
                    const el = document.getElementById('thumbInput');
                    if (el) el.value = '';
                },
            };
        }
    </script>
@endpush