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

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

  render() {
    const title =
      this.getAttribute("title") || "Your account is awaiting approval.";
    const message =
      this.getAttribute("message") ||
      "An administrator needs to approve your account before you can view the gallery and images.";
    const email = this.getAttribute("email") || "";

    this.innerHTML = html`
      <section class="pxme-hero" aria-label="Account approval pending">
        <div class="pxme-hero__backdrop"></div>
        <div class="pxme-hero__shell">
          <div class="pxme-hero__intro">
            <p class="pxme-hero__eyebrow">Approval required</p>
            <h1 class="pxme-hero__title">${title}</h1>
            <p class="pxme-hero__message">${message}</p>
            ${email ? `<p class="pxme-hero__status">Signed in as ${email}</p>` : ""}
            <div class="pxme-hero__actions">
              <button class="pxme-hero__cta pxme-hero__cta--primary" id="signout-btn">Sign out</button>
            </div>
          </div>

          <aside class="pxme-hero__panel" aria-label="What happens next">
            <div class="pxme-hero__feature">
              <span class="pxme-hero__feature-kicker">Review</span>
              <h2>An admin will review your account</h2>
              <p>Once approved, refresh the page or sign in again to unlock the gallery and image viewer.</p>
            </div>
            <div class="pxme-hero__feature">
              <span class="pxme-hero__feature-kicker">Privacy</span>
              <h2>Your access stays blocked until approval</h2>
              <p>Image metadata, thumbnails, and full-size photos remain unavailable until your account is approved.</p>
            </div>
          </aside>
        </div>
      </section>
    `;

    this.querySelector('#signout-btn').addEventListener('click', async () => {
      await fetch('/auth/signout', { method: 'POST' });
      window.location.href = '/';
    });
  }
}

customElements.define("pxme-pending", PxmePending);