/**
 * zen-nav.js — Zen dashboard navigation bar Web Component
 *
 * Usage:
 *   <script src="nav.js" defer></script>
 *
 *   <zen-nav>
 *     <a href="compute.html">Node</a>
 *     <a href="orchestrator.html">Orchestrator</a>
 *   </zen-nav>
 *
 * Each child <a> becomes a nav link. The current page is
 * highlighted automatically based on the href.
 *
 * Links may be added or removed dynamically — the component
 * re-renders automatically via MutationObserver.
 */

class ZenNav extends HTMLElement {

  connectedCallback() {
    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
    this._render();

    this._observer = new MutationObserver(() => this._render());
    this._observer.observe(this, { childList: true });
  }

  disconnectedCallback() {
    if (this._observer) {
      this._observer.disconnect();
      this._observer = null;
    }
  }

  _render() {
    const currentPath = window.location.pathname;
    const currentSearch = window.location.search;
    const items = Array.from(this.querySelectorAll(':scope > a'));

    const currentParams = new URLSearchParams(currentSearch);

    let spacerInserted = false;
    const links = items.map(a => {
      const href = a.getAttribute('href') || '';
      const label = a.textContent.trim();
      const alignRight = a.hasAttribute('data-align') && a.getAttribute('data-align') === 'right';
      let active = false;

      try {
        const linkUrl = new URL(href, window.location.origin);
        if (linkUrl.pathname === currentPath || currentPath.endsWith(href)) {
          // All of the link's query params must be present in the current URL
          const linkParams = linkUrl.searchParams;
          active = Array.from(linkParams.entries()).every(
            ([k, v]) => currentParams.get(k) === v
          );
          // A bare path with no params only matches when the current URL also has no page param
          if (linkParams.toString() === '' && currentParams.has('page')) {
            active = false;
          }
        }
      } catch (e) {
        active = currentPath.endsWith(href);
      }

      let prefix = '';
      if (alignRight && !spacerInserted) {
        prefix = '<span class="nav-spacer"></span>';
        spacerInserted = true;
      }

      return `${prefix}<a class="nav-link${active ? ' active' : ''}" href="${href}">${label}</a>`;
    }).join('');

    this.shadowRoot.innerHTML = `
      <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :host {
          display: block;
          margin-bottom: 16px;
        }

        .nav-bar {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 4px;
          background: var(--theme_g3);
          border: 1px solid var(--theme_g2);
          border-radius: 6px;
        }

        .nav-link {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
          font-size: 13px;
          font-weight: 500;
          color: var(--theme_g1);
          text-decoration: none;
          padding: 6px 14px;
          border-radius: 4px;
          transition: color 0.15s, background 0.15s;
        }

        .nav-link:hover {
          color: var(--theme_g0);
          background: var(--theme_p4);
        }

        .nav-link.active {
          color: var(--theme_bright);
          background: var(--theme_g2);
        }

        .nav-spacer {
          flex: 1;
        }
      </style>
      <nav class="nav-bar" part="nav-bar">${links}</nav>
    `;
  }
}

customElements.define('zen-nav', ZenNav);