/**
 * Shopping Bag Icon Web Component
 * A reusable shopping bag/cart icon element with optional badge count
 */
class ShoppingBagIcon extends HTMLElement {
  static get observedAttributes() {
    return ["size", "color", "stroke-width", "count"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.handleCartUpdate = this.handleCartUpdate.bind(this);
  }

  connectedCallback() {
    this.render();
    // Listen for cart updates
    window.addEventListener("cart-updated", this.handleCartUpdate);
    // Initialize count from cart store if available
    this.initializeCount();
  }

  disconnectedCallback() {
    window.removeEventListener("cart-updated", this.handleCartUpdate);
  }

  initializeCount() {
    // Wait for cart store to be available
    setTimeout(() => {
      if (window.cartStore) {
        const count = window.cartStore.getItemCount();
        if (count > 0) {
          this.setAttribute("count", count.toString());
        }
      }
    }, 0);
  }

  handleCartUpdate(event) {
    const { count } = event.detail;
    if (count > 0) {
      this.setAttribute("count", count.toString());
    } else {
      this.removeAttribute("count");
    }
  }

  attributeChangedCallback() {
    this.render();
  }

  get size() {
    return this.getAttribute("size") || "32";
  }

  get color() {
    return this.getAttribute("color") || "#ffffff";
  }

  get strokeWidth() {
    return this.getAttribute("stroke-width") || "2";
  }

  get count() {
    const countAttr = this.getAttribute("count");
    return countAttr ? parseInt(countAttr, 10) : 0;
  }

  render() {
    const showBadge = this.count > 0;
    const displayCount = this.count > 99 ? "99+" : this.count.toString();

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
        
        .icon-wrapper {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        
        svg {
          display: block;
        }
        
        .badge {
          position: absolute;
          top: -6px;
          right: -8px;
          min-width: 18px;
          height: 18px;
          padding: 0 5px;
          color: var(--color-purple, #951d51);
          background-color: #ffffff;
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 11px;
          font-weight: 700;
          line-height: 18px;
          text-align: center;
          border-radius: 9px;
          box-sizing: border-box;
        }
        
        .badge.hidden {
          display: none;
        }
      </style>
      <div class="icon-wrapper">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="${this.size}"
          height="${this.size}"
          viewBox="0 0 24 24"
          fill="none"
          stroke="${this.color}"
          stroke-width="${this.strokeWidth}"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle cx="8" cy="21" r="1"></circle>
          <circle cx="19" cy="21" r="1"></circle>
          <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
        </svg>
        <span class="badge ${showBadge ? "" : "hidden"}">${displayCount}</span>
      </div>
    `;
  }
}

customElements.define("shopping-bag-icon", ShoppingBagIcon);