<!-- TRACES: UR-039 | DR-045 -->
<script lang="ts">
  import { page } from "$app/stores";
  import { goto } from "$app/navigation";
  import { library } from "$lib/stores/library";

  // When a className is supplied the parent positions this bar (e.g. inside a
  // measured in-flow stack); otherwise it self-positions as a fixed bottom bar.
  let { className = "fixed bottom-0 left-0 right-0 z-40" }: { className?: string } = $props();

  // Determine if a route is active
  function isActive(path: string): boolean {
    const pathname = $page.url.pathname;
    if (path === "/") {
      // Home is active only when exactly on / or /home, not /library or /search
      return (
        pathname === "/" ||
        (pathname.startsWith("/home") &&
          !pathname.startsWith("/library") &&
          !pathname.startsWith("/search"))
      );
    }
    return pathname.startsWith(path);
  }
</script>

<!-- Navigation bar visible on all platforms -->
<nav class="{className} bg-[var(--color-surface)] border-t border-gray-800">
  <div class="flex items-center justify-around px-4 py-2">
    <!-- Home Button -->
    <button
      onclick={() => goto("/")}
      class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/') &&
      !isActive('/library') &&
      !isActive('/search')
        ? 'text-[var(--color-jellyfin)]'
        : 'text-gray-400 hover:text-white'}"
      aria-label="Home"
    >
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
      </svg>
      <span class="text-xs">Home</span>
    </button>

    <!-- Search Button -->
    <button
      onclick={() => goto("/search")}
      class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/search')
        ? 'text-[var(--color-jellyfin)]'
        : 'text-gray-400 hover:text-white'}"
      aria-label="Search"
    >
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path
          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
        />
      </svg>
      <span class="text-xs">Search</span>
    </button>

    <!-- Library Button -->
    <button
      onclick={() => {
        library.setCurrentLibrary(null);
        goto("/library");
      }}
      class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/library')
        ? 'text-[var(--color-jellyfin)]'
        : 'text-gray-400 hover:text-white'}"
      aria-label="Library"
    >
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path
          d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"
        />
      </svg>
      <span class="text-xs">Library</span>
    </button>
  </div>
</nav>
