{# app/modules/marketplace/templates/marketplace/admin/partials/letzshop-products-tab.html #}
{# Products tab for admin Letzshop management - Product listing with Import/Export #}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/tables.html' import table_wrapper %}

<!-- Header with Import/Export Buttons -->
<div class="flex items-center justify-between mb-6">
    <div>
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Letzshop Products</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">
            <span x-show="selectedStore" x-text="'Products from ' + (selectedStore?.name || '')"></span>
            <span x-show="!selectedStore">All Letzshop marketplace products</span>
        </p>
    </div>
    <div class="flex items-center gap-3" x-show="selectedStore">
        <!-- Import Button (only when store selected) -->
        <button
            @click="showImportModal = true"
            :disabled="importing"
            class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
        >
            <span x-show="!importing" x-html="$icon('cloud-download', 'w-4 h-4 mr-2')"></span>
            <span x-show="importing" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
            <span x-text="importing ? 'Importing...' : 'Import'"></span>
        </button>
        <!-- Export Button (only when store selected) -->
        <button
            @click="exportAllLanguages()"
            :disabled="exporting"
            class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
        >
            <span x-show="!exporting" x-html="$icon('upload', 'w-4 h-4 mr-2')"></span>
            <span x-show="exporting" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
            <span x-text="exporting ? 'Exporting...' : 'Export'"></span>
        </button>
    </div>
</div>

<!-- Stats Cards -->
<div class="grid gap-4 mb-6 md:grid-cols-2 xl:grid-cols-4">
    <!-- Total Products -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
            <span x-html="$icon('cube', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Products</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="productStats.total || 0"></p>
        </div>
    </div>

    <!-- Active Products -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Active</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="productStats.active || 0"></p>
        </div>
    </div>

    <!-- Inactive Products -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Inactive</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="productStats.inactive || 0"></p>
        </div>
    </div>

    <!-- Last Sync -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
            <span x-html="$icon('refresh', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Last Sync</p>
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="productStats.last_sync || 'Never'"></p>
        </div>
    </div>
</div>

<!-- Search and Filters Bar -->
<div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <!-- Search Input -->
        <div class="flex-1 max-w-xl">
            <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
                </span>
                <input
                    type="text"
                    x-model="productFilters.search"
                    @input.debounce.300ms="loadProducts()"
                    placeholder="Search by title, GTIN, or SKU..."
                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                >
            </div>
        </div>

        <!-- Filters -->
        <div class="flex flex-wrap gap-3">
            <!-- Status Filter -->
            <select
                x-model="productFilters.is_active"
                @change="pagination.page = 1; loadProducts()"
                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
            >
                <option value="">All Status</option>
                <option value="true">Active</option>
                <option value="false">Inactive</option>
            </select>

            <!-- Refresh Button -->
            <button
                @click="loadProducts()"
                :disabled="loadingProducts"
                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
                title="Refresh products"
            >
                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
                Refresh
            </button>
        </div>
    </div>
</div>

<!-- Loading State -->
<div x-show="loadingProducts" class="flex items-center justify-center py-12">
    <span x-html="$icon('spinner', 'w-8 h-8 text-purple-600')"></span>
    <span class="ml-3 text-gray-600 dark:text-gray-400">Loading products...</span>
</div>

<!-- Products Table -->
<div x-show="!loadingProducts">
    {% call table_wrapper() %}
        <thead>
            <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                <th class="px-4 py-3">Product</th>
                <th class="px-4 py-3" x-show="!selectedStore">Store</th>
                <th class="px-4 py-3">Identifiers</th>
                <th class="px-4 py-3">Price</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <!-- Empty State -->
            <template x-if="products.length === 0">
                <tr>
                    <td :colspan="selectedStore ? 5 : 6" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
                        <div class="flex flex-col items-center">
                            <span x-html="$icon('cube', 'w-12 h-12 mb-2 text-gray-300')"></span>
                            <p class="font-medium">No products found</p>
                            <p class="text-xs mt-1" x-text="productFilters.search ? 'Try adjusting your search' : (selectedStore ? 'Import products to get started' : 'No Letzshop products in the catalog')"></p>
                        </div>
                    </td>
                </tr>
            </template>

            <!-- Product Rows -->
            <template x-for="product in products" :key="product.id">
                <tr class="text-gray-700 dark:text-gray-400">
                    <!-- Product Info -->
                    <td class="px-4 py-3">
                        <div class="flex items-center">
                            <!-- Product Image -->
                            <div class="w-10 h-10 mr-3 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
                                <template x-if="product.image_link">
                                    <img :src="product.image_link" :alt="product.title" class="w-full h-full object-cover" loading="lazy" />
                                </template>
                                <template x-if="!product.image_link">
                                    <div class="w-full h-full flex items-center justify-center">
                                        <span x-html="$icon('photograph', 'w-5 h-5 text-gray-400')"></span>
                                    </div>
                                </template>
                            </div>
                            <!-- Product Details -->
                            <div class="min-w-0">
                                <a :href="'/admin/letzshop/products/' + product.id" class="font-semibold text-sm truncate max-w-xs hover:text-purple-600 dark:hover:text-purple-400" x-text="product.title || 'Untitled'"></a>
                                <p class="text-xs text-gray-500 dark:text-gray-400" x-text="product.brand || 'No brand'"></p>
                            </div>
                        </div>
                    </td>

                    <!-- Store (shown when no store filter) -->
                    <td class="px-4 py-3 text-sm" x-show="!selectedStore">
                        <span class="font-medium" x-text="product.store_name || '-'"></span>
                    </td>

                    <!-- Identifiers -->
                    <td class="px-4 py-3 text-sm">
                        <div class="space-y-1">
                            <template x-if="product.gtin">
                                <p class="text-xs"><span class="text-gray-500">GTIN:</span> <span x-text="product.gtin" class="font-mono"></span></p>
                            </template>
                            <template x-if="product.sku">
                                <p class="text-xs"><span class="text-gray-500">SKU:</span> <span x-text="product.sku" class="font-mono"></span></p>
                            </template>
                            <template x-if="!product.gtin && !product.sku">
                                <p class="text-xs text-gray-400">No identifiers</p>
                            </template>
                        </div>
                    </td>

                    <!-- Price -->
                    <td class="px-4 py-3 text-sm">
                        <template x-if="product.price_numeric">
                            <p class="font-medium" x-text="formatPrice(product.price_numeric, product.currency || 'EUR')"></p>
                        </template>
                        <template x-if="!product.price_numeric">
                            <p class="text-gray-400">-</p>
                        </template>
                    </td>

                    <!-- Status -->
                    <td class="px-4 py-3 text-sm">
                        <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
                              :class="product.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
                              x-text="product.is_active ? 'Active' : 'Inactive'">
                        </span>
                    </td>

                    <!-- Actions -->
                    <td class="px-4 py-3 text-sm">
                        <div class="flex items-center space-x-2">
                            <a
                                :href="'/admin/letzshop/products/' + product.id"
                                class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
                                title="View Details"
                            >
                                <span x-html="$icon('eye', 'w-4 h-4')"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </template>
        </tbody>
    {% endcall %}

    {{ pagination(show_condition="!loadingProducts && pagination.total > 0") }}
</div>

<!-- Import Modal -->
<div
    x-show="showImportModal"
    x-transition:enter="transition ease-out duration-150"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
    @click.self="showImportModal = false"
    x-cloak
>
    <div
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 transform translate-y-1/2"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0 transform translate-y-1/2"
        class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-lg"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Import Products from Letzshop</h3>
            <button @click="showImportModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Import products from Letzshop CSV feeds. All languages will be imported.
        </p>

        <!-- Quick Fill Buttons -->
        <div class="mb-4" x-show="selectedStore?.letzshop_csv_url_fr || selectedStore?.letzshop_csv_url_en || selectedStore?.letzshop_csv_url_de">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                Quick Import
            </label>
            <div class="flex flex-wrap gap-2">
                <button
                    type="button"
                    @click="startImportAllLanguages()"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"
                >
                    <span x-html="$icon('cloud-download', 'w-4 h-4 mr-2')"></span>
                    Import All Languages
                </button>
            </div>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                Imports products from all configured CSV URLs (FR, EN, DE)
            </p>
        </div>

        <div class="border-t border-gray-200 dark:border-gray-600 pt-4 mt-4">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Or import from custom URL:</p>
            <form @submit.prevent="startImportFromUrl()">
                <!-- CSV URL -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        CSV URL
                    </label>
                    <input
                        x-model="importForm.csv_url"
                        type="url"
                        placeholder="https://letzshop.lu/feeds/products.csv"
                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
                    />
                </div>

                <!-- Language Selection -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        Language for this URL
                    </label>
                    <div class="flex gap-2">
                        <button type="button" @click="importForm.language = 'fr'"
                            :class="importForm.language === 'fr' ? 'bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
                            class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium border rounded-lg">
                            <span class="fi fi-fr"></span> FR
                        </button>
                        <button type="button" @click="importForm.language = 'de'"
                            :class="importForm.language === 'de' ? 'bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
                            class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium border rounded-lg">
                            <span class="fi fi-de"></span> DE
                        </button>
                        <button type="button" @click="importForm.language = 'en'"
                            :class="importForm.language === 'en' ? 'bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
                            class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium border rounded-lg">
                            <span class="fi fi-gb"></span> EN
                        </button>
                    </div>
                </div>

                <div class="flex justify-end gap-3">
                    <button
                        type="button"
                        @click="showImportModal = false"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
                    >
                        Cancel
                    </button>
                    <button
                        type="submit"
                        :disabled="importing || !importForm.csv_url"
                        class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                    >
                        <span x-show="importing" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>