<div class="page">
  <ng-template appPageHeaderActions>
    <button kendoButton themeColor="primary" (click)="exportCsv()">
      Export filing CSV / 匯出申報資料
    </button>
  </ng-template>

  <!-- Year selector -->
  <div class="flex flex-wrap items-end gap-3 mb-4">
    <label class="flex flex-col gap-1">
      <span>Tax Year / 稅務年度</span>
      <kendo-dropdownlist [data]="years" [(ngModel)]="taxYear" [style.width.px]="140"></kendo-dropdownlist>
    </label>
    <button kendoButton themeColor="primary" (click)="load()">Load / 載入</button>
  </div>

  <!-- Summary chips -->
  <div *ngIf="summary" class="flex flex-wrap gap-3 mb-4">
    <div class="summary-chip">
      <div class="summary-label">Total Reportable / 應申報總額</div>
      <div class="summary-value">{{ summary.totalReportable | currency }}</div>
    </div>
    <div class="summary-chip">
      <div class="summary-label">Recipients ≥ $600 / 達門檻收款人</div>
      <div class="summary-value">{{ summary.recipientsAtThreshold }}</div>
    </div>
    <div class="summary-chip" [class.summary-chip-flag]="summary.recipientsMissingW9 > 0">
      <div class="summary-label">Missing W-9 / 缺少 W-9</div>
      <div class="summary-value">{{ summary.recipientsMissingW9 }}</div>
    </div>
  </div>

  <div class="hint-text-sm">Click a name for payment detail · right-click a row for Copy B / 點選名稱檢視明細 · 右鍵下載 Copy B</div>

  <!-- Desktop grid -->
  <div class="hidden md:block">
    <kendo-grid class="clickable-rows" [data]="summary?.rows ?? []" [loading]="loading"
      (cellClick)="onCellClick($event)">
      <kendo-grid-column field="legalName" title="Legal Name / 法定名稱">
        <ng-template kendoGridCellTemplate let-r>
          <span class="legal-name">{{ r.legalName }}</span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column title="TIN" [width]="120">
        <ng-template kendoGridCellTemplate let-r>{{ r.tinLast4 ? '***-**-' + r.tinLast4 : '—' }}</ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="w9Status" title="W-9" [width]="130">
        <ng-template kendoGridCellTemplate let-r>
          <span class="badge" [ngClass]="r.w9Missing ? 'badge-missing' : 'badge-' + r.w9Status.toLowerCase()">
            {{ r.w9Status }}
          </span>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="necTotal" title="NEC / 非雇員報酬" format="{0:c2}" [width]="150"></kendo-grid-column>
      <kendo-grid-column field="rentsTotal" title="Rents / 租金" format="{0:c2}" [width]="140"></kendo-grid-column>
      <kendo-grid-column field="grandTotal" title="Total / 總計" format="{0:c2}" [width]="150"></kendo-grid-column>
      <kendo-grid-column title="Threshold / 門檻" [width]="130">
        <ng-template kendoGridCellTemplate let-r>
          <span *ngIf="r.meetsThreshold" class="badge badge-threshold">≥ $600</span>
          <span *ngIf="!r.meetsThreshold">—</span>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
    <kendo-contextmenu #rowMenu [items]="rowMenuItems" (select)="onRowMenuSelect($event)"></kendo-contextmenu>
  </div>

  <!-- Mobile cards -->
  <div class="md:hidden flex flex-col gap-3">
    <div *ngFor="let r of summary?.rows ?? []" class="rounded border p-3" (click)="openDetail(r)">
      <div class="flex justify-between items-start gap-2">
        <div class="font-semibold">{{ r.legalName }}</div>
        <span class="badge" [ngClass]="r.w9Missing ? 'badge-missing' : 'badge-' + r.w9Status.toLowerCase()">
          {{ r.w9Status }}
        </span>
      </div>
      <div class="text-sm flex justify-between"><span>TIN</span><span>{{ r.tinLast4 ? '***-**-' + r.tinLast4 : '—' }}</span></div>
      <div class="text-sm flex justify-between"><span>NEC / 非雇員報酬</span><span>{{ r.necTotal | currency }}</span></div>
      <div class="text-sm flex justify-between"><span>Rents / 租金</span><span>{{ r.rentsTotal | currency }}</span></div>
      <div class="text-sm flex justify-between font-semibold"><span>Total / 總計</span><span>{{ r.grandTotal | currency }}</span></div>
      <div class="text-sm flex justify-between">
        <span>Threshold / 門檻</span>
        <span><span *ngIf="r.meetsThreshold" class="badge badge-threshold">≥ $600</span><span *ngIf="!r.meetsThreshold">—</span></span>
      </div>
    </div>
  </div>

  <!-- Recipient detail dialog -->
  <kendo-dialog *ngIf="detail || detailLoading"
    [title]="'Recipient Detail / 收款人明細'"
    (close)="closeDetail()"
    [width]="760" [maxWidth]="'95vw'">

    <div *ngIf="detailLoading" class="p-3">Loading… / 載入中…</div>

    <ng-container *ngIf="detail">
      <div class="detail-header">
        <div class="detail-name">{{ detail.legalName }}</div>
        <div class="detail-meta">
          <span>TIN {{ detail.tinLast4 ? '***-**-' + detail.tinLast4 : '—' }}</span>
          <span class="badge" [ngClass]="'badge-' + detail.w9Status.toLowerCase()">{{ detail.w9Status }}</span>
          <span>Year / 年度 {{ detail.taxYear }}</span>
        </div>
      </div>

      <kendo-grid [data]="detail.payments">
        <kendo-grid-column field="paidDate" title="Date / 日期" [width]="120"></kendo-grid-column>
        <kendo-grid-column field="description" title="Description / 說明"></kendo-grid-column>
        <kendo-grid-column field="categoryName" title="Category / 類別" [width]="170"></kendo-grid-column>
        <kendo-grid-column field="boxCode" title="Box" [width]="90"></kendo-grid-column>
        <kendo-grid-column field="amount" title="Amount / 金額" format="{0:c2}" [width]="140"></kendo-grid-column>
      </kendo-grid>
    </ng-container>

    <kendo-dialog-actions>
      <button kendoButton (click)="closeDetail()">Close / 關閉</button>
    </kendo-dialog-actions>
  </kendo-dialog>

</div>
