<!-- company-admin-list.component.html -->
<div class="bg-card flex min-w-0 flex-auto flex-col dark:bg-transparent sm:absolute sm:inset-0 sm:overflow-hidden">
    <!-- Header -->
    <div class="relative flex flex-0 flex-col border-b px-6 py-8 sm:flex-row sm:items-center sm:justify-between md:px-8">
        <!-- Loader -->
        @if (isLoading) {
        <div class="absolute inset-x-0 bottom-0">
            <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
        </div>
        }
        
        <!-- Title -->
        <div class="text-4xl font-extrabold tracking-tight">Company Admin Management</div>
        
        <!-- Actions -->
        <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
            <!-- Search -->
            <mat-form-field class="fuse-mat-dense fuse-mat-rounded min-w-64" [subscriptSizing]="'dynamic'">
                <mat-icon class="icon-size-5" matPrefix [svgIcon]="'heroicons_solid:magnifying-glass'"></mat-icon>
                <input matInput [formControl]="searchInputControl" [autocomplete]="'off'"
                    [placeholder]="'Search admins'" />
            </mat-form-field>
            
            <!-- Refresh button -->
            <button class="ml-4" mat-flat-button [color]="'primary'" (click)="refreshAdmins()">
                <mat-icon [svgIcon]="'heroicons_outline:arrow-path'"></mat-icon>
                <span class="ml-2 mr-1">Refresh</span>
            </button>
        </div>
    </div>

    <!-- Main -->
    <div class="flex flex-auto overflow-hidden">
        <!-- Admin list -->
        <div class="flex flex-auto flex-col overflow-hidden sm:mb-18 sm:overflow-y-auto">
            @if (admins$ | async; as admins) {
                @if (filteredAdmins.length > 0 || searchInputControl.value) {
                <div class="grid">
                    <!-- Header - 7 COLUMNS: User ID, Name, Email, Contact, Role, Status, Details -->
                    <div class="admin-grid text-secondary sticky top-0 z-10 grid gap-4 bg-gray-50 px-6 py-4 text-md font-semibold shadow dark:bg-black dark:bg-opacity-5 md:px-8"
                        matSort matSortDisableClear (matSortChange)="onSortChange($event)">
                        <div class="hidden md:block" [mat-sort-header]="'user_id'">User ID</div>
                        <div [mat-sort-header]="'username'">Admin Name</div>
                        <div class="hidden sm:block" [mat-sort-header]="'email'">Email</div>
                        <div class="hidden lg:block" [mat-sort-header]="'contact'">Contact</div>
                        <div class="hidden lg:block" [mat-sort-header]="'roles'">Role</div>
                        <div class="hidden lg:block" [mat-sort-header]="'user_status'">Status</div>
                        <div class="hidden sm:block">Details</div>
                    </div>

                    <!-- Admin Rows -->
                    @for (admin of filteredAdmins; track trackByFn($index, admin)) {
                    <div class="admin-grid grid items-center gap-4 border-b px-6 py-3 md:px-8">
                        <!-- User ID -->
                        <div class="hidden truncate md:block">
                            <span class="font-mono text-xs text-gray-600">{{ admin.user_id }}</span>
                        </div>

                        <!-- Admin Name with Avatar -->
                        <div class="flex items-center">
                            <div class="relative mr-3 flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full border bg-gray-200">
                                @if (admin.photo) {
                                <img [src]="getFullFileUrl(admin.photo)" [alt]="admin.username"
                                    class="h-full w-full object-cover">
                                } @else {
                                <span class="text-sm font-semibold uppercase">
                                    {{ admin.username.charAt(0) }}
                                </span>
                                }
                            </div>
                            <div class="truncate">
                                <div class="font-medium">{{ admin.username }}</div>
                                @if (admin.created_by_username) {
                                <div class="text-xs text-gray-500 flex items-center gap-1">
                                    <mat-icon class="icon-size-3">person_add</mat-icon>
                                    <span>by {{ admin.created_by_username }}</span>
                                </div>
                                }
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="hidden truncate sm:block">
                            {{ admin.email }}
                        </div>

                        <!-- Contact -->
                        <div class="hidden truncate lg:block">
                            {{ admin.contact }}
                        </div>

                        <!-- Role -->
                        <div class="hidden lg:block">
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium" [ngClass]="{
                                'bg-orange-100 text-orange-800': admin.roles === 'SuperAdmin',
                                'bg-amber-100 text-amber-800': admin.roles === 'Management',
                                'bg-red-100 text-red-800': admin.roles === 'Admin'
                            }">
                                {{ admin.roles }}
                            </span>
                        </div>

                        <!-- Status -->
                        <div class="hidden lg:block">
                            @if (admin.user_status === 'Active') {
                            <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
                                <span class="mr-1 h-2 w-2 rounded-full bg-green-400 animate-pulse"></span>
                                Active
                            </span>
                            }
                            @if (admin.user_status === 'Inactive') {
                            <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">
                                <span class="mr-1 h-2 w-2 rounded-full bg-gray-400"></span>
                                Inactive
                            </span>
                            }
                        </div>

                        <!-- Details button -->
                        <div class="hidden sm:block">
                            <button class="h-7 min-h-7 min-w-10 px-2 leading-6" mat-stroked-button
                                (click)="toggleDetails(admin.id)">
                                <mat-icon class="icon-size-5" [svgIcon]="
                                    selectedAdmin?.id === admin.id
                                        ? 'heroicons_solid:chevron-up'
                                        : 'heroicons_solid:chevron-down'
                                "></mat-icon>
                            </button>
                        </div>
                    </div>

                    <!-- Admin Details Panel -->
                    @if (selectedAdmin?.id === admin.id) {
                    <div class="grid bg-gray-50 dark:bg-gray-900">
                        <div class="border-b p-8">
                            <!-- Admin Header -->
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center gap-4">
                                    <div class="relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border-4 border-white shadow-lg bg-gray-200">
                                        @if (selectedAdmin.photo) {
                                        <img [src]="getFullFileUrl(selectedAdmin.photo)" [alt]="selectedAdmin.username"
                                            class="h-full w-full object-cover">
                                        } @else {
                                        <span class="text-3xl font-bold uppercase">
                                            {{ selectedAdmin.username.charAt(0) }}
                                        </span>
                                        }
                                    </div>
                                    <div>
                                        <h3 class="text-2xl font-bold">{{ selectedAdmin.username }}</h3>
                                        <p class="text-sm text-gray-600">{{ selectedAdmin.user_id }}</p>
                                        <div class="flex items-center gap-2 mt-1">
                                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium" [ngClass]="{
                                                'bg-orange-100 text-orange-800': selectedAdmin.roles === 'SuperAdmin',
                                                'bg-amber-100 text-amber-800': selectedAdmin.roles === 'Management',
                                                'bg-red-100 text-red-800': selectedAdmin.roles === 'Admin'
                                            }">
                                                {{ selectedAdmin.roles }}
                                            </span>
                                            @if (selectedAdmin.user_status === 'Active') {
                                            <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
                                                <span class="mr-1 h-2 w-2 rounded-full bg-green-400 animate-pulse"></span>
                                                Active
                                            </span>
                                            }
                                        </div>
                                    </div>
                                </div>
                                @if (selectedAdmin.company_logo) {
                                <div class="flex items-center">
                                    <img [src]="getFullFileUrl(selectedAdmin.company_logo)" alt="Company logo"
                                        class="h-16 w-auto object-contain">
                                </div>
                                }
                            </div>

                            <!-- Admin Information Grid -->
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                <!-- Contact Information -->
                                <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow">
                                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                        <mat-icon class="icon-size-5 text-blue-600">contact_mail</mat-icon>
                                        Contact Information
                                    </h4>
                                    <div class="space-y-2">
                                        <div class="flex items-center gap-2">
                                            <mat-icon class="icon-size-4 text-gray-500">email</mat-icon>
                                            <span class="text-sm">{{ selectedAdmin.email }}</span>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <mat-icon class="icon-size-4 text-gray-500">phone</mat-icon>
                                            <span class="text-sm">{{ selectedAdmin.contact }}</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Created By -->
                                <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow">
                                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                        <mat-icon class="icon-size-5 text-green-600">person_add</mat-icon>
                                        Created By
                                    </h4>
                                    <div class="space-y-2">
                                        <div class="flex items-center gap-2">
                                            <mat-icon class="icon-size-4 text-gray-500">account_circle</mat-icon>
                                            <span class="text-sm font-medium">{{ selectedAdmin.created_by_username || 'System' }}</span>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <mat-icon class="icon-size-4 text-gray-500">calendar_today</mat-icon>
                                            <span class="text-sm">{{ selectedAdmin.created_at | date:'short' }}</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Account Status -->
                                <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow">
                                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                        <mat-icon class="icon-size-5 text-purple-600">info</mat-icon>
                                        Account Status
                                    </h4>
                                    <div class="space-y-2">
                                        <div class="flex items-center gap-2">
                                            <mat-icon class="icon-size-4 text-gray-500">verified_user</mat-icon>
                                            <span class="text-sm">{{ selectedAdmin.user_status }}</span>
                                        </div>
                                        @if (selectedAdmin.updated_at) {
                                        <div class="flex items-center gap-2">
                                            <mat-icon class="icon-size-4 text-gray-500">update</mat-icon>
                                            <span class="text-sm">Updated: {{ selectedAdmin.updated_at | date:'short' }}</span>
                                        </div>
                                        }
                                    </div>
                                </div>
                            </div>

                            <!-- Close Button -->
                            <div class="mt-6 flex justify-end">
                                <button mat-flat-button [color]="'primary'" (click)="closeDetails()">
                                    <mat-icon>close</mat-icon>
                                    <span class="ml-2">Close</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    }
                    }
                </div>

                <!-- Pagination -->
                <mat-paginator
                    class="z-10 border-b bg-gray-50 dark:bg-transparent sm:absolute sm:inset-x-0 sm:bottom-0 sm:border-b-0 sm:border-t"
                    [ngClass]="{ 'pointer-events-none': isLoading }"
                    [length]="pagination.length"
                    [pageIndex]="pagination.page"
                    [pageSize]="pagination.size"
                    [pageSizeOptions]="pagination.pageSizeOptions"
                    [showFirstLastButtons]="true"
                    (page)="onPageChange($event)">
                </mat-paginator>
                } @else {
                <div class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16">
                    No admin users found!
                </div>
                }
            }
        </div>
    </div>
</div>