<div class="page-container">
  <app-page-header title="License Requests" subtitle="View and manage your license applications">
    @if (isApplicant()) {
      <button mat-raised-button color="primary" routerLink="/requests/new" class="create-btn">
        <mat-icon>add_circle</mat-icon>
        New Request
      </button>
    }
  </app-page-header>

  <!-- Summary Stats -->
  <div class="stats-summary">
    <div class="stat-card">
      <div class="stat-icon total">
        <mat-icon>description</mat-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ totalItems() }}</div>
        <div class="stat-label">Total Requests</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon pending">
        <mat-icon>hourglass_empty</mat-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ getPendingCount() }}</div>
        <div class="stat-label">Pending Review</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon approved">
        <mat-icon>check_circle</mat-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ getApprovedCount() }}</div>
        <div class="stat-label">Approved</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon rejected">
        <mat-icon>cancel</mat-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ getRejectedCount() }}</div>
        <div class="stat-label">Rejected</div>
      </div>
    </div>
  </div>

  <mat-card>
    <mat-card-content>
      <!-- Filters -->
      <div class="filters-section">
        <span class="filter-label">
          <mat-icon>filter_list</mat-icon>
          Filters
        </span>
        <div class="filters">
          <mat-form-field appearance="outline" class="filter-field">
            <mat-label>Status</mat-label>
            <mat-select [formControl]="statusFilter">
              <mat-option value="">All Statuses</mat-option>
              @for (status of statuses; track status) {
                <mat-option [value]="status">{{ formatStatus(status) }}</mat-option>
              }
            </mat-select>
          </mat-form-field>

          <mat-form-field appearance="outline" class="filter-field">
            <mat-label>Request Type</mat-label>
            <mat-select [formControl]="typeFilter">
              <mat-option value="">All Types</mat-option>
              @for (type of requestTypes; track type) {
                <mat-option [value]="type">{{ formatType(type) | titlecase }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      </div>

      @if (loading()) {
        <div class="loading-container">
          <mat-spinner diameter="48"></mat-spinner>
          <span class="loading-text">Loading requests...</span>
        </div>
      } @else if (requests().length === 0) {
        <app-empty-state
          icon="description"
          title="No requests found"
          message="No license requests match your current filters. Create a new request to get started."
        >
          @if (isApplicant()) {
            <button mat-raised-button color="primary" routerLink="/requests/new">
              <mat-icon>add</mat-icon>
              Create Request
            </button>
          }
        </app-empty-state>
      } @else {
        <div class="table-container">
          <table mat-table [dataSource]="requests()">
            <ng-container matColumnDef="requestNumber">
              <th mat-header-cell *matHeaderCellDef>Request ID</th>
              <td mat-cell *matCellDef="let row">
                <span class="request-number">{{ row.requestNumber }}</span>
              </td>
            </ng-container>

            <ng-container matColumnDef="requestType">
              <th mat-header-cell *matHeaderCellDef>Type</th>
              <td mat-cell *matCellDef="let row">
                <span class="type-badge">
                  <mat-icon>{{ getTypeIcon(row.requestType) }}</mat-icon>
                  {{ formatType(row.requestType) | titlecase }}
                </span>
              </td>
            </ng-container>

            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef>Status</th>
              <td mat-cell *matCellDef="let row">
                <app-status-badge [status]="row.status" />
              </td>
            </ng-container>

            <ng-container matColumnDef="createdAt">
              <th mat-header-cell *matHeaderCellDef>Created</th>
              <td mat-cell *matCellDef="let row">
                <div class="date-cell">
                  <span class="date-main">{{ row.createdAt | date: 'mediumDate' }}</span>
                  <span class="date-time">{{ row.createdAt | date: 'shortTime' }}</span>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="updatedAt">
              <th mat-header-cell *matHeaderCellDef>Last Updated</th>
              <td mat-cell *matCellDef="let row">
                <div class="date-cell">
                  <span class="date-main">{{ row.updatedAt | date: 'mediumDate' }}</span>
                  <span class="date-time">{{ row.updatedAt | date: 'shortTime' }}</span>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="actions">
              <th mat-header-cell *matHeaderCellDef></th>
              <td mat-cell *matCellDef="let row">
                <div class="quick-actions">
                  <button mat-icon-button class="action-btn" [routerLink]="['/requests', row.id]"
                    matTooltip="View Details">
                    <mat-icon>visibility</mat-icon>
                  </button>
                </div>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr
              mat-row
              *matRowDef="let row; columns: displayedColumns"
              [routerLink]="['/requests', row.id]"
            ></tr>
          </table>
        </div>

        <mat-paginator
          [length]="totalItems()"
          [pageSize]="pageSize()"
          [pageIndex]="pageIndex()"
          [pageSizeOptions]="[5, 10, 25, 50]"
          (page)="onPageChange($event)"
          showFirstLastButtons
        />
      }
    </mat-card-content>
  </mat-card>
</div>
