---
import AuthMenu from "../auth/AuthMenu.astro";
import ThemeSwitcher from "../ThemeSwitcher.astro";

const navLinks = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
  { href: "/community-content", label: "Content" },
  { href: "/events", label: "Events" },
  { href: "/communities", label: "Communities" },
];

const currentPath = Astro.url.pathname;
const authErrorCode = Astro.locals.authproto?.errorCode;
const authErrorDescription = Astro.locals.authproto?.errorDescription;
const authError = authErrorDescription ?? authErrorCode;

const isActive = (href: string) =>
  currentPath === href || (href !== "/" && currentPath.startsWith(href));
---

<header class="site-header">
  <nav class="site-nav container" aria-label="Main navigation">
    <a href="/" class="site-logo" aria-label="atmosphere.community home">
      <span class="logo-cloud" aria-hidden="true"></span>
      <span class="logo-text">
        <span class="logo-at">@</span>atmosphere community
      </span>
    </a>

    <input
      type="checkbox"
      id="nav-toggle"
      class="nav-toggle visually-hidden"
      aria-hidden="true"
    />
    <label
      for="nav-toggle"
      class="nav-toggle-label"
      aria-label="Toggle navigation menu"
    >
      <span class="hamburger" aria-hidden="true"></span>
    </label>

    <ul class="nav-links" role="list">
      {navLinks.map((link) => (
        <li>
          <a
            href={link.href}
            class:list={[
              "nav-link",
              { "nav-link--active": isActive(link.href) },
            ]}
            aria-current={currentPath === link.href ? "page" : undefined}
          >
            {link.label}
          </a>
        </li>
      ))}
      <li class="nav-theme">
        <ThemeSwitcher />
      </li>
    </ul>

    <AuthMenu />
  </nav>
  {authError && (
    <div class="auth-alert-wrap">
      <div class="auth-alert container" role="alert">
        <strong>Sign-in failed</strong>
        <span>{authError}</span>
        {authErrorCode && authErrorCode !== authError && (
          <code>{authErrorCode}</code>
        )}
      </div>
    </div>
  )}
</header>

<style>
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
  }

  .auth-alert-wrap {
    border-top: 1px solid var(--error);
    background: color-mix(in oklch, var(--error) 10%, var(--background));
  }

  .site-header:has(.auth-menu[open]) .auth-alert-wrap {
    display: none;
  }

  .auth-alert {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    color: var(--foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .auth-alert strong {
    flex: 0 0 auto;
    color: var(--error);
  }

  .auth-alert span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .auth-alert code {
    flex: 0 0 auto;
    border: 1px solid color-mix(in oklch, var(--error) 35%, transparent);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-xs);
    color: var(--error);
    font-size: var(--text-xs);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: 56px;
    padding: 1rem;
    flex-wrap: wrap;
  }

  .site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--header-link);
  }

  .logo-cloud {
    display: block;
    width: 22px;
    height: 12px;
    position: relative;
    background: var(--header-link-inactive);
    border-radius: 12px;
    top: 3px;
  }
  .logo-cloud::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--header-link-inactive);
    top: -5px;
    left: 4px;
  }
  .logo-cloud::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--header-link-inactive);
    top: -3px;
    left: 12px;
  }

  .logo-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-base);
  }
  .logo-at {
    color: var(--header-link-inactive);
  }

  .nav-links {
    display: flex;
    gap: var(--space-lg);
    list-style: none;
    margin-left: auto;
  }

  .nav-link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--header-fg-muted);
    text-decoration: none;
    padding-block: var(--space-xs);
  }
  .nav-link:hover {
    color: var(--header-fg);
  }
  .nav-link--active {
    color: var(--header-link);
  }

  /* Mobile hamburger */
  .nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: var(--space-sm);
    margin: calc(-1 * var(--space-sm));
  }

  .hamburger {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--header-fg);
    position: relative;
  }
  .hamburger::before,
  .hamburger::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--header-fg);
    left: 0;
  }
  .hamburger::before {
    top: -6px;
  }
  .hamburger::after {
    top: 6px;
  }

  @media (max-width: 815px) {
    .site-nav {
      justify-content: space-between;
    }

    .nav-links {
      order: 3;
      margin-left: unset;
      margin-right: auto;
    }
  }

  @media (max-width: 640px) {
    .site-nav {
      gap: var(--space-sm);
    }

    .auth-alert {
      align-items: flex-start;
      flex-direction: column;
      gap: 2px;
    }

    .nav-toggle-label {
      display: block;
      order: 2;
    }

    .nav-links {
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      flex-direction: column;
      background: var(--header-bg);
      border-bottom: 1px solid var(--header-border);
      padding: var(--space-base) var(--space-lg);
      gap: var(--space-base);
      display: none;
    }

    .nav-toggle:checked ~ .nav-links {
      display: flex;
    }

    .nav-toggle:checked ~ .nav-toggle-label .hamburger {
      background: transparent;
    }
    .nav-toggle:checked ~ .nav-toggle-label .hamburger::before {
      top: 0;
      transform: rotate(45deg);
    }
    .nav-toggle:checked ~ .nav-toggle-label .hamburger::after {
      top: 0;
      transform: rotate(-45deg);
    }
  }

  @media (max-width: 360px) {
    .logo-text {
      display: none;
    }
  }
</style>