{# app/templates/admin/merchant-user-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state %}
{% from 'shared/macros/headers.html' import edit_page_header %}
{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}

{% block title %}Edit Merchant User{% endblock %}

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

{% block content %}
{% call edit_page_header('Edit Merchant User', '/admin/merchant-users', subtitle_show='merchantUser', back_label='Back to Merchant Users') %}
    @<span x-text="merchantUser?.username"></span>
{% endcall %}

{{ loading_state('Loading merchant user...', show_condition='loading') }}

<!-- Edit Content -->
<div x-show="!loading && merchantUser">
    <!-- Quick Actions Card -->
    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
            Quick Actions
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <!-- Toggle Active Status -->
            <button
                @click="showToggleStatusModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none disabled:opacity-50"
                :class="merchantUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
                <span x-html="$icon(merchantUser?.is_active ? 'user-x' : 'user-check', 'w-4 h-4 mr-2')"></span>
                <span x-text="merchantUser?.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>

            <!-- Status Badges -->
            <div class="ml-auto flex items-center gap-2">
                <span
                    x-show="merchantUser?.role === 'merchant_owner'"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
                    Merchant Owner
                </span>
                <span
                    x-show="merchantUser?.role === 'store_member'"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
                    Store Member
                </span>
                <span
                    x-show="merchantUser?.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                    Active
                </span>
                <span
                    x-show="!merchantUser?.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                    Inactive
                </span>
            </div>
        </div>
    </div>

    <!-- User Info Card (Editable) -->
    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                User Information
            </h3>
            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'ID: ' + merchantUser?.id"></span>
        </div>
        <form @submit.prevent="saveProfile()">
            <div class="grid gap-6 md:grid-cols-2">
                <!-- Left Column -->
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Username</label>
                        <input
                            type="text"
                            x-model="editForm.username"
                            class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
                            required
                            minlength="3"
                        >
                        <p x-show="errors.username" x-text="errors.username" class="mt-1 text-xs text-red-600 dark:text-red-400"></p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Email</label>
                        <input
                            type="email"
                            x-model="editForm.email"
                            class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
                            required
                        >
                        <p x-show="errors.email" x-text="errors.email" class="mt-1 text-xs text-red-600 dark:text-red-400"></p>
                    </div>
                </div>
                <!-- Right Column -->
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">First Name</label>
                        <input
                            type="text"
                            x-model="editForm.first_name"
                            class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
                            placeholder="First name"
                        >
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Last Name</label>
                        <input
                            type="text"
                            x-model="editForm.last_name"
                            class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
                            placeholder="Last name"
                        >
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-end mt-6 gap-3">
                <span x-show="profileDirty" class="text-xs text-orange-600 dark:text-orange-400">Unsaved changes</span>
                <button
                    type="submit"
                    :disabled="saving || !profileDirty"
                    class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50 transition-colors">
                    <span x-show="!saving">Save Changes</span>
                    <span x-show="saving" class="flex items-center">
                        <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        Saving...
                    </span>
                </button>
            </div>
        </form>
    </div>

    <!-- Owned Merchants -->
    <template x-if="merchantUser?.owned_merchants?.length > 0">
        <div class="mb-6">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                <span x-html="$icon('office-building', 'w-5 h-5 inline mr-2 text-orange-500')"></span>
                Owned Merchants
            </h3>
            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                <template x-for="merchant in merchantUser.owned_merchants" :key="merchant.id">
                    <a :href="'/admin/merchants/' + merchant.id"
                       class="block px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 border border-transparent hover:border-orange-300 dark:hover:border-orange-600 transition-colors duration-150">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-200 truncate" x-text="merchant.name"></h4>
                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full"
                                  :class="merchant.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
                                  x-text="merchant.is_active ? 'Active' : 'Inactive'">
                            </span>
                        </div>
                        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                            <span x-html="$icon('store', 'w-3.5 h-3.5 mr-1')"></span>
                            <span x-text="merchant.store_count + ' store(s)'"></span>
                        </div>
                    </a>
                </template>
            </div>
        </div>
    </template>

    <!-- Store Memberships -->
    <template x-if="merchantUser?.store_memberships?.length > 0">
        <div class="mb-6">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                <span x-html="$icon('user-group', 'w-5 h-5 inline mr-2 text-blue-500')"></span>
                Store Memberships
            </h3>
            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                <template x-for="membership in merchantUser.store_memberships" :key="membership.store_id">
                    <a :href="'/admin/stores/' + membership.store_code"
                       class="block px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 border border-transparent hover:border-blue-300 dark:hover:border-blue-600 transition-colors duration-150">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-200 truncate" x-text="membership.store_name"></h4>
                            <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full"
                                  :class="membership.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
                                  x-text="membership.is_active ? 'Active' : 'Inactive'">
                            </span>
                        </div>
                        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                            <span x-text="membership.store_code"></span>
                        </div>
                    </a>
                </template>
            </div>
        </div>
    </template>

    <!-- Danger Zone Card -->
    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 border border-red-200 dark:border-red-800">
        <h3 class="mb-4 text-lg font-semibold text-red-700 dark:text-red-400">
            Danger Zone
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <!-- Delete User Button -->
            <button
                @click="showDeleteModal = true"
                :disabled="saving"
                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
                title="Delete this user">
                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
                Delete User
            </button>
        </div>
        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
            <span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1 text-red-500')"></span>
            Deleting a user is permanent and cannot be undone.
        </p>
    </div>
</div>

<!-- Toggle Status Confirmation Modal -->
{{ confirm_modal_dynamic(
    'toggleStatusModal',
    'Toggle User Status',
    "'Are you sure you want to ' + (merchantUser?.is_active ? 'deactivate' : 'activate') + ' \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"?'",
    'toggleStatus()',
    'showToggleStatusModal',
    'Confirm',
    'Cancel',
    'warning'
) }}

<!-- Delete User Confirmation Modal (Step 1) -->
{{ confirm_modal_dynamic(
    'deleteUserModal',
    'Delete User',
    "'Are you sure you want to delete \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"? This action cannot be undone.'",
    'confirmDeleteStep()',
    'showDeleteModal',
    'Delete',
    'Cancel',
    'danger'
) }}

<!-- Delete User Final Confirmation Modal (Step 2) -->
{{ confirm_modal_dynamic(
    'deleteUserFinalModal',
    'Final Confirmation',
    "'FINAL CONFIRMATION: Are you absolutely sure you want to permanently delete \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"?'",
    'deleteUser()',
    'showDeleteFinalModal',
    'Permanently Delete',
    'Cancel',
    'danger'
) }}
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('tenancy_static', path='admin/js/merchant-user-edit.js') }}"></script>
{% endblock %}