import { html } from "../util.js";
import AuthSession from "../sessionAuth.js";
import buttonCSS from "../buttonStyles.js";
import { escapeHtml } from "../escapeHtml.js";
import {
  fallbackToRedirect,
  openAuthPopup,
  waitForAuthPopup,
} from "../authPopup.js";

class PxmeHeader extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get observedAttributes() {
    return ["active"];
  }

  attributeChangedCallback() {
    if (this._rendered) this._updateActive();
  }

  connectedCallback() {
    this._render();
    this._initThemeToggle();
    this._initAuth();
  }

  _render() {
    const active = this.getAttribute("active") || "gallery";
    this.shadowRoot.innerHTML = html`
      <style>
        ${buttonCSS}
        :host {
          display: block;
        }

        .pxme-header {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          background: transparent;
          padding: var(--pxme-space-md, 16px);
        }

        .pxme-header__logo {
          display: block;
        }

        .pxme-header__logo img {
          display: block;
          max-width: 100%;
          max-height: 200px;
          height: auto;
        }

        @media (max-width: 480px) {
          .pxme-header__logo img {
            max-width: 120px;
          }
        }

        .pxme-nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
        }

        .pxme-nav__links {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-wrap: wrap;
          gap: var(--pxme-space-md, 16px);
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .pxme-nav__item {
          margin: 0 var(--pxme-space-md, 16px);
        }

        .pxme-nav__link {
          text-decoration: none;
          color: var(--pxme-color-dark, #2c3e50);
          font-weight: var(--pxme-weight-heavy, 800);
          transition: color var(--pxme-transition-normal, 0.3s ease);
          font-size: var(--pxme-font-xl, 1.25rem);
          padding: var(--pxme-space-xs, 8px) var(--pxme-space-md, 16px);
        }

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

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

        .pxme-nav__link--active {
          color: var(--pxme-color-primary, #1e7aff);
          border-bottom: 2px solid var(--pxme-color-primary, #1e7aff);
        }

        .pxme-profile {
          position: relative;
          display: inline-block;
        }

        .pxme-profile__trigger {
          background: none;
          border: none;
          cursor: pointer;
          padding: var(--pxme-space-2xs, 4px);
          border-radius: var(--pxme-radius-full, 50%);
          display: flex;
          align-items: center;
          transition: box-shadow var(--pxme-transition-fast, 0.15s ease);
        }

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

        .pxme-profile__trigger:hover {
          box-shadow: 0 0 0 2px var(--pxme-color-primary, #1e7aff);
        }

        .pxme-profile__avatar {
          border-radius: var(--pxme-radius-full, 50%);
          width: 40px;
          height: 40px;
          object-fit: cover;
        }

        .pxme-profile__dropdown {
          position: absolute;
          top: calc(100% + var(--pxme-space-xs, 8px));
          right: 0;
          min-width: 220px;
          background: var(--pxme-color-surface, #fff);
          border: 1px solid var(--pxme-color-border, #6b7b8d);
          border-radius: var(--pxme-radius-md, 8px);
          box-shadow: var(--pxme-shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
          z-index: 200;
          padding: var(--pxme-space-sm, 12px) 0;
        }

        .pxme-profile__info {
          display: flex;
          flex-direction: column;
          padding: var(--pxme-space-xs, 8px) var(--pxme-space-md, 16px);
        }

        .pxme-profile__name {
          font-weight: var(--pxme-weight-semibold, 600);
          font-size: var(--pxme-font-md, 1rem);
          color: var(--pxme-color-dark, #2c3e50);
        }

        .pxme-profile__email {
          font-size: var(--pxme-font-sm, 0.875rem);
          color: var(--pxme-color-secondary, #6b7b8d);
        }

        .pxme-profile__divider {
          border: none;
          border-top: 1px solid var(--pxme-color-border, #6b7b8d);
          margin: var(--pxme-space-xs, 8px) 0;
        }

        .pxme-profile .pxme-btn {
          width: 100%;
          display: block;
        }

        .pxme-profile .pxme-btn:hover {
          color: var(--pxme-color-danger, #e74c3c);
        }

        /* ---- Theme toggle ---- */

        .pxme-theme-toggle__icon {
          width: 22px;
          height: 22px;
        }

        .pxme-theme-toggle__icon--hidden {
          display: none;
        }
      </style>
      <header class="pxme-header">
        <h1>
          <a class="pxme-header__logo" href="/">
            <img id="header-logo" src="./img/pixme.svg" alt="PixMe" />
          </a>
        </h1>
        <nav class="pxme-nav">
          <ul class="pxme-nav__links" id="nav-links">
            <li class="pxme-nav__item">
              <button class="pxme-btn pxme-btn--icon" id="theme-toggle" aria-label="Toggle dark mode">
                <svg class="pxme-theme-toggle__icon" id="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                </svg>
                <svg class="pxme-theme-toggle__icon" id="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="5"/>
                  <line x1="12" y1="1" x2="12" y2="3"/>
                  <line x1="12" y1="21" x2="12" y2="23"/>
                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                  <line x1="1" y1="12" x2="3" y2="12"/>
                  <line x1="21" y1="12" x2="23" y2="12"/>
                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                </svg>
              </button>
            </li>
            <li class="pxme-nav__item" id="login-item">
              <a class="pxme-nav__link" href="/auth/signin">Sign In</a>
            </li>
          </ul>
        </nav>
      </header>
    `;
    this._rendered = true;
    this._updateActive();
  }

  _initThemeToggle() {
    const toggle = this.shadowRoot.getElementById("theme-toggle");
    const sunIcon = this.shadowRoot.getElementById("theme-icon-sun");
    const moonIcon = this.shadowRoot.getElementById("theme-icon-moon");
    const logo = this.shadowRoot.getElementById("header-logo");

    const updateThemeUI = () => {
      const isDark =
        document.documentElement.getAttribute("data-theme") === "dark";
      sunIcon.classList.toggle("pxme-theme-toggle__icon--hidden", !isDark);
      moonIcon.classList.toggle("pxme-theme-toggle__icon--hidden", isDark);
      logo.src = isDark ? "./img/pixme-dark.svg" : "./img/pixme.svg";
      toggle.setAttribute(
        "aria-label",
        isDark ? "Switch to light mode" : "Switch to dark mode"
      );
    };

    updateThemeUI();

    toggle.addEventListener("click", () => {
      const current = document.documentElement.getAttribute("data-theme");
      const next = current === "dark" ? "light" : "dark";
      document.documentElement.setAttribute("data-theme", next);
      localStorage.setItem("pxme-theme", next);
      updateThemeUI();
    });
  }

  _updateActive() {
    const active = this.getAttribute("active") || "gallery";
    const links = this.shadowRoot.querySelectorAll(".pxme-nav__link[data-page]");
    links.forEach((link) => {
      link.classList.toggle(
        "pxme-nav__link--active",
        link.dataset.page === active
      );
    });
  }

  async _initAuth() {
    const { isLoggedIn, getSession, isAdmin } = AuthSession({
      authUri: "/auth/session",
    });

    if (await isLoggedIn()) {
      const session = await getSession();
      const loginItem = this.shadowRoot.getElementById("login-item");
      const navLinks = this.shadowRoot.getElementById("nav-links");

      loginItem.innerHTML = "";
      const profileDiv = document.createElement("div");
      profileDiv.className = "pxme-profile";

      const trigger = document.createElement("button");
      trigger.className = "pxme-profile__trigger";
      trigger.setAttribute("aria-expanded", "false");
      trigger.setAttribute("aria-haspopup", "true");

      const avatar = document.createElement("img");
      avatar.className = "pxme-profile__avatar";
      avatar.src = session.user.image || "/img/profile-user.png";
      avatar.alt = "Profile";
      avatar.width = 40;
      avatar.height = 40;
      trigger.appendChild(avatar);

      const dropdown = document.createElement("div");
      dropdown.className = "pxme-profile__dropdown";
      dropdown.hidden = true;

      dropdown.innerHTML = html`
        <div class="pxme-profile__info">
          <span class="pxme-profile__name">${this._esc(session.user.name || "")}</span>
          <span class="pxme-profile__email">${this._esc(session.user.email || "")}</span>
        </div>
        <hr class="pxme-profile__divider" />
        <button class="pxme-btn" id="signout-btn">Sign Out</button>
      `;

      trigger.addEventListener("click", (e) => {
        e.stopPropagation();
        const open = !dropdown.hidden;
        dropdown.hidden = open;
        trigger.setAttribute("aria-expanded", String(!open));
      });

      document.addEventListener("click", () => {
        dropdown.hidden = true;
        trigger.setAttribute("aria-expanded", "false");
      });

      // Sign out via POST
      dropdown.querySelector("#signout-btn").addEventListener("click", async () => {
        await fetch("/auth/signout", { method: "POST" });
        window.location.href = "/";
      });

      profileDiv.appendChild(trigger);
      profileDiv.appendChild(dropdown);
      loginItem.appendChild(profileDiv);

      if (await isAdmin()) {
        const adminLi = document.createElement("li");
        adminLi.className = "pxme-nav__item";
        const adminLink = document.createElement("a");
        adminLink.href = "/admin.html";
        adminLink.textContent = "Admin";
        adminLink.className = "pxme-nav__link";
        adminLink.dataset.page = "admin";
        adminLi.appendChild(adminLink);
        navLinks.insertBefore(adminLi, loginItem);

        const facesLi = document.createElement("li");
        facesLi.className = "pxme-nav__item";
        const facesLink = document.createElement("a");
        facesLink.href = "/faces.html";
        facesLink.textContent = "Faces";
        facesLink.className = "pxme-nav__link";
        facesLink.dataset.page = "faces";
        facesLi.appendChild(facesLink);
        navLinks.insertBefore(facesLi, loginItem);

        this._updateActive();
      }
      return;
    }

    const signInLink = this.shadowRoot.querySelector('#login-item a[href="/auth/signin"]');
    if (signInLink) {
      signInLink.addEventListener("click", async (event) => {
        event.preventDefault();
        const popup = openAuthPopup();
        if (!popup) {
          signInLink.textContent = "Popup blocked, redirecting...";
          fallbackToRedirect();
          return;
        }

        signInLink.textContent = "Waiting for sign-in...";
        signInLink.setAttribute("aria-disabled", "true");

        try {
          await waitForAuthPopup(popup);
          window.location.reload();
        } catch (error) {
          const code = error instanceof Error ? error.message : "auth_error";
          signInLink.textContent = "Sign In";
          signInLink.removeAttribute("aria-disabled");

          if (code === "popup_blocked") {
            signInLink.textContent = "Popup blocked, redirecting...";
            fallbackToRedirect();
            return;
          }

          if (code === "auth_timeout") {
            signInLink.textContent = "Redirecting to sign-in...";
            fallbackToRedirect();
          }
        }
      });
    }
  }

  _esc(str) {
    return escapeHtml(str);
  }
}

customElements.define("pxme-header", PxmeHeader);