{# Command palette (Ctrl+K / Cmd+K).

   El binding de teclado y openModal/closeModal viven en htmx-events.js
   (contrato: id `dg-command-palette`, toggle de `.hidden`). La fuente de
   datos son los links del sidebar (`#dg-sidebar a.sidebar-link`) leídos
   del DOM (`#dg-sidebar a.sidebar-link` y los `a.dg-menu-item` del menú de cuenta) — cero endpoints, cero configuración por app: cada módulo
   nuevo en el sidebar aparece solo.

   Lo incluye `sidebar_shell.html`; no requiere wiring del host.
#}
<dialog id="dg-command-palette"
        class="dg-dialog hidden w-full max-w-md p-0 overflow-hidden"
        aria-label="Buscar módulos">
  <input type="text" id="dg-palette-input"
         class="w-full px-4 py-3 text-base sm:text-sm bg-panel text-fg border-b border-border focus:outline-none"
         placeholder="Ir a…"
         role="combobox" aria-expanded="true"
         aria-controls="dg-palette-list" aria-autocomplete="list"
         autocomplete="off" data-dg-novalidate>
  <ul id="dg-palette-list" role="listbox"
      class="max-h-72 overflow-y-auto py-1"></ul>
  <p class="px-4 py-2 text-xs text-fg-muted border-t border-border flex gap-3">
    <span><kbd class="font-mono">↑↓</kbd> navegar</span>
    <span><kbd class="font-mono">Enter</kbd> abrir</span>
    <span><kbd class="font-mono">Esc</kbd> cerrar</span>
  </p>
</dialog>

<script>
  (function () {
    "use strict";
    var input = document.getElementById("dg-palette-input");
    var list = document.getElementById("dg-palette-list");
    if (!input || !list) return;

    var items = [];
    var active = 0;

    function collect() {
      items = [];
      document.querySelectorAll("#dg-sidebar a.sidebar-link, #dg-sidebar a.dg-menu-item").forEach(function (a) {
        var label = (a.textContent || "").trim().replace(/\s+/g, " ");
        if (label && a.getAttribute("href")) {
          items.push({ label: label, href: a.getAttribute("href") });
        }
      });
    }

    function matches(query, label) {
      query = query.toLowerCase();
      label = label.toLowerCase();
      if (label.indexOf(query) >= 0) return true;
      // Subsecuencia: "usr" matchea "Usuarios".
      var i = 0;
      for (var j = 0; j < label.length && i < query.length; j++) {
        if (label[j] === query[i]) i++;
      }
      return i === query.length;
    }

    function render() {
      var q = input.value.trim();
      var visible = q ? items.filter(function (it) { return matches(q, it.label); }) : items;
      if (active >= visible.length) active = Math.max(0, visible.length - 1);
      list.innerHTML = "";
      if (!visible.length) {
        var empty = document.createElement("li");
        empty.className = "px-4 py-3 text-sm text-fg-muted";
        empty.textContent = "Sin resultados.";
        list.appendChild(empty);
        input.removeAttribute("aria-activedescendant");
        return;
      }
      visible.forEach(function (it, idx) {
        var li = document.createElement("li");
        li.id = "dg-palette-opt-" + idx;
        li.setAttribute("role", "option");
        li.setAttribute("aria-selected", String(idx === active));
        li.className = "dg-palette-opt" + (idx === active ? " is-active" : "");
        li.textContent = it.label;
        li.addEventListener("click", function () { window.location.href = it.href; });
        li.addEventListener("mousemove", function () {
          if (active !== idx) { active = idx; render(); }
        });
        list.appendChild(li);
      });
      input.setAttribute("aria-activedescendant", "dg-palette-opt-" + active);
      list.dataset.dgVisible = JSON.stringify(visible.map(function (it) { return it.href; }));
    }

    input.addEventListener("focus", function () {
      collect();
      input.value = "";
      active = 0;
      render();
    });
    input.addEventListener("input", function () { active = 0; render(); });
    input.addEventListener("keydown", function (ev) {
      var hrefs = [];
      try { hrefs = JSON.parse(list.dataset.dgVisible || "[]"); } catch (_) { /* noop */ }
      if (ev.key === "ArrowDown") {
        ev.preventDefault();
        active = Math.min(active + 1, Math.max(0, hrefs.length - 1));
        render();
      } else if (ev.key === "ArrowUp") {
        ev.preventDefault();
        active = Math.max(active - 1, 0);
        render();
      } else if (ev.key === "Enter") {
        ev.preventDefault();
        if (hrefs[active]) window.location.href = hrefs[active];
      }
    });
  })();
</script>