{# app/templates/store/onboarding.html #}
{# standalone #}
<!DOCTYPE html>
<html :class="{ 'dark': dark }" x-data="storeOnboarding()" lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to Orion - Setup Your Account</title>
    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="{{ url_for('static', path='store/css/tailwind.output.css') }}" />
    <style>
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900">
    <div class="min-h-screen p-6" x-cloak>
        <!-- Header -->
        <div class="max-w-4xl mx-auto mb-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center">
                        <span class="text-white font-bold text-xl">W</span>
                    </div>
                    <span class="text-xl font-semibold text-gray-800 dark:text-white">Orion</span>
                </div>
                <!-- Logout Button -->
                <button @click="handleLogout()"
                        class="mr-4 px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                    Logout
                </button>

                <!-- Language Selector -->
                {# noqa: FE-006 - Custom language selector with flags, not suited for dropdown macro #}
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open"
                            class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                        <span x-text="languageFlags[lang]"></span>
                        <span class="text-sm text-gray-700 dark:text-gray-300 hidden sm:inline" x-text="languageNames[lang]"></span>
                        <span class="w-4 h-4 text-gray-500" x-html="$icon('chevron-down', 'w-4 h-4')"></span>
                    </button>
                    <div x-show="open" @click.away="open = false" x-cloak
                         class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-50">
                        <template x-for="langCode in availableLanguages" :key="langCode">
                            <button @click="setLang(langCode); open = false"
                                    class="w-full flex items-center space-x-2 px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t-lg last:rounded-b-lg"
                                    :class="{ 'bg-purple-50 dark:bg-purple-900/20': lang === langCode }">
                                <span x-text="languageFlags[langCode]"></span>
                                <span class="text-sm text-gray-700 dark:text-gray-300" x-text="languageNames[langCode]"></span>
                            </button>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        <!-- Progress Indicator -->
        <div class="max-w-4xl mx-auto mb-8 px-2 sm:px-0">
            <div class="flex items-center justify-between">
                <template x-for="(step, index) in steps" :key="step.id">
                    <div class="flex items-center" :class="{ 'flex-1': index < steps.length - 1 }">
                        <!-- Step Circle -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold transition-all duration-200"
                                 :class="{
                                     'bg-purple-600 text-white': isStepCompleted(step.id) || currentStep === step.id,
                                     'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400': !isStepCompleted(step.id) && currentStep !== step.id
                                 }">
                                <template x-if="isStepCompleted(step.id)">
                                    <span class="w-4 h-4 sm:w-5 sm:h-5" x-html="$icon('check', 'w-4 h-4 sm:w-5 sm:h-5')"></span>
                                </template>
                                <template x-if="!isStepCompleted(step.id)">
                                    <span x-text="index + 1"></span>
                                </template>
                            </div>
                            <span class="mt-2 text-xs font-medium text-gray-600 dark:text-gray-400 text-center w-16 sm:w-24 hidden sm:block"
                                  x-text="step.title"></span>
                        </div>
                        <!-- Connector Line -->
                        <template x-if="index < steps.length - 1">
                            <div class="flex-1 h-1 mx-1 sm:mx-4 rounded"
                                 :class="{
                                     'bg-purple-600': isStepCompleted(step.id),
                                     'bg-gray-200 dark:bg-gray-700': !isStepCompleted(step.id)
                                 }"></div>
                        </template>
                    </div>
                </template>
            </div>
        </div>

        <!-- Main Content Card -->
        <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <!-- Loading State -->
            <div x-show="loading" class="p-12 text-center">
                <span class="inline-block w-8 h-8 text-purple-600" x-html="$icon('spinner', 'w-8 h-8 animate-spin')"></span>
                <p class="mt-4 text-gray-600 dark:text-gray-400" x-text="t('loading')"></p>
            </div>

            <!-- Error State -->
            <div x-show="error && !loading" class="p-6">
                <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-4 text-center">
                    <p class="text-red-600 dark:text-red-400" x-text="error"></p>
                    <button @click="loadStatus()" class="mt-4 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700" x-text="t('buttons.retry')">
                    </button>
                </div>
            </div>

            <!-- Step Content -->
            <div x-show="!loading && !error">
                <!-- Step 1: Merchant Profile -->
                <div x-show="currentStep === 'merchant_profile'" x-transition>
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step1.title')"></h2>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step1.description')"></p>
                    </div>
                    <div class="p-6 space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.merchant_name')"></label>
                                <input type="text" x-model="formData.merchant_name"
                                       class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.brand_name')"></label>
                                <input type="text" x-model="formData.brand_name"
                                       class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.description_label')"></label>
                            <textarea x-model="formData.description" rows="3" :placeholder="t('step1.description_placeholder')"
                                      class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500"></textarea>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.contact_email')"></label>
                                <input type="email" x-model="formData.contact_email"
                                       class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.contact_phone')"></label>
                                <input type="tel" x-model="formData.contact_phone"
                                       class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.website')"></label>
                                <input type="url" x-model="formData.website"
                                       class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.tax_number')"></label>
                                <input type="text" x-model="formData.tax_number" :placeholder="t('step1.tax_number_placeholder')"
                                       class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.business_address')"></label>
                            <textarea x-model="formData.business_address" rows="2"
                                      class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500"></textarea>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.default_language')"></label>
                                <select x-model="formData.default_language"
                                        class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
                                    <option value="fr">Français</option>
                                    <option value="en">English</option>
                                    <option value="de">Deutsch</option>
                                    <option value="lb">Lëtzebuergesch</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.dashboard_language')"></label>
                                <select x-model="formData.dashboard_language"
                                        class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
                                    <option value="fr">Français</option>
                                    <option value="en">English</option>
                                    <option value="de">Deutsch</option>
                                    <option value="lb">Lëtzebuergesch</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 2: Letzshop API -->
                <div x-show="currentStep === 'letzshop_api'" x-transition>
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step2.title')"></h2>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step2.description')"></p>
                    </div>
                    <div class="p-6 space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step2.api_key')"></label>
                            <input type="password" x-model="formData.api_key" :placeholder="t('step2.api_key_placeholder')"
                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                <span x-text="t('step2.api_key_help')"></span> (<a href="mailto:support@letzshop.lu" class="text-purple-600 hover:underline">support@letzshop.lu</a>)
                            </p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step2.shop_slug')"></label>
                            <div class="mt-1 flex rounded-md shadow-sm">
                                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm">
                                    letzshop.lu/.../stores/
                                </span>
                                <input type="text" x-model="formData.shop_slug" placeholder="your-shop-name"
                                       class="flex-1 block w-full rounded-none rounded-r-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-purple-500 focus:ring-purple-500" />
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="t('step2.shop_slug_help')"></p>
                        </div>
                        <div class="flex items-center space-x-4">
                            <button @click="testLetzshopApi()" :disabled="saving || !formData.api_key || !formData.shop_slug"
                                    class="px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                                <span x-show="!testing" x-text="t('step2.test_connection')"></span>
                                <span x-show="testing" class="flex items-center">
                                    <span class="w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                    <span x-text="t('step2.testing')"></span>
                                </span>
                            </button>
                            <span x-show="connectionStatus === 'success'" class="text-green-600 dark:text-green-400 text-sm flex items-center">
                                <span class="w-4 h-4 mr-1" x-html="$icon('check', 'w-4 h-4')"></span>
                                <span x-text="t('step2.connection_success')"></span>
                            </span>
                            <span x-show="connectionStatus === 'failed'" class="text-red-600 dark:text-red-400 text-sm flex items-center">
                                <span class="w-4 h-4 mr-1" x-html="$icon('x-mark', 'w-4 h-4')"></span>
                                <span x-text="connectionError || t('step2.connection_failed')"></span>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Step 3: Product Import -->
                <div x-show="currentStep === 'product_import'" x-transition>
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step3.title')"></h2>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.description')"></p>
                    </div>
                    <div class="p-6 space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step3.csv_url_fr')"></label>
                            <input type="url" x-model="formData.csv_url_fr" placeholder="https://..."
                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="t('step3.csv_url_help')"></p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step3.csv_url_en') + ' (optional)'"></label>
                            <input type="url" x-model="formData.csv_url_en" placeholder="https://..."
                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step3.csv_url_de') + ' (optional)'"></label>
                            <input type="url" x-model="formData.csv_url_de" placeholder="https://..."
                                   class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                        </div>
                        <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Letzshop Feed Settings</h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div>
                                    <label class="block text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.default_tax_rate')"></label>
                                    <select x-model="formData.default_tax_rate"
                                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
                                        <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>
                                        <option value="0">0% (Exempt)</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.delivery_method')"></label>
                                    <select x-model="formData.delivery_method"
                                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
                                        <option value="package_delivery" x-text="t('step3.delivery_package')"></option>
                                        <option value="self_collect" x-text="t('step3.delivery_pickup')"></option>
                                        <option value="nationwide">Nationwide</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.preorder_days')"></label>
                                    {# noqa: FE-008 - Simple number input, not a quantity stepper pattern #}
                                    <input type="number" x-model="formData.preorder_days" min="0" max="30"
                                           class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="t('step3.preorder_days_help')"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Step 4: Order Sync -->
                <div x-show="currentStep === 'order_sync'" x-transition>
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step4.title')"></h2>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step4.description')"></p>
                    </div>
                    <div class="p-6">
                        <!-- Before Sync -->
                        <div x-show="!syncJobId">
                            <div class="mb-6">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" x-text="t('step4.days_back')"></label>
                                <select x-model="formData.days_back"
                                        class="block w-48 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
                                    <option value="30">30 <span x-text="t('step4.days')"></span></option>
                                    <option value="60">60 <span x-text="t('step4.days')"></span></option>
                                    <option value="90">90 <span x-text="t('step4.days')"></span></option>
                                    <option value="180">180 <span x-text="t('step4.days')"></span></option>
                                    <option value="365">365 <span x-text="t('step4.days')"></span></option>
                                </select>
                            </div>
                            <button @click="startOrderSync()" :disabled="saving"
                                    class="px-6 py-3 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50"
                                    x-text="saving ? t('step4.importing') : t('step4.start_import')">
                            </button>
                        </div>

                        <!-- During Sync -->
                        <div x-show="syncJobId && !syncComplete" class="text-center py-8">
                            <div class="mb-4">
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
                                    <div class="bg-purple-600 h-4 rounded-full transition-all duration-500"
                                         :style="{ width: syncProgress + '%' }"></div>
                                </div>
                            </div>
                            <p class="text-lg font-medium text-gray-800 dark:text-white">
                                <span x-text="syncProgress"></span>% Complete
                            </p>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="syncPhase"></p>
                            <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
                                <span x-text="ordersImported"></span> <span x-text="t('step4.orders_imported')"></span>
                            </p>
                        </div>

                        <!-- After Sync -->
                        <div x-show="syncComplete" class="text-center py-8">
                            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                                <span class="w-8 h-8 text-green-600 dark:text-green-400" x-html="$icon('check', 'w-8 h-8')"></span>
                            </div>
                            <p class="text-lg font-medium text-gray-800 dark:text-white" x-text="t('step4.import_complete')"></p>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                <span x-text="ordersImported"></span> <span x-text="t('step4.orders_imported')"></span>.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Footer Actions -->
                <div class="p-6 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex justify-between">
                    <button x-show="currentStepIndex > 0 && !syncJobId"
                            @click="goToPreviousStep()"
                            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 dark:hover:bg-gray-700"
                            x-text="t('buttons.back')">
                    </button>
                    <div x-show="currentStepIndex === 0"></div>

                    <button x-show="currentStep !== 'order_sync' || syncComplete"
                            @click="saveAndContinue()" :disabled="saving"
                            class="px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
                        <span x-show="!saving">
                            <span x-text="currentStep === 'order_sync' && syncComplete ? t('buttons.complete') : t('buttons.save_continue')"></span>
                        </span>
                        <span x-show="saving" class="flex items-center">
                            <span class="w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                            <span x-text="t('buttons.saving')"></span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script defer src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>
    <script defer src="{{ url_for('static', path='shared/js/icons.js') }}"></script>
    <script defer src="{{ url_for('static', path='shared/js/utils.js') }}"></script>
    <script defer src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
    <script defer src="{{ url_for('marketplace_static', path='store/js/onboarding.js') }}"></script>
</body>
</html>
