<!-- client-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="flex items-center gap-3">
            <div class="text-4xl font-extrabold tracking-tight">Client Management</div>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                {{ pagination.length }} Clients
            </span>
        </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 clients or refillers'" />
            </mat-form-field>
            
            <!-- Refresh button -->
            <button class="ml-4" mat-stroked-button (click)="refresh()">
                <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">
        <!-- Clients list -->
        <div class="flex flex-auto flex-col overflow-hidden sm:mb-18 sm:overflow-y-auto">
            @if (clients$ | async; as clients) {
            @if (clients.length > 0 || selectedClient) {
            <div class="grid">
                <!-- Header - 8 COLUMNS -->
                <div class="client-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>
                    <div class="hidden md:block" [mat-sort-header]="'user_id'">User ID</div>
                    <div [mat-sort-header]="'username'">Client 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">Status</div>
                    <div class="hidden xl:block" [mat-sort-header]="'machines_count'">Machine ID</div>
                    <div class="hidden xl:block" [mat-sort-header]="'refillers_count'">Refillers</div>
                    <div class="hidden sm:block">Details</div>
                </div>

                <!-- Client Rows -->
                @for (client of clients; track trackByFn($index, client)) {
                <div class="client-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">{{ client.user_id }}</span>
                    </div>

                    <!-- Client Name -->
                    <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 (client.photo) {
                            <img [src]="getFullFileUrl(client.photo)" [alt]="client.username"
                                class="h-full w-full object-cover">
                            } @else {
                            <span class="text-sm font-semibold uppercase">
                                {{ client.username.charAt(0) }}
                            </span>
                            }
                        </div>
                        <div class="truncate">
                            <div class="font-medium">{{ client.username }}</div>
                            @if (client.user_id) {
                            <div class="text-xs text-gray-500">{{ client.user_id }}</div>
                            }
                        </div>
                    </div>

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

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

                    <!-- Status -->
                    <div class="hidden lg:block">
                        @if (client.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"></span>
                            Active
                        </span>
                        }
                        @if (client.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>

                    <!-- Machine IDs -->
                    <div class="hidden xl:block">
                        @if (client.machines && client.machines.length > 0) {
                        <div class="flex flex-col gap-1">
                            @for (machine of client.machines; track machine.machine_id) {
                            <div class="text-xs">
                                <span class="font-mono font-semibold text-blue-600">{{ machine.machine_id }}</span>
                            </div>
                            }
                        </div>
                        } @else {
                        <span class="text-gray-400 text-xs">No machines</span>
                        }
                    </div>

                    <!-- Refillers -->
                    <div class="hidden xl:block">
                        @if (client.refillers && client.refillers.length > 0) {
                        <div class="flex flex-col gap-1">
                            @for (refiller of client.refillers; track refiller.id) {
                            <div class="text-xs">
                                <span class="font-medium text-green-700">{{ refiller.username }}</span>
                                @if (refiller.assigned_machines_count > 0) {
                                <span class="text-gray-500"> ({{ refiller.assigned_machines_count }} machines)</span>
                                }
                            </div>
                            }
                        </div>
                        } @else {
                        <span class="text-gray-400 text-xs">No refillers</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(client.id)">
                            <mat-icon class="icon-size-5" [svgIcon]="
                                    selectedClient?.id === client.id
                                        ? 'heroicons_solid:chevron-up'
                                        : 'heroicons_solid:chevron-down'
                                "></mat-icon>
                        </button>
                    </div>
                </div>

                <!-- Client Details -->
                @if (selectedClient?.id === client.id) {
                <div class="grid">
                    <ng-container *ngTemplateOutlet="clientDetailsTemplate; context: { $implicit: client }"></ng-container>
                </div>
                }
                }
            </div>

            <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]="[5, 10, 25, 100]"
                [showFirstLastButtons]="true"></mat-paginator>
            } @else {
            <div class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16">
                No clients found!
            </div>
            }
            }

            <!-- Client Details Template -->
            <ng-template #clientDetailsTemplate let-client>
                <div class="overflow-hidden shadow-lg">
                    <div class="flex border-b">
                        <div class="flex w-full flex-col p-8">
                            <!-- Client Header -->
                            <div class="flex items-start justify-between mb-6 pb-6 border-b">
                                <div class="flex items-center gap-4">
                                    <!-- Photo -->
                                    <div class="relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border-4 bg-gray-200">
                                        @if (client.photo) {
                                        <img [src]="getFullFileUrl(client.photo)" [alt]="client.username"
                                            class="h-full w-full object-cover">
                                        } @else {
                                        <span class="text-3xl font-bold uppercase">
                                            {{ client.username.charAt(0) }}
                                        </span>
                                        }
                                    </div>
                                    
                                    <!-- Client Info -->
                                    <div>
                                        <h3 class="text-2xl font-bold text-gray-900">{{ client.username }}</h3>
                                        <p class="text-sm text-gray-600 font-mono">{{ client.user_id }}</p>
                                        <p class="text-sm text-gray-600 mt-1">{{ client.email }}</p>
                                        <p class="text-sm text-gray-600">{{ client.contact }}</p>
                                    </div>
                                </div>

                                <!-- Company Logo -->
                                @if (client.company_logo) {
                                <div class="flex flex-col items-center">
                                    <span class="text-xs text-gray-600 mb-2">Company Logo</span>
                                    <div class="h-16 w-16 rounded-lg border-2 bg-white p-2">
                                        <img [src]="getFullFileUrl(client.company_logo)" alt="Company logo"
                                            class="h-full w-full object-contain">
                                    </div>
                                </div>
                                }
                            </div>

                            <!-- Machines Section -->
                            <div class="mb-6">
                                <div class="flex items-center justify-between mb-4">
                                    <h4 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                                        <mat-icon class="text-blue-600" [svgIcon]="'heroicons_outline:cog'"></mat-icon>
                                        Machines ({{ client.machines_count }})
                                    </h4>
                                </div>

                                @if (client.machines && client.machines.length > 0) {
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    @for (machine of client.machines; track machine.machine_id) {
                                    <div class="p-4 bg-gray-50 rounded-lg border hover:shadow-md transition-shadow">
                                        <div class="flex items-start justify-between mb-2">
                                            <div class="flex-1">
                                                <div class="font-semibold text-gray-900">{{ machine.machine_id }}</div>
                                                <div class="text-sm text-gray-600">{{ machine.machine_model }}</div>
                                                <div class="text-xs text-gray-500 mt-1">{{ machine.machine_type }}</div>
                                            </div>
                                            <mat-icon class="text-gray-400">devices</mat-icon>
                                        </div>
                                        
                                        <div class="mt-3 flex items-center justify-between">
                                            <div class="text-xs text-gray-600">
                                                <mat-icon class="icon-size-3 inline" [svgIcon]="'heroicons_outline:map-pin'"></mat-icon>
                                                {{ machine.branch_name }}
                                            </div>
                                            <span [class]="'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ' + getStatusClass(machine.operation_status)">
                                                {{ machine.operation_status }}
                                            </span>
                                        </div>
                                        
                                        <div class="mt-2">
                                            <span [class]="'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ' + getStatusClass(machine.connection_status)">
                                                <span class="mr-1 h-1.5 w-1.5 rounded-full" [class]="machine.connection_status === 'online' ? 'bg-green-400' : 'bg-gray-400'"></span>
                                                {{ machine.connection_status }}
                                            </span>
                                        </div>
                                    </div>
                                    }
                                </div>
                                } @else {
                                <div class="text-center py-8 px-4 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                                    <mat-icon class="text-gray-400 mb-2" style="font-size: 48px; width: 48px; height: 48px;">devices_other</mat-icon>
                                    <p class="text-sm text-gray-600">No machines assigned yet</p>
                                </div>
                                }
                            </div>

                            <!-- Refillers Section -->
                            <div>
                                <div class="flex items-center justify-between mb-4">
                                    <h4 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                                        <mat-icon class="text-green-600" [svgIcon]="'heroicons_outline:users'"></mat-icon>
                                        Assigned Refillers ({{ client.refillers_count }})
                                    </h4>
                                </div>

                                @if (client.refillers && client.refillers.length > 0) {
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    @for (refiller of client.refillers; track refiller.id) {
                                    <div class="p-4 bg-green-50 rounded-lg border border-green-200 hover:shadow-md transition-shadow">
                                        <div class="flex items-start justify-between mb-3">
                                            <div class="flex-1">
                                                <div class="font-semibold text-gray-900">{{ refiller.username }}</div>
                                                <div class="text-sm text-gray-600">{{ refiller.email }}</div>
                                                <div class="text-xs text-gray-500 mt-1">{{ refiller.contact }}</div>
                                                <div class="text-xs text-gray-500 font-mono">{{ refiller.user_id }}</div>
                                            </div>
                                            <mat-icon class="text-green-600">person</mat-icon>
                                        </div>
                                        
                                        <!-- Refiller's Machines -->
                                        @if (refiller.assigned_machines_count > 0) {
                                        <div class="mt-3 pt-3 border-t border-green-200">
                                            <div class="text-xs font-medium text-gray-700 mb-2">
                                                Assigned Machines ({{ refiller.assigned_machines_count }})
                                            </div>
                                            <div class="space-y-1">
                                                @for (machine of refiller.assigned_machines; track machine.machine_id) {
                                                <div class="flex items-center justify-between text-xs bg-white px-2 py-1.5 rounded">
                                                    <span class="font-mono font-medium">{{ machine.machine_id }}</span>
                                                    <span class="text-gray-500">{{ machine.machine_model }}</span>
                                                </div>
                                                }
                                            </div>
                                        </div>
                                        } @else {
                                        <div class="mt-3 pt-3 border-t border-green-200 text-xs text-gray-500">
                                            No machines assigned
                                        </div>
                                        }
                                    </div>
                                    }
                                </div>
                                } @else {
                                <div class="text-center py-8 px-4 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                                    <mat-icon class="text-gray-400 mb-2" style="font-size: 48px; width: 48px; height: 48px;">group</mat-icon>
                                    <p class="text-sm text-gray-600">No refillers assigned yet</p>
                                </div>
                                }
                            </div>

                            <!-- Close Button -->
                            <div class="flex justify-end mt-6 pt-6 border-t">
                                <button mat-stroked-button (click)="closeDetails()">
                                    <mat-icon>close</mat-icon>
                                    <span class="ml-1">Close</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </div>
    </div>
</div>