{# 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="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">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="7" 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="7" 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">
                                <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-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('upload', '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' ? 'Import' : job.type === 'export' ? 'Export' : '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.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>

        <!-- Pagination -->
        <div x-show="jobsPagination.total > jobsPagination.per_page" class="flex items-center justify-between 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-2">
                <button
                    @click="jobsPagination.page--; loadJobs()"
                    :disabled="jobsPagination.page <= 1"
                    class="px-3 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"
                >
                    <span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
                </button>
                <button
                    @click="jobsPagination.page++; loadJobs()"
                    :disabled="jobsPagination.page * jobsPagination.per_page >= jobsPagination.total"
                    class="px-3 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"
                >
                    <span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
                </button>
            </div>
        </div>
    </div>
</div>