<script>
  import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';

  let { screen, onNavigate } = $props();

  let user = $derived(getUser());
  let profile = $derived(getUserProfile());

  let menuOpen = $state(false);

  function toggleMenu() {
    menuOpen = !menuOpen;
  }

  function handleSignOut() {
    menuOpen = false;
    signOut();
  }
</script>

<div class="topbar">
  <div class="left">
    <img src="/logo.png" alt="Logo" class="logo" />
    <span class="app-name">Map Journal</span>
  </div>

  <div class="center">
    <div class="segmented">
      <div
        class="slider"
        style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
      ></div>
      <button onclick={() => onNavigate('worldmap')}>Worldmap</button>
      <button onclick={() => onNavigate('timeline')}>Timeline</button>
    </div>
  </div>

  <div class="right">
    {#if user}
      <div class="avatar-wrapper">
        <button class="avatar-btn" onclick={toggleMenu} onkeydown={(e) => { if (e.key === 'Enter') toggleMenu(); }}>
          <img
            src={user.photoURL || '/profile.jpg'}
            alt="Profile"
            class="avatar"
          />
        </button>
        {#if menuOpen}
          <div class="dropdown-menu">
            <div class="menu-header">
              <span class="menu-name">{profile?.displayName || user.displayName}</span>
              <span class="menu-email">{user.email}</span>
            </div>
            <div class="divider"></div>
            <button class="menu-item" onclick={handleSignOut}>Sign out</button>
          </div>
        {/if}
      </div>
    {/if}
  </div>

  {#if menuOpen}
    <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
  {/if}
</div>

<style>
  .topbar {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: #1e2937;
    gap: 16px;
    position: relative;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  }

  .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .logo {
    width: 75px;
    height: 75px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .app-name {
    font: 700 20px/1.2 sans-serif;
    color: #f1f5f9;
    white-space: nowrap;
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .segmented {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 4px;
    width: 300px;
  }

  .slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 999px;
    transition: transform 0.25s ease;
    pointer-events: none;
  }

  .segmented button {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font: 500 16px/1.4 sans-serif;
    color: #cbd5e1;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .avatar-wrapper {
    position: relative;
  }

  .avatar-btn {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
  }

  .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e2937;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 50;
  }

  .menu-header {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .menu-name {
    font: 600 14px/1.3 sans-serif;
    color: #f1f5f9;
  }

  .menu-email {
    font: 400 12px/1.3 sans-serif;
    color: #94a3b8;
  }

  .divider {
    height: 1px;
    background: #334155;
    margin: 6px 0;
  }

  .menu-item {
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    text-align: left;
    font: 400 14px/1.4 sans-serif;
    color: #fca5a5;
    cursor: pointer;
    transition: background 0.15s;
  }

  .menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    border: none;
    background: transparent;
    cursor: default;
  }
</style>
