<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">
    <div *ngIf="loading" class="absolute inset-x-0 bottom-0">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>

    <div class="text-4xl font-extrabold tracking-tight">Sales & Transactions</div>

    <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
      <button class="ml-4" mat-flat-button color="primary" (click)="exportToCSV()" *ngIf="filteredTransactions.length > 0">
        <mat-icon>download</mat-icon>
        <span class="ml-2 mr-1">Export CSV</span>
      </button>
    </div>
  </div>

  <!-- Main -->
  <div class="flex flex-auto overflow-auto">
    <div class="flex flex-auto flex-col">
      <!-- Filters Section -->
      <div class="bg-white dark:bg-gray-800 border-b px-6 py-4 md:px-8">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
          <!-- Machine ID Filter -->
          <mat-form-field class="fuse-mat-dense fuse-mat-rounded w-full" subscriptSizing="dynamic">
            <mat-label>Machine ID</mat-label>
            <input matInput [(ngModel)]="filters.machineId" (input)="applyFilters()" />
          </mat-form-field>

          <!-- Transaction ID Filter -->
          <mat-form-field class="fuse-mat-dense fuse-mat-rounded w-full" subscriptSizing="dynamic">
            <mat-label>Transaction ID</mat-label>
            <input matInput [(ngModel)]="filters.transactionId" (input)="applyFilters()" />
          </mat-form-field>

          <!-- Product Name Filter -->
          <mat-form-field class="fuse-mat-dense fuse-mat-rounded w-full" subscriptSizing="dynamic">
            <mat-label>Product Name</mat-label>
            <input matInput [(ngModel)]="filters.productName" (input)="applyFilters()" />
          </mat-form-field>

          <!-- Status Filter -->
          <mat-form-field class="fuse-mat-dense fuse-mat-rounded w-full" subscriptSizing="dynamic">
            <mat-label>Status</mat-label>
            <mat-select [(ngModel)]="filters.status" (selectionChange)="applyFilters()">
              <mat-option value="">All</mat-option>
              <mat-option value="Success">Success</mat-option>
              <mat-option value="Dispense failed">Dispense Failed</mat-option>
              <mat-option value="Unprocessed">Unprocessed</mat-option>
            </mat-select>
          </mat-form-field>

          <!-- Refresh Button -->
          <button mat-stroked-button (click)="loadTransactions()" class="h-12">
            <mat-icon>refresh</mat-icon>
          </button>
          
          <!-- Clear Filters Button -->
          <button mat-stroked-button (click)="clearFilters()" class="h-12">
            <mat-icon>close</mat-icon>
          </button>
        </div>
      </div>

      <!-- Transactions List -->
      <div *ngIf="filteredTransactions.length > 0 && !loading && !error">
        <div class="grid min-w-max">
          <!-- Header -->
          <div class="transactions-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">
            <div>ID</div>
            <div>Machine ID</div>
            <div>Transaction ID</div>
            <div>Product</div>
            <div>Qty</div>
            <div>Status</div>
            <div>Amount</div>
            <div>Payment</div>
            <div>Receiving Status</div>
            <div>Return Amount</div>
            <div>Date & Time</div>
            <div>Actions</div>
          </div>

          <!-- Rows -->
          <div *ngFor="let transaction of paginatedTransactions; trackBy: trackByFn"
            class="transactions-grid grid items-center gap-4 border-b px-6 py-3 md:px-8">
            <div>{{ transaction.id }}</div>
            <div>{{ transaction.machine_id }}</div>
            <div>{{ transaction.transaction_id }}</div>
            <div>{{ transaction.product_name }}</div>
            <div>{{ transaction.quantity }}</div>
            <div>
              <span [ngClass]="'status-badge ' + getStatusClass(transaction.status)">
                {{ transaction.status }}
              </span>
            </div>
            <div>₹{{ transaction.amount.toFixed(2) }}</div>
            <div>{{ transaction.payment_type }}</div>
            <div>{{ transaction.amount_receiving_status || '-' }}</div>
            <div>{{ transaction.return_amount ? '₹' + transaction.return_amount.toFixed(2) : '-' }}</div>
            <div>{{ transaction.created_at }}</div>
            
            <!-- Actions -->
            <div class="flex gap-2">
              <button class="h-7 min-h-7 px-3 leading-6" mat-flat-button color="primary" (click)="viewDetails(transaction)">
                View
              </button>
              <button *ngIf="transaction.status === 'Dispense failed' && !transaction.return_amount"
                class="h-7 min-h-7 px-3 leading-6" mat-flat-button color="warn" (click)="processRefund(transaction)">
                Refund
              </button>
            </div>
          </div>
        </div>

        <!-- Paginator -->
        <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"
          [length]="filteredTransactions.length"
          [pageIndex]="currentPage - 1"
          [pageSize]="itemsPerPage"
          [pageSizeOptions]="[5, 10, 25, 50, 100]"
          (page)="onPageChange($event)"
          showFirstLastButtons>
        </mat-paginator>
      </div>

      <!-- No Transactions -->
      <div *ngIf="filteredTransactions.length === 0 && !loading && !error" class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16">
        <div class="text-6xl mb-4">📊</div>
        <div>No transactions found</div>
        <p class="text-base text-gray-500 mt-2">Try adjusting your filters or create a new transaction</p>
      </div>

      <!-- Loading State -->
      <div *ngIf="loading" class="flex items-center justify-center p-16">
        <mat-spinner></mat-spinner>
      </div>

      <!-- Error State -->
      <div *ngIf="error" class="border-t p-8 text-center">
        <mat-icon class="text-red-500 text-6xl">error_outline</mat-icon>
        <div class="text-xl mt-4">{{ error }}</div>
        <button mat-flat-button color="primary" class="mt-4" (click)="loadTransactions()">
          Retry
        </button>
      </div>
    </div>
  </div>
  <!-- Transaction Details Dialog -->
<ng-template #detailsDialog>
  <div class="dialog-container">
    <h2 mat-dialog-title>Transaction Details</h2>
    
    <mat-dialog-content *ngIf="selectedTransaction" class="dialog-content">
      <div class="detail-row">
        <span class="detail-label">Transaction ID:</span>
        <span class="detail-value">{{ selectedTransaction.transaction_id }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Machine ID:</span>
        <span class="detail-value">{{ selectedTransaction.machine_id }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Product:</span>
        <span class="detail-value">{{ selectedTransaction.product_name }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Quantity:</span>
        <span class="detail-value">{{ selectedTransaction.quantity }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Amount:</span>
        <span class="detail-value">₹{{ selectedTransaction.amount.toFixed(2) }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Payment Type:</span>
        <span class="detail-value">{{ selectedTransaction.payment_type }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Status:</span>
        <span [ngClass]="'status-badge ' + getStatusClass(selectedTransaction.status)">
          {{ selectedTransaction.status }}
        </span>
      </div>
      
      <div class="detail-row" *ngIf="selectedTransaction.amount_receiving_status">
        <span class="detail-label">Receiving Status:</span>
        <span class="detail-value">{{ selectedTransaction.amount_receiving_status }}</span>
      </div>
      
      <div class="detail-row" *ngIf="selectedTransaction.return_amount">
        <span class="detail-label">Return Amount:</span>
        <span class="detail-value">₹{{ selectedTransaction.return_amount.toFixed(2) }}</span>
      </div>
      
      <div class="detail-row">
        <span class="detail-label">Date & Time:</span>
        <span class="detail-value">{{ selectedTransaction.created_at }}</span>
      </div>
    </mat-dialog-content>
    
    <mat-dialog-actions align="end">
      <button mat-button mat-dialog-close>Close</button>
      <button 
        mat-flat-button 
        color="warn" 
        *ngIf="selectedTransaction?.status === 'Dispense failed' && !selectedTransaction?.return_amount"
        (click)="processRefund(selectedTransaction!)">
        Process Refund
      </button>
    </mat-dialog-actions>
  </div>
</ng-template>
</div>