{# app/templates/platform/signup.html #}
{# 3-Step Signup Wizard: Plan → Account → Payment #}
{% extends "platform/base.html" %}

{% block title %}{{ _("cms.platform.signup.page_title") }} - {{ platform.name if platform else 'Orion' }}{% endblock %}

{% block extra_head %}
{# Stripe.js for payment #}
<script defer src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block content %}
<div x-data="signupWizard()" class="min-h-screen py-12 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">

        {# Progress Steps #}
        <div class="mb-12">
            <div class="flex items-center justify-between">
                <template x-for="(stepName, index) in ['{{ _("cms.platform.signup.step_plan") }}', '{{ _("cms.platform.signup.step_account") }}', '{{ _("cms.platform.signup.step_payment") }}']" :key="index">
                    <div class="flex items-center" :class="index < 2 ? 'flex-1' : ''">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full font-semibold transition-colors"
                             :class="currentStep > index + 1 ? 'bg-green-500 text-white' : currentStep === index + 1 ? 'bg-indigo-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-500'">
                            <template x-if="currentStep > index + 1">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                            </template>
                            <template x-if="currentStep <= index + 1">
                                <span x-text="index + 1"></span>
                            </template>
                        </div>
                        <span class="ml-2 text-sm font-medium hidden sm:inline"
                              :class="currentStep >= index + 1 ? 'text-gray-900 dark:text-white' : 'text-gray-500'"
                              x-text="stepName"></span>
                        <template x-if="index < 2">
                            <div class="flex-1 h-1 mx-4 bg-gray-200 dark:bg-gray-700 rounded">
                                <div class="h-full bg-indigo-600 rounded transition-all"
                                     :style="'width: ' + (currentStep > index + 1 ? '100%' : '0%')"></div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </div>

        {# Form Card #}
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">

            {# ===============================================================
               STEP 1: SELECT PLAN
            =============================================================== #}
            <div x-show="currentStep === 1" class="p-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">{{ _("cms.platform.signup.choose_plan") }}</h2>

                {# Billing Toggle #}
                <div class="flex items-center justify-center mb-8 space-x-4">
                    <span :class="!isAnnual ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-500'">{{ _("cms.platform.pricing.monthly") }}</span>
                    <button @click="isAnnual = !isAnnual"
                            class="relative w-12 h-6 rounded-full transition-colors"
                            :class="isAnnual ? 'bg-indigo-600' : 'bg-gray-300'">
                        <span class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow transition-transform"
                              :class="isAnnual ? 'translate-x-6' : ''"></span>
                    </button>
                    <span :class="isAnnual ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-500'">
                        {{ _("cms.platform.pricing.annual") }} <span class="text-green-600 text-xs">{{ _("cms.platform.signup.save_percent", percent=17) }}</span>
                    </span>
                </div>

                {# Tier Options #}
                <div class="space-y-4">
                    {% for tier in tiers %}
                    {% if not tier.is_enterprise %}
                    <label class="block">
                        <input type="radio" name="tier" value="{{ tier.code }}"
                               x-model="selectedTier" class="hidden peer"/>
                        <div class="p-4 border-2 rounded-xl cursor-pointer transition-all
                                    peer-checked:border-indigo-500 peer-checked:bg-indigo-50 dark:peer-checked:bg-indigo-900/20
                                    border-gray-200 dark:border-gray-700 hover:border-gray-300">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="font-semibold text-gray-900 dark:text-white">{{ tier.name }}</h3>
                                    <p class="text-sm text-gray-500">
                                        {% if tier.orders_per_month %}{{ tier.orders_per_month }} {{ _("cms.platform.signup.orders_per_month") }}{% else %}{{ _("cms.platform.signup.unlimited") }}{% endif %}
                                        &bull;
                                        {% if tier.team_members %}{{ tier.team_members }} {{ _("cms.platform.signup.team_members", count=tier.team_members) }}{% else %}{{ _("cms.platform.signup.unlimited") }}{% endif %}
                                    </p>
                                </div>
                                <div class="text-right">
                                    <template x-if="!isAnnual">
                                        <span class="text-xl font-bold text-gray-900 dark:text-white">{{ tier.price_monthly|int }}&euro;{{ _("cms.platform.signup.per_month_short") }}</span>
                                    </template>
                                    <template x-if="isAnnual">
                                        <span class="text-xl font-bold text-gray-900 dark:text-white">{{ ((tier.price_annual or tier.price_monthly * 12) / 12)|round(0)|int }}&euro;{{ _("cms.platform.signup.per_month_short") }}</span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </label>
                    {% endif %}
                    {% endfor %}
                </div>

                {# Free Trial Note #}
                <div class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-xl">
                    <p class="text-sm text-green-800 dark:text-green-300">
                        <strong>{{ trial_days }}-{{ _("cms.platform.signup.trial_info_days") }}</strong>
                        {{ _("cms.platform.signup.trial_info") }}
                    </p>
                </div>

                <button @click="startSignup()"
                        :disabled="!selectedTier || loading"
                        class="mt-8 w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition-colors disabled:opacity-50">
                    {{ _("cms.platform.signup.continue") }}
                </button>
            </div>

            {# ===============================================================
               STEP 2: CREATE ACCOUNT
            =============================================================== #}
            <div x-show="currentStep === 2" class="p-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.signup.create_account") }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
                    <span class="text-red-500">*</span> {{ _("cms.platform.signup.required_fields") }}
                </p>

                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ _("cms.platform.signup.first_name") }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" x-model="account.firstName" required
                                   class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"/>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                {{ _("cms.platform.signup.last_name") }} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" x-model="account.lastName" required
                                   class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"/>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _("cms.platform.signup.merchant_name") }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" x-model="account.merchantName" required
                               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"/>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _("cms.platform.signup.email") }} <span class="text-red-500">*</span>
                        </label>
                        <input type="email" x-model="account.email" required
                               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"/>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _("cms.platform.signup.password") }} <span class="text-red-500">*</span>
                        </label>
                        <input type="password" x-model="account.password" required minlength="8"
                               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"/>
                        <p class="text-xs text-gray-500 mt-1">{{ _("cms.platform.signup.password_hint") }}</p>
                    </div>

                    <template x-if="accountError">
                        <div class="p-4 bg-red-50 dark:bg-red-900/20 rounded-xl">
                            <p class="text-red-800 dark:text-red-300" x-text="accountError"></p>
                        </div>
                    </template>
                </div>

                <div class="mt-8 flex gap-4">
                    <button @click="currentStep = 1"
                            class="flex-1 py-3 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-semibold rounded-xl">
                        {{ _("cms.platform.signup.back") }}
                    </button>
                    <button @click="createAccount()"
                            :disabled="loading || !isAccountValid()"
                            class="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl disabled:opacity-50">
                        {{ _("cms.platform.signup.continue_payment") }}
                    </button>
                </div>
            </div>

            {# ===============================================================
               STEP 3: PAYMENT
            =============================================================== #}
            <div x-show="currentStep === 3" class="p-8">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.signup.add_payment") }}</h2>
                <p class="text-gray-600 dark:text-gray-400 mb-6">{{ _("cms.platform.signup.no_charge_note", trial_days=trial_days) }}</p>

                {# Stripe Card Element #}
                <div id="card-element" class="p-4 border border-gray-300 dark:border-gray-600 rounded-xl bg-gray-50 dark:bg-gray-900"></div>
                <div id="card-errors" class="text-red-600 text-sm mt-2"></div>

                <div class="mt-8 flex gap-4">
                    <button @click="currentStep = 2"
                            class="flex-1 py-3 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-semibold rounded-xl">
                        {{ _("cms.platform.signup.back") }}
                    </button>
                    <button @click="submitPayment()"
                            :disabled="loading || paymentProcessing"
                            class="flex-1 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-xl disabled:opacity-50">
                        <template x-if="paymentProcessing">
                            <span>{{ _("cms.platform.signup.processing") }}</span>
                        </template>
                        <template x-if="!paymentProcessing">
                            <span>{{ _("cms.platform.signup.start_trial") }}</span>
                        </template>
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function signupWizard() {
    const MSGS = {
        failedStart: '{{ _("cms.platform.signup.error_start") }}',
        failedAccount: '{{ _("cms.platform.signup.error_account") }}',
        paymentNotConfigured: '{{ _("cms.platform.signup.error_payment_config") }}',
        paymentFailed: '{{ _("cms.platform.signup.error_payment") }}',
    };

    return {
        currentStep: 1,
        loading: false,
        sessionId: null,

        // Step 1: Plan
        selectedTier: '{{ selected_tier or "professional" }}',
        isAnnual: {{ 'true' if is_annual else 'false' }},

        // Step 2: Account
        account: {
            firstName: '',
            lastName: '',
            merchantName: '',
            email: '',
            password: ''
        },
        accountError: null,

        // Step 3: Payment
        stripe: null,
        cardElement: null,
        paymentProcessing: false,
        clientSecret: null,

        init() {
            // Check URL params for pre-selection
            const params = new URLSearchParams(window.location.search);
            if (params.get('tier')) {
                this.selectedTier = params.get('tier');
            }
            if (params.get('annual') === 'true') {
                this.isAnnual = true;
            }

            // Initialize Stripe when we get to step 3
            this.$watch('currentStep', (step) => {
                if (step === 3) {
                    this.initStripe();
                }
            });
        },

        async startSignup() {
            this.loading = true;
            try {
                const response = await fetch('/api/v1/platform/signup/start', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        tier_code: this.selectedTier,
                        is_annual: this.isAnnual,
                        platform_code: '{{ platform.code }}',
                        language: '{{ current_language|default("fr") }}'
                    })
                });

                const data = await response.json();
                if (response.ok) {
                    this.sessionId = data.session_id;
                    this.currentStep = 2;
                } else {
                    alert(data.detail || MSGS.failedStart);
                }
            } catch (error) {
                console.error('Error:', error);
                alert(MSGS.failedStart);
            } finally {
                this.loading = false;
            }
        },

        isAccountValid() {
            return this.account.firstName.trim() &&
                   this.account.lastName.trim() &&
                   this.account.merchantName.trim() &&
                   this.account.email.trim() &&
                   this.account.password.length >= 8;
        },

        async createAccount() {
            this.loading = true;
            this.accountError = null;

            try {
                const response = await fetch('/api/v1/platform/signup/create-account', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        session_id: this.sessionId,
                        email: this.account.email,
                        password: this.account.password,
                        first_name: this.account.firstName,
                        last_name: this.account.lastName,
                        merchant_name: this.account.merchantName
                    })
                });

                const data = await response.json();
                if (response.ok) {
                    this.currentStep = 3;
                } else {
                    this.accountError = data.detail || MSGS.failedAccount;
                }
            } catch (error) {
                console.error('Error:', error);
                this.accountError = MSGS.failedAccount;
            } finally {
                this.loading = false;
            }
        },

        async initStripe() {
            {% if stripe_publishable_key %}
            this.stripe = Stripe('{{ stripe_publishable_key }}');
            const elements = this.stripe.elements();

            this.cardElement = elements.create('card', {
                style: {
                    base: {
                        fontSize: '16px',
                        color: '#374151',
                        '::placeholder': { color: '#9CA3AF' }
                    }
                }
            });

            this.cardElement.mount('#card-element');
            this.cardElement.on('change', (event) => {
                const displayError = document.getElementById('card-errors');
                displayError.textContent = event.error ? event.error.message : '';
            });

            // Get SetupIntent
            try {
                const response = await fetch('/api/v1/platform/signup/setup-payment', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ session_id: this.sessionId })
                });

                const data = await response.json();
                if (response.ok) {
                    this.clientSecret = data.client_secret;
                }
            } catch (error) {
                console.error('Error getting SetupIntent:', error);
            }
            {% else %}
            console.warn('Stripe not configured');
            {% endif %}
        },

        async submitPayment() {
            if (!this.stripe || !this.clientSecret) {
                alert(MSGS.paymentNotConfigured);
                return;
            }

            this.paymentProcessing = true;

            try {
                const { setupIntent, error } = await this.stripe.confirmCardSetup(
                    this.clientSecret,
                    { payment_method: { card: this.cardElement } }
                );

                if (error) {
                    document.getElementById('card-errors').textContent = error.message;
                    this.paymentProcessing = false;
                    return;
                }

                // Complete signup
                const response = await fetch('/api/v1/platform/signup/complete', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        session_id: this.sessionId,
                        setup_intent_id: setupIntent.id
                    })
                });

                const data = await response.json();
                if (response.ok) {
                    // Store access token for automatic login
                    if (data.access_token) {
                        localStorage.setItem('store_token', data.access_token);
                        localStorage.setItem('storeCode', data.store_code);
                    }
                    window.location.href = '/signup/success?store_code=' + data.store_code;
                } else {
                    alert(data.detail || MSGS.paymentFailed);
                }
            } catch (error) {
                console.error('Payment error:', error);
                alert(MSGS.paymentFailed);
            } finally {
                this.paymentProcessing = false;
            }
        }
    };
}
</script>
{% endblock %}