/**
 * Horizontal Scroll Nav Component
 * Pill-style category buttons in a horizontal scroller
 */
class HorizontalScrollNav extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.categories = [
      { id: "all", label: "All", active: true },
      { id: "fiction", label: "Fiction", active: false },
      { id: "non-fiction", label: "Non-Fiction", active: false },
      { id: "mystery", label: "Mystery", active: false },
      { id: "romance", label: "Romance", active: false },
      { id: "sci-fi", label: "Sci-Fi", active: false },
      { id: "biography", label: "Biography", active: false },
      { id: "history", label: "History", active: false },
    ];
  }

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

  addEventListeners() {
    const buttons = this.shadowRoot.querySelectorAll(".nav-pill");
    buttons.forEach((button) => {
      button.addEventListener("click", (e) => {
        this.setActiveCategory(e.target.dataset.id);
      });
    });
  }

  setActiveCategory(id) {
    this.categories = this.categories.map((cat) => ({
      ...cat,
      active: cat.id === id,
    }));
    this.render();
    this.addEventListeners();

    // Dispatch custom event for parent components
    this.dispatchEvent(
      new CustomEvent("category-change", {
        detail: { categoryId: id },
        bubbles: true,
        composed: true,
      })
    );
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }

        .nav-container {
          display: flex;
          align-items: center;
          height: 80px;
          gap: 24px;
          overflow-x: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
          padding: 0 16px;
          background-color: #ffffff;
        }

        .nav-container::-webkit-scrollbar {
          display: none;
        }

        .nav-pill {
          flex-shrink: 0;
          height: 32px;
          padding: 0;
          font-family: var(--font-family-base);
          font-size: var(--font-size-base, 16px);
          font-weight: var(--font-weight-medium, 500);
          line-height: var(--line-height-24, 24px);
          color: #000000;
          background-color: transparent;
          border: none;
          border-radius: 0;
          cursor: pointer;
          transition: all var(--transition-fast, 150ms ease);
          white-space: nowrap;
          text-decoration: underline;
          text-underline-offset: 4px;
          display: flex;
          align-items: center;
        }

        .nav-pill:hover {
          color: #333333;
        }

        .nav-pill.active {
          color: #ffffff;
          background-color: #951D51;
          text-decoration: none;
          border-radius: 9999px;
          padding: 0 16px;
        }

        .nav-pill.active:hover {
          background-color: #7a1843;
        }
      </style>
      <nav class="nav-container" role="navigation" aria-label="Book categories">
        ${this.categories
          .map(
            (cat) => `
          <button 
            class="nav-pill ${cat.active ? "active" : ""}" 
            data-id="${cat.id}"
            ${cat.active ? 'aria-current="true"' : ""}
          >
            ${cat.label}
          </button>
        `
          )
          .join("")}
      </nav>
    `;
  }
}

customElements.define("horizontal-scroll-nav", HorizontalScrollNav);