<div class="fin">
  <!-- Range filter — projected into the shared system header's right slot -->
  <ng-template appPageHeaderActions>
    <div class="chips">
      <button type="button" class="chip" [class.is-active]="activeRange === 'month'" (click)="setQuickRange('month')">This Month</button>
      <button type="button" class="chip" [class.is-active]="activeRange === 'lastMonth'" (click)="setQuickRange('lastMonth')">Last Month</button>
      <button type="button" class="chip" [class.is-active]="activeRange === 'year'" (click)="setQuickRange('year')">This Year</button>
    </div>
    <div class="range">
      <kendo-datepicker [(ngModel)]="from" (valueChange)="onManualDateChange()" [fillMode]="'flat'"
        [inputAttributes]="{ 'aria-label': 'From date' }"></kendo-datepicker>
      <span class="range__sep">→</span>
      <kendo-datepicker [(ngModel)]="to" (valueChange)="onManualDateChange()" [fillMode]="'flat'"
        [inputAttributes]="{ 'aria-label': 'To date' }"></kendo-datepicker>
    </div>
  </ng-template>

  <!-- Top band: hero balance + supporting stats (all-time) -->
  <section class="fin__band rise" style="--d: 0ms">
    <div class="hero">
      <div class="hero__glow"></div>
      <span class="hero__label">Offering Balance · 奉獻餘額</span>
      <div class="hero__value" [class.is-neg]="(summary?.balance ?? 0) < 0">
        {{ (summary?.balance ?? 0) | currency }}
      </div>
      <span class="hero__sub">All-time · Total giving minus paid &amp; approved expenses</span>
      <div class="hero__rings"></div>
    </div>

    <div class="stat stat--income">
      <div class="stat__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 19V5M12 5l-6 6M12 5l6 6"/></svg>
      </div>
      <span class="stat__label">Total Income · 總奉獻</span>
      <span class="stat__value">{{ (summary?.totalIncome ?? 0) | currency }}</span>
    </div>

    <div class="stat stat--expense">
      <div class="stat__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 5v14M12 19l-6-6M12 19l6-6"/></svg>
      </div>
      <span class="stat__label">Total Expenses · 總支出</span>
      <span class="stat__value">{{ (summary?.totalExpenses ?? 0) | currency }}</span>
    </div>
  </section>

  <!-- Analytics grid -->
  <section class="fin__grid">
    <!-- 2.1 Income vs Expense -->
    <article class="card rise" style="--d: 160ms">
      <div class="card__head">
        <h2 class="card__title">Income vs Expense</h2>
        <span class="card__zh">收入支出占比</span>
      </div>

      <div class="donut">
        <kendo-chart [style.height.px]="230" [seriesColors]="incomeExpenseColors" [transitions]="false">
          <kendo-chart-area background="transparent"></kendo-chart-area>
          <kendo-chart-series>
            <kendo-chart-series-item type="donut" [holeSize]="58" [data]="incomeExpense"
              categoryField="label" field="amount" [border]="{ width: 0 }">
            </kendo-chart-series-item>
          </kendo-chart-series>
          <kendo-chart-legend [visible]="false"></kendo-chart-legend>
          <kendo-chart-tooltip format="{0:c}"></kendo-chart-tooltip>
        </kendo-chart>
        <div class="donut__center">
          <span class="donut__cap">Net · 淨額</span>
          <span class="donut__num" [class.is-neg]="rangeNet < 0">{{ rangeNet | currency:'USD':'symbol':'1.0-0' }}</span>
        </div>
      </div>

      <ul class="legend">
        <li class="legend__row">
          <span class="legend__dot" [style.background]="incomeExpenseColors[0]"></span>
          <span class="legend__name">Income · 收入</span>
          <span class="legend__val">{{ rangeIncome | currency }}</span>
        </li>
        <li class="legend__row">
          <span class="legend__dot" [style.background]="incomeExpenseColors[1]"></span>
          <span class="legend__name">Expense · 支出</span>
          <span class="legend__val">{{ rangeExpense | currency }}</span>
        </li>
      </ul>
    </article>

    <!-- 2.2 Expense breakdown drill-down -->
    <article class="card rise" style="--d: 240ms">
      <div class="card__head">
        <h2 class="card__title">Expense Breakdown</h2>
        <span class="card__zh">支出分類</span>
      </div>

      <!-- breadcrumb -->
      <nav class="crumbs">
        <ng-container *ngFor="let c of breadcrumb; let i = index; let last = last">
          <button type="button" class="crumb" [class.is-current]="last" [disabled]="last" (click)="goToCrumb(i)">
            {{ c.label }}
          </button>
          <span *ngIf="!last" class="crumb__sep">›</span>
        </ng-container>
      </nav>

      <div class="donut">
        <kendo-chart [style.height.px]="216" [seriesColors]="palette" (seriesClick)="onSliceClick($event)" [transitions]="false">
          <kendo-chart-area background="transparent"></kendo-chart-area>
          <kendo-chart-series>
            <kendo-chart-series-item type="donut" [holeSize]="52" [data]="breakdown"
              categoryField="label" field="amount" [border]="{ width: 0 }">
            </kendo-chart-series-item>
          </kendo-chart-series>
          <kendo-chart-legend [visible]="false"></kendo-chart-legend>
          <kendo-chart-tooltip format="{0:c}"></kendo-chart-tooltip>
        </kendo-chart>
        <div class="donut__center" *ngIf="breakdown.length">
          <span class="donut__cap">Total · 合計</span>
          <span class="donut__num">{{ breakdownTotal | currency:'USD':'symbol':'1.0-0' }}</span>
        </div>
        <div *ngIf="breakdown.length === 0" class="empty">No expenses in this range<br><span>此範圍無支出</span></div>
      </div>

      <ul class="legend legend--scroll" *ngIf="breakdown.length">
        <li class="legend__row legend__row--btn" *ngFor="let s of breakdown; let i = index"
            (click)="drillInto(s)" [class.is-selected]="selectedSubId === s.id">
          <span class="legend__dot" [style.background]="palette[i % palette.length]"></span>
          <span class="legend__name">{{ s.label }}</span>
          <span class="legend__pct">{{ percent(s.amount, breakdownTotal) | number:'1.0-0' }}%</span>
          <span class="legend__val">{{ s.amount | currency }}</span>
        </li>
      </ul>
      <p class="hint">{{ drillHint }}</p>
    </article>

    <!-- 2.2.1 Expense detail beside the drill chart -->
    <article class="card card--wide rise" style="--d: 320ms">
      <div class="card__head">
        <h2 class="card__title">Expense Detail</h2>
        <span class="card__zh">支出明細 · {{ currentLevelLabel }}</span>
      </div>

      <kendo-grid class="detail"
        [data]="detailRows"
        [pageable]="{ info: false, previousNext: true, buttonCount: 4 }"
        [pageSize]="detailPageSize"
        [skip]="detailSkip"
        [loading]="detailLoading"
        [height]="430"
        (pageChange)="onDetailPageChange($event)">
        <kendo-grid-column field="expenseDate" title="Date" [width]="104"></kendo-grid-column>
        <kendo-grid-column title="Item">
          <ng-template kendoGridCellTemplate let-d>
            <div class="cell-item">
              <span class="cell-item__desc">{{ d.description }}</span>
              <span class="cell-item__sub">{{ d.ministryName }} · {{ d.primaryCategoryName }}<span *ngIf="d.lineCount > 1"> +{{ d.lineCount - 1 }}</span></span>
            </div>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Status" [width]="110">
          <ng-template kendoGridCellTemplate let-d>
            <span class="pill" [ngClass]="statusClass(d.status)">{{ d.status }}</span>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="amount" title="Amount" [width]="118">
          <ng-template kendoGridCellTemplate let-d>
            <span class="cell-amt">{{ d.amount | currency }}</span>
          </ng-template>
        </kendo-grid-column>

        <ng-template kendoGridNoRecordsTemplate>
          <div class="empty empty--grid">No matching expenses<br><span>沒有符合的支出</span></div>
        </ng-template>
      </kendo-grid>
    </article>
  </section>
</div>
