<div class="page">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

    <!-- Left: Category Groups -->
    <div>
      <div class="panel-header">
        <h3>Groups / 組別</h3>
        <button kendoButton themeColor="primary" (click)="openNewGroup()">+ New Group</button>
      </div>
      <div class="hint-text-sm">Click a row to view its subcategories · right-click for actions</div>
      <kendo-grid class="clickable-rows" [data]="groups" [loading]="loading"
        [rowClass]="groupRowClass"
        (cellClick)="onGroupCellClick($event)">
        <kendo-grid-column field="sortOrder" title="#" [width]="50"></kendo-grid-column>
        <kendo-grid-column field="name_en" title="Name (EN)"></kendo-grid-column>
        <kendo-grid-column field="name_zh" title="名稱 (中)"></kendo-grid-column>
        <kendo-grid-column field="isActive" title="Active" [width]="70">
          <ng-template kendoGridCellTemplate let-g>{{ g.isActive ? 'Yes' : 'No' }}</ng-template>
        </kendo-grid-column>
      </kendo-grid>
      <kendo-contextmenu #groupMenu [items]="groupMenuItems" (select)="onGroupMenuSelect($event)"></kendo-contextmenu>
    </div>

    <!-- Right: Subcategories of selected group -->
    <div>
      <div class="panel-header">
        <h3>Subcategories / 子類別<span *ngIf="selectedGroup" class="selected-label"> — {{ selectedGroup.name_en }}</span></h3>
        <button kendoButton themeColor="primary" [disabled]="!selectedGroup" (click)="openNewSub()">+ New Subcategory</button>
      </div>
      <div *ngIf="!selectedGroup" class="hint-text">Select a group on the left to view its subcategories.</div>
      <div *ngIf="selectedGroup" class="hint-text-sm">Right-click a row for actions</div>
      <kendo-grid *ngIf="selectedGroup" [data]="subCategories" [loading]="loading"
        (cellClick)="onSubCellClick($event)">
        <kendo-grid-column field="sortOrder" title="#" [width]="50"></kendo-grid-column>
        <kendo-grid-column field="name_en" title="Name (EN)"></kendo-grid-column>
        <kendo-grid-column field="name_zh" title="名稱 (中)"></kendo-grid-column>
        <kendo-grid-column field="isActive" title="Active" [width]="70">
          <ng-template kendoGridCellTemplate let-s>{{ s.isActive ? 'Yes' : 'No' }}</ng-template>
        </kendo-grid-column>
      </kendo-grid>
      <kendo-contextmenu #subMenu [items]="subMenuItems" (select)="onSubMenuSelect($event)"></kendo-contextmenu>
    </div>

  </div>

  <!-- Group Dialog -->
  <kendo-dialog *ngIf="groupDialogOpen"
    [title]="editingGroupId != null ? 'Edit Group' : 'New Group'"
    (close)="groupDialogOpen = false"
    [width]="480" [maxWidth]="'95vw'">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
      <label class="flex flex-col gap-1">
        Name (EN) *
        <kendo-textbox [(ngModel)]="groupForm.name_en"></kendo-textbox>
      </label>
      <!-- Chinese name with AI assist: refine 中文 + translate to English + suggest a 990 line -->
      <div class="flex flex-col gap-1 md:col-span-2">
        <div class="flex items-end justify-between gap-2">
          <label class="flex flex-1 flex-col gap-1">名稱 (中)
            <kendo-textbox [(ngModel)]="groupForm.name_zh" placeholder="可輸入中文，AI 幫忙翻譯"></kendo-textbox>
          </label>
          <button kendoButton fillMode="outline" themeColor="primary" type="button"
            [disabled]="(!groupForm.name_zh.trim() && !groupForm.name_en.trim()) || groupAiLoading"
            (click)="requestGroupAiSuggest()"
            title="翻譯英文並建議 990 Line / Translate + suggest 990 line">
            {{ groupAiLoading ? '思考中… / Thinking…' : '✨ AI 建議' }}
          </button>
        </div>
        <div *ngIf="groupAiSuggestion" class="rounded border border-blue-200 bg-blue-50 p-3 flex flex-col gap-2 text-sm">
          <div class="font-semibold text-blue-800">AI 建議 / Suggestion</div>
          <div *ngIf="groupAiSuggestion.englishName" class="flex gap-2">
            <span class="text-gray-500 shrink-0">English:</span>
            <span class="font-medium">{{ groupAiSuggestion.englishName }}</span>
          </div>
          <div *ngIf="groupAiSuggestion.chineseName" class="flex gap-2">
            <span class="text-gray-500 shrink-0">中文:</span>
            <span class="font-medium">{{ groupAiSuggestion.chineseName }}</span>
          </div>
          <div *ngIf="groupAiSuggestion.form990LineLabel" class="flex gap-2">
            <span class="text-gray-500 shrink-0">990 Line:</span>
            <span class="font-medium">{{ groupAiSuggestion.form990LineLabel }}</span>
          </div>
          <div class="text-xs text-gray-500">信心 / Confidence: {{ groupAiSuggestion.confidence * 100 | number:'1.0-0' }}%</div>
          <div class="flex gap-2">
            <button kendoButton themeColor="primary" size="small" type="button" (click)="applyGroupAiSuggestion()">套用 / Apply</button>
            <button kendoButton fillMode="flat" size="small" type="button" (click)="dismissGroupAiSuggestion()">忽略 / Dismiss</button>
          </div>
        </div>
      </div>
      <label class="flex flex-col gap-1">
        Sort order
        <kendo-numerictextbox [(ngModel)]="groupForm.sortOrder" [format]="'n0'" [decimals]="0" [min]="0"></kendo-numerictextbox>
      </label>
      <label class="flex flex-col gap-1">
        <span>Form 990 Line / 990 行</span>
        <kendo-dropdownlist
          [data]="form990Lines"
          textField="label" valueField="id" [valuePrimitive]="true"
          [defaultItem]="{ id: null, label: '(Unmapped / 未對應)' }"
          [(ngModel)]="groupForm.form990LineId">
        </kendo-dropdownlist>
      </label>
      <label class="flex flex-col gap-1">
        <span>1099 Box / 1099 框</span>
        <kendo-dropdownlist
          [data]="form1099Boxes"
          textField="label" valueField="id" [valuePrimitive]="true"
          [defaultItem]="{ id: null, label: '— none —' }"
          [(ngModel)]="groupForm.form1099BoxId">
        </kendo-dropdownlist>
      </label>
      <label *ngIf="editingGroupId != null" class="flex items-center gap-2 md:col-span-2">
        <input type="checkbox" [(ngModel)]="groupForm.isActive" /> Active
      </label>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="groupDialogOpen = false">Cancel</button>
      <button kendoButton themeColor="primary" [disabled]="!groupForm.name_en" (click)="saveGroup()">Save</button>
    </kendo-dialog-actions>
  </kendo-dialog>

  <!-- Subcategory Dialog -->
  <kendo-dialog *ngIf="subDialogOpen"
    [title]="editingSubId != null ? 'Edit Subcategory' : 'New Subcategory'"
    (close)="subDialogOpen = false"
    [width]="480" [maxWidth]="'95vw'">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
      <label class="flex flex-col gap-1">
        Name (EN) *
        <kendo-textbox [(ngModel)]="subForm.name_en"></kendo-textbox>
      </label>
      <!-- Chinese name with AI assist: refine 中文 + translate to English + suggest a 990 line (biased by parent group) -->
      <div class="flex flex-col gap-1 md:col-span-2">
        <div class="flex items-end justify-between gap-2">
          <label class="flex flex-1 flex-col gap-1">名稱 (中)
            <kendo-textbox [(ngModel)]="subForm.name_zh" placeholder="可輸入中文，AI 幫忙翻譯"></kendo-textbox>
          </label>
          <button kendoButton fillMode="outline" themeColor="primary" type="button"
            [disabled]="(!subForm.name_zh.trim() && !subForm.name_en.trim()) || subAiLoading"
            (click)="requestSubAiSuggest()"
            title="翻譯英文並建議 990 Line / Translate + suggest 990 line">
            {{ subAiLoading ? '思考中… / Thinking…' : '✨ AI 建議' }}
          </button>
        </div>
        <div *ngIf="subAiSuggestion" class="rounded border border-blue-200 bg-blue-50 p-3 flex flex-col gap-2 text-sm">
          <div class="font-semibold text-blue-800">AI 建議 / Suggestion</div>
          <div *ngIf="subAiSuggestion.englishName" class="flex gap-2">
            <span class="text-gray-500 shrink-0">English:</span>
            <span class="font-medium">{{ subAiSuggestion.englishName }}</span>
          </div>
          <div *ngIf="subAiSuggestion.chineseName" class="flex gap-2">
            <span class="text-gray-500 shrink-0">中文:</span>
            <span class="font-medium">{{ subAiSuggestion.chineseName }}</span>
          </div>
          <div *ngIf="subAiSuggestion.form990LineLabel" class="flex gap-2">
            <span class="text-gray-500 shrink-0">990 Line:</span>
            <span class="font-medium">{{ subAiSuggestion.form990LineLabel }}</span>
          </div>
          <div class="text-xs text-gray-500">信心 / Confidence: {{ subAiSuggestion.confidence * 100 | number:'1.0-0' }}%</div>
          <div class="flex gap-2">
            <button kendoButton themeColor="primary" size="small" type="button" (click)="applySubAiSuggestion()">套用 / Apply</button>
            <button kendoButton fillMode="flat" size="small" type="button" (click)="dismissSubAiSuggestion()">忽略 / Dismiss</button>
          </div>
        </div>
      </div>
      <label class="flex flex-col gap-1">
        Sort order
        <kendo-numerictextbox [(ngModel)]="subForm.sortOrder" [format]="'n0'" [decimals]="0" [min]="0"></kendo-numerictextbox>
      </label>
      <label class="flex flex-col gap-1">
        <span>Form 990 Line / 990 行</span>
        <kendo-dropdownlist
          [data]="form990Lines"
          textField="label" valueField="id" [valuePrimitive]="true"
          [defaultItem]="{ id: null, label: '(Unmapped / 未對應)' }"
          [(ngModel)]="subForm.form990LineId">
        </kendo-dropdownlist>
      </label>
      <label class="flex flex-col gap-1">
        <span>1099 Box / 1099 框</span>
        <kendo-dropdownlist
          [data]="form1099Boxes"
          textField="label" valueField="id" [valuePrimitive]="true"
          [defaultItem]="{ id: null, label: '— none —' }"
          [(ngModel)]="subForm.form1099BoxId">
        </kendo-dropdownlist>
      </label>
      <label *ngIf="editingSubId != null" class="flex items-center gap-2 md:col-span-2">
        <input type="checkbox" [(ngModel)]="subForm.isActive" /> Active
      </label>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="subDialogOpen = false">Cancel</button>
      <button kendoButton themeColor="primary" [disabled]="!subForm.name_en" (click)="saveSub()">Save</button>
    </kendo-dialog-actions>
  </kendo-dialog>

</div>
