// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCommandPalette } from '@theryansmee/ngx-command-palette';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCommandPalette(),
  ],
};

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, title: 'Dashboard' },
  { path: 'settings', component: SettingsComponent, title: 'Settings' },
  { path: 'profile', component: ProfileComponent, title: 'Profile' },
];

provideCommandPalette({
  shortcut: 'mod.k',            // Keyboard shortcut to open (default: 'mod.k')
  placeholder: 'Search...',     // Input placeholder text (default: 'Search or type a command...')
  autoRegisterRoutes: true,     // Auto-register routes from Router config (default: true)
  maxResults: 10,               // Maximum search results shown (default: 10)
  recentCount: 5,               // Number of recent commands to track (default: 5)
  debounce: 150,                // Input debounce in milliseconds (default: 0)
});

{ path: 'dashboard', component: DashboardComponent, title: 'Dashboard' }
// -> Appears as "Dashboard" in the palette, navigates to /dashboard

{ path: 'user-settings', component: UserSettingsComponent }
// -> Appears as "User Settings" in the palette

{
  path: 'settings/billing',
  component: BillingComponent,
  title: 'Billing',
  data: {
    commandPalette: {
      label: 'Billing & Payments',           // Override the display label
      category: 'Settings',                   // Override the default "Pages" category
      keywords: ['invoice', 'payment', 'subscription'],  // Extra search terms
      priority: 5,                            // Higher = appears first
    },
  },
}

{
  path: 'admin/debug',
  component: DebugComponent,
  title: 'Debug Panel',
  data: { commandPalette: false },
}

// This route is SKIPPED (has :id, no commandPalette config)
{ path: 'users/:id', component: UserDetailComponent, title: 'User Detail' }

// This route is INCLUDED (explicit config provided)
{
  path: 'users/:id',
  component: UserDetailComponent,
  title: 'User Detail',
  data: {
    commandPalette: {
      label: 'View User',
    },
  },
}

{
  path: 'admin',
  component: AdminComponent,
  title: 'Admin',
  children: [
    { path: 'users', component: AdminUsersComponent, title: 'Users' },
    { path: 'roles', component: AdminRolesComponent, title: 'Roles' },
  ],
}
// Registers: "Admin" (/admin), "Users" (/admin/users), "Roles" (/admin/roles)

import { Component, inject, DestroyRef } from '@angular/core';
import { CommandPaletteService } from '@theryansmee/ngx-command-palette';

@Component({ ... })
export class ProjectListComponent {
  readonly #palette = inject(CommandPaletteService);
  readonly #destroyRef = inject(DestroyRef);

  constructor() {
    this.#palette.register(
      [
        {
          id: 'create-project',
          label: 'Create New Project',
          category: 'Actions',
          shortcut: 'Cmd+N',
          keywords: ['new', 'add'],
          priority: 10,
          action: () => this.openCreateDialog(),
        },
        {
          id: 'export-csv',
          label: 'Export Projects as CSV',
          category: 'Actions',
          action: () => this.exportService.exportCSV(),
        },
      ],
      this.#destroyRef,  // Commands auto-deregister when the component is destroyed
    );
  }
}

// Commands exist only while this component is alive
this.palette.register(commands, this.destroyRef);

this.palette.register(
  [
    {
      id: 'delete-project',
      label: 'Delete Project',
      category: 'Danger',
      action: () => this.deleteProject(),
      context: {
        routes: ['/projects/*'],       // Only visible on /projects/* pages
        when: () => this.canDelete(),  // And only when the user has permission
      },
    },
  ],
  this.destroyRef,
);

interface Command {
  id: string;                              // Unique identifier
  label: string;                           // Display text
  category?: string;                       // Group heading (e.g. "Pages", "Actions")
  icon?: string;                           // Icon name or identifier
  keywords?: string[];                     // Additional search terms
  shortcut?: string;                       // Display-only shortcut hint (e.g. "Cmd+N")
  action: () => void | Promise<void>;      // What happens when the command is executed
  priority?: number;                       // Ranking boost (higher = appears first)
  context?: {
    routes?: string[];                     // Glob patterns for route visibility
    when?: () => boolean;                  // Dynamic visibility check
  };
}

import { Component, inject, DestroyRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs';
import { CommandPaletteService } from '@theryansmee/ngx-command-palette';

@Component({ ... })
export class AppComponent {
  readonly #palette = inject(CommandPaletteService);
  readonly #destroyRef = inject(DestroyRef);
  readonly #http = inject(HttpClient);

  constructor() {
    this.#palette.registerProvider(
      {
        id: 'doc-search',
        category: 'Documentation',
        minQueryLength: 2,
        debounce: 300,
        search: (query) => this.#http.get<Doc[]>(`/api/docs?q=${query}`).pipe(
          map(docs => docs.map(doc => ({
            id: `doc:${doc.id}`,
            label: doc.title,
            action: () => window.open(doc.url),
          }))),
        ),
      },
      this.#destroyRef,
    );
  }
}

this.palette.registerProvider(
  {
    id: 'user-search',
    category: 'Users',
    prefix: '@',                    // Only fires when query starts with @
    minQueryLength: 2,
    debounce: 300,
    search: (query) => this.userService.search(query).pipe(
      map(users => users.map(user => ({
        id: `user:${user.id}`,
        label: user.name,
        icon: 'person',
        action: () => this.router.navigate(['/users', user.id]),
      }))),
    ),
  },
  this.destroyRef,
);

this.palette.registerProvider(
  {
    id: 'ticket-search',
    category: 'Tickets',
    prefix: '#',                    // Only fires when query starts with #
    minQueryLength: 1,
    debounce: 200,
    search: (query) => this.ticketService.search(query).pipe(
      map(tickets => tickets.map(ticket => ({
        id: `ticket:${ticket.id}`,
        label: `${ticket.key}: ${ticket.title}`,
        action: () => this.router.navigate(['/tickets', ticket.id]),
      }))),
    ),
  },
  this.destroyRef,
);

interface SearchProvider {
  id: string;                                        // Unique identifier
  category: string;                                  // Group heading for results
  search: (query: string) => Observable<Command[]>;  // The search function
  prefix?: string;                                   // Prefix trigger (e.g. '@', '#')
  debounce?: number;                                 // Debounce in ms (default: 300)
  minQueryLength?: number;                           // Minimum chars before searching (default: 1)
  order?: number;                                    // Category sort order
}

const isLoading: boolean = this.palette.loading();

const palette = inject(CommandPaletteService);

// Open the palette
palette.open();

// Open with a pre-filled query
palette.open('settings');

// Close the palette
palette.close();

// Toggle open/closed
palette.toggle();

// Update the search query
palette.updateQuery('dashboard');

// Execute a command programmatically
palette.execute(someCommand);

// Read current state (signals)
const isOpen: boolean = palette.isOpen();
const query: string = palette.query();
const results: ScoredCommand[] = palette.results();
const isLoading: boolean = palette.loading();