import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';

import { tailwind } from '../styles/tailwind.js';

interface NavLink {
  readonly href: string;
  readonly label: string;
}

const LINKS: readonly NavLink[] = [
  { href: '/', label: 'Home' },
  { href: '/about', label: 'About' },
];

/**
 * Site navigation.
 *
 * The router intercepts these clicks, so these are ordinary anchors. Keeping
 * them as real `<a href>` elements means middle-click, ctrl-click, "open in
 * new tab" and screen-reader link navigation all keep working.
 */
@customElement('app-nav')
export class AppNav extends LitElement {
  static override styles = [
    tailwind,
    css`
      :host {
        display: block;
      }

      a {
        /*
         * Tailwind's preflight strips the default underline, but preflight is
         * document-level and is not adopted into shadow roots, so links reset
         * themselves here instead.
         */
        text-decoration: none;
        color: inherit;
      }
    `,
  ];

  @state()
  private currentPath = window.location.pathname;

  override connectedCallback(): void {
    super.connectedCallback();
    // The router pushes state on link clicks, which does not fire popstate,
    // so listen for both that and real back/forward navigation.
    window.addEventListener('popstate', this.#syncPath);
    window.addEventListener('click', this.#syncPathSoon);
  }

  override disconnectedCallback(): void {
    super.disconnectedCallback();
    window.removeEventListener('popstate', this.#syncPath);
    window.removeEventListener('click', this.#syncPathSoon);
  }

  override render() {
    return html`
      <nav
        aria-label="Main"
        class="mb-8 flex gap-1 border-b border-zinc-200 pb-3 dark:border-zinc-800"
      >
        ${LINKS.map(
          (link) => html`
            <a
              href=${link.href}
              aria-current=${this.currentPath === link.href ? 'page' : 'false'}
              class="rounded-lg px-3 py-1.5 text-sm text-zinc-500 hover:bg-zinc-500/10
              hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2
              focus-visible:outline-indigo-500 aria-[current=page]:bg-indigo-500/10
              aria-[current=page]:font-semibold aria-[current=page]:text-indigo-600
              dark:text-zinc-400 dark:hover:text-zinc-100
              dark:aria-[current=page]:text-indigo-400"
              >${link.label}</a
            >
          `,
        )}
      </nav>
    `;
  }

  #syncPath = (): void => {
    this.currentPath = window.location.pathname;
  };

  // Runs after the router's own click handler has pushed the new URL.
  #syncPathSoon = (): void => {
    queueMicrotask(this.#syncPath);
  };
}

declare global {
  interface HTMLElementTagNameMap {
    'app-nav': AppNav;
  }
}