<div class="page">
  <!-- Filter toolbar -->
  <div class="flex flex-wrap gap-3 items-end mb-4">
    <label class="flex flex-col gap-1">
      Year
      <kendo-numerictextbox
        [(ngModel)]="yearFilter"
        [format]="'####'"
        [decimals]="0"
        [spinners]="false"
        placeholder="All years">
      </kendo-numerictextbox>
    </label>
    <button kendoButton (click)="load()">Apply</button>
    <div class="ml-auto">
      <button kendoButton themeColor="primary" (click)="openNew()">+ New Statement</button>
    </div>
  </div>

  <!-- Main grid -->
  <kendo-grid [data]="rows" [loading]="loading">

    <kendo-grid-column field="year" title="Year" [width]="80"></kendo-grid-column>
    <kendo-grid-column field="month" title="Month" [width]="80"></kendo-grid-column>
    <kendo-grid-column field="openingBalance" title="Opening" [width]="120" format="c2"></kendo-grid-column>
    <kendo-grid-column field="totalGiving" title="Giving" [width]="120" format="c2"></kendo-grid-column>
    <kendo-grid-column field="totalOtherIncome" title="Other Income" [width]="130" format="c2"></kendo-grid-column>
    <kendo-grid-column field="totalExpenses" title="Expenses" [width]="120" format="c2"></kendo-grid-column>
    <kendo-grid-column field="calculatedClosingBalance" title="Calc. Closing" [width]="130" format="c2"></kendo-grid-column>
    <kendo-grid-column field="bankStatementBalance" title="Bank" [width]="120" format="c2"></kendo-grid-column>

    <kendo-grid-column title="Difference" [width]="120">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span [class.text-red-600]="dataItem.difference !== 0">
          {{ dataItem.difference | currency:'USD':'symbol':'1.2-2' }}
        </span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Finalized" [width]="100">
      <ng-template kendoGridCellTemplate let-dataItem>
        <span [class]="dataItem.isFinalized ? 'badge badge-yes' : 'badge badge-no'">
          {{ dataItem.isFinalized ? 'Yes' : 'No' }}
        </span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column title="Actions" [width]="180">
      <ng-template kendoGridCellTemplate let-dataItem>
        <button *ngIf="!dataItem.isFinalized" kendoButton fillMode="flat" (click)="openEdit(dataItem)">Edit</button>
        <button *ngIf="!dataItem.isFinalized" kendoButton themeColor="warning" fillMode="flat" (click)="finalize(dataItem)">Finalize</button>
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>

  <!-- Create / Edit dialog -->
  <kendo-dialog *ngIf="dialogOpen" title="Monthly Statement" [width]="560" [maxWidth]="'95vw'" [maxHeight]="'90vh'" (close)="dialogOpen = false">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 p-2">

      <label class="flex flex-col gap-1">
        Year
        <kendo-numerictextbox
          [(ngModel)]="form.year"
          [format]="'n0'"
          [decimals]="0"
          [min]="2000"
          [disabled]="!!editing">
        </kendo-numerictextbox>
      </label>

      <label class="flex flex-col gap-1">
        Month
        <kendo-numerictextbox
          [(ngModel)]="form.month"
          [format]="'n0'"
          [decimals]="0"
          [min]="1"
          [max]="12"
          [disabled]="!!editing">
        </kendo-numerictextbox>
      </label>

      <label class="flex flex-col gap-1">
        Opening Balance
        <kendo-numerictextbox
          [(ngModel)]="form.openingBalance"
          [format]="'c2'"
          [decimals]="2">
        </kendo-numerictextbox>
      </label>

      <label class="flex flex-col gap-1">
        Other Income
        <kendo-numerictextbox
          [(ngModel)]="form.totalOtherIncome"
          [format]="'c2'"
          [decimals]="2">
        </kendo-numerictextbox>
      </label>

      <label class="flex flex-col gap-1">
        Bank Statement Balance
        <kendo-numerictextbox
          [(ngModel)]="form.bankStatementBalance"
          [format]="'c2'"
          [decimals]="2">
        </kendo-numerictextbox>
      </label>

      <label class="flex flex-col gap-1 md:col-span-2">
        Notes
        <kendo-textbox [(ngModel)]="form.notes" placeholder="Optional"></kendo-textbox>
      </label>

      <!-- Computed summary (shown when editing an existing record or after save) -->
      <div *ngIf="preview" class="md:col-span-2 bg-gray-50 rounded p-3 grid grid-cols-2 gap-2 text-sm">
        <div class="font-semibold col-span-2 mb-1">Computed Summary</div>
        <span class="text-gray-600">Total Giving</span>
        <span>{{ preview.totalGiving | currency:'USD':'symbol':'1.2-2' }}</span>
        <span class="text-gray-600">Total Expenses</span>
        <span>{{ preview.totalExpenses | currency:'USD':'symbol':'1.2-2' }}</span>
        <span class="text-gray-600">Calc. Closing</span>
        <span>{{ preview.calculatedClosingBalance | currency:'USD':'symbol':'1.2-2' }}</span>
        <span class="text-gray-600">Difference</span>
        <span [class.text-red-600]="preview.difference !== 0">
          {{ preview.difference | currency:'USD':'symbol':'1.2-2' }}
        </span>
      </div>

    </div>

    <kendo-dialog-actions>
      <button kendoButton (click)="dialogOpen = false">Cancel</button>
      <button kendoButton themeColor="primary" (click)="save()">Save</button>
    </kendo-dialog-actions>
  </kendo-dialog>

</div>
