<!-- 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>
