{# app/templates/admin/partials/letzshop-jobs-table.html #}
{# Unified jobs table for admin Letzshop management - Import, Export, and Sync jobs #}

<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Recent Jobs</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">Product imports, exports, and order sync history</p>
            </div>
            <button
                @click="loadJobs()"
                :disabled="loadingJobs"
                class="flex items-center px-3 py-1.5 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-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50"
            >
                <span x-show="!loadingJobs" x-html="$icon('refresh', 'w-4 h-4 mr-1')"></span>
                <span x-show="loadingJobs" x-html="$icon('spinner', 'w-4 h-4 mr-1')"></span>
                Refresh
            </button>
        </div>

        <!-- Filters -->
        <div class="mb-4 flex flex-wrap gap-3">
            <select
                x-model="jobsFilter.type"
                @change="loadJobs()"
                class="px-3 py-1.5 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"
            >
                <option value="">All Types</option>
                <option value="import">Product Import</option>
                <option value="export">Product Export</option>
                <option value="historical_import">Historical Order Import</option>
                <option value="order_sync">Order Sync</option>
            </select>
            <select
                x-model="jobsFilter.status"
                @change="loadJobs()"
                class="px-3 py-1.5 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"
            >
                <option value="">All Status</option>
                <option value="pending">Pending</option>
                <option value="processing">Processing</option>
                <option value="completed">Completed</option>
                <option value="failed">Failed</option>
                <option value="completed_with_errors">Completed with Errors</option>
            </select>
        </div>

        <!-- Jobs Table -->
        <div class="w-full overflow-x-auto">
            <table class="w-full whitespace-no-wrap">
                <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-700">
                        <th class="px-4 py-3">ID</th>
                        <th class="px-4 py-3">Vendor</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Records</th>
                        <th class="px-4 py-3">Started</th>
                        <th class="px-4 py-3">Duration</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">
                    <template x-if="loadingJobs && jobs.length === 0">
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                <span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
                                <p>Loading jobs...</p>
                            </td>
                        </tr>
                    </template>
                    <template x-if="!loadingJobs && jobs.length === 0">
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                <span x-html="$icon('collection', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
                                <p class="font-medium">No jobs found</p>
                                <p class="text-sm mt-1">Import products or sync orders to see job history</p>
                            </td>
                        </tr>
                    </template>
                    <template x-for="job in jobs" :key="job.id + '-' + job.type">
                        <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-4 py-3 text-sm font-medium">
                                <span x-text="'#' + job.id"></span>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <span x-text="job.vendor_code || job.vendor_name || '-'"></span>
                            </td>
                            <td class="px-4 py-3">
                                <span
                                    class="px-2 py-1 text-xs font-medium rounded-full"
                                    :class="{
                                        'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300': job.type === 'import',
                                        'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300': job.type === 'export',
                                        'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': job.type === 'historical_import',
                                        'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300': job.type === 'order_sync'
                                    }"
                                >
                                    <span x-show="job.type === 'import'" x-html="$icon('cloud-download', 'inline w-3 h-3 mr-1')"></span>
                                    <span x-show="job.type === 'export'" x-html="$icon('cloud-upload', 'inline w-3 h-3 mr-1')"></span>
                                    <span x-show="job.type === 'historical_import'" x-html="$icon('clock', 'inline w-3 h-3 mr-1')"></span>
                                    <span x-show="job.type === 'order_sync'" x-html="$icon('refresh', 'inline w-3 h-3 mr-1')"></span>
                                    <span x-text="job.type === 'import' ? 'Product Import' : job.type === 'export' ? 'Product Export' : job.type === 'historical_import' ? 'Historical Import' : 'Order Sync'"></span>
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <span
                                    class="px-2 py-1 text-xs font-semibold leading-tight rounded-full"
                                    :class="{
                                        'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': job.status === 'pending',
                                        'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': job.status === 'processing',
                                        'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': job.status === 'completed' || job.status === 'success',
                                        'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': job.status === 'failed',
                                        'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': job.status === 'completed_with_errors' || job.status === 'partial'
                                    }"
                                    x-text="job.status.replace(/_/g, ' ').toUpperCase()"
                                ></span>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <div class="flex items-center gap-2">
                                    <span class="text-green-600 dark:text-green-400" x-text="job.records_succeeded || 0"></span>
                                    <span class="text-gray-400">/</span>
                                    <span x-text="job.records_processed || 0"></span>
                                    <span x-show="job.records_failed > 0" class="text-red-600 dark:text-red-400">
                                        (<span x-text="job.records_failed"></span> failed)
                                    </span>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <span x-text="formatDate(job.started_at || job.created_at)"></span>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <span x-text="formatDuration(job.started_at, job.completed_at)"></span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-2">
                                    <button
                                        x-show="(job.type === 'import' || job.type === 'historical_import') && (job.status === 'failed' || job.status === 'completed_with_errors')"
                                        @click="viewJobErrors(job)"
                                        class="flex items-center justify-center px-2 py-1 text-sm text-red-600 transition-colors duration-150 rounded-md hover:bg-red-100 dark:hover:bg-red-900"
                                        title="View Errors"
                                    >
                                        <span x-html="$icon('exclamation-circle', 'w-4 h-4')"></span>
                                    </button>
                                    <button
                                        @click="viewJobDetails(job)"
                                        class="flex items-center justify-center px-2 py-1 text-sm text-gray-600 transition-colors duration-150 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
                                        title="View Details"
                                    >
                                        <span x-html="$icon('eye', 'w-4 h-4')"></span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <!-- Numbered Pagination -->
        <div x-show="jobsPagination.total > jobsPagination.per_page" class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-4 pt-4 border-t dark:border-gray-700">
            <span class="text-sm text-gray-600 dark:text-gray-400">
                Showing <span x-text="((jobsPagination.page - 1) * jobsPagination.per_page) + 1"></span>-<span x-text="Math.min(jobsPagination.page * jobsPagination.per_page, jobsPagination.total)"></span> of <span x-text="jobsPagination.total"></span> jobs
            </span>
            <div class="flex items-center gap-1">
                {# First page #}
                <button
                    @click="jobsPagination.page = 1; loadJobs()"
                    :disabled="jobsPagination.page <= 1"
                    class="px-2 py-1 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-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    title="First page"
                >
                    <span x-html="$icon('chevron-double-left', 'w-4 h-4')"></span>
                </button>
                {# Previous page #}
                <button
                    @click="jobsPagination.page--; loadJobs()"
                    :disabled="jobsPagination.page <= 1"
                    class="px-2 py-1 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-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    title="Previous page"
                >
                    <span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
                </button>
                {# Page numbers #}
                <template x-for="p in getPageNumbers()" :key="p">
                    <button
                        @click="goToPage(p)"
                        class="px-3 py-1 text-sm font-medium rounded-md border transition-colors"
                        :class="p === jobsPagination.page
                            ? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
                            : 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
                        x-text="p"
                    ></button>
                </template>
                {# Next page #}
                <button
                    @click="jobsPagination.page++; loadJobs()"
                    :disabled="jobsPagination.page >= jobsTotalPages"
                    class="px-2 py-1 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-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    title="Next page"
                >
                    <span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
                </button>
                {# Last page #}
                <button
                    @click="jobsPagination.page = jobsTotalPages; loadJobs()"
                    :disabled="jobsPagination.page >= jobsTotalPages"
                    class="px-2 py-1 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-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    title="Last page"
                >
                    <span x-html="$icon('chevron-double-right', 'w-4 h-4')"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Job Details Modal -->
<div
    x-show="showJobDetailsModal"
    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-center justify-center bg-black bg-opacity-50"
    @click.self="showJobDetailsModal = false"
    x-cloak
>
    <div
        x-show="showJobDetailsModal"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 transform scale-95"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-95"
        class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl"
    >
        <!-- Header -->
        <header class="flex justify-between items-center px-6 py-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Job Details</h3>
            <button
                @click="showJobDetailsModal = false"
                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
            >
                <span x-html="$icon('close', 'w-5 h-5')"></span>
            </button>
        </header>

        <!-- Body -->
        <div class="px-6 py-4 space-y-4">
            <!-- Job Info Grid -->
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Job ID:</span>
                    <span class="ml-2 text-gray-900 dark:text-gray-100">#<span x-text="selectedJobDetails?.id"></span></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Type:</span>
                    <span class="ml-2">
                        <span
                            class="px-2 py-0.5 text-xs font-medium rounded-full"
                            :class="{
                                'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300': selectedJobDetails?.type === 'import',
                                'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300': selectedJobDetails?.type === 'export',
                                'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': selectedJobDetails?.type === 'historical_import',
                                'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300': selectedJobDetails?.type === 'order_sync'
                            }"
                            x-text="selectedJobDetails?.type === 'import' ? 'Product Import' : selectedJobDetails?.type === 'export' ? 'Product Export' : selectedJobDetails?.type === 'historical_import' ? 'Historical Import' : 'Order Sync'"
                        ></span>
                    </span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
                    <span class="ml-2">
                        <span
                            class="px-2 py-0.5 text-xs font-semibold rounded-full"
                            :class="{
                                'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': selectedJobDetails?.status === 'pending',
                                'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': selectedJobDetails?.status === 'processing',
                                'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': selectedJobDetails?.status === 'completed' || selectedJobDetails?.status === 'success',
                                'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': selectedJobDetails?.status === 'failed',
                                'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': selectedJobDetails?.status === 'completed_with_errors' || selectedJobDetails?.status === 'partial'
                            }"
                            x-text="selectedJobDetails?.status?.replace(/_/g, ' ').toUpperCase()"
                        ></span>
                    </span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Vendor:</span>
                    <span class="ml-2 text-gray-900 dark:text-gray-100" x-text="selectedJobDetails?.vendor_code || selectedJobDetails?.vendor_name || selectedVendor?.name || '-'"></span>
                </div>
            </div>

            <!-- Records Info -->
            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Records</h4>
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div>
                        <div class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="selectedJobDetails?.records_succeeded || 0"></div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Succeeded</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold text-gray-600 dark:text-gray-300" x-text="selectedJobDetails?.records_processed || 0"></div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Processed</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold text-red-600 dark:text-red-400" x-text="selectedJobDetails?.records_failed || 0"></div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Failed</div>
                    </div>
                </div>
            </div>

            <!-- Timestamps -->
            <div class="text-sm space-y-2">
                <div class="flex justify-between">
                    <span class="font-medium text-gray-600 dark:text-gray-400">Started:</span>
                    <span class="text-gray-900 dark:text-gray-100" x-text="formatDate(selectedJobDetails?.started_at || selectedJobDetails?.created_at)"></span>
                </div>
                <div class="flex justify-between">
                    <span class="font-medium text-gray-600 dark:text-gray-400">Completed:</span>
                    <span class="text-gray-900 dark:text-gray-100" x-text="selectedJobDetails?.completed_at ? formatDate(selectedJobDetails?.completed_at) : 'In progress...'"></span>
                </div>
                <div class="flex justify-between">
                    <span class="font-medium text-gray-600 dark:text-gray-400">Duration:</span>
                    <span class="text-gray-900 dark:text-gray-100" x-text="formatDuration(selectedJobDetails?.started_at || selectedJobDetails?.created_at, selectedJobDetails?.completed_at)"></span>
                </div>
            </div>

            <!-- Export Details (for export jobs) -->
            <template x-if="selectedJobDetails?.type === 'export' && selectedJobDetails?.error_details">
                <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                    <h4 class="font-medium text-blue-700 dark:text-blue-300 mb-2">Export Details</h4>
                    <p class="text-sm text-blue-600 dark:text-blue-400 mb-2">
                        Products exported: <span class="font-medium" x-text="selectedJobDetails?.error_details?.products_exported || 0"></span>
                    </p>
                    <template x-if="selectedJobDetails?.error_details?.files">
                        <div class="space-y-1">
                            <template x-for="file in selectedJobDetails.error_details.files" :key="file.language">
                                <div class="text-xs flex justify-between items-center py-1 border-b border-blue-100 dark:border-blue-800 last:border-0">
                                    <span class="font-medium text-blue-700 dark:text-blue-300" x-text="file.language?.toUpperCase()"></span>
                                    <span x-show="file.error" class="text-red-600 dark:text-red-400" x-text="'Failed: ' + file.error"></span>
                                    <span x-show="!file.error" class="text-blue-600 dark:text-blue-400">
                                        <span x-text="file.filename"></span>
                                        <span class="text-gray-400 ml-1">(<span x-text="(file.size_bytes / 1024).toFixed(1)"></span> KB)</span>
                                    </span>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>

            <!-- Error Details -->
            <template x-if="selectedJobDetails?.error_message || (selectedJobDetails?.error_details?.error && selectedJobDetails?.type !== 'export')">
                <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
                    <h4 class="font-medium text-red-700 dark:text-red-300 mb-2">Error</h4>
                    <p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJobDetails?.error_message || selectedJobDetails?.error_details?.error"></p>
                </div>
            </template>
        </div>

        <!-- Footer -->
        <footer class="px-6 py-4 border-t dark:border-gray-700 flex justify-end">
            <button
                @click="showJobDetailsModal = false"
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none"
            >
                Close
            </button>
        </footer>
    </div>
</div>