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

class PxmeHero extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  render() {
    const title =
      this.getAttribute("title") || "A private home for the moments that matter.";
    const message =
      this.getAttribute("message") ||
      "PixMe keeps your photo library personal, searchable, and easy to explore with AI-powered descriptions, people tagging, and a clean gallery built for everyday use.";
    const mode = this.getAttribute("mode") || "default";
    const signInLabel = this.getAttribute("sign-in-label") || "Sign in to continue";
    const status = this.getAttribute("status") || "";
    const isPopupMode = mode === "popup";
    // UAT only: the server exposes a non-Google test login. When the flag is
    // off (including all of production) this endpoint 404s and no link shows.
    const testLoginAvailable =
      this.getAttribute("test-login") === "true";

    this.innerHTML = html`
      <section class="pxme-hero" aria-label="PixMe introduction">
        <div class="pxme-hero__backdrop"></div>
        <div class="pxme-hero__shell">
          <div class="pxme-hero__intro">
            <p class="pxme-hero__eyebrow">Private photo gallery</p>
            <h1 class="pxme-hero__title">${title}</h1>
            <p class="pxme-hero__message">${message}</p>
            <div class="pxme-hero__actions">
              ${isPopupMode
                ? `<button class="pxme-hero__cta pxme-hero__cta--primary" type="button" data-action="popup-signin">${signInLabel}</button>`
                : `<a class="pxme-hero__cta pxme-hero__cta--primary" href="/auth/signin">${signInLabel}</a>`}
              <a class="pxme-hero__cta pxme-hero__cta--secondary" href="/docs.html">Browse API docs</a>
            </div>
            ${testLoginAvailable
              ? `<a class="pxme-hero__testlogin" href="/auth/test/login">Test login (UAT)</a>`
              : ""}
            ${status ? `<p class="pxme-hero__status">${status}</p>` : ""}
          </div>

          <aside class="pxme-hero__panel" aria-label="PixMe capabilities">
            <div class="pxme-hero__feature">
              <span class="pxme-hero__feature-kicker">Organize</span>
              <h2>Find images by people, categories, and descriptions</h2>
              <p>Search across your library without exposing the photos themselves to unauthenticated visitors.</p>
            </div>
            <div class="pxme-hero__feature">
              <span class="pxme-hero__feature-kicker">Review</span>
              <h2>See metadata, tags, and updates in one place</h2>
              <p>Authenticated sessions unlock the gallery, live updates, and editor tools for managing your collection.</p>
            </div>
            <div class="pxme-hero__feature">
              <span class="pxme-hero__feature-kicker">Protect</span>
              <h2>Keep raw images behind authentication</h2>
              <p>The viewer, thumbnails, and direct image URLs stay private until a valid session is present.</p>
            </div>
          </aside>
        </div>
      </section>
    `;

    if (isPopupMode) {
      const btn = this.querySelector('[data-action="popup-signin"]');
      if (btn) {
        btn.addEventListener("click", () => {
          this.dispatchEvent(
            new CustomEvent("hero-signin", {
              bubbles: true,
              composed: true,
            }),
          );
        });
      }
    }
  }
}

customElements.define("pxme-hero", PxmeHero);