{# app/templates/admin/vendor-product-create.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import detail_page_header %}
{% from 'shared/macros/modals.html' import media_picker_modal %}
{% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}

{% block title %}Create Vendor Product{% endblock %}

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

{% block quill_css %}
{{ quill_css() }}
{% endblock %}

{% block quill_script %}
{{ quill_js() }}
{% 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 %}
{% call detail_page_header("'Create Vendor Product'", '/admin/vendor-products') %}
    <span>Add a new product to a vendor's catalog</span>
{% endcall %}

<!-- Create Form -->
<form @submit.prevent="createProduct()">
    <!-- Vendor Selection -->
    <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Vendor
        </h3>
        <div class="max-w-md">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Vendor <span class="text-red-500">*</span></label>
            <select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
            </select>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">The vendor whose catalog this product will be added to</p>
        </div>
    </div>

    <!-- Product Information (Translations) -->
    <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Product Information <span class="text-red-500">*</span>
        </h3>

        <!-- Language Tabs -->
        <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
            <nav class="flex space-x-4">
                <template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
                    <button
                        type="button"
                        @click="activeLanguage = lang"
                        :class="activeLanguage === lang ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'"
                        class="py-2 px-1 border-b-2 font-medium text-sm uppercase"
                        x-text="lang"
                    ></button>
                </template>
            </nav>
        </div>

        <!-- Translation Fields - English -->
        <div x-show="activeLanguage === 'en'" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                    Title (EN) <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    x-model="form.translations.en.title"
                    required
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    placeholder="Product title"
                />
            </div>
            {{ quill_editor(
                id='create-desc-editor-en',
                model='form.translations.en.description',
                label='Description (EN)',
                placeholder='Enter product description in English...',
                min_height='150px',
                toolbar='standard'
            ) }}
        </div>

        <!-- Translation Fields - French -->
        <div x-show="activeLanguage === 'fr'" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                    Title (FR)
                </label>
                <input
                    type="text"
                    x-model="form.translations.fr.title"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    placeholder="Product title"
                />
            </div>
            {{ quill_editor(
                id='create-desc-editor-fr',
                model='form.translations.fr.description',
                label='Description (FR)',
                placeholder='Enter product description in French...',
                min_height='150px',
                toolbar='standard'
            ) }}
        </div>

        <!-- Translation Fields - German -->
        <div x-show="activeLanguage === 'de'" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                    Title (DE)
                </label>
                <input
                    type="text"
                    x-model="form.translations.de.title"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    placeholder="Product title"
                />
            </div>
            {{ quill_editor(
                id='create-desc-editor-de',
                model='form.translations.de.description',
                label='Description (DE)',
                placeholder='Enter product description in German...',
                min_height='150px',
                toolbar='standard'
            ) }}
        </div>

        <!-- Translation Fields - Luxembourgish -->
        <div x-show="activeLanguage === 'lu'" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                    Title (LU)
                </label>
                <input
                    type="text"
                    x-model="form.translations.lu.title"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    placeholder="Product title"
                />
            </div>
            {{ quill_editor(
                id='create-desc-editor-lu',
                model='form.translations.lu.description',
                label='Description (LU)',
                placeholder='Enter product description in Luxembourgish...',
                min_height='150px',
                toolbar='standard'
            ) }}
        </div>
    </div>

    <!-- Product Identifiers -->
    <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Product Identifiers
        </h3>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Vendor SKU</label>
                <div class="flex gap-2">
                    <input
                        type="text"
                        x-model="form.vendor_sku"
                        class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 font-mono"
                        placeholder="XXXX_XXXX_XXXX"
                    />
                    <button
                        type="button"
                        @click="generateSku()"
                        class="px-3 py-2 text-xs font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20"
                        title="Auto-generate SKU"
                    >
                        <span x-html="$icon('refresh', 'w-4 h-4')"></span>
                    </button>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Brand</label>
                <input
                    type="text"
                    x-model="form.brand"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                    placeholder="Brand name"
                />
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN/EAN</label>
                <input
                    type="text"
                    x-model="form.gtin"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 font-mono"
                    placeholder="4007817144145"
                />
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">GTIN Type</label>
                <select
                    x-model="form.gtin_type"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                >
                    <option value="">Not specified</option>
                    <option value="ean13">EAN-13</option>
                    <option value="ean8">EAN-8</option>
                    <option value="upc">UPC</option>
                    <option value="isbn">ISBN</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Pricing -->
    <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Pricing
        </h3>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
            {# noqa: FE-008 - Using raw number input for price with EUR prefix #}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Price (incl. VAT)</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        x-model.number="form.price"
                        class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="0.00"
                    />
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Sale Price</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">EUR</span>
                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        x-model.number="form.sale_price"
                        class="w-full pl-12 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="0.00"
                    />
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Currency</label>
                <select
                    x-model="form.currency"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                >
                    <option value="EUR">EUR</option>
                    <option value="USD">USD</option>
                    <option value="GBP">GBP</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">VAT Rate</label>
                <select
                    x-model.number="form.tax_rate_percent"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                >
                    <option value="17">17% (Standard)</option>
                    <option value="14">14% (Intermediate)</option>
                    <option value="8">8% (Reduced)</option>
                    <option value="3">3% (Super-reduced)</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Availability</label>
                <select
                    x-model="form.availability"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                >
                    <option value="">Not specified</option>
                    <option value="in_stock">In Stock</option>
                    <option value="out_of_stock">Out of Stock</option>
                    <option value="preorder">Preorder</option>
                    <option value="backorder">Backorder</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Product Images -->
    <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Product Images
        </h3>

        <!-- Main Image -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Main Image</label>
            <div class="flex items-start gap-4">
                <!-- Preview -->
                <div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 flex-shrink-0">
                    <template x-if="form.primary_image_url">
                        <div class="relative w-full h-full group">
                            <img :src="form.primary_image_url" class="w-full h-full object-cover" />
                            <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button
                                    type="button"
                                    @click="clearMainImage()"
                                    class="p-2 bg-red-500 rounded-full text-white hover:bg-red-600"
                                    title="Remove image"
                                >
                                    <span x-html="$icon('delete', 'w-4 h-4')"></span>
                                </button>
                            </div>
                        </div>
                    </template>
                    <template x-if="!form.primary_image_url">
                        <div class="w-full h-full flex items-center justify-center">
                            <span x-html="$icon('photograph', 'w-10 h-10 text-gray-400')"></span>
                        </div>
                    </template>
                </div>

                <!-- Actions -->
                <div class="flex flex-col gap-2">
                    <button
                        type="button"
                        @click="openMediaPickerMain()"
                        :disabled="!form.vendor_id"
                        class="flex items-center px-4 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                    >
                        <span x-html="$icon('photograph', 'w-4 h-4 mr-2')"></span>
                        Browse Media Library
                    </button>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Or enter URL directly:</p>
                    <input
                        type="text"
                        x-model="form.primary_image_url"
                        class="w-64 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
                        placeholder="https://... or /uploads/..."
                    />
                </div>
            </div>
        </div>

        <!-- Additional Images -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Additional Images</label>
            <div class="flex flex-wrap gap-3">
                <!-- Existing Additional Images -->
                <template x-for="(imgUrl, index) in form.additional_images" :key="index">
                    <div class="relative w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 group">
                        <img :src="imgUrl" class="w-full h-full object-cover" />
                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <button
                                type="button"
                                @click="removeAdditionalImage(index)"
                                class="p-1.5 bg-red-500 rounded-full text-white hover:bg-red-600"
                                title="Remove image"
                            >
                                <span x-html="$icon('close', 'w-3 h-3')"></span>
                            </button>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs text-center py-0.5" x-text="index + 1"></div>
                    </div>
                </template>

                <!-- Add Image Button -->
                <button
                    type="button"
                    @click="openMediaPickerAdditional()"
                    :disabled="!form.vendor_id"
                    class="w-24 h-24 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 flex flex-col items-center justify-center text-gray-400 hover:text-purple-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <span x-html="$icon('plus', 'w-6 h-6')"></span>
                    <span class="text-xs mt-1">Add</span>
                </button>
            </div>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Click "Add" to select images from the media library or upload new ones</p>
        </div>
    </div>

    <!-- Product Type & Status -->
    <div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Product Type & Status
        </h3>
        <div class="flex flex-wrap gap-6">
            <label class="flex items-center">
                <input
                    type="checkbox"
                    x-model="form.is_digital"
                    class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                />
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product</span>
            </label>
            <label class="flex items-center">
                <input
                    type="checkbox"
                    x-model="form.is_active"
                    class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                />
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</span>
            </label>
            <label class="flex items-center">
                <input
                    type="checkbox"
                    x-model="form.is_featured"
                    class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
                />
                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Featured</span>
            </label>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex items-center justify-between px-4 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <a
            href="/admin/vendor-products"
            class="px-4 py-2 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-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
        >
            Cancel
        </a>
        <button
            type="submit"
            :disabled="saving || !form.vendor_id || !form.translations.en.title"
            class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
        >
            <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
            <span x-text="saving ? 'Creating...' : 'Create Product'"></span>
        </button>
    </div>
</form>

<!-- Media Picker Modal for Main Image -->
{{ media_picker_modal(
    id='mediaPickerMain',
    show_var='showMediaPicker',
    vendor_id_var='form.vendor_id',
    on_select='setMainImage',
    multi_select=false,
    title='Select Main Image'
) }}

<!-- Media Picker Modal for Additional Images -->
{{ media_picker_modal(
    id='mediaPickerAdditional',
    show_var='showMediaPickerAdditional',
    vendor_id_var='form.vendor_id',
    on_select='addAdditionalImages',
    multi_select=true,
    title='Select Additional Images'
) }}
{% 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/lib/tom-select.complete.min.js") }}';
        document.head.appendChild(fallbackScript);
    };
    document.head.appendChild(script);
})();
</script>
<script src="{{ url_for('static', path='shared/js/media-picker.js') }}"></script>
<script src="{{ url_for('static', path='admin/js/vendor-product-create.js') }}"></script>
{% endblock %}