{% if config.extra.header_nav %}
{% if page %}
{% set active_path = page.path | trim_end_matches(pat="/") %}
{% elif section %}
{% set active_path = section.path | trim_end_matches(pat="/") %}
{% elif current_path %}
{% set active_path = current_path | trim_end_matches(pat="/") %}
{% else %}
{% set active_path = "" %}
{% endif %}
<div id="header-container">
  <span id="now-playing"></span>
  <nav id="nav-bar">
    {% for nav_item in config.extra.header_nav %}
    <a href="{{ nav_item.url }}"
      class="{% if nav_item.url == active_path or (nav_item.url == '/' and active_path == '') %}active{% endif %}">
      {{ nav_item.name }}
    </a>
    {% endfor %}
  </nav>
</div>
<script>
  async function resolveDidToPds(did) {
    if (did.startsWith("did:plc:")) {
      const res = await fetch(`https://plc.directory/${did}`);
      const doc = await res.json();
      return doc.service?.find(s => s.id === "#atproto_pds")?.serviceEndpoint;
    } else if (did.startsWith("did:web:")) {
      const domain = did.slice(8);
      const res = await fetch(`https://${domain}/.well-known/did.json`);
      const doc = await res.json();
      return doc.service?.find(s => s.id === "#atproto_pds")?.serviceEndpoint;
    }
    return null;
  }
  async function fetchAtUriRecord(atUri) {
    const match = atUri.match(/^at:\/\/([^/]+)\/([^/]+)\/([^/]+)$/);
    if (!match) return null;
    const [, repo, collection, rkey] = match;
    const pds = await resolveDidToPds(repo);
    if (!pds) return null;
    const url = `${pds}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(repo)}&collection=${encodeURIComponent(collection)}&rkey=${encodeURIComponent(rkey)}`;
    const res = await fetch(url);
    return res.ok ? res.json() : null;
  }
  let nowPlayingTimeout = null;
  function fetchNowPlaying() {
    if (nowPlayingTimeout) clearTimeout(nowPlayingTimeout);
    fetchAtUriRecord("at://did:plc:krxbvxvis5skq7jj6eot23ul/fm.teal.alpha.actor.status/self")
      .then((data) => {
        const el = document.getElementById("now-playing");
        if (!data?.value?.item) {
          el.innerHTML = "";
          nowPlayingTimeout = setTimeout(fetchNowPlaying, 60000);
          return;
        }
        const item = data.value.item;
        const expiry = new Date(data.value.expiry).getTime();
        const now = Date.now();
        if (now > expiry) {
          el.innerHTML = "";
          nowPlayingTimeout = setTimeout(fetchNowPlaying, 60000);
          return;
        }
        el.innerHTML = `
          <div class="now-playing-line"><span>🎵</span><a href="${item.originUrl || '#'}" target="_blank" rel="noopener"><span class="track-name">${item.trackName}</span></a></div>
          <div class="now-playing-line artist-line">${item.artists?.[0]?.artistName || 'Unknown'}</div>
          <div class="now-playing-line"><relative-time datetime="${item.playedTime}" threshold="P1D"></relative-time></div>
        `;
        const timeUntilExpiry = expiry - now + 5000;
        nowPlayingTimeout = setTimeout(fetchNowPlaying, timeUntilExpiry);
      })
      .catch(() => {
        nowPlayingTimeout = setTimeout(fetchNowPlaying, 60000);
      });
  }
  document.addEventListener("DOMContentLoaded", fetchNowPlaying);
</script>
{% endif %}