<!--
  Shared application header. Lifted out of the library layout so the account
  menu (and desktop nav) are available on every authenticated, non-immersive
  screen, not only under /library.

  The search box is owned here rather than passed in by a layout, so the same
  bar renders on the library routes and on /search — searching from the header
  no longer hands you to a screen with a different input.

  TRACES: UR-054 | DR-076
-->
<script lang="ts">
  import { page } from "$app/stores";
  import AccountMenu from "$lib/components/account/AccountMenu.svelte";
  import HeaderSearch from "$lib/components/search/HeaderSearch.svelte";
  import { showHeaderSearch } from "$lib/utils/layoutShell";

  const pathname = $derived($page.url.pathname);
  const withSearch = $derived(showHeaderSearch({ pathname }));
</script>

<header class="sticky top-0 z-50 bg-[var(--color-background)]/95 backdrop-blur border-b border-gray-800 flex-shrink-0">
  <div class="px-4 py-3 flex items-center gap-4">
    <!-- Logo -->
    <a href="/library" class="text-xl font-bold text-[var(--color-jellyfin)]">
      JellyTau
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex items-center gap-1">
      <a
        href="/"
        class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname === '/' ? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]' : 'text-gray-400'}"
      >
        Home
      </a>
      <a
        href="/library"
        class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname.startsWith('/library') ? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]' : 'text-gray-400'}"
      >
        Library
      </a>
      <a
        href="/downloads"
        class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname === '/downloads' ? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]' : 'text-gray-400'}"
      >
        Downloads
      </a>
      <a
        href="/settings"
        class="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface)] {pathname === '/settings' ? 'text-[var(--color-jellyfin)] bg-[var(--color-surface)]' : 'text-gray-400'}"
      >
        Settings
      </a>
    </nav>

    <!-- In-header search: the single md+ search input (library + /search). -->
    {#if withSearch}
      <div class="flex-1 max-w-md hidden md:block">
        <HeaderSearch />
      </div>
    {/if}

    <!-- Account menu, anchored to the user's identity. -->
    <div class="ml-auto flex items-center gap-3">
      <!-- Desktop: Downloads quick icon (kept per UX spec §1.2). -->
      <a
        href="/downloads"
        class="hidden md:block text-gray-400 hover:text-white transition-colors"
        title="Downloads"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
        </svg>
      </a>

      <AccountMenu />
    </div>
  </div>
</header>
