{# app/templates/admin/imports.html #}
{% extends "admin/base.html" %}

{% block title %}Import Jobs - Platform Monitoring{% endblock %}

{% block alpine_data %}adminImports(){% endblock %}

{% block extra_scripts %}
<script src="/static/admin/js/imports.js"></script>
{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex items-center justify-between my-6">
    <div>
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Platform Import Jobs
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            System-wide monitoring of all marketplace import jobs
        </p>
    </div>
    <button
        @click="refreshJobs()"
        :disabled="loading"
        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
    >
        <span x-show="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
        <span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
    </button>
</div>

<!-- Stats Cards -->
<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
    <!-- Total Jobs -->
    <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('cube', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                Total Jobs
            </p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">
                0
            </p>
        </div>
    </div>

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

    <!-- Completed -->
    <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="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                Completed
            </p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.completed">
                0
            </p>
        </div>
    </div>

    <!-- Failed -->
    <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-white dark:bg-red-600">
            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                Failed
            </p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.failed">
                0
            </p>
        </div>
    </div>
</div>

<!-- Error Message -->
<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
    <div>
        <p class="font-semibold">Error</p>
        <p class="text-sm" x-text="error"></p>
    </div>
</div>

<!-- Filters -->
<div class="mb-4 bg-white rounded-lg shadow-xs dark:bg-gray-800 p-4">
    <div class="grid gap-4 md:grid-cols-5">
        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-400 mb-1">
                Filter by Vendor
            </label>
            <select
                x-model="filters.vendor_id"
                @change="applyFilters()"
                class="block w-full px-2 py-1 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 Vendors</option>
                <template x-for="vendor in vendors" :key="vendor.id">
                    <option :value="vendor.id" x-text="`${vendor.name} (${vendor.vendor_code})`"></option>
                </template>
            </select>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-400 mb-1">
                Filter by Status
            </label>
            <select
                x-model="filters.status"
                @change="applyFilters()"
                class="block w-full px-2 py-1 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 Statuses</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>

        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-400 mb-1">
                Filter by Marketplace
            </label>
            <select
                x-model="filters.marketplace"
                @change="applyFilters()"
                class="block w-full px-2 py-1 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 Marketplaces</option>
                <option value="Letzshop">Letzshop</option>
            </select>
        </div>

        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-400 mb-1">
                Created By
            </label>
            <select
                x-model="filters.created_by"
                @change="applyFilters()"
                class="block w-full px-2 py-1 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 Users</option>
                <option value="me">My Jobs Only</option>
            </select>
        </div>

        <div class="flex items-end">
            <button
                @click="clearFilters()"
                class="px-3 py-1 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none"
            >
                Clear Filters
            </button>
        </div>
    </div>
</div>

<!-- Import Jobs List -->
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="p-6">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Import Jobs
        </h3>

        <!-- Loading State -->
        <div x-show="loading" class="text-center py-12">
            <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Loading import jobs...</p>
        </div>

        <!-- Empty State -->
        <div x-show="!loading && jobs.length === 0" class="text-center py-12">
            <span x-html="$icon('inbox', 'inline w-12 h-12 text-gray-400 mb-4')"></span>
            <p class="text-gray-600 dark:text-gray-400">No import jobs found</p>
            <p class="text-sm text-gray-500 dark:text-gray-500">Try adjusting your filters or wait for new imports</p>
        </div>

        <!-- Jobs Table -->
        <div x-show="!loading && jobs.length > 0" class="w-full overflow-hidden rounded-lg shadow-xs">
            <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-800">
                            <th class="px-4 py-3">Job ID</th>
                            <th class="px-4 py-3">Vendor</th>
                            <th class="px-4 py-3">Marketplace</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Progress</th>
                            <th class="px-4 py-3">Started</th>
                            <th class="px-4 py-3">Duration</th>
                            <th class="px-4 py-3">Created By</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-for="job in jobs" :key="job.id">
                            <tr class="text-gray-700 dark:text-gray-400">
                                <td class="px-4 py-3 text-sm">
                                    #<span x-text="job.id"></span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span x-text="getVendorName(job.vendor_id)"></span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span x-text="job.marketplace"></span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
                                          :class="{
                                              'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': job.status === 'completed',
                                              'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': job.status === 'processing',
                                              'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': job.status === 'pending',
                                              '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'
                                          }"
                                          x-text="job.status.replace('_', ' ').toUpperCase()">
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <div class="space-y-1">
                                        <div class="text-xs text-gray-600 dark:text-gray-400">
                                            <span class="text-green-600 dark:text-green-400" x-text="job.imported_count"></span> imported,
                                            <span class="text-blue-600 dark:text-blue-400" x-text="job.updated_count"></span> updated
                                        </div>
                                        <div x-show="job.error_count > 0" class="text-xs text-red-600 dark:text-red-400">
                                            <span x-text="job.error_count"></span> errors
                                        </div>
                                        <div x-show="job.total_processed > 0" class="text-xs text-gray-500 dark:text-gray-500">
                                            Total: <span x-text="job.total_processed"></span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span x-text="job.started_at ? formatDate(job.started_at) : 'Not started'"></span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span x-text="calculateDuration(job)"></span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <span x-text="job.created_by_name || 'System'"></span>
                                </td>
                                <td class="px-4 py-3 text-sm">
                                    <div class="flex items-center space-x-2">
                                        <button
                                            @click="viewJobDetails(job.id)"
                                            class="flex items-center justify-between px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-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>
                                        </button>
                                        <button
                                            x-show="job.status === 'processing' || job.status === 'pending'"
                                            @click="refreshJobStatus(job.id)"
                                            class="flex items-center justify-between px-2 py-1 text-xs font-medium leading-5 text-blue-600 rounded-lg dark:text-gray-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
                                            title="Refresh Status"
                                        >
                                            <span x-html="$icon('refresh', 'w-4 h-4')"></span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        {# noqa: FE-001 - Custom pagination with page/limit/totalJobs variables #}
        <!-- Pagination -->
        <div x-show="!loading && totalJobs > limit" class="px-4 py-3 border-t dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-700 dark:text-gray-400">
                    Showing <span x-text="((page - 1) * limit) + 1"></span> to
                    <span x-text="Math.min(page * limit, totalJobs)"></span> of
                    <span x-text="totalJobs"></span> jobs
                </div>
                <div class="flex space-x-2">
                    <button
                        @click="previousPage()"
                        :disabled="page === 1"
                        class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        Previous
                    </button>
                    <button
                        @click="nextPage()"
                        :disabled="page * limit >= totalJobs"
                        class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        Next
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Job Details Modal (same as marketplace version) -->
<div x-show="showJobModal"
     x-cloak
     @click.away="closeJobModal()"
     class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
     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">
    <div @click.away="closeJobModal()"
         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-2xl"
         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">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                Import Job Details
            </h3>
            <button @click="closeJobModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <span x-html="$icon('close', 'w-5 h-5')"></span>
            </button>
        </div>

        <!-- Modal Content -->
        <div x-show="selectedJob" class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Job ID</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.id"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Vendor</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="getVendorName(selectedJob?.vendor_id)"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Marketplace</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.marketplace"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
                    <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
                          :class="{
                              'text-green-700 bg-green-100': selectedJob?.status === 'completed',
                              'text-blue-700 bg-blue-100': selectedJob?.status === 'processing',
                              'text-yellow-700 bg-yellow-100': selectedJob?.status === 'pending',
                              'text-red-700 bg-red-100': selectedJob?.status === 'failed',
                              'text-orange-700 bg-orange-100': selectedJob?.status === 'completed_with_errors'
                          }"
                          x-text="selectedJob?.status.replace('_', ' ').toUpperCase()">
                    </span>
                </div>
                <div class="col-span-2">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Source URL</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100 break-all" x-text="selectedJob?.source_url"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Imported</p>
                    <p class="text-sm text-green-600 dark:text-green-400" x-text="selectedJob?.imported_count"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Updated</p>
                    <p class="text-sm text-blue-600 dark:text-blue-400" x-text="selectedJob?.updated_count"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Errors</p>
                    <p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJob?.error_count"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Processed</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.total_processed"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Started At</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.started_at ? formatDate(selectedJob.started_at) : 'Not started'"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed At</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.completed_at ? formatDate(selectedJob.completed_at) : 'Not completed'"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Created By</p>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="selectedJob?.created_by_name || 'System'"></p>
                </div>
            </div>

            <!-- Error Details -->
            <div x-show="selectedJob?.error_details?.length > 0" class="mt-4">
                <p class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Error Details</p>
                <div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg max-h-48 overflow-y-auto">
                    <pre class="text-xs text-red-700 dark:text-red-300 whitespace-pre-wrap" x-text="JSON.stringify(selectedJob?.error_details, null, 2)"></pre>
                </div>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="flex justify-end mt-6">
            <button
                @click="closeJobModal()"
                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-700 hover:border-gray-500 focus:outline-none"
            >
                Close
            </button>
        </div>
    </div>
</div>
{% endblock %}