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

{% block title %}My Profile - {{ vendor.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 }}shop/account/dashboard" class="hover:text-primary">My 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">Profile</span>
            </li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">My Profile</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Manage your account information and preferences</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">Profile Information</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Update your personal details</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">
                            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">
                            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">
                        Email Address <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">
                        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 ? 'Saving...' : 'Save Changes'"></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">Preferences</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Manage your account preferences</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">
                        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="">Use shop default</option>
                        <option value="en">English</option>
                        <option value="fr">Francais</option>
                        <option value="de">Deutsch</option>
                        <option value="lb">Letzebuergesch</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">
                            Marketing Communications
                        </label>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Receive emails about new products, offers, and promotions
                        </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 ? 'Saving...' : 'Save Preferences'"></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">Change Password</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">Update your account password</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">
                        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">
                        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">
                        Must be at least 8 characters with at least one letter and one number
                    </p>
                </div>

                <!-- Confirm Password -->
                <div>
                    <label for="confirm_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Confirm New 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">
                        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 ? 'Changing...' : 'Change Password'"></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">Account Information</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">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">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">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">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>
function shopProfilePage() {
    return {
        ...shopLayoutData(),

        // 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 }}shop/account/login?next=' + encodeURIComponent(window.location.pathname);
                    return;
                }

                const response = await fetch('/api/v1/shop/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 }}shop/account/login?next=' + encodeURIComponent(window.location.pathname);
                        return;
                    }
                    throw new Error('Failed to load profile');
                }

                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 || 'Failed to load profile';
            } 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 }}shop/account/login';
                    return;
                }

                const response = await fetch('/api/v1/shop/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 || 'Failed to save profile');
                }

                this.profile = await response.json();
                this.successMessage = 'Profile updated successfully';

                // 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 || 'Failed to save profile';
            } 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 }}shop/account/login';
                    return;
                }

                const response = await fetch('/api/v1/shop/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 || 'Failed to save preferences');
                }

                this.profile = await response.json();
                this.successMessage = 'Preferences updated successfully';
                setTimeout(() => this.successMessage = '', 5000);

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

        async changePassword() {
            if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
                this.passwordError = 'Passwords do not match';
                return;
            }

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

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

                const response = await fetch('/api/v1/shop/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 || 'Failed to change password');
                }

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

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

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

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

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