{# app/templates/admin/vendor-product-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import detail_page_header %}

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

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

{% block content %}
{% call detail_page_header("'Edit: ' + (product?.vendor_translations?.en?.title || 'Product')", '/admin/vendor-products', subtitle_show='product') %}
    <span x-text="product?.vendor_name || 'Unknown Vendor'"></span>
{% endcall %}

{{ loading_state('Loading product...') }}

{{ error_state('Error loading product') }}

<!-- Edit Form -->
<div x-show="!loading && product" x-cloak>
    <form @submit.prevent="saveProduct()">
        <!-- Translations (Tabbed) -->
        <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 -->
            <template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
                <div x-show="activeLanguage === lang" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                            Title (<span x-text="lang.toUpperCase()"></span>) <span class="text-red-500">*</span>
                        </label>
                        <input
                            type="text"
                            x-model="form.translations[lang].title"
                            :required="lang === 'en'"
                            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>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                            Description (<span x-text="lang.toUpperCase()"></span>) <span class="text-red-500">*</span>
                        </label>
                        <textarea
                            x-model="form.translations[lang].description"
                            rows="5"
                            :required="lang === 'en'"
                            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 description"
                        ></textarea>
                    </div>
                </div>
            </template>
        </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 <span class="text-red-500">*</span>
                    </label>
                    <div class="flex gap-2">
                        <input
                            type="text"
                            x-model="form.vendor_sku"
                            required
                            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 <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        x-model="form.brand"
                        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="Brand name"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                        GTIN/EAN <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        x-model="form.gtin"
                        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 font-mono"
                        placeholder="4007817144145"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                        GTIN Type <span class="text-red-500">*</span>
                    </label>
                    <select
                        x-model="form.gtin_type"
                        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"
                    >
                        <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-4">
                {# 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) <span class="text-red-500">*</span>
                    </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"
                            required
                            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 (optional)
                    </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 <span class="text-red-500">*</span>
                    </label>
                    <select
                        x-model="form.currency"
                        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"
                    >
                        <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 <span class="text-red-500">*</span>
                    </label>
                    <select
                        x-model.number="form.tax_rate_percent"
                        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"
                    >
                        <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>
        </div>

        <!-- Image -->
        <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">
                Primary Image <span class="text-red-500">*</span>
            </h3>
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
                        Image URL <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="url"
                        x-model="form.primary_image_url"
                        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="https://..."
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Preview</label>
                    <div class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
                        <template x-if="form.primary_image_url">
                            <img :src="form.primary_image_url" class="w-full h-full object-cover" />
                        </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-8 h-8 text-gray-400')"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </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 opacity-60 cursor-not-allowed" title="Derived from marketplace product">
                    <input
                        type="checkbox"
                        x-model="form.is_digital"
                        disabled
                        class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 cursor-not-allowed"
                    />
                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Digital Product <span class="text-xs text-gray-500">(from source)</span></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>

        <!-- Optional: Supplier Info -->
        <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">
                Supplier Info (Optional)
            </h3>
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Supplier</label>
                    <input
                        type="text"
                        x-model="form.supplier"
                        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="Supplier name"
                    />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Cost (what you pay)</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.cost"
                            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>
        </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/' + productId"
                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 || !isFormValid()"
                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 ? 'Saving...' : 'Save Changes'"></span>
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/vendor-product-edit.js') }}"></script>
{% endblock %}