<script lang="ts">
  import { sessionManager, type UserSession } from '../../services/auth/session-manager.js';
  import UserPreferences from '../preferences/UserPreferences.svelte';
  import ProfileBadge from '../layout/ProfileBadge.svelte';

  let currentSession = $state<UserSession | null>(sessionManager.session.value);
  let isLoggedIn = $derived(currentSession !== null);
  let currentPubkey = $derived(currentSession?.pubkey || null);

  // Subscribe to session changes
  $effect(() => {
    const unsubscribe = sessionManager.session.subscribe((session: UserSession | null) => {
      currentSession = session;
    });
    return unsubscribe;
  });

</script>

<header class="relative border-b border-fog-border dark:border-fog-dark-border">
  <!-- Banner image -->
  <div class="h-32 md:h-48 overflow-hidden bg-fog-surface dark:bg-fog-dark-surface">
    <div class="max-w-7xl mx-auto h-full">
      <img 
        src="/aither.png" 
        alt="aitherboard banner" 
        class="w-full h-full object-cover opacity-90 dark:opacity-70"
      />
      <!-- Overlay gradient for text readability -->
      <div class="absolute inset-0 bg-gradient-to-b from-fog-bg/30 to-fog-bg/80 dark:from-fog-dark-bg/40 dark:to-fog-dark-bg/90 pointer-events-none"></div>
    </div>
  </div>
  
  <!-- Navigation -->
  <nav class="bg-fog-surface/95 dark:bg-fog-dark-surface/95 backdrop-blur-sm border-b border-fog-border dark:border-fog-dark-border px-4 py-3">
    <div class="flex flex-wrap items-center justify-between gap-2 max-w-7xl mx-auto">
      <div class="flex flex-wrap gap-2 sm:gap-4 items-center text-sm font-mono">
        <a href="/" class="text-xl font-semibold text-fog-text dark:text-fog-dark-text hover:text-fog-text-light dark:hover:text-fog-dark-text-light transition-colors">aitherboard</a>
        <a href="/" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Discussions</a>
        <a href="/feed" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Feed</a>
        {#if isLoggedIn}
          <a href="/write" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Write</a>
        {/if}
        <a href="/find" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Find</a>
        {#if isLoggedIn}
          <a href="/rss" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/RSS</a>
        {/if}
        <a href="/relay" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Relay</a>
        <a href="/topics" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Topics</a>
        <a href="/repos" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Repos</a>
        <a href="/cache" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">/Cache</a>
      </div>
      <div class="flex flex-wrap gap-2 sm:gap-4 items-center text-sm">
        {#if isLoggedIn && currentPubkey}
          <UserPreferences />
          <ProfileBadge pubkey={currentPubkey} />
          <button 
            onclick={() => sessionManager.clearSession()}
            class="px-3 py-1 rounded border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight transition-colors"
            title="Logout"
            aria-label="Logout"
          >
            <span class="emoji emoji-grayscale">🚪</span>
          </button>
        {:else}
          <a href="/login" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Login</a>
          <UserPreferences />
        {/if}
      </div>
    </div>
  </nav>
</header>

<style>
  header {
    max-width: 100%;
  }
  
  nav {
    min-width: 0; /* Allow flex items to shrink */
  }
  
  .emoji {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
  }

  .emoji-grayscale {
    filter: grayscale(100%);
  }

  button:hover .emoji-grayscale {
    filter: grayscale(80%);
  }

  @media (max-width: 768px) {
    nav {
      padding: 0.5rem 0.75rem; /* Smaller padding on mobile */
    }
    
    nav a, nav button {
      font-size: 0.875rem; /* Slightly smaller text on mobile */
    }
    
    nav .text-xl {
      font-size: 1.125rem; /* Smaller logo on mobile */
    }
  }
</style>
