<div class="flex flex-col gap-4 min-h-screen">
  <div class="flex items-center justify-between">
    <h2 class="text-2xl font-semibold">TPES (Terminal Point de Vente)</h2>
    <z-button (click)="openCreate()">Nouvel équipement</z-button>
  </div>

  <!-- Stats Cards -->
  @if (statsLoading()) {
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    @for (i of [1, 2, 3, 4]; track i) {
    <div class="bg-surface border rounded-lg p-4 animate-pulse">
      <div class="h-4 bg-gray-200 rounded w-24 mb-2"></div>
      <div class="h-8 bg-gray-200 rounded w-16"></div>
    </div>
    }
  </div>
  } @else {
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-surface border rounded-lg p-4">
      <div class="text-sm text-muted-foreground">Total TPEs</div>
      <div class="text-2xl font-bold">{{ assignmentStats().total }}</div>
    </div>
    <div class="bg-surface border rounded-lg p-4">
      <div class="text-sm text-muted-foreground">Assignés</div>
      <div class="text-2xl font-bold">{{ assignmentStats().assignes }}</div>
    </div>
    <div class="bg-surface border rounded-lg p-4">
      <div class="text-sm text-muted-foreground">Disponibles</div>
      <div class="text-2xl font-bold">{{ assignmentStats().disponibles }}</div>
    </div>
    <div class="bg-surface border rounded-lg p-4">
      <div class="text-sm text-muted-foreground">Valides</div>
      <div class="text-2xl font-bold">{{ statsByStatut()['VALIDE'] || 0 }}</div>
    </div>
  </div>
  }

  <!-- Statut Filter Chips -->
  <div class="flex flex-wrap gap-2 items-center">
    <span class="text-sm font-medium">Filtrer par statut:</span>
    <button
      z-button
      zType="ghost"
      zSize="sm"
      [class]="!selectedStatut() ? '!bg-primary/10 !text-primary' : ''"
      (click)="onStatutFilter(null)"
    >
      Tous
    </button>
    @for (statut of allStatuses; track statut) {
    <button
      z-button
      zType="ghost"
      zSize="sm"
      [class]="selectedStatut() === statut ? '!bg-primary/10 !text-primary' : ''"
      (click)="onStatutFilter(statut)"
    >
      {{ formatStatut(statut) }}
      @if (statsByStatut()[statut]) {
      <span class="ml-1 text-xs">({{ statsByStatut()[statut] }})</span>
      }
    </button>
    }
  </div>

  <app-search-bar (search)="onSearch($event)"></app-search-bar>

  <app-data-table [data]="rows()" [columns]="cols" [sort]="sort()" (sortChange)="sort.set($event)">
    <ng-template #rowActions let-row>
      <div class="flex gap-2 flex-wrap">
        @if (row.assigne) {
        <button
          z-button
          zType="ghost"
          zSize="sm"
          (click)="onLiberer(row)"
          zTooltip="Libérer"
          zPosition="top"
        >
          <i class="icon-unlink-2"></i>
        </button>
        } @else {
        <button
          z-button
          zType="ghost"
          zSize="sm"
          (click)="onAssigner(row)"
          zTooltip="Assigner"
          zPosition="top"
        >
          <i class="icon-user-plus"></i>
        </button>
        }
        <div z-menu [zMenuTriggerFor]="statutMenu" zPlacement="bottomRight">
          <ng-template #statutMenu>
            <div z-menu-content class="w-48">
              @for (statut of allStatuses; track statut) {
              <button
                z-menu-item
                [class]="row.statut === statut ? '!text-primary' : ''"
                (click)="onUpdateStatut(row, statut)"
              >
                {{ formatStatut(statut) }}
              </button>
              }
            </div>
          </ng-template>
          <button z-button zType="ghost" zSize="sm" zTooltip="Changer statut" zPosition="top">
            <i class="icon-sliders-horizontal"></i>
          </button>
        </div>
        <button
          z-button
          zType="ghost"
          zSize="sm"
          (click)="openEdit(row)"
          zTooltip="Modifier"
          zPosition="top"
        >
          <i class="icon-pen"></i>
        </button>
        <button
          z-button
          zType="destructive"
          zSize="sm"
          (click)="remove(row)"
          zTooltip="Supprimer"
          zPosition="top"
        >
          <i class="icon-trash"></i>
        </button>
      </div>
    </ng-template>
  </app-data-table>

  <app-paginator
    [total]="total()"
    [page]="page()"
    [perPage]="perPage()"
    (pageChange)="page.set($event)"
    (perPageChange)="perPage.set($event)"
  ></app-paginator>
</div>

<app-modal [open]="modalOpen()" [title]="modalTitle()" (close)="closeModal()" size="xl">
  @if (modalOpen()) {
  <app-tpe-form
    [value]="editingItem() ?? undefined"
    (save)="onFormSave($event)"
    (cancel)="closeModal()"
  />
  }
  <div modal-actions class="flex justify-end gap-2">
    <z-button zType="destructive" (click)="closeModal()">Annuler</z-button>
    <z-button (click)="submitChildForm()">Enregistrer</z-button>
  </div>
</app-modal>

<!-- Agent Assignment Modal -->
<app-modal
  [open]="assignModalOpen()"
  [title]="'Assigner le TPE ' + (assigningTpe()?.imei || '')"
  (close)="closeAssignModal()"
  size="md"
>
  <div class="space-y-4">
    @if (agentsLoading()) {
    <div class="text-center py-4">Chargement des agents...</div>
    } @else if (agents().length === 0) {
    <div class="text-center py-4 text-muted-foreground">Aucun agent actif disponible</div>
    } @else {
    <z-form-field>
      <label z-form-label>Sélectionner un agent</label>
      <div z-form-control>
        <z-select
          [zValue]="selectedAgentId()"
          (zSelectionChange)="selectedAgentId.set($event)"
          [zPlaceholder]="'Sélectionner un agent...'"
        >
          @for (agent of agents(); track agent.id) {
          <z-select-item [zValue]="agent.id">
            {{ agent.code }} - {{ agent.nom }} {{ agent.prenom }}
          </z-select-item>
          }
        </z-select>
      </div>
    </z-form-field>
    }
  </div>
  <div modal-actions class="flex justify-end gap-2">
    <z-button zType="destructive" (click)="closeAssignModal()">Annuler</z-button>
    <button z-button [disabled]="!selectedAgentId() || agentsLoading()" (click)="confirmAssign()">
      Assigner
    </button>
  </div>
</app-modal>
