(function () {
  // Ensure required globals exist
  if (!window.algoliasearch || !window['@algolia/autocomplete-js']) {
    console.error('[Algolia] Missing algoliasearch or @algolia/autocomplete-js. Check script includes.');
    return;
  }

  const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js'];

  // --- 1) Algolia client (your NEW site keys) ---
  const appId = 'WW70UGRCSD';
  const apiKey = '212dac5865d6fe58730a95a02ba562f3'; // search-only key recommended
  const searchClient = algoliasearch(appId, apiKey);

  // --- 2) Debounced getItems ---
  function debouncePromise(fn, wait) {
    let t;
    return (...args) =>
      new Promise((resolve) => {
        clearTimeout(t);
        t = setTimeout(async () => resolve(fn(...args)), wait);
      });
  }

  const debouncedToolsResults = debouncePromise((query) => {
    return getAlgoliaResults({
      searchClient,
      queries: [
        {
          indexName: 'Tools',
          query,
          params: {
            attributesToSnippet: ['name:10', 'shortDescription:40'],
            snippetEllipsisText: '…',
            hitsPerPage: 10,
          },
        },
      ],
    });
  }, 500);

  // --- 3) Autocomplete (hidden container, detached UI) ---
  const instance = autocomplete({
    container: '#algolia-hidden-autocomplete',
    placeholder: 'Search tools (⌘ + K)',
    detachedMediaQuery: '', // force detached overlay always
    openOnFocus: true,

    getSources({ query }) {
      // Pre-results / quick links when empty
      if (!query) {
        const ICONS = {
          featured: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
              <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
            </svg>
          `,
          tools: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
              <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>
            </svg>
          `,
          categories: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
              <path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 4h8v4h-8z"/>
            </svg>
          `,
          submit: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor">
              <path d="M19 11H13V5h-2v6H5v2h6v6h2v-6h6z"/>
            </svg>
          `,
        };

        return [
          {
            sourceId: 'quickLinks',
            getItems() {
              return [
                {
                  key: 'featured',
                  label: 'Featured tools',
                  description: 'Browse our favorite tools.',
                  url: '/featured',
                  icon: ICONS.featured,
                  action: 'link',
                },
                {
                  key: 'tools',
                  label: 'All tools',
                  description: 'Browse all tools.',
                  url: '/tools',
                  icon: ICONS.tools,
                  action: 'link',
                },
                {
                  key: 'categories',
                  label: 'Categories',
                  description: 'Explore tools by category.',
                  url: '/categories',
                  icon: ICONS.categories,
                  action: 'link',
                },
                {
                  key: 'submit',
                  label: 'Submit tool',
                  description: 'Submit your tool.',
                  url: '#',
                  icon: ICONS.submit,
                  action: 'modal',
                  modalId: 'add-site', // matches your attribute: data-open-modal="add-site"
                },
              ];
            },

            templates: {
              header() {
                return null;
              },

              item({ item, html }) {
                const attrs =
                  item.action === 'modal'
                    ? `href="#" data-open-modal="${item.modalId}"`
                    : `href="${item.url}"`;

                return html`
                  <a ${html([attrs])} class="algolia-results_link w-inline-block">
                    <div class="algolia-results-header_div">
                      <div class="icon-embed-xsmall w-embed">
                        ${html([item.icon])}
                      </div>
                      <div class="algolia-results_header">${item.label}</div>
                    </div>

                    <div class="algolia-results-description_text">
                      ${item.description}
                    </div>
                  </a>
                `;
              },
            },

            onSelect({ item }) {
              if (item.action === 'modal') {
                const el = document.querySelector(`[data-open-modal="${item.modalId}"]`);
                if (el) el.click();
                return;
              }
              window.location.href = item.url;
            },
          },
        ];
      }

      // Actual Algolia results
      return [
        {
          sourceId: 'tools',
          async getItems() {
            return debouncedToolsResults(query);
          },
          templates: {
            header({ html }) {
              return html`<span class="aa-SourceHeaderTitle">Tools</span>
                <div class="aa-SourceHeaderLine"></div>`;
            },

            item({ item, components, html }) {
              const favicon = item.faviconUrl; // must exist in Algolia record (or it'll hide)
              const url = item.wfUrl; // must exist in Algolia record
              const name = item.name || '';

              return html`
                <a class="aa-ItemLink algolia-results_link w-inline-block" href="${url}" target="_blank" rel="noopener">
                  <div class="aa-ItemContent">
                    <div class="algolia-result-left">
                      ${favicon ? html`<img src="${favicon}" alt="${name}" class="algolia-result_favicon" />` : ''}
                    </div>

                    <div class="aa-ItemContentBody">
                      <div class="algolia-result_header-row">
                        <div class="algolia-result_title">
                          ${components.Snippet({ hit: item, attribute: 'name' })}
                        </div>

                        <div class="algolia-result_badges">
                          ${item.featured
                            ? html`
                                <div class="algolia-badge algolia-badge--featured">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" />
                                  </svg>
                                </div>
                              `
                            : ''}

                          ${item.claimed
                            ? html`
                                <div class="algolia-badge algolia-badge--claimed">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M7 12l5 5l10 -10" />
                                    <path d="M2 12l5 5m5 -5l5 -5" />
                                  </svg>
                                </div>
                              `
                            : ''}
                        </div>
                      </div>

                      <div class="algolia-result_description">
                        ${components.Snippet({ hit: item, attribute: 'shortDescription' })}
                      </div>
                    </div>
                  </div>
                </a>
              `;
            },

            noResults() {
              return 'No tools for this query.';
            },
          },

          getItemUrl({ item }) {
            return item.wfUrl;
          },
        },
      ];
    },
  });

  // --- 4) Open triggers (click + CMD+K) ---
  document.addEventListener('click', (event) => {
    const t = event.target.closest('[data-open-search]');
    if (!t) return;
    event.preventDefault();
    instance.setIsOpen(true);
  });

  document.addEventListener('keydown', (event) => {
    if (event.metaKey && event.key.toLowerCase() === 'k') {
      event.preventDefault();
      instance.setIsOpen(true);
    }
  });
})();