import { createSearchEntries, searchEntries } from './search';

declare global {
  interface Window {
    __SIGNALPLAN_API_URL__?: string;
  }
}

const menuButton = document.querySelector<HTMLButtonElement>('.menu-toggle');
const mobileNav = document.querySelector<HTMLElement>('#mobile-nav');
if (menuButton && mobileNav) {
  menuButton.hidden = false;
  const closeMenu = () => {
    mobileNav.hidden = true;
    menuButton.setAttribute('aria-expanded', 'false');
    menuButton.setAttribute('aria-label', 'Open navigation');
  };
  menuButton.addEventListener('click', () => {
    const opening = mobileNav.hidden;
    mobileNav.hidden = !opening;
    menuButton.setAttribute('aria-expanded', String(opening));
    menuButton.setAttribute('aria-label', opening ? 'Close navigation' : 'Open navigation');
  });
  mobileNav.addEventListener('click', (event) => { if (event.target instanceof HTMLAnchorElement) closeMenu(); });
  document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !mobileNav.hidden) { closeMenu(); menuButton.focus(); } });
  window.matchMedia('(min-width: 851px)').addEventListener('change', (event) => { if (event.matches) closeMenu(); });
}

const searchDialog = document.querySelector<HTMLDialogElement>('.search-dialog');
const searchButton = document.querySelector<HTMLButtonElement>('.search-trigger');
const searchInput = document.querySelector<HTMLInputElement>('#site-search');
const resultsList = document.querySelector<HTMLUListElement>('.search-results');
const searchStatus = document.querySelector<HTMLElement>('.search-status');
if (searchDialog && searchButton && searchInput && resultsList && searchStatus) {
  const entries = createSearchEntries(document);
  searchButton.hidden = false;
  const renderResults = () => {
    const results = searchEntries(entries, searchInput.value);
    resultsList.replaceChildren();
    searchStatus.textContent = results.length ? `${results.length} ${results.length === 1 ? 'result' : 'results'}${searchInput.value.trim() ? '' : ' · Explore the workspace'}` : 'No results. Try “AV”, “catalog”, or “pricing”.';
    for (const result of results) {
      const item = document.createElement('li');
      const link = document.createElement('a');
      const title = document.createElement('strong');
      const description = document.createElement('small');
      link.href = `#${result.id}`;
      title.textContent = result.title;
      description.textContent = result.description;
      link.append(title, description);
      link.addEventListener('click', () => {
        searchDialog.close();
        const target = document.getElementById(result.id);
        if (target) {
          if (target instanceof HTMLDetailsElement) target.open = true;
          target.setAttribute('tabindex', '-1');
          target.focus({ preventScroll: true });
        }
      });
      item.append(link);
      resultsList.append(item);
    }
  };
  const openSearch = () => {
    searchInput.value = '';
    renderResults();
    searchDialog.showModal();
    searchInput.focus();
  };
  searchButton.addEventListener('click', openSearch);
  searchInput.addEventListener('input', renderResults);
  searchInput.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowDown') { event.preventDefault(); resultsList.querySelector('a')?.focus(); }
    if (event.key === 'Enter') { event.preventDefault(); resultsList.querySelector('a')?.click(); }
  });
  searchDialog.querySelector('.search-close')?.addEventListener('click', () => searchDialog.close());
  searchDialog.addEventListener('click', (event) => {
    const rect = searchDialog.getBoundingClientRect();
    if (event.target === searchDialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) searchDialog.close();
  });
  document.addEventListener('keydown', (event) => {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k' && !searchDialog.open) {
      event.preventDefault();
      openSearch();
    }
  });
}

const requestDialog = document.querySelector<HTMLDialogElement>('.request-dialog');
const requestButton = document.querySelector<HTMLButtonElement>('[data-request-device]');
const requestForm = document.querySelector<HTMLFormElement>('[data-request-form]');
const requestStatus = requestForm?.querySelector<HTMLElement>('.request-status');
if (requestDialog && requestButton && requestForm && requestStatus) {
  requestButton.addEventListener('click', () => {
    requestForm.reset();
    requestStatus.textContent = '';
    requestDialog.showModal();
    requestForm.querySelector('input')?.focus();
  });
  requestDialog.querySelector('.request-close')?.addEventListener('click', () => requestDialog.close());
  requestForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const data = new FormData(requestForm);
    const payload = {
      manufacturer: String(data.get('manufacturer') ?? ''),
      model: String(data.get('model') ?? ''),
      notes: String(data.get('notes') ?? ''),
      email: String(data.get('email') ?? ''),
      company: String(data.get('company') ?? ''),
    };
    requestStatus.textContent = 'Sending…';
    try {
      const apiUrl = window.__SIGNALPLAN_API_URL__ || 'http://localhost:3000';
      const response = await fetch(`${apiUrl}/api/v1/equipment-requests`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!response.ok) {
        throw new Error('Could not send that request');
      }
      requestStatus.textContent = 'Got it. We’ll review this for the library.';
      requestForm.reset();
    } catch {
      requestStatus.textContent = 'Could not send that just now. Try again in a bit.';
    }
  });
}