<script lang="ts">
  import { auth } from '$lib/stores/auth.js';
;

  export let toggleSidebar: () => void;

  function handleLogout() {
    auth.logout();
  }

  let isMenuOpen = false;

  function toggleMenu() {
    isMenuOpen = !isMenuOpen;
  }
</script>

<header class="bg-white shadow-sm border-b border-gray-200">
  <div class="flex justify-between items-center px-4 py-3">
    <!-- Left side -->
    <div class="flex items-center space-x-4">
      <button
        on:click={toggleSidebar}
        class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 lg:hidden"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
        </svg>
      </button>

      <div class="hidden lg:block">
        <h1 class="text-lg font-semibold text-gray-900">ServiceManager Internal</h1>
      </div>
    </div>

    <!-- Right side -->
    <div class="flex items-center space-x-4">
      <!-- User menu -->
      <div class="relative">
        <button
          on:click={toggleMenu}
          class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-md p-2"
        >
          <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
            <span class="text-primary-600 text-sm font-medium">
              {$auth.user?.first_name?.[0]}{$auth.user?.last_name?.[0]}
            </span>
          </div>
          <span class="hidden sm:block text-sm">
            {$auth.user?.first_name}
            {$auth.user?.last_name}
          </span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </button>

        {#if isMenuOpen}
          <div
            class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50"
          >
            <div class="py-1">
              <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                {$auth.user?.email}
              </div>
              <a
                href="/profile"
                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                on:click={() => (isMenuOpen = false)}
              >
                Mi Perfil
              </a>
              <button
                on:click={handleLogout}
                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
              >
                Cerrar Sesión
              </button>
            </div>
          </div>
        {/if}
      </div>
    </div>
  </div>
</header>

<!-- Backdrop for mobile menu -->
{#if isMenuOpen}
  <div
    class="fixed inset-0 z-40 lg:hidden"
    role="dialog"
    tabindex="0"
    on:click={() => (isMenuOpen = false)}
    on:keydown={e => e.key === 'Escape' && (isMenuOpen = false)}
  />
{/if}
