<div class="page">
  <ng-template appPageHeaderActions>
    <button kendoButton themeColor="primary" (click)="openNew()">+ New Reimbursement</button>
  </ng-template>

  <!-- Desktop / tablet: full data grid -->
  <div class="hidden md:block">
    <kendo-grid [data]="rows" [loading]="loading">
      <kendo-grid-column field="expenseDate" title="Date" [width]="110"></kendo-grid-column>
      <kendo-grid-column field="description" title="Description"></kendo-grid-column>
      <kendo-grid-column field="ministryName" title="Ministry" [width]="140"></kendo-grid-column>
      <kendo-grid-column title="Category">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.primaryCategoryName }}<span *ngIf="dataItem.lineCount > 1" class="text-gray-500"> +{{ dataItem.lineCount - 1 }}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
      <kendo-grid-column title="Status" [width]="220">
        <ng-template kendoGridCellTemplate let-dataItem>
          <span [class]="statusClass(dataItem.status)">{{ dataItem.status }}</span>
          <div *ngIf="dataItem.reviewedByName && (dataItem.status === 'Approved' || dataItem.status === 'Paid')"
            class="review-meta">✓ Approved by {{ dataItem.reviewedByName }}<br>{{ dataItem.reviewedAt | date:'yyyy-MM-dd HH:mm' }}</div>
          <div *ngIf="dataItem.status === 'Rejected'" class="review-meta review-meta-reject">
            ✗ Rejected<span *ngIf="dataItem.reviewedByName"> by {{ dataItem.reviewedByName }}</span><br>{{ dataItem.reviewedAt | date:'yyyy-MM-dd HH:mm' }}
            <div *ngIf="dataItem.reviewNotes" class="review-reason">{{ dataItem.reviewNotes }}</div>
          </div>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column title="Actions" [width]="230">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button *ngIf="canEdit(dataItem)" kendoButton fillMode="flat" (click)="openEdit(dataItem)">Edit</button>
          <button *ngIf="isDraft(dataItem)" kendoButton themeColor="primary" fillMode="flat" (click)="submit(dataItem)">Submit</button>
          <button *ngIf="isRejected(dataItem)" kendoButton themeColor="primary" fillMode="flat" (click)="resubmit(dataItem)">Resubmit</button>
          <button *ngIf="isDraft(dataItem)" kendoButton fillMode="flat" (click)="remove(dataItem)">Delete</button>
          <button *ngIf="dataItem.hasReceipt" kendoButton fillMode="flat"
            (click)="openReceipt(dataItem.id)" class="receipt-link">Receipt</button>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>

  <!-- Mobile: tappable card list -->
  <div class="md:hidden flex flex-col gap-3 rmb-cards">
    <div *ngIf="loading" class="rmb-empty">Loading…</div>
    <div *ngIf="!loading && rows.length === 0" class="rmb-empty">No reimbursements yet.</div>

    <div class="rmb-card" *ngFor="let row of rows">
      <div class="rmb-card__top">
        <span class="rmb-card__date">{{ row.expenseDate }}</span>
        <span class="rmb-card__amount">{{ row.amount | currency:'USD':'symbol':'1.2-2' }}</span>
      </div>

      <div class="rmb-card__desc">{{ row.description }}</div>

      <dl class="rmb-card__meta">
        <div>
          <dt>Ministry</dt>
          <dd>{{ row.ministryName }}</dd>
        </div>
        <div>
          <dt>Category</dt>
          <dd>{{ row.primaryCategoryName }}<span *ngIf="row.lineCount > 1"> +{{ row.lineCount - 1 }}</span></dd>
        </div>
      </dl>

      <div class="rmb-card__footer">
        <span [class]="statusClass(row.status)">{{ row.status }}</span>
      </div>

      <!-- Rejection feedback: what the submitter must fix before resubmitting -->
      <div *ngIf="row.status === 'Rejected'" class="rmb-card__reject">
        ✗ Rejected<span *ngIf="row.reviewedByName"> by {{ row.reviewedByName }}</span>
        <span *ngIf="row.reviewedAt"> · {{ row.reviewedAt | date:'yyyy-MM-dd HH:mm' }}</span>
        <div *ngIf="row.reviewNotes" class="rmb-card__reject-reason">{{ row.reviewNotes }}</div>
      </div>
      <div *ngIf="row.reviewedByName && (row.status === 'Approved' || row.status === 'Paid')" class="rmb-card__approved">
        ✓ Approved by {{ row.reviewedByName }} · {{ row.reviewedAt | date:'yyyy-MM-dd HH:mm' }}
      </div>

      <div class="rmb-card__actions" *ngIf="canEdit(row) || row.hasReceipt">
        <button *ngIf="canEdit(row)" kendoButton fillMode="outline" (click)="openEdit(row)">Edit</button>
        <button *ngIf="isDraft(row)" kendoButton themeColor="primary" (click)="submit(row)">Submit</button>
        <button *ngIf="isRejected(row)" kendoButton themeColor="primary" (click)="resubmit(row)">Resubmit</button>
        <button *ngIf="isDraft(row)" kendoButton fillMode="outline" (click)="remove(row)">Delete</button>
        <button *ngIf="row.hasReceipt" kendoButton fillMode="flat" (click)="openReceipt(row.id)">Receipt</button>
      </div>
    </div>
  </div>

  <app-expense-form-dialog
    *ngIf="dialogOpen"
    mode="reimbursement"
    [expense]="editRow"
    [title]="editRow ? 'Edit Reimbursement' : 'New Reimbursement'"
    (save)="onSave($event)"
    (cancel)="closeDialog()">
  </app-expense-form-dialog>
</div>
