import { html } from "../util.js";
import buttonCSS from "../buttonStyles.js";

class PxmeSearch extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this._query = "";
    this.shadowRoot.innerHTML = html`
      <style>
        ${buttonCSS}
        :host {
          display: block;
          font-family: inherit;
        }

        .pxme-search {
          display: flex;
          align-items: center;
          gap: var(--pxme-space-xs, 8px);
        }

        .pxme-search__toggle {
          background: none;
          border: none;
          cursor: pointer;
          /* Touch-target ≥ 44×44 */
          min-width: 44px;
          min-height: 44px;
          padding: var(--pxme-space-xs, 8px);
          border-radius: var(--pxme-radius-full, 50%);
          transition: background var(--pxme-transition-fast, 0.15s ease);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .pxme-search__toggle:focus-visible {
          outline: 3px solid var(--pxme-color-primary, #1e7aff);
          outline-offset: 2px;
        }

        .pxme-search__toggle:hover {
          background: var(--pxme-color-light-alt, #d9d0c3);
        }

        .pxme-search__toggle--active {
          background: var(--pxme-color-light-alt, #d9d0c3);
        }

        .pxme-search__toggle-icon {
          width: var(--pxme-icon-size, 24px);
          height: var(--pxme-icon-size, 24px);
          fill: var(--pxme-color-secondary, #6b7b8d);
          transition: fill var(--pxme-transition-fast, 0.15s ease);
        }

        .pxme-search__toggle:hover .pxme-search__toggle-icon {
          fill: var(--pxme-color-primary, #1e7aff);
        }

        .pxme-search__toggle--active .pxme-search__toggle-icon {
          fill: var(--pxme-color-primary, #1e7aff);
        }

        .pxme-search__panel {
          display: none;
          align-items: center;
          gap: var(--pxme-space-xs, 8px);
        }

        .pxme-search__panel--open {
          display: flex;
          animation: pxme-searchSlideIn 0.25s ease both;
        }

        @keyframes pxme-searchSlideIn {
          from { opacity: 0; transform: translateX(-8px); }
          to   { opacity: 1; transform: translateX(0); }
        }

        @media (prefers-reduced-motion: reduce) {
          .pxme-search__panel--open {
            animation: none;
          }
        }

        .pxme-search__input {
          padding: var(--pxme-space-2xs, 4px) var(--pxme-space-sm, 12px);
          border: 1px solid var(--pxme-color-border, #6b7b8d);
          border-radius: var(--pxme-radius-sm, 4px);
          background: var(--pxme-color-surface, #fff);
          color: var(--pxme-color-dark, #2c3e50);
          font-size: var(--pxme-font-sm, 0.875rem);
          font-family: inherit;
          outline: none;
          min-width: 160px;
          transition: border-color var(--pxme-transition-fast, 0.15s ease);
        }

        .pxme-search__input:focus {
          border-color: var(--pxme-color-primary, #1e7aff);
        }

        .pxme-search__input:focus-visible {
          outline: 3px solid var(--pxme-color-primary, #1e7aff);
          outline-offset: 2px;
        }

        .pxme-search__input::placeholder {
          color: var(--pxme-color-secondary, #6b7b8d);
          font-style: italic;
        }

        .pxme-search__reset {
          background: none;
          border: 1px solid var(--pxme-color-border, #6b7b8d);
          border-radius: var(--pxme-radius-lg, 16px);
          cursor: pointer;
          padding: var(--pxme-space-2xs, 4px) var(--pxme-space-sm, 12px);
          font-size: var(--pxme-font-xs, 0.75rem);
          color: var(--pxme-color-secondary, #6b7b8d);
          transition: all var(--pxme-transition-fast, 0.15s ease);
          display: flex;
          align-items: center;
          gap: var(--pxme-space-2xs, 4px);
        }

        .pxme-search__reset:focus-visible {
          outline: 3px solid var(--pxme-color-primary, #1e7aff);
          outline-offset: 2px;
        }

        .pxme-search__reset:hover {
          border-color: var(--pxme-color-primary, #1e7aff);
          color: var(--pxme-color-primary, #1e7aff);
        }

        .pxme-search__reset-icon {
          width: 12px;
          height: 12px;
          fill: currentColor;
        }
      </style>
      <div class="pxme-search">
        <button class="pxme-btn pxme-btn--icon pxme-search__toggle" aria-label="Toggle search">
          <svg class="pxme-search__toggle-icon" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
          </svg>
        </button>
        <div class="pxme-search__panel" id="panel">
          <label class="sr-only" for="search-input">Search images</label>
          <input
            class="pxme-search__input"
            id="search-input"
            type="search"
            placeholder="Search descriptions..."
            aria-label="Search images by description"
          />
          <button class="pxme-btn pxme-btn--icon pxme-search__reset" id="reset-btn" aria-label="Clear search">
            <svg class="pxme-search__reset-icon" aria-hidden="true" viewBox="0 0 24 24">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
            Reset
          </button>
        </div>
      </div>
    `;
  }

  connectedCallback() {
    const toggle = this.shadowRoot.querySelector(".pxme-search__toggle");
    const panel = this.shadowRoot.querySelector("#panel");
    const input = this.shadowRoot.querySelector("#search-input");
    const resetBtn = this.shadowRoot.querySelector("#reset-btn");

    toggle.addEventListener("click", () => {
      const isOpen = panel.classList.toggle("pxme-search__panel--open");
      toggle.classList.toggle("pxme-search__toggle--active", isOpen);
      if (isOpen) {
        input.focus();
      }
    });

    // Search on Enter key
    input.addEventListener("keydown", (e) => {
      if (e.key === "Enter") {
        this._query = input.value.trim();
        this._emitSearchChange();
      }
    });

    // Reset button clears the search
    resetBtn.addEventListener("click", () => {
      input.value = "";
      this._query = "";
      this._emitSearchChange();
    });
  }

  _emitSearchChange() {
    this.dispatchEvent(
      new CustomEvent("search-change", {
        detail: {
          search: this._query,
        },
        bubbles: true,
        composed: true,
      })
    );
  }
}

customElements.define("pxme-search", PxmeSearch);