{# app/templates/admin/store-create.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import error_state %}

{% block title %}Create Store{% endblock %}

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

{% block content %}
{{ page_header('Create New Store', subtitle='Create a store (storefront/brand) under an existing merchant', back_url='/admin/stores', back_label='Back to Stores') }}

{# noqa: FE-003 - Custom success message with nested template #}
<!-- Success Message -->
<div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
    <div class="flex items-start">
        <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
        <div class="flex-1">
            <p class="font-semibold">Store Created Successfully!</p>
            <template x-if="createdStore">
                <div class="mt-2 p-3 bg-white rounded border border-green-300">
                    <p class="text-sm font-semibold mb-2">Store Details:</p>
                    <div class="space-y-1 text-sm">
                        <div><span class="font-bold">Store Code:</span> <span x-text="createdStore.store_code"></span></div>
                        <div><span class="font-bold">Name:</span> <span x-text="createdStore.name"></span></div>
                        <div><span class="font-bold">Subdomain:</span> <span x-text="createdStore.subdomain"></span></div>
                        <div><span class="font-bold">Merchant:</span> <span x-text="createdStore.merchant_name"></span></div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>

{{ error_state('Error Creating Store', error_var='errorMessage', show_condition='errorMessage') }}

<!-- Loading Merchants -->
<div x-show="loadingMerchants" class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">
    <div class="flex items-center">
        <span x-html="$icon('spinner', 'w-5 h-5 mr-3 animate-spin')"></span>
        <span>Loading merchants...</span>
    </div>
</div>

<!-- Create Store Form -->
<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <form @submit.prevent="createStore">
        <!-- Parent Merchant Selection -->
        <div class="mb-6">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Parent Merchant</h3>
            <div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
                <p class="text-sm text-blue-800 dark:text-blue-300">
                    <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
                    Stores are storefronts/brands under a merchant. Select the parent merchant for this store.
                </p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Merchant <span class="text-red-500">*</span>
                </label>
                <select
                    x-model="formData.merchant_id"
                    required
                    :disabled="loadingMerchants"
                    class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                >
                    <option value="">Select a merchant...</option>
                    <template x-for="merchant in merchants" :key="merchant.id">
                        <option :value="merchant.id" x-text="`${merchant.name} (ID: ${merchant.id})`"></option>
                    </template>
                </select>
                <p class="mt-1 text-xs text-gray-500">The merchant this store belongs to</p>
            </div>
        </div>

        <!-- Store Information Section -->
        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Store Information</h3>

            <div class="grid gap-6 mb-4 md:grid-cols-2">
                <!-- Store Code -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        Store Code <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        x-model="formData.store_code"
                        required
                        minlength="2"
                        maxlength="50"
                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600 uppercase"
                        placeholder="TECHSTORE"
                        @input="formData.store_code = $event.target.value.toUpperCase()"
                    />
                    <p class="mt-1 text-xs text-gray-500">Unique identifier (uppercase, 2-50 chars)</p>
                </div>

                <!-- Subdomain -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        Subdomain <span class="text-red-500">*</span>
                    </label>
                    <div class="flex items-center">
                        <input
                            type="text"
                            x-model="formData.subdomain"
                            required
                            minlength="2"
                            maxlength="100"
                            pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
                            class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                            placeholder="techstore"
                            @input="formData.subdomain = $event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')"
                        />
                        <span class="ml-2 text-sm text-gray-500">.example.com</span>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Lowercase letters, numbers, and hyphens only</p>
                </div>
            </div>

            <div class="grid gap-6 mb-4 md:grid-cols-2">
                <!-- Store Name -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        Display Name <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        x-model="formData.name"
                        required
                        minlength="2"
                        maxlength="255"
                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                        placeholder="Tech Store Luxembourg"
                    />
                </div>

                <!-- Auto-generate subdomain from name -->
                <div class="flex items-end">
                    <button
                        type="button"
                        @click="autoGenerateSubdomain()"
                        class="px-4 py-2 text-sm font-medium text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-gray-700"
                    >
                        <span class="flex items-center">
                            <span x-html="$icon('sparkles', 'w-4 h-4 mr-2')"></span>
                            Auto-generate Subdomain
                        </span>
                    </button>
                </div>
            </div>

            <!-- Description -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                    Description
                </label>
                <textarea
                    x-model="formData.description"
                    rows="3"
                    class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                    placeholder="Brief description of the store/brand..."
                ></textarea>
            </div>
        </div>

        <!-- Platform Selection Section -->
        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Platform Access</h3>
            <div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
                <p class="text-sm text-blue-800 dark:text-blue-300">
                    <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
                    Select which platforms this store should have access to. Each platform can have different settings and features.
                </p>
            </div>

            <div class="space-y-2 max-h-48 overflow-y-auto">
                <template x-for="platform in platforms" :key="platform.id">
                    <label class="flex items-center p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 cursor-pointer transition-colors">
                        <input
                            type="checkbox"
                            :value="platform.id"
                            x-model="formData.platform_ids"
                            class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700"
                        >
                        <div class="ml-3 flex-1">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="platform.name"></span>
                            <span class="ml-2 text-xs text-gray-500 dark:text-gray-400" x-text="'(' + platform.code + ')'"></span>
                        </div>
                        <template x-if="platform.description">
                            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="platform.description"></span>
                        </template>
                    </label>
                </template>
            </div>
            <p x-show="platforms.length === 0" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                No platforms available. Create a platform first.
            </p>
            <p x-show="formData.platform_ids.length === 0 && platforms.length > 0" class="text-xs text-amber-600 dark:text-amber-400 mt-2">
                <span x-html="$icon('exclamation-triangle', 'w-4 h-4 inline mr-1')"></span>
                Select at least one platform for the store to be accessible.
            </p>
        </div>

        <!-- Marketplace URLs Section (Optional) -->
        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Marketplace URLs (Optional)</h3>
            <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                CSV feed URLs for product import from Letzshop marketplace
            </p>

            <div class="grid gap-6 md:grid-cols-1">
                <!-- French CSV URL -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        French CSV URL
                    </label>
                    <input
                        type="url"
                        x-model="formData.letzshop_csv_url_fr"
                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                        placeholder="https://letzshop.lu/feeds/store-fr.csv"
                    />
                </div>

                <!-- English CSV URL -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        English CSV URL
                    </label>
                    <input
                        type="url"
                        x-model="formData.letzshop_csv_url_en"
                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                        placeholder="https://letzshop.lu/feeds/store-en.csv"
                    />
                </div>

                <!-- German CSV URL -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
                        German CSV URL
                    </label>
                    <input
                        type="url"
                        x-model="formData.letzshop_csv_url_de"
                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
                        placeholder="https://letzshop.lu/feeds/store-de.csv"
                    />
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
            <button
                type="button"
                @click="window.location.href='/admin/stores'"
                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-500 focus:outline-none focus:shadow-outline-gray"
            >
                Cancel
            </button>
            <button
                type="submit"
                :disabled="loading || loadingMerchants || !formData.merchant_id"
                class="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">Create Store</span>
                <span x-show="loading" class="flex items-center">
                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
                    Creating...
                </span>
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('tenancy_static', path='admin/js/store-create.js') }}"></script>
{% endblock %}