/**
 * Quick Panel Quick Entries
 *
 * Four-grid shortcuts for quickly switching scopes:
 * - Tabs / Bookmarks / History / Commands
 *
 * Following PRD spec for Quick Panel entry UI.
 */

import { Disposer } from '@/entrypoints/web-editor/utils/disposables';
import { QUICK_PANEL_SCOPES, normalizeQuickPanelScope, type QuickPanelScope } from '../core/types';

// ============================================================
// Types
// ============================================================

export interface QuickEntriesOptions {
  /** Container to mount quick entries */
  container: HTMLElement;
  /**
   * Scopes to render as quick entries.
   * Default: tabs/bookmarks/history/commands
   */
  scopes?: readonly QuickPanelScope[];
  /** Called when an entry is selected */
  onSelect: (scope: QuickPanelScope) => void;
}

export interface QuickEntriesManager {
  /** Root DOM element */
  root: HTMLDivElement;
  /** Set the active (highlighted) scope */
  setActiveScope: (scope: QuickPanelScope | null) => void;
  /** Enable/disable a specific entry */
  setDisabled: (scope: QuickPanelScope, disabled: boolean) => void;
  /** Show/hide the quick entries grid */
  setVisible: (visible: boolean) => void;
  /** Clean up resources */
  dispose: () => void;
}

// ============================================================
// Constants
// ============================================================

const DEFAULT_SCOPES: QuickPanelScope[] = ['tabs', 'bookmarks', 'history', 'commands'];

// ============================================================
// Main Factory
// ============================================================

/**
 * Create Quick Panel quick entries component.
 *
 * @example
 * ```typescript
 * const quickEntries = createQuickEntries({
 *   container: contentSearchMount,
 *   onSelect: (scope) => {
 *     searchInput.setScope(scope);
 *     controller.search(scope, '');
 *   },
 * });
 *
 * // Highlight active scope
 * quickEntries.setActiveScope('tabs');
 *
 * // Cleanup
 * quickEntries.dispose();
 * ```
 */
export function createQuickEntries(options: QuickEntriesOptions): QuickEntriesManager {
  const disposer = new Disposer();
  let disposed = false;

  const scopes = (options.scopes?.length ? [...options.scopes] : DEFAULT_SCOPES).map((s) =>
    normalizeQuickPanelScope(s),
  );

  // --------------------------------------------------------
  // DOM Construction
  // --------------------------------------------------------

  const root = document.createElement('div');
  root.className = 'qp-entries';
  options.container.append(root);
  disposer.add(() => root.remove());

  const buttonsByScope = new Map<QuickPanelScope, HTMLButtonElement>();

  function createEntry(scope: QuickPanelScope): HTMLButtonElement {
    const def = QUICK_PANEL_SCOPES[scope];

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'qp-entry ac-btn ac-focus-ring';
    btn.dataset.scope = scope;
    btn.dataset.active = 'false';
    btn.setAttribute('aria-label', `Switch scope to ${def.label}`);

    const icon = document.createElement('div');
    icon.className = 'qp-entry__icon';
    icon.textContent = def.icon;

    const label = document.createElement('div');
    label.className = 'qp-entry__label';
    label.textContent = def.label;

    const prefix = document.createElement('div');
    prefix.className = 'qp-entry__prefix';
    prefix.textContent = def.prefix ? def.prefix.trim() : '';
    prefix.hidden = !def.prefix;

    btn.append(icon, label, prefix);

    disposer.listen(btn, 'click', () => {
      if (disposed) return;
      options.onSelect(scope);
    });

    return btn;
  }

  // Build entries
  for (const scope of scopes) {
    // Only render known scopes and avoid 'all' in quick entries
    if (!(scope in QUICK_PANEL_SCOPES) || scope === 'all') continue;

    const btn = createEntry(scope);
    buttonsByScope.set(scope, btn);
    root.append(btn);
  }

  // --------------------------------------------------------
  // State Management
  // --------------------------------------------------------

  function setActiveScope(scope: QuickPanelScope | null): void {
    if (disposed) return;

    const active = scope ? normalizeQuickPanelScope(scope) : null;
    for (const [id, btn] of buttonsByScope) {
      btn.dataset.active = active === id ? 'true' : 'false';
    }
  }

  function setDisabled(scope: QuickPanelScope, disabled: boolean): void {
    if (disposed) return;

    const id = normalizeQuickPanelScope(scope);
    const btn = buttonsByScope.get(id);
    if (!btn) return;

    btn.disabled = disabled;
  }

  function setVisible(visible: boolean): void {
    if (disposed) return;
    root.hidden = !visible;
  }

  // --------------------------------------------------------
  // Public API
  // --------------------------------------------------------

  return {
    root,
    setActiveScope,
    setDisabled,
    setVisible,
    dispose: () => {
      if (disposed) return;
      disposed = true;
      buttonsByScope.clear();
      disposer.dispose();
    },
  };
}
