{# app/templates/admin/imports.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/pagination.html' import pagination %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{% from 'shared/macros/alerts.html' import error_state %}
{% from 'shared/macros/modals.html' import job_details_modal %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}

{% 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 %}
{% call page_header_flex(title='Platform Import Jobs', subtitle='System-wide monitoring of all marketplace import jobs') %}
    {{ refresh_button(onclick='refreshJobs()') }}
{% endcall %}

<!-- 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_state('Error', show_condition='error') }}

<!-- 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">
            {% call table_wrapper() %}
                    {{ table_header(['Job ID', 'Vendor', 'Marketplace', 'Status', 'Progress', 'Started', 'Duration', 'Created By', 'Actions']) }}
                    <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>
        {% endcall %}

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

{{ job_details_modal(show_created_by=true) }}
{% endblock %}