<script lang="ts">
  import { user, logout } from '$lib/stores/auth';
  import { goto } from '$app/navigation';

  // Get user from store using $derived for reactivity
  let currentUser = $derived($user);

  async function handleLogout() {
    await logout();
    goto('/login');
  }
</script>

<nav class="navbar bg-base-100 shadow-lg">
  <div class="flex-1">
    <a href="/" class="btn btn-ghost normal-case text-xl">Headroom</a>
  </div>

  <div class="flex-none gap-2">
    {#if currentUser}
      <div class="dropdown dropdown-end">
        <label tabindex="0" class="btn btn-ghost btn-circle avatar">
          <div class="w-10 rounded-full bg-primary">
            <span class="text-xl">{currentUser.email?.charAt(0).toUpperCase()}</span>
          </div>
        </label>
        <ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
          <li>
            <a href="/dashboard" class="justify-between">
              Dashboard
            </a>
          </li>
          {#if currentUser.role === 'superuser' || currentUser.role === 'manager'}
            <li><a href="/team-members">Team Members</a></li>
            <li><a href="/projects">Projects</a></li>
          {/if}
          <li><a href="/reports">Reports</a></li>
          <div class="divider"></div>
          <li>
            <button onclick={handleLogout} class="text-error">Logout</button>
          </li>
        </ul>
      </div>
    {:else}
      <a href="/login" class="btn btn-primary btn-sm">Login</a>
    {/if}
  </div>
</nav>
