<kendo-dialog title="Review Expense / 審核支出" (close)="cancel.emit()"
  [width]="showReceiptPanel ? 1100 : 620" [maxWidth]="'95vw'" [maxHeight]="'90vh'">

  <div *ngIf="loading" class="p-6 text-center text-gray-500">Loading… / 載入中…</div>

  <div *ngIf="!loading && expense" class="flex flex-col gap-4 md:flex-row">

    <!-- Left: read-only expense detail -->
    <div class="flex-1 min-w-0 flex flex-col gap-3">
      <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
        <div class="text-gray-500">Date / 日期</div><div>{{ expense.expenseDate }}</div>
        <div class="text-gray-500">Ministry / 事工</div><div>{{ expense.ministryName }}</div>
        <div class="text-gray-500">Payee / 收款人</div>
        <div>
          <ng-container *ngIf="expense.vendorName; else memberPayee">{{ expense.vendorName }}</ng-container>
          <ng-template #memberPayee>
            <ng-container *ngIf="expense.memberName; else dash">
              <div *ngIf="expense.memberNickName">{{ expense.memberNickName }}</div>
              <div [class.text-gray-500]="expense.memberNickName" [class.text-xs]="expense.memberNickName">{{ expense.memberName }}</div>
            </ng-container>
            <ng-template #dash>—</ng-template>
          </ng-template>
        </div>
        <div class="text-gray-500">Description / 說明</div><div>{{ expense.description }}</div>
        <div class="text-gray-500">Status / 狀態</div><div>{{ expense.status }}</div>
      </div>

      <!-- Line items -->
      <div class="flex flex-col gap-1">
        <div class="font-semibold text-sm">明細 / Line Items</div>
        <table class="w-full text-sm border-collapse">
          <thead>
            <tr class="text-left text-gray-500 border-b">
              <th class="py-1">Category / 類別</th>
              <th class="py-1">Description / 說明</th>
              <th class="py-1 text-right">Amount / 金額</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let line of expense.lines" class="border-b border-gray-100">
              <td class="py-1">{{ line.categoryGroupName }}<span *ngIf="line.subCategoryName"> / {{ line.subCategoryName }}</span></td>
              <td class="py-1 text-gray-600">{{ line.description || '—' }}</td>
              <td class="py-1 text-right tabular-nums">{{ line.amount | currency }}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="font-semibold">
              <td class="py-1" colspan="2">Total / 合計</td>
              <td class="py-1 text-right tabular-nums">{{ expense.amount | currency }}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- Reject reason capture (shown after clicking Reject) -->
      <div *ngIf="rejecting" class="flex flex-col gap-2 rounded border border-red-200 bg-red-50 p-3">
        <label class="flex flex-col gap-1 text-sm">Reject Reason / 拒絕原因
          <kendo-dropdownlist [data]="rejectReasons" textField="label" valueField="value" [valuePrimitive]="true"
            [(ngModel)]="rejectReason" [defaultItem]="{ value: null, label: '-- Select reason --/請選擇原因' }">
          </kendo-dropdownlist>
        </label>
        <label *ngIf="isOtherReason" class="flex flex-col gap-1 text-sm">Detail / 說明
          <kendo-textbox [(ngModel)]="rejectOther" placeholder="Please enter the reason / 請輸入原因"></kendo-textbox>
        </label>
      </div>
    </div>

    <!-- Right: receipt preview -->
    <div class="md:w-[30rem] md:shrink-0 md:border-l md:pl-4 flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="font-semibold">收據預覽 / Receipt</span>
        <div *ngIf="receiptImageUrl" class="flex items-center gap-1">
          <button kendoButton size="small" fillMode="flat" (click)="zoomOut()"
            [disabled]="receiptZoom <= minZoom" title="縮小 / Zoom out">−</button>
          <span class="w-12 text-center text-sm tabular-nums">{{ receiptZoom * 100 | number:'1.0-0' }}%</span>
          <button kendoButton size="small" fillMode="flat" (click)="zoomIn()"
            [disabled]="receiptZoom >= maxZoom" title="放大 / Zoom in">＋</button>
          <button kendoButton size="small" fillMode="flat" (click)="resetZoom()" title="重設 / Reset">⟲</button>
        </div>
      </div>

      <div *ngIf="receiptImageUrl" class="overflow-auto rounded border border-gray-200 bg-gray-50" style="max-height: 72vh;">
        <img [src]="receiptImageUrl" alt="Receipt preview" [style.width.%]="receiptZoom * 100" class="block max-w-none" />
      </div>
      <iframe *ngIf="receiptPdfUrl" [src]="receiptPdfUrl" title="Receipt PDF"
        class="w-full rounded border border-gray-200" style="height: 72vh;"></iframe>

      <div *ngIf="!showReceiptPanel" class="rounded border border-dashed border-gray-300 p-6 text-center text-gray-400 text-sm">
        No receipt attached / 無收據
      </div>
    </div>

  </div>

  <kendo-dialog-actions>
    <!-- Decision row -->
    <ng-container *ngIf="!rejecting">
      <button kendoButton (click)="cancel.emit()">Cancel / 取消</button>
      <button kendoButton themeColor="error" fillMode="flat" (click)="startReject()">Reject / 拒絕</button>
      <button kendoButton themeColor="success" (click)="confirmApprove()">Approve / 核准</button>
    </ng-container>
    <!-- Reject confirmation row -->
    <ng-container *ngIf="rejecting">
      <button kendoButton (click)="cancelReject()">Back / 返回</button>
      <button kendoButton themeColor="error" [disabled]="!canConfirmReject" (click)="confirmReject()">Confirm Reject / 確認拒絕</button>
    </ng-container>
  </kendo-dialog-actions>
</kendo-dialog>
