<div class="page">
  <div class="flex flex-wrap gap-3 items-end mb-4">
    <label class="flex flex-col gap-1">
      Search
      <kendo-textbox placeholder="Check # / payee" [(ngModel)]="filter.search"
        (keydown.enter)="applyFilter()"></kendo-textbox>
    </label>
    <label class="flex flex-col gap-1">
      Status
      <kendo-dropdownlist [data]="statuses" textField="label" valueField="value" [valuePrimitive]="true"
        [(ngModel)]="filter.status" [defaultItem]="{ value: null, label: 'All Status/全部狀態' }">
      </kendo-dropdownlist>
    </label>
    <button kendoButton (click)="applyFilter()">Apply</button>
  </div>

  <!-- Desktop / tablet: full data grid -->
  <div class="hidden md:block">
    <kendo-grid [data]="{ data: rows, total: total }" [loading]="loading" [pageable]="true" [skip]="skip"
      [pageSize]="pageSize" (pageChange)="onPageChange($event)">

      <kendo-grid-column field="checkNumber" title="Check #" [width]="100"></kendo-grid-column>
      <kendo-grid-column field="checkDate" title="Date" [width]="110"></kendo-grid-column>
      <kendo-grid-column field="payeeName" title="Payee"></kendo-grid-column>
      <kendo-grid-column field="amount" title="Amount" [width]="120" format="c2"></kendo-grid-column>
      <kendo-grid-column title="Lines" [width]="80">
        <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.lineCount }}</ng-template>
      </kendo-grid-column>
      <kendo-grid-column title="Status" [width]="110">
        <ng-template kendoGridCellTemplate let-dataItem>
          <span [class]="statusClass(dataItem.status)">{{ dataItem.status }}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column title="Receipt / 簽收" [width]="180">
        <ng-template kendoGridCellTemplate let-dataItem>
          <ng-container *ngIf="dataItem.signed; else notSigned">
            <span class="badge-paid">Signed</span>
            <div class="text-xs" style="color:#6b7280;">
              {{ dataItem.receiptSignedName }} · {{ dataItem.receiptSignedAt | date:'short' }}
            </div>
          </ng-container>
          <ng-template #notSigned><span style="color:#9ca3af;">—</span></ng-template>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column title="Actions" [width]="600">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button kendoButton fillMode="flat" (click)="view(dataItem)">View</button>
          <button kendoButton fillMode="flat" themeColor="primary" (click)="print(dataItem)">Print</button>
          <button *ngIf="canSign(dataItem)" kendoButton fillMode="flat" themeColor="success"
            (click)="openSign(dataItem)">簽收</button>
          <!-- <button *ngIf="dataItem.signed" kendoButton fillMode="flat" (click)="viewSignature(dataItem)">Signature</button> -->
          <button *ngIf="dataItem.signed" kendoButton fillMode="flat" themeColor="primary"
            (click)="printReceipt(dataItem)">收據</button>
          <button *ngIf="canVoid(dataItem)" kendoButton fillMode="flat" themeColor="error"
            (click)="openVoid(dataItem)">Void</button>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>

  <!-- Mobile: tappable card list -->
  <div class="md:hidden chk-cards">
    <div *ngIf="loading" class="chk-empty">Loading…</div>
    <div *ngIf="!loading && rows.length === 0" class="chk-empty">No checks found.</div>

    <div class="chk-card" *ngFor="let row of rows">
      <div class="chk-card__top">
        <span class="chk-card__number">Check #{{ row.checkNumber }}</span>
        <span class="chk-card__amount">{{ row.amount | currency:'USD':'symbol':'1.2-2' }}</span>
      </div>

      <div class="chk-card__payee">{{ row.payeeName }}</div>

      <dl class="chk-card__meta">
        <div>
          <dt>Date</dt>
          <dd>{{ row.checkDate }}</dd>
        </div>
        <div>
          <dt>Lines</dt>
          <dd>{{ row.lineCount }}</dd>
        </div>
        <div>
          <dt>Receipt / 簽收</dt>
          <dd>
            <ng-container *ngIf="row.signed; else notSignedCard">
              {{ row.receiptSignedName }} · {{ row.receiptSignedAt | date:'short' }}
            </ng-container>
            <ng-template #notSignedCard>—</ng-template>
          </dd>
        </div>
      </dl>

      <div class="chk-card__footer">
        <span [class]="statusClass(row.status)">{{ row.status }}</span>
        <span *ngIf="row.signed" class="badge-paid">Signed</span>
      </div>

      <div class="chk-card__actions">
        <button kendoButton fillMode="outline" (click)="view(row)">View</button>
        <button kendoButton themeColor="primary" (click)="print(row)">Print</button>
        <button *ngIf="canSign(row)" kendoButton themeColor="success" (click)="openSign(row)">簽收</button>
        <button *ngIf="row.signed" kendoButton fillMode="outline" (click)="printReceipt(row)">收據</button>
        <button *ngIf="canVoid(row)" kendoButton themeColor="error" fillMode="outline" (click)="openVoid(row)">Void</button>
      </div>
    </div>

    <div class="chk-pager" *ngIf="!loading && rows.length > 0">
      <button kendoButton fillMode="outline" [disabled]="page <= 1" (click)="prevPage()">Prev</button>
      <span class="chk-pager__info">Page {{ page }} of {{ totalPages }}</span>
      <button kendoButton fillMode="outline" [disabled]="page >= totalPages" (click)="nextPage()">Next</button>
    </div>
  </div>

  <!-- Detail dialog -->
  <kendo-dialog *ngIf="detail" title="Check #{{ detail.checkNumber }}" [width]="560" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="detail = null">
    <div class="p-2 flex flex-col gap-2">
      <div class="grid grid-cols-2 gap-2 text-sm">
        <div><strong>Payee:</strong> {{ detail.payeeName }}</div>
        <div><strong>Date:</strong> {{ detail.checkDate }}</div>
        <div><strong>Amount:</strong> {{ detail.amount | currency }}</div>
        <div><strong>Status:</strong> {{ detail.status }}</div>
        <div class="col-span-2" *ngIf="detail.memo"><strong>Memo:</strong> {{ detail.memo }}</div>
        <div class="col-span-2" *ngIf="detail.signed">
          <strong>Signed:</strong> {{ detail.receiptSignedName }} · {{ detail.receiptSignedAt | date:'short' }}
        </div>
        <div class="col-span-2" *ngIf="detail.status === 'Voided'">
          <strong>Voided:</strong> {{ detail.voidReason }} · {{ detail.voidedAt | date:'short' }}
        </div>
      </div>
      <table class="w-full text-sm mt-2">
        <thead>
          <tr class="text-left" style="border-bottom:1px solid #e5e7eb;">
            <th class="py-1">Description</th>
            <th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let l of detail.lines" style="border-bottom:1px solid #f3f4f6;">
            <td class="py-1">{{ l.description }}</td>
            <td class="text-right">{{ l.amount | currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="detail = null">Close</button>
    </kendo-dialog-actions>
  </kendo-dialog>

  <!-- Void dialog -->
  <kendo-dialog *ngIf="voidRow" title="Void Check #{{ voidRow.checkNumber }}" [width]="420" [maxWidth]="'95vw'" (close)="voidRow = null">
    <div class="p-2 flex flex-col gap-2">
      <p class="text-sm" style="color:#991b1b;">
        Voiding returns the bundled expenses to Approved so they can be re-issued.
        / 作廢將使支出退回「已核准」可重新開立。
      </p>
      <label class="flex flex-col gap-1">
        Reason / 原因
        <kendo-textbox [(ngModel)]="voidReason" placeholder="Optional"></kendo-textbox>
      </label>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="voidRow = null">Cancel</button>
      <button kendoButton themeColor="error" (click)="confirmVoid()">Void</button>
    </kendo-dialog-actions>
  </kendo-dialog>

  <!-- Receipt signature dialog -->
  <app-receipt-sign-dialog *ngIf="signRow" [check]="signRow" (save)="onSign($event)" (cancel)="signRow = null">
  </app-receipt-sign-dialog>
</div>