<%
  // CommandPalette (EJS, split) — folder-scoped sibling of
  // /home/kuray/01_NextJS_Components/modules/app/CommandPalette/.
  //
  // File-for-file parallels:
  //   partials/_input.ejs   <-- parts/Input.tsx
  //   partials/_list.ejs    <-- parts/ResultList.tsx
  //   partials/_item.ejs    <-- parts/ResultItem.tsx
  //   partials/_footer.ejs  <-- parts/Footer.tsx
  //   scripts/command-store.js <-- hooks/useCommandStore.ts
  //   scripts/fuzzy.js         <-- hooks/useFuzzySearch.tsx
  //   scripts/shortcuts.js     <-- hooks/useShortcuts.ts
  //
  // M1 scope: fuzzy search + grouping + highlight + empty-state suggestions.
  // TODO M2..M6 inline.

  var _id          = locals.id       || 'cmd-bar-' + Math.random().toString(36).substr(2, 9);
  var _items       = locals.items    || [];
  var _placeholder = locals.placeholder || 'Type a command or search…';

  // Defaults: 5 Navigation + 4 Actions + 3 Recent = 12 items.
  // NOTE: Recent items use `faClock` (fa-clock), NOT fa-clock-rotate-left.
  var defaultItems = [
    { icon: 'fa-solid fa-house',        label: 'Go to Dashboard',  shortcut: 'G D', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-folder',       label: 'Go to Projects',   shortcut: 'G P', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-users',        label: 'Go to Team',       shortcut: 'G T', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-gear',         label: 'Go to Settings',   shortcut: 'G S', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-chart-bar',    label: 'Go to Analytics',  shortcut: 'G A', category: 'Navigation', href: '#' },
    { icon: 'fa-solid fa-plus',         label: 'New Project',      shortcut: '⌘N',  category: 'Actions' },
    { icon: 'fa-solid fa-envelope',     label: 'Send Invite',      shortcut: '⌘I',  category: 'Actions' },
    { icon: 'fa-solid fa-file-export',  label: 'Export Data',      shortcut: '⌘E',  category: 'Actions' },
    { icon: 'fa-solid fa-lock',         label: 'Lock Screen',      shortcut: '⌘L',  category: 'Actions' },
    { icon: 'fa-solid fa-clock',        label: 'Project Alpha',                     category: 'Recent' },
    { icon: 'fa-solid fa-clock',        label: 'Q3 Report',                         category: 'Recent' },
    { icon: 'fa-solid fa-clock',        label: 'Design Review',                     category: 'Recent' }
  ];

  var _allItems = _items.length ? _items : defaultItems;

  var categories = [];
  _allItems.forEach(function(item) {
    if (categories.indexOf(item.category) === -1) categories.push(item.category);
  });

  var _badgeNeutralSm = 'inline-flex items-center gap-1 rounded-full font-medium bg-surface-sunken text-text-secondary px-1.5 py-0 text-[10px]';
%>
<!-- AppCommandBar Trigger -->
<% if (locals.trigger) { %>
  <span data-cmd-trigger="<%= _id %>"><%- locals.trigger %></span>
<% } else { %>
  <button
    type="button"
    data-cmd-trigger="<%= _id %>"
    class="inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed border border-border text-text-primary hover:bg-surface-overlay px-3 py-1.5 text-sm"
    aria-label="Open command palette"
  >
    Quick actions…
    <span aria-hidden="true" class="shrink-0">
      <span class="<%= _badgeNeutralSm %>">⌘K</span>
    </span>
  </button>
<% } %>

<!-- Modal -->
<div
  id="<%= _id %>"
  role="dialog"
  aria-modal="true"
  aria-labelledby="<%= _id %>-title"
  class="fixed inset-0 z-[100] hidden"
>
  <!-- Backdrop -->
  <div
    class="absolute inset-0 bg-black/40 backdrop-blur-sm"
    data-cmd-close="<%= _id %>"
    aria-hidden="true"
  ></div>

  <!-- Panel -->
  <div class="relative mx-auto mt-16 w-full max-w-lg rounded-xl border border-border bg-surface-raised shadow-2xl overflow-hidden">
    <!-- Header -->
    <div class="flex items-center justify-between gap-3 px-4 py-3 border-b border-border">
      <h2 id="<%= _id %>-title" class="text-base font-semibold text-text-primary">Command Palette</h2>
      <button
        type="button"
        data-cmd-close="<%= _id %>"
        class="rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-text-secondary hover:bg-surface-overlay"
        aria-label="Close"
      >Esc</button>
    </div>

    <div class="px-4 py-4 space-y-4">
      <%- include('./partials/_input', { _id: _id, _placeholder: _placeholder }) %>

      <!-- AlertBanner pro-tip -->
      <div role="alert" class="flex items-start gap-3 rounded-lg border p-4 bg-info-subtle border-info text-info-fg">
        <i class="fa-solid fa-circle-info mt-0.5 shrink-0 text-base" aria-hidden="true"></i>
        <div class="flex-1 text-sm min-w-0">
          <p>Pro tip: Press ⌘K from anywhere to open this palette.</p>
        </div>
      </div>

      <%- include('./partials/_list', { _id: _id, _allItems: _allItems, categories: categories, _badgeNeutralSm: _badgeNeutralSm }) %>

      <%- include('./partials/_footer') %>
    </div>
  </div>
</div>

<%- include('../../ui/Overlays/shared/focus-trap.js') %>
<script>
  <%- include('./scripts/command-store.js') %>
  <%- include('./scripts/fuzzy.js') %>
  <%- include('./scripts/shortcuts.js') %>
</script>