{# Reusable project-picker combobox (spec 164).

   Replaces the native <datalist> (which only matches the typed text
   against the option *value* = project id, so typing a project's display
   NAME finds nothing) with a small, dependency-free combobox that filters
   on display name OR project id and submits the canonical project id.

   Degrades gracefully: with no discovered projects, or with JavaScript
   disabled, it is a plain free-text input (manual project-id entry still
   works). Light + dark mode variants included.

   Usage:
     {% from "components/_project_combobox.html" import project_combobox, project_combobox_script %}
     {{ project_combobox("gcp_project_id", gcp_projects, value=..., required=true, autofocus=true) }}
     ... (any number of pickers on the page) ...
     {{ project_combobox_script() }}   {# emit ONCE per page #}
#}
{%- macro project_combobox(field_id, projects, value="", required=false, autofocus=false, disabled=false, pattern="", placeholder="") -%}
<div data-combobox class="relative">
  <input
    type="text"
    name="{{ field_id }}"
    id="{{ field_id }}"
    {% if required %}required{% endif %}
    {% if autofocus %}autofocus{% endif %}
    {% if disabled %}disabled{% endif %}
    {% if pattern %}pattern="{{ pattern }}"{% endif %}
    autocomplete="off"
    role="combobox"
    aria-expanded="false"
    aria-autocomplete="list"
    data-combobox-input
    value="{{ value }}"
    placeholder="{{ placeholder if placeholder else ('start typing a project name or ID' if projects else 'prod-warehouse-123') }}"
    class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
  />
  {% if projects %}
  <ul
    data-combobox-list
    role="listbox"
    hidden
    class="absolute z-20 mt-1 max-h-72 w-full overflow-y-auto border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg"
  >
    {% for project in projects %}
    <li
      role="option"
      data-value="{{ project.project_id }}"
      data-search="{{ ((project.display_name ~ ' ' ~ project.project_id) if project.display_name else project.project_id) | lower }}"
      class="cursor-pointer px-3 py-2 text-sm text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800"
    >
      {% if project.display_name %}<span class="font-medium">{{ project.display_name }}</span> <span class="font-mono text-slate-400 dark:text-slate-500">{{ project.project_id }}</span>{% else %}<span class="font-mono">{{ project.project_id }}</span>{% endif %}
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
{%- endmacro -%}

{%- macro project_combobox_script() -%}
<script>
(function () {
  if (window.__govComboboxInit) return;
  window.__govComboboxInit = true;
  function init(root) {
    var input = root.querySelector('[data-combobox-input]');
    var list = root.querySelector('[data-combobox-list]');
    if (!input || !list) return;  // no discovered projects -> plain free-text input
    var options = Array.prototype.slice.call(list.querySelectorAll('[role="option"]'));
    var activeIndex = -1;
    function visible() { return options.filter(function (o) { return !o.hidden; }); }
    function open() { list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
    function clearActive() {
      options.forEach(function (o) {
        o.classList.remove('bg-slate-100', 'dark:bg-slate-800');
        o.removeAttribute('aria-selected');
      });
    }
    function close() { list.hidden = true; input.setAttribute('aria-expanded', 'false'); clearActive(); activeIndex = -1; }
    function setActive(i) {
      var vis = visible();
      clearActive();
      activeIndex = i;
      if (i >= 0 && i < vis.length) {
        vis[i].classList.add('bg-slate-100', 'dark:bg-slate-800');
        vis[i].setAttribute('aria-selected', 'true');
        vis[i].scrollIntoView({ block: 'nearest' });
      }
    }
    function filter() {
      var q = input.value.trim().toLowerCase();
      options.forEach(function (o) {
        var hay = o.getAttribute('data-search') || '';
        o.hidden = q !== '' && hay.indexOf(q) === -1;
      });
      activeIndex = -1;
      if (visible().length) { open(); } else { close(); }
    }
    function select(opt) {
      if (!opt) return;
      input.value = opt.getAttribute('data-value');
      close();
    }
    input.addEventListener('focus', filter);
    input.addEventListener('input', filter);
    input.addEventListener('keydown', function (e) {
      var vis = visible();
      if (e.key === 'ArrowDown') { e.preventDefault(); if (list.hidden) { filter(); } setActive(Math.min(activeIndex + 1, vis.length - 1)); }
      else if (e.key === 'ArrowUp') { e.preventDefault(); setActive(Math.max(activeIndex - 1, 0)); }
      else if (e.key === 'Enter') { if (!list.hidden && vis.length) { e.preventDefault(); select(activeIndex >= 0 ? vis[activeIndex] : vis[0]); } }
      else if (e.key === 'Escape') { close(); }
    });
    options.forEach(function (o) {
      o.addEventListener('mousedown', function (e) { e.preventDefault(); select(o); });
    });
    document.addEventListener('click', function (e) { if (!root.contains(e.target)) { close(); } });
  }
  function initAll() {
    var nodes = document.querySelectorAll('[data-combobox]');
    Array.prototype.forEach.call(nodes, init);
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAll);
  } else {
    initAll();
  }
})();
</script>
{%- endmacro -%}