<div x-data="{
  open: false,
  query: '',
  selectedIndex: 0,
  toggle() { this.open = !this.open; if (this.open) { this.$nextTick(() => this.$refs.input.focus()); } },
  close() { this.open = false; this.query = ''; this.selectedIndex = 0; },
  search() {
    if (this.query.length > 0) {
      htmx.ajax('GET', '/dashboard/partials/command-palette?q=' + encodeURIComponent(this.query), '#palette-results');
    } else {
      document.getElementById('palette-results').innerHTML = '';
    }
    this.selectedIndex = 0;
  },
  _highlightCurrent() {
    const items = document.querySelectorAll('#palette-results [role=option]');
    items.forEach((el, i) => {
      el.style.background = i === this.selectedIndex ? 'var(--bg-surface-hover)' : '';
    });
  },
  onArrowDown() {
    const items = document.querySelectorAll('#palette-results [role=option]');
    if (items.length > 0) { this.selectedIndex = (this.selectedIndex + 1) % items.length; this._highlightCurrent(); }
  },
  onArrowUp() {
    const items = document.querySelectorAll('#palette-results [role=option]');
    if (items.length > 0) { this.selectedIndex = (this.selectedIndex - 1 + items.length) % items.length; this._highlightCurrent(); }
  },
  onEnter() {
    const items = document.querySelectorAll('#palette-results [role=option]');
    if (items.length > 0 && items[this.selectedIndex]) { window.location = items[this.selectedIndex].dataset.url; }
  }
}" x-cloak
   @keydown.meta.k.window.prevent="toggle()"
   @keydown.ctrl.k.window.prevent="toggle()"
   @keydown.escape.window="close()">

  <div x-show="open" style="position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.5);" @click="close()"></div>

  <div x-show="open" style="position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 9999; width: 100%; max-width: 540px;">
    <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); overflow: hidden;">
      <div style="padding: 12px 16px; border-bottom: 1px solid var(--border-default);">
        <input x-ref="input"
               x-model="query"
               @input.debounce.200ms="search()"
               @keydown.arrow-down.prevent="onArrowDown()"
               @keydown.arrow-up.prevent="onArrowUp()"
               @keydown.enter.prevent="onEnter()"
               type="text"
               role="combobox"
               aria-expanded="true"
               aria-controls="palette-results"
               placeholder="Search projects, controls, pages..."
               style="width: 100%; background: transparent; border: none; outline: none; font-size: 14px; color: var(--text-primary);">
      </div>
      <div id="palette-results" role="listbox" style="max-height: 320px; overflow-y: auto;"></div>
      <div style="padding: 8px 16px; border-top: 1px solid var(--border-default); font-size: 11px; color: var(--text-muted);">
        ↑↓ Navigate · Enter Select · Esc Close
      </div>
    </div>
  </div>
</div>
