{# app/modules/tenancy/templates/tenancy/store/my-account.html #}
{% extends "store/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}

{% block title %}My Account{% endblock %}

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

{% block content %}
<!-- Page Header -->
{% call page_header_flex(title='My Account', subtitle='Manage your personal account information') %}
{% endcall %}

{{ loading_state('Loading account...') }}
{{ error_state('Error loading account') }}

<!-- Account Form -->
<div x-show="!loading && !error" class="w-full mb-8">
    <!-- Personal Information -->
    <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Personal Information</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Update your name and email address</p>
        </div>
        <div class="p-4">
            <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 mb-2">First Name</label>
                    <input type="text" x-model="form.first_name" @input="profileChanged = true"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
                    <input type="text" x-model="form.last_name" @input="profileChanged = true"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
                    <input type="email" x-model="form.email" @input="profileChanged = true"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Language</label>
                    <select x-model="form.preferred_language" @change="profileChanged = true"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400">
                        <option value="">-- Default --</option>
                        <option value="en">English</option>
                        <option value="fr">French</option>
                        <option value="de">German</option>
                        <option value="lb">Luxembourgish</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-end mt-6">
                <button @click="resetProfile()" x-show="profileChanged"
                    class="mr-3 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">Reset</button>
                <button @click="saveProfile()" :disabled="savingProfile || !profileChanged"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50">
                    <span x-show="!savingProfile">Save Changes</span>
                    <span x-show="savingProfile">Saving...</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Change Password -->
    <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Change Password</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Update your login password</p>
        </div>
        <div class="p-4">
            <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 mb-2">Current Password</label>
                    <input type="password" x-model="passwordForm.current_password"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400" />
                </div>
                <div></div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Password</label>
                    <input type="password" x-model="passwordForm.new_password"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400" />
                    <p class="mt-1 text-xs text-gray-400">Minimum 8 characters, must include a letter and a digit</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm New Password</label>
                    <input type="password" x-model="passwordForm.confirm_password"
                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400" />
                </div>
            </div>
            <div class="flex justify-end mt-6">
                <button @click="changePassword()" :disabled="changingPassword"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50">
                    <span x-show="!changingPassword">Change Password</span>
                    <span x-show="changingPassword">Changing...</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Account Info (Read Only) -->
    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-4 border-b dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Account Information</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Read-only account metadata</p>
        </div>
        <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Username</label>
                    <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="account?.username"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Role</label>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="account?.role"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Email Verified</label>
                    <span :class="account?.is_email_verified
                            ? 'px-2 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
                            : 'px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
                        x-text="account?.is_email_verified ? 'Verified' : 'Not verified'"></span>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Last Login</label>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(account?.last_login)"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Account Created</label>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(account?.created_at)"></p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function myAccountPage() {
    return {
        ...data(),
        currentPage: 'my_account',

        loading: true,
        error: null,
        account: null,

        form: { first_name: '', last_name: '', email: '', preferred_language: '' },
        errors: {},
        profileChanged: false,
        savingProfile: false,

        passwordForm: { current_password: '', new_password: '', confirm_password: '' },
        changingPassword: false,

        async init() {
            const parentInit = data().init;
            if (parentInit) await parentInit.call(this);
            this.currentPage = 'my_account';
            await this.loadAccount();
        },

        async loadAccount() {
            this.loading = true;
            this.error = null;
            try {
                const data = await apiClient.get('/store/account/me');
                this.account = data;
                this.form = {
                    first_name: data.first_name || '',
                    last_name: data.last_name || '',
                    email: data.email || '',
                    preferred_language: data.preferred_language || '',
                };
                this.profileChanged = false;
            } catch (err) {
                this.error = err.message || 'Failed to load account';
            } finally {
                this.loading = false;
            }
        },

        resetProfile() {
            if (this.account) {
                this.form = {
                    first_name: this.account.first_name || '',
                    last_name: this.account.last_name || '',
                    email: this.account.email || '',
                    preferred_language: this.account.preferred_language || '',
                };
            }
            this.profileChanged = false;
            this.errors = {};
        },

        async saveProfile() {
            this.savingProfile = true;
            try {
                const resp = await apiClient.put('/store/account/me', this.form);
                this.account = resp;
                this.profileChanged = false;
                Utils.showToast('Profile updated successfully', 'success');
            } catch (err) {
                Utils.showToast(err.message || 'Failed to save', 'error');
            } finally {
                this.savingProfile = false;
            }
        },

        async changePassword() {
            if (!this.passwordForm.current_password || !this.passwordForm.new_password) {
                Utils.showToast('Please fill in all password fields', 'error');
                return;
            }
            if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
                Utils.showToast('New password and confirmation do not match', 'error');
                return;
            }
            this.changingPassword = true;
            try {
                await apiClient.put('/store/account/me/password', this.passwordForm);
                this.passwordForm = { current_password: '', new_password: '', confirm_password: '' };
                Utils.showToast('Password changed successfully', 'success');
            } catch (err) {
                Utils.showToast(err.message || 'Failed to change password', 'error');
            } finally {
                this.changingPassword = false;
            }
        },

        formatDate(dateString) {
            if (!dateString) return 'N/A';
            try {
                return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
            } catch { return dateString; }
        }
    };
}
</script>
{% endblock %}