/**
 * Footer Accordion Item Component
 * Expandable accordion item for footer navigation
 */
class FooterAccordionItem extends HTMLElement {
  static _idCounter = 0;
  
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this._expanded = false;
    this._uniqueId = `accordion-${FooterAccordionItem._idCounter++}`;
  }

  static get observedAttributes() {
    return ["title"];
  }

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

  attributeChangedCallback() {
    this.render();
    this.setupEventListeners();
  }

  setupEventListeners() {
    const header = this.shadowRoot.querySelector(".accordion-header");
    if (header) {
      header.addEventListener("click", () => this.toggle());
    }
  }

  toggle() {
    this._expanded = !this._expanded;
    const content = this.shadowRoot.querySelector(".accordion-content");
    const icon = this.shadowRoot.querySelector(".accordion-icon");
    const header = this.shadowRoot.querySelector(".accordion-header");

    if (content) {
      content.classList.toggle("expanded", this._expanded);
    }
    if (icon) {
      icon.classList.toggle("rotated", this._expanded);
    }
    if (header) {
      header.setAttribute("aria-expanded", this._expanded.toString());
    }
  }

  render() {
    const title = this.getAttribute("title") || "";

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .accordion-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: var(--spacing-lg, 1.5rem) 0;
          background: none;
          border: none;
          cursor: pointer;
          user-select: none;
        }

        .accordion-header:hover {
          opacity: 0.9;
        }
        
        .accordion-header:focus {
          outline: 2px solid var(--color-text-inverse, #ffffff);
          outline-offset: 2px;
        }

        .accordion-title {
          font-size: var(--font-size-base, 1rem);
          font-weight: 400;
          color: var(--color-text-inverse, #ffffff);
          margin: 0;
        }

        .accordion-icon {
          display: inline-flex;
          color: var(--color-text-inverse, #ffffff);
          transition: transform var(--transition-fast, 150ms ease);
        }

        .accordion-icon.rotated {
          transform: rotate(180deg);
        }

        .accordion-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height var(--transition-normal, 300ms ease), padding var(--transition-normal, 300ms ease);
        }

        .accordion-content.expanded {
          max-height: 500px;
          padding-bottom: var(--spacing-lg, 1.5rem);
        }

        ::slotted(*) {
          color: var(--color-text-inverse, #ffffff);
        }
      </style>
      <button 
        class="accordion-header" 
        type="button"
        aria-expanded="${this._expanded}"
        aria-controls="accordion-content-${this._uniqueId}"
      >
        <h3 class="accordion-title">${title}</h3>
        <chevron-down-icon class="accordion-icon" size="24"></chevron-down-icon>
      </button>
      <div 
        id="accordion-content-${this._uniqueId}"
        class="accordion-content"
        role="region"
        aria-labelledby="accordion-header-${this._uniqueId}"
      >
        <slot></slot>
      </div>
    `;
  }
}

customElements.define("footer-accordion-item", FooterAccordionItem);