<div class="login-container">
    <!-- Search Box -->
    <div class="search-container">
        <nz-input-group [nzSuffix]="suffixTemplate" nzSize="large">
            <input
                nz-input
                [ngModel]="searchTerm$ | async"
                (ngModelChange)="searchTerm = $event"
                placeholder="Search users by name, ID or mobile"
                nzSize="large"
            />
        </nz-input-group>
        <ng-template #suffixTemplate>
            <span
                *ngIf="searchTerm$ | async"
                class="clear-icon"
                nz-icon
                nzType="close-circle"
                (click)="clearSearch()"
            ></span>
        </ng-template>
    </div>

    <!-- Content based on search state -->
    <ng-container *ngIf="!(searchTerm$ | async); else searchResults">
        <!-- Show last and recent users if available -->
        <ng-container
            *ngIf="
                (lastUsers$ | async)?.length || (recentUsers$ | async)?.length;
                else defaultSearch
            "
        >
            <!-- Last Logged In User Section -->
            <div class="section" *ngIf="(lastUsers$ | async)?.length">
                <nz-divider
                    nzText="Last Logged In User"
                    nzOrientation="left"
                ></nz-divider>
                <div class="cards-container">
                    <nz-card
                        *ngFor="let user of lastUsers$ | async"
                        class="user-card"
                        [class.selected]="user === selectedUser"
                        (click)="selectUser(user)"
                        nzSize="default"
                        [nzHoverable]="true"
                    >
                        <div class="user-info">
                            <div class="user-name">{{ user.displayName }}</div>
                            <div class="user-id" *ngIf="user.userId">
                                ({{ user.userId }})
                            </div>
                            <div class="user-mobile" *ngIf="user.mobile">
                                {{ user.mobile }}
                            </div>
                        </div>
                    </nz-card>
                </div>
            </div>

            <!-- Recent Users Section -->
            <div class="section" *ngIf="(recentUsers$ | async)?.length">
                <nz-divider
                    nzText="Users from Last 30 Days"
                    nzOrientation="left"
                ></nz-divider>
                <div class="cards-container">
                    <nz-card
                        *ngFor="let user of recentUsers$ | async"
                        class="user-card"
                        [class.selected]="user === selectedUser"
                        (click)="selectUser(user)"
                        nzSize="default"
                        [nzHoverable]="true"
                    >
                        <div class="user-info">
                            <div class="user-name">{{ user.displayName }}</div>
                            <div class="user-id" *ngIf="user.userId">
                                ({{ user.userId }})
                            </div>
                            <div class="user-mobile" *ngIf="user.mobile">
                                {{ user.mobile }}
                            </div>
                        </div>
                    </nz-card>
                </div>
            </div>
        </ng-container>
    </ng-container>

    <!-- Search Results -->
    <ng-template #searchResults>
        <div class="section">
            <nz-divider
                nzText="Search Results"
                nzOrientation="left"
            ></nz-divider>
            <div class="cards-container" *ngIf="!(hasNoMatches$ | async)">
                <nz-card
                    *ngFor="let user of filteredUsers$ | async"
                    class="user-card"
                    [class.selected]="user === selectedUser"
                    (click)="selectUser(user)"
                    nzSize="default"
                    [nzHoverable]="true"
                >
                    <div class="user-info">
                        <div class="user-name">{{ user.displayName }}</div>
                        <div class="user-id" *ngIf="user.userId">
                            ({{ user.userId }})
                        </div>
                        <div class="user-mobile" *ngIf="user.mobile">
                            {{ user.mobile }}
                        </div>
                    </div>
                </nz-card>
            </div>

            <!-- No Results Message -->
            <nz-empty
                *ngIf="hasNoMatches$ | async"
                [nzNotFoundContent]="'No matching users found'"
                [nzNotFoundFooter]="noMatchFooter"
            >
            </nz-empty>
        </div>
    </ng-template>

    <!-- Default Search Template when no recent or last users -->
    <ng-template #defaultSearch>
        <div class="section empty-state">
            <nz-empty
                [nzNotFoundContent]="'Enter text above to search for users'"
            >
            </nz-empty>
        </div>
    </ng-template>

    <!-- No Match Footer Template -->
    <ng-template #noMatchFooter>
        <div class="empty-footer">
            Try searching by name, ID, or mobile number
        </div>
    </ng-template>
</div>
