/**
 * Icon CTA Button Component
 * Full-width button with icon and text, supports primary (purple) and secondary (gray) variants
 * Extends the CTA button pattern with icon support
 */
import { cartIcon } from "../icons/cart-icon.js";
import { ebookIcon } from "../icons/ebook-icon.js";

class IconCtaButton extends HTMLElement {
  static get observedAttributes() {
    return ["href", "variant", "icon"];
  }

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

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

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

  setupEventListeners() {
    const button = this.shadowRoot?.querySelector(".icon-cta-button");
    if (button && !this.hasAttribute("href")) {
      button.addEventListener("click", () => {
        this.dispatchEvent(
          new CustomEvent("button-click", {
            bubbles: true,
            composed: true,
          })
        );
      });
    }
  }

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

  get variant() {
    return this.getAttribute("variant") || "primary"; // 'primary' or 'secondary'
  }

  get icon() {
    return this.getAttribute("icon") || ""; // 'cart', 'ebook', or empty
  }

  getIconHtml() {
    const isPrimary = this.variant === "primary";
    const iconColor = isPrimary ? "#ffffff" : "currentColor";

    switch (this.icon) {
      case "cart":
        return cartIcon({ size: 20, color: iconColor });
      case "ebook":
        return ebookIcon({ size: 20, color: iconColor });
      default:
        return "";
    }
  }

  render() {
    const isLink = this.hasAttribute("href") && this.href;
    const tag = isLink ? "a" : "button";
    const hrefAttr = isLink ? `href="${this.href}"` : "";
    const typeAttr = isLink ? "" : 'type="button"';
    const isPrimary = this.variant === "primary";
    const iconHtml = this.getIconHtml();

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
        }

        .icon-cta-button {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: var(--spacing-sm, 0.5rem);
          width: 100%;
          padding: 14px var(--spacing-md, 1rem);
          border: none;
          border-radius: var(--radius-sm, 0.25rem);
          font-family: var(--font-family-outfit, "Outfit", sans-serif);
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          text-decoration: none;
          cursor: pointer;
          transition: opacity var(--transition-fast, 150ms ease);
        }

        .icon-cta-button:hover {
          opacity: 0.9;
        }

        .icon-cta-button:active {
          opacity: 0.8;
        }

        .icon-cta-button.primary {
          background-color: var(--color-purple, #951d51);
          color: var(--color-text-inverse, #ffffff);
        }

        .icon-cta-button.secondary {
          background-color: var(--color-push-box-bg, #EBEEF4);
          color: var(--color-text, #1e293b);
        }

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .icon svg {
          width: 20px;
          height: 20px;
        }

        .button-text {
          text-decoration: none;
        }
      </style>
      <${tag} 
        class="icon-cta-button ${isPrimary ? "primary" : "secondary"}" 
        ${hrefAttr}
        ${typeAttr}
      >
        ${iconHtml ? `<span class="icon">${iconHtml}</span>` : ""}
        <span class="button-text">
          <slot></slot>
        </span>
      </${tag}>
    `;
  }
}

customElements.define("icon-cta-button", IconCtaButton);