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

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

<div class="dropdown dropdown-end" data-testid="user-menu">
  <button class="btn btn-ghost btn-circle avatar" aria-label="Open user menu">
    <div class="w-9 rounded-full bg-primary text-primary-content grid place-items-center">
      <span class="text-sm font-semibold">{$user?.email?.charAt(0).toUpperCase() ?? '?'}</span>
    </div>
  </button>

  <ul class="menu menu-sm dropdown-content mt-2 z-30 w-52 rounded-box bg-base-100 p-2 shadow-lg border border-base-300">
    <li class="menu-title">
      <span>{$user?.email ?? 'Guest'}</span>
    </li>
    <li><a href="/dashboard">Dashboard</a></li>
    {#if $user?.role === 'superuser' || $user?.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>
    <li>
      <button class="text-error" on:click={handleLogout}>Logout</button>
    </li>
  </ul>
</div>
