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

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

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

{% block content %}
{% call detail_page_header("merchantUser?.full_name || merchantUser?.username || 'Merchant User Details'", '/admin/merchant-users', subtitle_show='merchantUser') %}
    @<span x-text="merchantUser?.username"></span>
    <span class="text-gray-400 mx-2">|</span>
    <span x-text="merchantUser?.email"></span>
{% endcall %}

{{ loading_state('Loading merchant user details...') }}

{{ error_state('Error loading merchant user') }}

<!-- Merchant User Details -->
<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">
            <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 border border-transparent rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                :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>
            <button
                @click="showDeleteModal = true"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 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 disabled:cursor-not-allowed"
                title="Delete user">
                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
                Delete User
            </button>
        </div>
    </div>

    <!-- Status Cards -->
    <div class="grid gap-6 mb-8 md:grid-cols-4">
        <!-- User Type -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 rounded-full"
                 :class="merchantUser?.role === 'merchant_owner'
                     ? 'text-orange-500 bg-orange-100 dark:text-orange-100 dark:bg-orange-500'
                     : 'text-blue-500 bg-blue-100 dark:text-blue-100 dark:bg-blue-500'">
                <span x-html="$icon(merchantUser?.role === 'merchant_owner' ? 'office-building' : 'user-group', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Role
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200"
                   x-text="merchantUser?.role === 'merchant_owner' ? 'Merchant Owner' : 'Store Member'">
                    -
                </p>
            </div>
        </div>

        <!-- Active Status -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 rounded-full"
                 :class="merchantUser?.is_active ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-red-500 bg-red-100 dark:text-red-100 dark:bg-red-500'">
                <span x-html="$icon(merchantUser?.is_active ? 'check-circle' : 'x-circle', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Status
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="merchantUser?.is_active ? 'Active' : 'Inactive'">
                    -
                </p>
            </div>
        </div>

        <!-- Owned Merchants -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
                <span x-html="$icon('office-building', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Merchants Owned
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="merchantUser?.owned_merchants_count || 0">
                    0
                </p>
            </div>
        </div>

        <!-- Store Memberships -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
                <span x-html="$icon('store', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Store Memberships
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="merchantUser?.store_memberships_count || 0">
                    0
                </p>
            </div>
        </div>
    </div>

    <!-- Main Info Cards -->
    <div class="grid gap-6 mb-8 md:grid-cols-2">
        <!-- Account Information -->
        <div class="px-4 py-3 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">
                Account Information
            </h3>
            <div class="space-y-3">
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Username</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300">@<span x-text="merchantUser?.username || '-'"></span></p>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="merchantUser?.email || '-'">-</p>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Role</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="merchantUser?.role || '-'">-</p>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email Verified</p>
                    <span
                        class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full"
                        :class="merchantUser?.is_email_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100'"
                        x-text="merchantUser?.is_email_verified ? 'Verified' : 'Not Verified'">
                    </span>
                </div>
            </div>
        </div>

        <!-- Personal Information -->
        <div class="px-4 py-3 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">
                Personal Information
            </h3>
            <div class="space-y-3">
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Full Name</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="merchantUser?.full_name || 'Not provided'">-</p>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">First Name</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="merchantUser?.first_name || 'Not provided'">-</p>
                </div>
                <div>
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Last Name</p>
                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="merchantUser?.last_name || 'Not provided'">-</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Owned Merchants -->
    <template x-if="merchantUser?.owned_merchants?.length > 0">
        <div class="mb-8">
            <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-8">
            <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 justify-between text-xs text-gray-500 dark:text-gray-400">
                            <span x-text="membership.store_code"></span>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
                                  x-text="membership.is_owner ? 'Owner' : 'Member'"></span>
                        </div>
                    </a>
                </template>
            </div>
        </div>
    </template>

    <!-- Activity Information -->
    <div class="px-4 py-3 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">
            Activity Information
        </h3>
        <div class="grid gap-6 md:grid-cols-3">
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Last Login</p>
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="merchantUser?.last_login ? formatDate(merchantUser.last_login) : 'Never'">-</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Created At</p>
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(merchantUser?.created_at)">-</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Last Updated</p>
                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(merchantUser?.updated_at)">-</p>
            </div>
        </div>
    </div>

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

    {{ 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',
        'Continue',
        'Cancel',
        'danger'
    ) }}

    {{ confirm_modal_dynamic(
        'deleteUserFinalModal',
        'Final Confirmation',
        "'Are you absolutely sure you want to delete \"' + (merchantUser?.full_name || merchantUser?.username || '') + '\"?'",
        'deleteUser()',
        'showDeleteFinalModal',
        'Delete Permanently',
        'Cancel',
        'danger'
    ) }}
</div>
{% endblock %}

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