{# app/templates/storefront/account/profile.html #}
{% extends "storefront/base.html" %}

{% block title %}{{ _('customers.storefront.pages.profile.title') }} - {{ store.name }}{% endblock %}

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

{% block content %}
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
            <li>
                <a href="{{ base_url }}account/dashboard" class="hover:text-primary">{{ _('customers.storefront.pages.profile.breadcrumb_account') }}</a>
            </li>
            <li class="flex items-center">
                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                <span class="text-gray-900 dark:text-white">{{ _('customers.storefront.pages.profile.breadcrumb_profile') }}</span>
            </li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ _('customers.storefront.pages.profile.title') }}</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">{{ _('customers.storefront.pages.profile.subtitle') }}</p>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="flex justify-center items-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary" style="border-color: var(--color-primary)"></div>
    </div>

    <!-- Error State -->
    <div x-show="error && !loading" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
        <div class="flex">
            <span class="h-5 w-5 text-red-400" x-html="$icon('x-circle', 'h-5 w-5')"></span>
            <p class="ml-3 text-sm text-red-700 dark:text-red-300" x-text="error"></p>
        </div>
    </div>

    <!-- Success Message -->
    <div x-show="successMessage"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform -translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 transform translate-y-0"
         x-transition:leave-end="opacity-0 transform -translate-y-2"
         class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-6">
        <div class="flex">
            <span class="h-5 w-5 text-green-400" x-html="$icon('check-circle', 'h-5 w-5')"></span>
            <p class="ml-3 text-sm text-green-700 dark:text-green-300" x-text="successMessage"></p>
        </div>
    </div>

    <div x-show="!loading" class="space-y-8">
        <!-- Profile Information Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ _('customers.storefront.pages.profile.info_section_title') }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('customers.storefront.pages.profile.info_section_subtitle') }}</p>
            </div>
            <form @submit.prevent="saveProfile" class="p-6 space-y-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <!-- First Name -->
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _('customers.customers.first_name') }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="first_name" x-model="profileForm.first_name" required
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                      focus:ring-2 focus:ring-primary focus:border-transparent
                                      dark:bg-gray-700 dark:text-white"
                               style="--tw-ring-color: var(--color-primary)">
                    </div>

                    <!-- Last Name -->
                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            {{ _('customers.customers.last_name') }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="last_name" x-model="profileForm.last_name" required
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                      focus:ring-2 focus:ring-primary focus:border-transparent
                                      dark:bg-gray-700 dark:text-white"
                               style="--tw-ring-color: var(--color-primary)">
                    </div>
                </div>

                <!-- Email -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('customers.storefront.pages.profile.email_label') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="email" id="email" x-model="profileForm.email" required
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)">
                </div>

                <!-- Phone -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('auth.phone_number') }}
                    </label>
                    <input type="tel" id="phone" x-model="profileForm.phone"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)">
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end">
                    <button type="submit"
                            :disabled="savingProfile"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm
                                   text-sm font-medium text-white bg-primary hover:bg-primary-dark
                                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary
                                   disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                            style="background-color: var(--color-primary)">
                        <span x-show="savingProfile" class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                        <span x-text="savingProfile ? i18n.saving : i18n.saveChanges"></span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Preferences Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ _('customers.storefront.pages.profile.prefs_section_title') }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('customers.storefront.pages.profile.prefs_section_subtitle') }}</p>
            </div>
            <form @submit.prevent="savePreferences" class="p-6 space-y-6">
                <!-- Language -->
                <div>
                    <label for="language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('customers.storefront.pages.profile.preferred_language') }}
                    </label>
                    <select id="language" x-model="preferencesForm.preferred_language"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                   focus:ring-2 focus:ring-primary focus:border-transparent
                                   dark:bg-gray-700 dark:text-white"
                            style="--tw-ring-color: var(--color-primary)">
                        <option value="">{{ _('customers.storefront.pages.profile.use_shop_default') }}</option>
                        <option value="en">English</option>
                        <option value="fr">Français</option>
                        <option value="de">Deutsch</option>
                        <option value="lb">Lëtzebuergesch</option>
                    </select>
                </div>

                <!-- Marketing Consent -->
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input type="checkbox" id="marketing_consent" x-model="preferencesForm.marketing_consent"
                               class="h-4 w-4 rounded border-gray-300 dark:border-gray-600
                                      focus:ring-2 focus:ring-primary
                                      dark:bg-gray-700"
                               style="color: var(--color-primary)">
                    </div>
                    <div class="ml-3">
                        <label for="marketing_consent" class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ _('customers.storefront.pages.profile.marketing_communications') }}
                        </label>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            {{ _('customers.storefront.pages.profile.marketing_desc') }}
                        </p>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end">
                    <button type="submit"
                            :disabled="savingPreferences"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm
                                   text-sm font-medium text-white bg-primary hover:bg-primary-dark
                                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary
                                   disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                            style="background-color: var(--color-primary)">
                        <span x-show="savingPreferences" class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                        <span x-text="savingPreferences ? i18n.saving : i18n.savePreferences"></span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Change Password Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ _('auth.change_password') }}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('customers.storefront.pages.profile.change_password_subtitle') }}</p>
            </div>
            <form @submit.prevent="changePassword" class="p-6 space-y-6">
                <!-- Current Password -->
                <div>
                    <label for="current_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('auth.current_password') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="password" id="current_password" x-model="passwordForm.current_password" required
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)">
                </div>

                <!-- New Password -->
                <div>
                    <label for="new_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('auth.new_password') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="password" id="new_password" x-model="passwordForm.new_password" required
                           minlength="8"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        {{ _('auth.password_requirements') }}
                    </p>
                </div>

                <!-- Confirm Password -->
                <div>
                    <label for="confirm_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ _('auth.confirm_password') }} <span class="text-red-500">*</span>
                    </label>
                    <input type="password" id="confirm_password" x-model="passwordForm.confirm_password" required
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)">
                    <p x-show="passwordForm.confirm_password && passwordForm.new_password !== passwordForm.confirm_password"
                       class="mt-1 text-xs text-red-500">
                        {{ _('auth.passwords_do_not_match') }}
                    </p>
                </div>

                <!-- Password Error -->
                <div x-show="passwordError" class="text-sm text-red-600 dark:text-red-400" x-text="passwordError"></div>

                <!-- Submit Button -->
                <div class="flex justify-end">
                    <button type="submit"
                            :disabled="changingPassword || passwordForm.new_password !== passwordForm.confirm_password"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm
                                   text-sm font-medium text-white bg-primary hover:bg-primary-dark
                                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary
                                   disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                            style="background-color: var(--color-primary)">
                        <span x-show="changingPassword" class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                        <span x-text="changingPassword ? i18n.changing : i18n.changePassword"></span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Account Info (read-only) -->
        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">{{ _('customers.storefront.pages.profile.account_info') }}</h3>
            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                <div>
                    <dt class="text-gray-500 dark:text-gray-400">{{ _('customers.customers.customer_number') }}</dt>
                    <dd class="mt-1 text-gray-900 dark:text-white font-medium" x-text="profile?.customer_number || '-'"></dd>
                </div>
                <div>
                    <dt class="text-gray-500 dark:text-gray-400">{{ _('customers.storefront.pages.profile.member_since') }}</dt>
                    <dd class="mt-1 text-gray-900 dark:text-white font-medium" x-text="formatDate(profile?.created_at)"></dd>
                </div>
                <div>
                    <dt class="text-gray-500 dark:text-gray-400">{{ _('customers.customers.total_orders') }}</dt>
                    <dd class="mt-1 text-gray-900 dark:text-white font-medium" x-text="profile?.total_orders || 0"></dd>
                </div>
                <div>
                    <dt class="text-gray-500 dark:text-gray-400">{{ _('customers.customers.total_spent') }}</dt>
                    <dd class="mt-1 text-gray-900 dark:text-white font-medium" x-text="formatPrice(profile?.total_spent)"></dd>
                </div>
            </dl>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
window.__shopProfileI18n = {
    saving: {{ _('customers.storefront.pages.profile.saving')|tojson }},
    saveChanges: {{ _('customers.storefront.pages.profile.save_changes')|tojson }},
    savePreferences: {{ _('customers.storefront.pages.profile.save_preferences')|tojson }},
    changing: {{ _('customers.storefront.pages.profile.changing')|tojson }},
    changePassword: {{ _('auth.change_password')|tojson }},
    profileUpdated: {{ _('customers.storefront.pages.profile.profile_updated')|tojson }},
    preferencesUpdated: {{ _('customers.storefront.pages.profile.preferences_updated')|tojson }},
    passwordChanged: {{ _('customers.storefront.pages.profile.password_changed')|tojson }},
    failedToLoad: {{ _('customers.storefront.pages.profile.failed_to_load')|tojson }},
    failedToSaveProfile: {{ _('customers.storefront.pages.profile.failed_to_save_profile')|tojson }},
    failedToSavePreferences: {{ _('customers.storefront.pages.profile.failed_to_save_preferences')|tojson }},
    failedToChangePassword: {{ _('customers.storefront.pages.profile.failed_to_change_password')|tojson }},
    passwordsDoNotMatch: {{ _('auth.passwords_do_not_match')|tojson }},
};
function shopProfilePage() {
    const i18n = window.__shopProfileI18n || {};
    return {
        ...storefrontLayoutData(),
        i18n,

        // State
        profile: null,
        loading: true,
        error: '',
        successMessage: '',

        // Forms
        profileForm: {
            first_name: '',
            last_name: '',
            email: '',
            phone: ''
        },
        preferencesForm: {
            preferred_language: '',
            marketing_consent: false
        },
        passwordForm: {
            current_password: '',
            new_password: '',
            confirm_password: ''
        },

        // Form states
        savingProfile: false,
        savingPreferences: false,
        changingPassword: false,
        passwordError: '',

        async init() {
            await this.loadProfile();
        },

        async loadProfile() {
            this.loading = true;
            this.error = '';

            try {
                const token = localStorage.getItem('customer_token');
                if (!token) {
                    window.location.href = '{{ base_url }}account/login?next=' + encodeURIComponent(window.location.pathname);
                    return;
                }

                const response = await fetch('/api/v1/storefront/profile', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });

                if (!response.ok) {
                    if (response.status === 401) {
                        localStorage.removeItem('customer_token');
                        localStorage.removeItem('customer_user');
                        window.location.href = '{{ base_url }}account/login?next=' + encodeURIComponent(window.location.pathname);
                        return;
                    }
                    throw new Error(i18n.failedToLoad);
                }

                this.profile = await response.json();

                // Populate forms
                this.profileForm = {
                    first_name: this.profile.first_name || '',
                    last_name: this.profile.last_name || '',
                    email: this.profile.email || '',
                    phone: this.profile.phone || ''
                };
                this.preferencesForm = {
                    preferred_language: this.profile.preferred_language || '',
                    marketing_consent: this.profile.marketing_consent || false
                };

            } catch (err) {
                console.error('Error loading profile:', err);
                this.error = err.message || i18n.failedToLoad;
            } finally {
                this.loading = false;
            }
        },

        async saveProfile() {
            this.savingProfile = true;
            this.error = '';
            this.successMessage = '';

            try {
                const token = localStorage.getItem('customer_token');
                if (!token) {
                    window.location.href = '{{ base_url }}account/login';
                    return;
                }

                const response = await fetch('/api/v1/storefront/profile', {
                    method: 'PUT',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.profileForm)
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.detail || i18n.failedToSaveProfile);
                }

                this.profile = await response.json();
                this.successMessage = i18n.profileUpdated;

                // Update localStorage user data
                const userStr = localStorage.getItem('customer_user');
                if (userStr) {
                    const user = JSON.parse(userStr);
                    user.first_name = this.profile.first_name;
                    user.last_name = this.profile.last_name;
                    user.email = this.profile.email;
                    localStorage.setItem('customer_user', JSON.stringify(user));
                }

                setTimeout(() => this.successMessage = '', 5000);

            } catch (err) {
                console.error('Error saving profile:', err);
                this.error = err.message || i18n.failedToSaveProfile;
            } finally {
                this.savingProfile = false;
            }
        },

        async savePreferences() {
            this.savingPreferences = true;
            this.error = '';
            this.successMessage = '';

            try {
                const token = localStorage.getItem('customer_token');
                if (!token) {
                    window.location.href = '{{ base_url }}account/login';
                    return;
                }

                const response = await fetch('/api/v1/storefront/profile', {
                    method: 'PUT',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.preferencesForm)
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.detail || i18n.failedToSavePreferences);
                }

                this.profile = await response.json();
                this.successMessage = i18n.preferencesUpdated;
                setTimeout(() => this.successMessage = '', 5000);

            } catch (err) {
                console.error('Error saving preferences:', err);
                this.error = err.message || i18n.failedToSavePreferences;
            } finally {
                this.savingPreferences = false;
            }
        },

        async changePassword() {
            if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
                this.passwordError = i18n.passwordsDoNotMatch;
                return;
            }

            this.changingPassword = true;
            this.passwordError = '';
            this.successMessage = '';

            try {
                const token = localStorage.getItem('customer_token');
                if (!token) {
                    window.location.href = '{{ base_url }}account/login';
                    return;
                }

                const response = await fetch('/api/v1/storefront/profile/password', {
                    method: 'PUT',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.passwordForm)
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.detail || i18n.failedToChangePassword);
                }

                // Clear password form
                this.passwordForm = {
                    current_password: '',
                    new_password: '',
                    confirm_password: ''
                };

                this.successMessage = i18n.passwordChanged;
                setTimeout(() => this.successMessage = '', 5000);

            } catch (err) {
                console.error('Error changing password:', err);
                this.passwordError = err.message || i18n.failedToChangePassword;
            } finally {
                this.changingPassword = false;
            }
        },

        // formatPrice is inherited from storefrontLayoutData() via spread operator

        formatDate(dateStr) {
            if (!dateStr) return '-';
            return new Date(dateStr).toLocaleDateString('de-DE', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
        }
    }
}
</script>
{% endblock %}