{# app/templates/admin/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 %}

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

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

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

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

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

<!-- User Details -->
<div x-show="!loading && user">
    <!-- 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">
            <a
                :href="`/admin/users/${userId}/edit`"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                <span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
                Edit User
            </a>
            <button
                @click="toggleStatus()"
                :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"
                :class="user?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
                <span x-html="$icon(user?.is_active ? 'user-x' : 'user-check', 'w-4 h-4 mr-2')"></span>
                <span x-text="user?.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>
            <button
                @click="deleteUser()"
                :disabled="saving || user?.owned_companies_count > 0"
                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="user?.owned_companies_count > 0 ? 'Cannot delete user who owns companies' : '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">
        <!-- Role -->
        <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="{
                     'text-orange-500 bg-orange-100 dark:text-orange-100 dark:bg-orange-500': user?.role === 'admin',
                     'text-purple-500 bg-purple-100 dark:text-purple-100 dark:bg-purple-500': user?.role === 'vendor'
                 }">
                <span x-html="$icon(user?.role === 'admin' ? 'shield' : 'user', '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 capitalize" x-text="user?.role">
                    -
                </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="user?.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(user?.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="user?.is_active ? 'Active' : 'Inactive'">
                    -
                </p>
            </div>
        </div>

        <!-- Companies Owned -->
        <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('office-building', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Companies
                </p>
                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="user?.owned_companies_count || 0">
                    0
                </p>
            </div>
        </div>

        <!-- Created Date -->
        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
            <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
                <span x-html="$icon('calendar', 'w-5 h-5')"></span>
            </div>
            <div>
                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                    Registered
                </p>
                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(user?.created_at)">
                    -
                </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="user?.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="user?.email || '-'">-</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="user?.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="user?.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="user?.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="user?.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="user?.last_name || 'Not provided'">-</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Activity Information -->
    <div class="px-4 py-3 mb-8 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="user?.last_login ? formatDate(user.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(user?.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(user?.updated_at)">-</p>
            </div>
        </div>
    </div>

    <!-- Ownership 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">
            Ownership & Memberships
        </h3>
        <div class="grid gap-6 md:grid-cols-2">
            <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
                <div class="flex items-center mb-2">
                    <span x-html="$icon('office-building', 'w-5 h-5 mr-2 text-blue-500')"></span>
                    <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Companies Owned</p>
                </div>
                <p class="text-2xl font-bold text-gray-700 dark:text-gray-200" x-text="user?.owned_companies_count || 0"></p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Companies where this user is the owner
                </p>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
                <div class="flex items-center mb-2">
                    <span x-html="$icon('users', 'w-5 h-5 mr-2 text-purple-500')"></span>
                    <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Vendor Memberships</p>
                </div>
                <p class="text-2xl font-bold text-gray-700 dark:text-gray-200" x-text="user?.vendor_memberships_count || 0"></p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Vendors where this user is a team member
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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