{# app/templates/admin/marketplace-letzshop.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button, tab_panel, endtab_panel %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
{# Import modals macro - custom modals below use inline definition for specialized forms #}
{% from 'shared/macros/modals.html' import modal_simple %}

{% block title %}Letzshop Management{% endblock %}
{% block alpine_data %}adminMarketplaceLetzshop(){% endblock %}

{% block extra_head %}
<!-- Tom Select CSS with local fallback -->
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/vendor/tom-select.default.min.css') }}';"
/>
<style>
    /* Tom Select dark mode overrides */
    .dark .ts-wrapper .ts-control {
        background-color: rgb(55 65 81);
        border-color: rgb(75 85 99);
        color: rgb(209 213 219);
    }
    .dark .ts-wrapper .ts-control input {
        color: rgb(209 213 219);
    }
    .dark .ts-wrapper .ts-control input::placeholder {
        color: rgb(156 163 175);
    }
    .dark .ts-dropdown {
        background-color: rgb(55 65 81);
        border-color: rgb(75 85 99);
        color: rgb(209 213 219);
    }
    .dark .ts-dropdown .option {
        color: rgb(209 213 219);
    }
    .dark .ts-dropdown .option.active {
        background-color: rgb(147 51 234);
        color: white;
    }
    .dark .ts-dropdown .option:hover {
        background-color: rgb(75 85 99);
    }
    .dark .ts-wrapper.focus .ts-control {
        border-color: rgb(147 51 234);
        box-shadow: 0 0 0 1px rgb(147 51 234);
    }
</style>
{% endblock %}

{% block content %}
<!-- Page Header with Vendor Selector -->
{% call page_header_flex(title='Letzshop Management', subtitle='Manage Letzshop integration for vendors') %}
    <div class="flex items-center gap-4">
        <!-- Vendor Autocomplete (Tom Select) -->
        <div class="w-80">
            <select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
            </select>
        </div>
        {{ refresh_button(loading_var='loading', onclick='refreshData()', variant='secondary') }}
    </div>
{% endcall %}

<!-- Success Message -->
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg flex items-start">
    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
    <div>
        <p class="font-semibold" x-text="successMessage"></p>
    </div>
    <button @click="successMessage = ''" class="ml-auto text-green-700 dark:text-green-300 hover:text-green-900">
        <span x-html="$icon('x', 'w-4 h-4')"></span>
    </button>
</div>

<!-- Error Message -->
{{ error_state('Error', show_condition='error && !loading') }}

<!-- Vendor Required Warning -->
<div x-show="!selectedVendor && !loading" class="mb-8 p-6 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
    <div class="flex items-center">
        <span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-500 mr-3')"></span>
        <div>
            <h3 class="font-medium text-yellow-800 dark:text-yellow-200">Select a Vendor</h3>
            <p class="text-sm text-yellow-700 dark:text-yellow-300">Please select a vendor from the dropdown above to manage their Letzshop integration.</p>
        </div>
    </div>
</div>

<!-- Main Content (shown when vendor selected) -->
<div x-show="selectedVendor" x-transition x-cloak>
    <!-- Vendor Info Bar -->
    <div class="mb-6 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xs flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                <span class="text-lg font-semibold text-purple-600 dark:text-purple-300" x-text="selectedVendor?.name?.charAt(0).toUpperCase()"></span>
            </div>
            <div>
                <h3 class="font-semibold text-gray-800 dark:text-gray-200" x-text="selectedVendor?.name"></h3>
                <p class="text-sm text-gray-500" x-text="selectedVendor?.vendor_code"></p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <!-- Status Badge -->
            <span class="px-3 py-1 text-sm font-medium rounded-full"
                  :class="letzshopStatus.is_configured ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
                  x-text="letzshopStatus.is_configured ? 'Configured' : 'Not Configured'">
            </span>
            <!-- Auto-sync indicator -->
            <span x-show="letzshopStatus.auto_sync_enabled" class="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                Auto-sync
            </span>
        </div>
    </div>

    <!-- Tabs -->
    {% call tabs_nav(tab_var='activeTab') %}
        {{ tab_button('products', 'Products', tab_var='activeTab', icon='cube') }}
        {{ tab_button('orders', 'Orders', tab_var='activeTab', icon='shopping-cart', count_var='orderStats.pending') }}
        {{ tab_button('settings', 'Settings', tab_var='activeTab', icon='cog') }}
    {% endcall %}

    <!-- Products Tab (Import + Export) -->
    {{ tab_panel('products', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-products-tab.html' %}
    {{ endtab_panel() }}

    <!-- Orders Tab -->
    {{ tab_panel('orders', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-orders-tab.html' %}
    {{ endtab_panel() }}

    <!-- Settings Tab -->
    {{ tab_panel('settings', tab_var='activeTab') }}
        {% include 'admin/partials/letzshop-settings-tab.html' %}
    {{ endtab_panel() }}

    <!-- Unified Jobs Table (below all tabs) -->
    <div class="mt-8">
        {% include 'admin/partials/letzshop-jobs-table.html' %}
    </div>
</div>

<!-- Tracking Modal -->
<div
    x-show="showTrackingModal"
    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="showTrackingModal = 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-md"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Set Tracking Information</h3>
            <button @click="showTrackingModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <form @submit.prevent="submitTracking()">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Tracking Number <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    x-model="trackingForm.tracking_number"
                    required
                    placeholder="1Z999AA10123456784"
                    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>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Carrier <span class="text-red-500">*</span>
                </label>
                <select
                    x-model="trackingForm.tracking_carrier"
                    required
                    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"
                >
                    <option value="">Select carrier...</option>
                    <option value="dhl">DHL</option>
                    <option value="ups">UPS</option>
                    <option value="fedex">FedEx</option>
                    <option value="post_lu">Post Luxembourg</option>
                    <option value="dpd">DPD</option>
                    <option value="gls">GLS</option>
                    <option value="other">Other</option>
                </select>
            </div>

            <div class="flex justify-end gap-3">
                <button
                    type="button"
                    @click="showTrackingModal = 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="submittingTracking"
                    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="submittingTracking" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                    <span x-text="submittingTracking ? 'Saving...' : 'Save Tracking'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Order Details Modal -->
<div
    x-show="showOrderModal"
    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="showOrderModal = 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-2xl max-h-[80vh] overflow-y-auto"
        @click.stop
    >
        <header class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Order Details</h3>
            <button @click="showOrderModal = false" class="text-gray-400 hover:text-gray-600">
                <span x-html="$icon('x', 'w-5 h-5')"></span>
            </button>
        </header>

        <div x-show="selectedOrder" class="space-y-4">
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Order Number:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.letzshop_order_number"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
                    <span
                        class="ml-2 px-2 py-0.5 text-xs rounded-full"
                        :class="{
                            'bg-orange-100 text-orange-700': selectedOrder?.sync_status === 'pending',
                            'bg-green-100 text-green-700': selectedOrder?.sync_status === 'confirmed',
                            'bg-red-100 text-red-700': selectedOrder?.sync_status === 'rejected',
                            'bg-blue-100 text-blue-700': selectedOrder?.sync_status === 'shipped'
                        }"
                        x-text="selectedOrder?.sync_status?.toUpperCase()"
                    ></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Customer:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.customer_email"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Total:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.total_amount + ' ' + selectedOrder?.currency"></span>
                </div>
                <div x-show="selectedOrder?.tracking_number">
                    <span class="font-medium text-gray-600 dark:text-gray-400">Tracking:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.tracking_number + ' (' + selectedOrder?.tracking_carrier + ')'"></span>
                </div>
                <div>
                    <span class="font-medium text-gray-600 dark:text-gray-400">Created:</span>
                    <span class="ml-2 text-gray-700 dark:text-gray-300" x-text="formatDate(selectedOrder?.created_at)"></span>
                </div>
            </div>

            <div x-show="selectedOrder?.inventory_units?.length > 0">
                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Items</h4>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                    <template x-for="unit in selectedOrder?.inventory_units || []" :key="unit.id">
                        <div class="flex justify-between text-sm py-1 border-b border-gray-200 dark:border-gray-600 last:border-0">
                            <span class="text-gray-600 dark:text-gray-400" x-text="unit.id"></span>
                            <span
                                class="px-2 py-0.5 text-xs rounded-full"
                                :class="unit.state === 'confirmed' ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700'"
                                x-text="unit.state"
                            ></span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<!-- Tom Select JS with local fallback -->
<script>
(function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.complete.min.js';
    script.onerror = function() {
        console.warn('Tom Select CDN failed, loading local copy...');
        var fallbackScript = document.createElement('script');
        fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/tom-select.complete.min.js") }}';
        document.head.appendChild(fallbackScript);
    };
    document.head.appendChild(script);
})();
</script>
<script src="{{ url_for('static', path='admin/js/marketplace-letzshop.js') }}"></script>
{% endblock %}