@props([
    'name' => 'products',
    'selectedProducts' => null,
    'label' => __('dashboard.select_products'),
])

@php
    // Ensure selectedProducts is a collection and extract IDs safely
    $selectedProductsCollection = $selectedProducts instanceof \Illuminate\Support\Collection
        ? $selectedProducts
        : collect($selectedProducts ?? []);
    $selectedIds = $selectedProductsCollection->pluck('id')->filter()->values()->toArray();
@endphp

<div class="product-selector-container">
    <label class="form-label fw-semibold">{{ $label }}</label>

    <div class="row g-3">
        <!-- Available Products -->
        <div class="col-md-5">
            <div class="card border h-100">
                <div class="card-header bg-light py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-medium">{{ __('dashboard.available_products') }}</span>
                        <span class="badge bg-secondary available-count">0</span>
                    </div>
                    <input type="text" class="form-control form-control-sm mt-2" id="search-available"
                           placeholder="{{ __('dashboard.search') }}...">
                </div>
                <div class="card-body p-0">
                    <div class="product-list available-products" style="height: 350px; overflow-y: auto;">
                        <div class="text-center py-4 text-muted loading-indicator">
                            <div class="spinner-border spinner-border-sm me-2"></div>
                            {{ __('dashboard.loading') }}
                        </div>
                    </div>
                    <div class="load-more-container text-center py-2 border-top" style="display: none;">
                        <button type="button" class="btn btn-sm btn-outline-primary load-more-btn">
                            {{ __('dashboard.load_more') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Transfer Buttons -->
        <div class="col-md-2 d-flex flex-column justify-content-center align-items-center gap-2">
            <button type="button" class="btn btn-primary btn-sm transfer-btn" id="add-selected" title="{{ __('dashboard.add_selected') }}">
                <i class="ri-arrow-right-line fs-16"></i>
            </button>
            <button type="button" class="btn btn-primary btn-sm transfer-btn" id="add-all" title="{{ __('dashboard.add_all') }}">
                <i class="ri-arrow-right-double-line fs-16"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm transfer-btn" id="remove-selected" title="{{ __('dashboard.remove_selected') }}">
                <i class="ri-arrow-left-line fs-16"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm transfer-btn" id="remove-all" title="{{ __('dashboard.remove_all') }}">
                <i class="ri-arrow-left-double-line fs-16"></i>
            </button>
        </div>

        <!-- Selected Products -->
        <div class="col-md-5">
            <div class="card border h-100">
                <div class="card-header bg-primary bg-opacity-10 py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-medium text-primary">{{ __('dashboard.selected_products') }}</span>
                        <span class="badge bg-primary selected-count">0</span>
                    </div>
                    <input type="text" class="form-control form-control-sm mt-2" id="search-selected"
                           placeholder="{{ __('dashboard.search') }}...">
                </div>
                <div class="card-body p-0">
                    <div class="product-list selected-products" style="height: 350px; overflow-y: auto;">
                        <!-- Selected products will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden inputs for form submission -->
    <div id="selected-products-inputs"></div>
</div>

@push('styles')
<style>
    .product-selector-container .product-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .product-selector-container .product-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .product-selector-container .product-item:hover {
        background-color: #f8f9fa;
    }
    .product-selector-container .product-item.selected {
        background-color: #e7f1ff;
    }
    .product-selector-container .product-item .product-info {
        flex: 1;
        min-width: 0;
    }
    .product-selector-container .product-item .product-name {
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-selector-container .product-item .product-price {
        font-size: 12px;
        font-weight: 600;
        color: #198754;
        white-space: nowrap;
        margin-left: 10px;
    }
    .product-selector-container .transfer-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-selector-container .no-products {
        text-align: center;
        padding: 40px 20px;
        color: #6c757d;
    }
</style>
@endpush

@push('scripts')

    <script>
        (function() {
            const container = document.querySelector('.product-selector-container');
            if (!container) return;

            const availableList = container.querySelector('.available-products');
            const selectedList = container.querySelector('.selected-products');
            const inputsContainer = container.querySelector('#selected-products-inputs');
            const searchAvailable = container.querySelector('#search-available');
            const searchSelected = container.querySelector('#search-selected');
            const availableCount = container.querySelector('.available-count');
            const selectedCount = container.querySelector('.selected-count');
            const loadMoreContainer = container.querySelector('.load-more-container');
            const loadMoreBtn = container.querySelector('.load-more-btn');

            let availableProducts = [];
            let selectedProducts = [];
            let selectedProductIds = @json($selectedIds);
            let currentPage = 1;
            let hasMore = false;
            let isLoading = false;
            let searchTimeout = null;
            let currentSearch = '';

            // Load available products with pagination
            async function loadProducts(page = 1, search = '', append = false) {
                if (isLoading) return;
                isLoading = true;

                if (!append) {
                    availableList.innerHTML = '<div class="text-center py-4 text-muted loading-indicator"><div class="spinner-border spinner-border-sm me-2"></div>{{ __("dashboard.loading") }}</div>';
                }

                try {
                    const params = new URLSearchParams({
                        page: page,
                        per_page: 20,
                        search: search,
                    });

                    // Add exclude_ids for selected products
                    selectedProductIds.forEach(id => {
                        params.append('exclude_ids[]', id);
                    });

                    const response = await fetch('{{ route("admin.api.products.list") }}?' + params.toString());
                    const data = await response.json();

                    if (append) {
                        availableProducts = [...availableProducts, ...data.products];
                    } else {
                        availableProducts = data.products;
                    }

                    hasMore = data.pagination.has_more;
                    currentPage = data.pagination.current_page;

                    renderAvailableList();
                    updateLoadMoreButton();
                } catch (error) {
                    console.error('Failed to load products:', error);
                    availableList.innerHTML = '<div class="no-products">{{ __("dashboard.failed_to_load") }}</div>';
                } finally {
                    isLoading = false;
                }
            }

            // Load selected products by IDs
            async function loadSelectedProducts() {
                if (selectedProductIds.length === 0) {
                    selectedProducts = [];
                    renderSelectedList();
                    return;
                }

                try {
                    const response = await fetch('{{ route("admin.api.products.byIds") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ ids: selectedProductIds })
                    });
                    const data = await response.json();
                    selectedProducts = data.products || [];
                    renderSelectedList();
                } catch (error) {
                    console.error('Failed to load selected products:', error);
                }
            }

            function renderAvailableList() {
                if (availableProducts.length) {
                    availableList.innerHTML = availableProducts.map(p => createProductItem(p)).join('');
                } else {
                    availableList.innerHTML = '<div class="no-products">{{ __("dashboard.no_products_available") }}</div>';
                }
                availableCount.textContent = availableProducts.length + (hasMore ? '+' : '');
            }

            function renderSelectedList(searchFilter = '') {
                const searchLower = searchFilter.toLowerCase();
                let filteredProducts = selectedProducts;

                if (searchFilter) {
                    filteredProducts = selectedProducts.filter(p =>
                        p.name.toLowerCase().includes(searchLower) ||
                        (p.sku && p.sku.toLowerCase().includes(searchLower))
                    );
                }

                if (filteredProducts.length) {
                    selectedList.innerHTML = filteredProducts.map(p => createProductItem(p)).join('');
                } else {
                    selectedList.innerHTML = '<div class="no-products">{{ __("dashboard.no_products_selected") }}</div>';
                }

                selectedCount.textContent = selectedProductIds.length;
                updateHiddenInputs();
            }

            function createProductItem(product) {
                return `
                    <div class="product-item" data-id="${product.id}">
                        <div class="product-info">
                            <div class="product-name">${product.name}</div>
                        </div>
                        <div class="product-price">${product.price} {{ __('dashboard.currency') }}</div>
                    </div>
                `;
            }

            function updateHiddenInputs() {
                inputsContainer.innerHTML = selectedProductIds.map(id =>
                    `<input type="hidden" name="{{ $name }}[]" value="${id}">`
                ).join('');
            }

            function updateLoadMoreButton() {
                if (hasMore) {
                    loadMoreContainer.style.display = 'block';
                } else {
                    loadMoreContainer.style.display = 'none';
                }
            }

            // Event: Click on product item to select/deselect
            [availableList, selectedList].forEach(list => {
                list.addEventListener('click', (e) => {
                    const item = e.target.closest('.product-item');
                    if (item) {
                        item.classList.toggle('selected');
                    }
                });
            });

            // Event: Add selected
            container.querySelector('#add-selected').addEventListener('click', () => {
                const selected = availableList.querySelectorAll('.product-item.selected');
                selected.forEach(item => {
                    const id = parseInt(item.dataset.id);
                    if (!selectedProductIds.includes(id)) {
                        selectedProductIds.push(id);
                        const product = availableProducts.find(p => p.id === id);
                        if (product) {
                            selectedProducts.push(product);
                            availableProducts = availableProducts.filter(p => p.id !== id);
                        }
                    }
                });
                renderAvailableList();
                renderSelectedList(searchSelected.value);
            });

            // Event: Add all visible
            container.querySelector('#add-all').addEventListener('click', () => {
                const items = availableList.querySelectorAll('.product-item');
                items.forEach(item => {
                    const id = parseInt(item.dataset.id);
                    if (!selectedProductIds.includes(id)) {
                        selectedProductIds.push(id);
                        const product = availableProducts.find(p => p.id === id);
                        if (product) {
                            selectedProducts.push(product);
                        }
                    }
                });
                availableProducts = [];
                renderAvailableList();
                renderSelectedList(searchSelected.value);
                // Reload available products
                loadProducts(1, currentSearch);
            });

            // Event: Remove selected
            container.querySelector('#remove-selected').addEventListener('click', () => {
                const selected = selectedList.querySelectorAll('.product-item.selected');
                selected.forEach(item => {
                    const id = parseInt(item.dataset.id);
                    selectedProductIds = selectedProductIds.filter(pid => pid !== id);
                    selectedProducts = selectedProducts.filter(p => p.id !== id);
                });
                renderSelectedList(searchSelected.value);
                // Reload available products to include removed ones
                loadProducts(1, currentSearch);
            });

            // Event: Remove all
            container.querySelector('#remove-all').addEventListener('click', () => {
                selectedProductIds = [];
                selectedProducts = [];
                renderSelectedList();
                loadProducts(1, currentSearch);
            });

            // Event: Search available (with debounce)
            searchAvailable.addEventListener('input', (e) => {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    currentSearch = e.target.value;
                    loadProducts(1, currentSearch);
                }, 300);
            });

            // Event: Search selected (local filter)
            searchSelected.addEventListener('input', (e) => {
                renderSelectedList(e.target.value);
            });

            // Event: Load more
            loadMoreBtn.addEventListener('click', () => {
                loadProducts(currentPage + 1, currentSearch, true);
            });

            // Initial load
            loadProducts();
            loadSelectedProducts();
        })();
    </script>

@endpush