{# app/modules/tenancy/templates/tenancy/merchant/my-account.html #}
{% extends "merchant/base.html" %}

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

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

{% block content %}
    <!-- Page Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">My Account</h2>
        <p class="mt-1 text-gray-500 dark:text-gray-400">Manage your personal account information.</p>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:border-red-800">
        <p class="text-sm text-red-800 dark:text-red-200" x-text="error"></p>
    </div>

    <!-- Success -->
    <div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg dark:bg-green-900/20 dark:border-green-800">
        <p class="text-sm text-green-800 dark:text-green-200" x-text="successMessage"></p>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="text-center py-12 text-gray-500">
        <svg class="inline w-6 h-6 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
        Loading account...
    </div>

    <!-- Personal Information -->
    <div x-show="!loading" class="mb-8 bg-white rounded-lg shadow-sm border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Personal Information</h3>
        </div>
        <form @submit.prevent="saveProfile()" class="p-6 space-y-6">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
                    <input type="text" x-model="form.first_name"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
                    <input type="text" x-model="form.last_name"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" />
                </div>
            </div>
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                    <input type="email" x-model="form.email"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Preferred Language</label>
                    <select x-model="form.preferred_language"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                        <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 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button type="submit" :disabled="savingProfile"
                    class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50">
                    <span x-show="!savingProfile">Save Changes</span>
                    <span x-show="savingProfile" class="inline-flex items-center">
                        <svg class="w-4 h-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        Saving...
                    </span>
                </button>
            </div>
        </form>
    </div>

    <!-- Change Password -->
    <div x-show="!loading" class="mb-8 bg-white rounded-lg shadow-sm border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Change Password</h3>
        </div>
        <form @submit.prevent="changePassword()" class="p-6 space-y-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Current Password</label>
                <input type="password" x-model="passwordForm.current_password"
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" />
            </div>
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
                    <input type="password" x-model="passwordForm.new_password"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" />
                    <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-1">Confirm New Password</label>
                    <input type="password" x-model="passwordForm.confirm_password"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900 dark:text-gray-100 dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" />
                </div>
            </div>
            <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
                <button type="submit" :disabled="changingPassword"
                    class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50">
                    <span x-show="!changingPassword">Change Password</span>
                    <span x-show="changingPassword" class="inline-flex items-center">
                        <svg class="w-4 h-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        Changing...
                    </span>
                </button>
            </div>
        </form>
    </div>

    <!-- Account Info (Read Only) -->
    <div x-show="!loading" class="bg-white rounded-lg shadow-sm border border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Read-only account metadata</p>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Username</label>
                    <p class="text-sm font-mono text-gray-900 dark:text-gray-100" x-text="account?.username"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Role</label>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="account?.role"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">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-1">Last Login</label>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="formatDate(account?.last_login)"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Account Created</label>
                    <p class="text-sm text-gray-900 dark:text-gray-100" x-text="formatDate(account?.created_at)"></p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

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

        form: { first_name: '', last_name: '', email: '', preferred_language: '' },
        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() {
            try {
                const resp = await apiClient.get('/merchants/account/me');
                this.account = resp;
                this.form = {
                    first_name: resp.first_name || '',
                    last_name: resp.last_name || '',
                    email: resp.email || '',
                    preferred_language: resp.preferred_language || '',
                };
            } catch (err) {
                this.error = 'Failed to load account. Please try again.';
            } finally {
                this.loading = false;
            }
        },

        async saveProfile() {
            this.savingProfile = true;
            this.error = null;
            this.successMessage = null;
            try {
                const resp = await apiClient.put('/merchants/account/me', this.form);
                this.account = resp;
                this.successMessage = 'Profile updated successfully.';
                setTimeout(() => { this.successMessage = null; }, 3000);
            } catch (err) {
                this.error = err.message;
            } finally {
                this.savingProfile = false;
            }
        },

        async changePassword() {
            if (!this.passwordForm.current_password || !this.passwordForm.new_password) {
                this.error = 'Please fill in all password fields.';
                return;
            }
            if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
                this.error = 'New password and confirmation do not match.';
                return;
            }
            this.changingPassword = true;
            this.error = null;
            this.successMessage = null;
            try {
                await apiClient.put('/merchants/account/me/password', this.passwordForm);
                this.passwordForm = { current_password: '', new_password: '', confirm_password: '' };
                this.successMessage = 'Password changed successfully.';
                setTimeout(() => { this.successMessage = null; }, 3000);
            } catch (err) {
                this.error = err.message;
            } 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 %}