<script lang="ts">
  import { sessionManager, type UserSession } from '../../services/auth/session-manager.js';
  import ThemeToggle from '../preferences/ThemeToggle.svelte';
  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 items-center justify-between max-w-7xl mx-auto">
      <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>
      <div class="flex gap-4 items-center text-sm">
        <a href="/" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Threads</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 && currentPubkey}
          <span class="text-fog-text-light dark:text-fog-dark-text-light">Logged in as </span>
          <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 hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight text-fog-text dark:text-fog-dark-text transition-colors"
          >
            Logout
          </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>
        {/if}
        <UserPreferences />
        <ThemeToggle />
      </div>
    </div>
  </nav>
</header>

<style>
  header {
    max-width: 100%;
  }
</style>
