---
import { navItems, site } from '../lib/site';

const current = Astro.url.pathname;

// Exact match for the current page; section match (descendant URLs) for
// ancestor links. `aria-current="page"` is reserved for the exact page,
// `"true"` indicates an ancestor section.
function currentState(href: string): 'page' | 'true' | undefined {
  if (current === href) return 'page';
  if (href !== '/' && current.startsWith(href)) return 'true';
  return undefined;
}

// Header shows nav items except Home and footer-only entries. RSS lives as a
// dedicated icon link to the right of the nav.
const headerNavItems = navItems.filter((item) => item.href !== '/' && !item.footerOnly);
---

<a class="skip-link" href="#content">Skip to content</a>
<header class="site-header">
  <a class="site-title" href="/" aria-current={currentState('/')}>{site.name}</a>
  <div class="header-actions">
    <nav class="site-nav" aria-label="Primary">
      {
        headerNavItems.map((item) => (
          <a href={item.href} aria-current={currentState(item.href)}>
            {item.label}
          </a>
        ))
      }
    </nav>
    <a class="rss-link" href="/rss.xml" aria-label="RSS feed">
      <svg
        class="rss-icon"
        viewBox="0 0 24 24"
        width="18"
        height="18"
        aria-hidden="true"
        focusable="false"
      >
        <path
          fill="currentColor"
          d="M6.18 17.82a2.18 2.18 0 1 1-4.36 0 2.18 2.18 0 0 1 4.36 0ZM2 9.86v3.13a8.97 8.97 0 0 1 9.01 9.01h3.13A12.1 12.1 0 0 0 2 9.86Zm0-5.86V7.1A14.92 14.92 0 0 1 16.9 22H20A17.9 17.9 0 0 0 2 4Z"
        ></path>
      </svg>
      <span class="sr-only">RSS feed</span>
    </a>
    <button
      id="theme-switcher"
      class="theme-switcher"
      type="button"
      aria-label="Switch to dark theme"
      aria-pressed="false"
    >
      <span class="sr-only">Toggle theme</span>
    </button>
  </div>
</header>

<script is:inline data-theme-script>
  (() => {
    var key = 'theme';
    var legacyKey = 'dark-mode';
    var switcher = document.getElementById('theme-switcher');
    if (!switcher) return;

    function syncSwitcher(theme) {
      switcher.setAttribute('aria-pressed', String(theme === 'dark'));
      switcher.setAttribute(
        'aria-label',
        theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'
      );
    }

    var initial = document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
    syncSwitcher(initial);

    var reduced = matchMedia('(prefers-reduced-motion: reduce)');

    function apply(theme) {
      document.documentElement.dataset.theme = theme;
      document.documentElement.style.colorScheme = theme;
      syncSwitcher(theme);
    }

    function runApply(theme) {
      if (!reduced.matches && typeof document.startViewTransition === 'function') {
        document.startViewTransition(function () {
          apply(theme);
        });
      } else {
        apply(theme);
      }
    }

    switcher.addEventListener('click', function () {
      var currentTheme =
        switcher.getAttribute('aria-pressed') === 'true' ? 'dark' : 'light';
      var next = currentTheme === 'dark' ? 'light' : 'dark';
      try {
        localStorage.setItem(key, next);
        localStorage.setItem(legacyKey, JSON.stringify(next === 'dark'));
      } catch (e) {}
      runApply(next);
    });
  })();
</script>

<style>
  .rss-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    color: inherit;
    line-height: 0;
    transition: color 150ms ease;
  }
  .rss-link:hover,
  .rss-link:focus-visible {
    color: var(--color-link-hover);
  }
  .rss-icon {
    display: block;
  }
</style>