/**
 * Arod Menu Bar Component
 * A responsive navigation menu with search and theme toggle
 *
 * Usage:
 *   <arod-menu>
 *     <menu-item href="/papers">Papers</menu-item>
 *     <menu-item href="/notes">Notes</menu-item>
 *     <menu-item href="/about">About</menu-item>
 *   </arod-menu>
 */

// ============================================
// AROD-MENU - Main Menu Bar Component
// ============================================
class ArodMenu extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
    this.setupMobileToggle();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --menu-height: 3.5rem;
          --menu-bg: #fffffc;
          --menu-border: #666;
          --menu-text: #1a1a1a;
          --menu-hover: #090c8d;
          --menu-mobile-breakpoint: 768px;

          display: block;
          position: sticky;
          top: 0;
          z-index: 1000;
          background: var(--menu-bg);
          border-bottom: 1px solid var(--menu-border);
          height: var(--menu-height);
        }

        @media (prefers-color-scheme: dark) {
          :host {
            --menu-bg: #1a1a1a;
            --menu-border: #444;
            --menu-text: #e0e0e0;
            --menu-hover: #4db8ff;
          }
        }

        :host([theme="light"]) {
          --menu-bg: #fffffc;
          --menu-border: #666;
          --menu-text: #1a1a1a;
          --menu-hover: #090c8d;
        }

        :host([theme="dark"]) {
          --menu-bg: #1a1a1a;
          --menu-border: #444;
          --menu-text: #e0e0e0;
          --menu-hover: #4db8ff;
        }

        .menu-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 100%;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
        }

        .menu-left {
          display: flex;
          align-items: center;
          gap: 2rem;
        }

        .menu-logo {
          font-size: 1.2rem;
          font-weight: 700;
          color: var(--menu-text);
          text-decoration: none;
        }

        .menu-items {
          display: flex;
          align-items: center;
          gap: 1.5rem;
          list-style: none;
        }

        .menu-right {
          display: flex;
          align-items: center;
          gap: 1rem;
        }

        .mobile-toggle {
          display: none;
          background: none;
          border: none;
          color: var(--menu-text);
          cursor: pointer;
          padding: 0.5rem;
        }

        .mobile-toggle svg {
          width: 24px;
          height: 24px;
        }

        @media (max-width: 768px) {
          .menu-items {
            display: none;
            position: absolute;
            top: var(--menu-height);
            left: 0;
            right: 0;
            background: var(--menu-bg);
            border-bottom: 1px solid var(--menu-border);
            flex-direction: column;
            padding: 1rem;
            gap: 0.5rem;
            align-items: stretch;
          }

          .menu-items.mobile-open {
            display: flex;
          }

          .mobile-toggle {
            display: block;
          }

          .menu-right {
            margin-left: auto;
          }
        }

        ::slotted(menu-item) {
          display: inline-flex !important;
          align-items: center;
          cursor: pointer;
          height: 100%;
        }
      </style>

      <nav class="menu-container">
        <div class="menu-left">
          <a href="/" class="menu-logo">AROD</a>
          <button class="mobile-toggle" aria-label="Menu">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
          <div class="menu-items">
            <slot></slot>
          </div>
        </div>
        <div class="menu-right">
          <slot name="actions"></slot>
        </div>
      </nav>
    `;
  }

  setupMobileToggle() {
    const toggle = this.shadowRoot.querySelector('.mobile-toggle');
    const items = this.shadowRoot.querySelector('.menu-items');

    toggle?.addEventListener('click', () => {
      items?.classList.toggle('mobile-open');
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
      if (!this.contains(e.target)) {
        items?.classList.remove('mobile-open');
      }
    });
  }
}

// ============================================
// MENU-ITEM - Individual Menu Item Component
// ============================================
class MenuItem extends HTMLElement {
  constructor() {
    super();
    // Store the original text content
    this._label = '';
  }

  connectedCallback() {
    // Capture the text content before any rendering
    this._label = this.textContent.trim();
    this.render();
    this.setupNavigation();
  }

  render() {
    const href = this.getAttribute('href') || '#';

    // Style the menu-item element itself
    this.style.cssText = `
      display: inline-flex;
      align-items: center;
      height: 100%;
    `;

    // Create link element
    const link = document.createElement('a');
    link.href = href;
    link.textContent = this._label;
    link.style.cssText = `
      color: var(--menu-text, #222);
      text-decoration: none;
      padding: 0.5rem 0.75rem;
      border-radius: 4px;
      transition: all 0.2s ease;
      display: inline-block;
      white-space: nowrap;
    `;

    // Clear and add link
    this.innerHTML = '';
    this.appendChild(link);

    // Add hover effects directly to the link
    link.addEventListener('mouseenter', () => {
      link.style.color = 'var(--menu-hover, #0066cc)';
      link.style.background = 'rgba(0, 102, 204, 0.1)';
    });

    link.addEventListener('mouseleave', () => {
      if (!this.hasAttribute('active')) {
        link.style.color = 'var(--menu-text, #222)';
        link.style.background = 'transparent';
      }
    });
  }

  setupNavigation() {
    // Mark active based on current path
    const href = this.getAttribute('href');
    const link = this.querySelector('a');
    if (href && window.location.pathname === href) {
      this.setAttribute('active', '');
      if (link) {
        link.style.color = 'var(--menu-hover, #0066cc)';
        link.style.fontWeight = '500';
      }
    }
  }
}

// Register components
customElements.define('arod-menu', ArodMenu);
customElements.define('menu-item', MenuItem);