<script lang="ts">
  import { page } from '$app/state';
  import { goto } from '$app/navigation';
  import { user, logout } from '$lib/auth/store.svelte';
  import { player } from '$lib/player/store.svelte';
  import PlayerBar from './PlayerBar.svelte';
  import SearchInput from './SearchInput.svelte';

  let { children } = $props<{ children: import('svelte').Snippet }>();

  let menuOpen = $state(false);

  async function handleLogout() {
    menuOpen = false;
    await logout();
    goto('/login', { replaceState: true });
  }

  function isActive(href: string): boolean {
    if (href === '/') return page.url.pathname === '/';
    return page.url.pathname.startsWith(href);
  }

  const navItems = [
    { href: '/',              label: 'Library' },
    { href: '/library/liked', label: 'Liked' },
    { href: '/search',        label: 'Search' },
    { href: '/playlists',     label: 'Playlists' }
  ];
</script>

<svelte:window onclick={() => (menuOpen = false)} onkeydown={(e) => e.key === 'Escape' && (menuOpen = false)} />

<div class="grid h-screen grid-cols-[auto_1fr] grid-rows-[auto_1fr_auto] bg-background text-text-primary">
  <header class="col-span-2 flex items-center gap-4 border-b border-border bg-surface px-4 py-3">
    <div class="font-semibold">Minstrel</div>
    <div class="flex-1">
      <SearchInput />
    </div>
    <div class="relative">
      <button
        type="button"
        class="rounded px-3 py-1 hover:bg-surface-hover"
        onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}
      >
        {user.value?.username ?? ''}
      </button>
      {#if menuOpen}
        <div
          class="absolute right-0 mt-1 w-32 rounded border border-border bg-surface shadow"
          onclick={(e) => e.stopPropagation()}
          onkeydown={(e) => e.stopPropagation()}
          role="menu"
          tabindex="-1"
        >
          <button
            type="button"
            class="block w-full px-3 py-2 text-left hover:bg-surface-hover"
            onclick={handleLogout}
          >
            Log out
          </button>
        </div>
      {/if}
    </div>
  </header>

  <nav class="hidden w-48 border-r border-border bg-surface md:block">
    <ul class="p-2">
      {#each navItems as item}
        <li>
          <a
            href={item.href}
            class="block rounded px-3 py-2 hover:bg-surface-hover"
            aria-current={isActive(item.href) ? 'page' : undefined}
          >
            {item.label}
          </a>
        </li>
      {/each}
    </ul>
  </nav>

  <main class="overflow-y-auto p-4 md:col-start-2">
    {@render children?.()}
  </main>

  {#if player.current}
    <div class="col-span-2">
      <PlayerBar />
    </div>
  {/if}
</div>
