<div class="page">
  <p class="mb-4 text-sm text-gray-600">
    儲存常用的固定費用（房租、網路、餐費…）為範本，下次可快速套用。費用日期不會儲存。<br>
    Save recurring fixed expenses as snapshots to quickly re-use them. The Expense Date is never saved.
  </p>

  <!-- Desktop: grid -->
  <div class="hidden md:block">
    <kendo-grid [data]="rows" [loading]="loading">
      <kendo-grid-column field="name" title="Snapshot / 範本" [width]="240"></kendo-grid-column>
      <kendo-grid-column field="vendorName" title="Vendor / 廠商" [width]="180">
        <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.vendorName || '—' }}</ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="ministryName" title="Ministry / 事工"></kendo-grid-column>
      <kendo-grid-column field="totalAmount" title="Amount / 金額" [width]="120" format="c2"></kendo-grid-column>
      <kendo-grid-column title="Created by / 建立者" [width]="200">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.createdByName || '—' }}<br>
          <span class="text-xs text-gray-500">{{ dataItem.createdAt | date:'yyyy-MM-dd' }}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column title="Actions" [width]="160">
        <ng-template kendoGridCellTemplate let-dataItem>
          <button kendoButton fillMode="flat" (click)="openRename(dataItem)">Rename</button>
          <button kendoButton fillMode="flat" themeColor="error" (click)="openDelete(dataItem)">Delete</button>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>

  <!-- Mobile: card list -->
  <div class="md:hidden flex flex-col gap-3">
    <div *ngFor="let row of rows" class="rounded border border-gray-200 p-3 flex flex-col gap-1">
      <div class="flex items-center justify-between">
        <span class="font-semibold">{{ row.name }}</span>
        <span class="tabular-nums">{{ row.totalAmount | currency }}</span>
      </div>
      <div class="text-sm text-gray-600">{{ row.vendorName || '—' }} · {{ row.ministryName }}</div>
      <div class="text-xs text-gray-500">{{ row.createdByName || '—' }} · {{ row.createdAt | date:'yyyy-MM-dd' }}</div>
      <div class="flex gap-2 pt-1">
        <button kendoButton size="small" fillMode="outline" (click)="openRename(row)">Rename</button>
        <button kendoButton size="small" fillMode="outline" themeColor="error" (click)="openDelete(row)">Delete</button>
      </div>
    </div>
    <p *ngIf="!loading && rows.length === 0" class="text-sm text-gray-500">尚無範本 / No snapshots yet.</p>
  </div>

  <!-- Rename dialog -->
  <kendo-dialog *ngIf="renameRow" title="重新命名 / Rename Snapshot" [width]="420" [maxWidth]="'95vw'" (close)="cancelRename()">
    <label class="flex flex-col gap-1 p-2">名稱 / Name
      <kendo-textbox [(ngModel)]="renameValue"></kendo-textbox>
    </label>
    <kendo-dialog-actions>
      <button kendoButton (click)="cancelRename()">Cancel</button>
      <button kendoButton themeColor="primary" [disabled]="!renameValue.trim() || renameSaving"
        (click)="confirmRename()">{{ renameSaving ? 'Saving…' : 'Save' }}</button>
    </kendo-dialog-actions>
  </kendo-dialog>

  <!-- Delete confirm dialog -->
  <kendo-dialog *ngIf="deleteRow" title="刪除 / Delete Snapshot" [width]="420" [maxWidth]="'95vw'" (close)="cancelDelete()">
    <p class="p-2">確定刪除「{{ deleteRow.name }}」？ / Delete "{{ deleteRow.name }}"?</p>
    <kendo-dialog-actions>
      <button kendoButton (click)="cancelDelete()">Cancel</button>
      <button kendoButton themeColor="error" (click)="confirmDelete()">Delete</button>
    </kendo-dialog-actions>
  </kendo-dialog>
</div>
