/**
 * `<tree-ui>` — Collapsible tree container with keyboard navigation (arrow keys, Enter/Space). Manages selection across nested tree-item-ns.
 *
 * @see https://ui-kit.exe.xyz/site/components/tree
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export interface TreeSelectEventDetail {
  /** Ctrl key held during activation (false for programmatic select()). */
  ctrlKey: boolean;
  /** Selected tree-item element. */
  item: Record<string, unknown>;
  /** Meta (Cmd) key held during activation (false for programmatic select()). */
  metaKey: boolean;
  /** Shift key held during activation (false for programmatic select()). */
  shiftKey: boolean;
  /** Item text content. */
  text: string;
  /** Item value attribute. */
  value: string;
}

export type TreeSelectEvent = CustomEvent<TreeSelectEventDetail>;

export class UITree extends UIElement {

  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: UITree, ev: HTMLElementEventMap[K]) => unknown,
    options?: boolean | AddEventListenerOptions,
  ): void;
  addEventListener(type: 'tree-select', listener: (ev: TreeSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
}

export class UITreeItem extends UIElement {
  /** Optional trailing badge text (count, label, etc.). Renders muted + small + right-aligned alongside the row, mirroring the nav-item-ui badge API. When empty, the badge slot stays empty.

Added in §184 (v0.5.5, FEEDBACK-08 §1). */
  badge: string;
  /** Optional leading icon name (Phosphor). */
  icon: string;
  /** When true, the item's children render expanded. Single-instance state; the parent `<tree-ui>` toggles this on click + Enter/Space + ArrowRight/ArrowLeft per tree-view APG. */
  open: boolean;
  /** Reflects the currently-selected item. Exactly one tree-item is selected per `<tree-ui>` parent (managed by the parent). */
  selected: boolean;
  /** Primary text rendered in the row. */
  text: string;
  /** Stable value emitted in `tree-select` event detail. */
  value: string;
}
