<template>
  <header class="fixed top-0 left-0 right-0 z-50 pt-4 px-4">
    <div class="floating-glass-header mx-auto px-4 md:px-6 py-3.5 rounded-2xl transition-all duration-300" style="max-width: 100%;">
      <div class="flex items-center justify-between">
        <!-- Logo + Navigation (Left Side) -->
        <div class="flex items-center gap-10">
          <router-link to="/">
            <img src="/assets/images/logo-desktop.svg" alt="IndeeHub" class="h-8 md:h-10 ml-2 md:ml-0" />
          </router-link>
          
          <!-- Navigation - Desktop -->
          <nav v-if="showNav" class="hidden md:flex items-center gap-3">
            <button @click="handleFilmsClick" :class="isRoute('/') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">Films</button>
            <router-link to="/library" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'" @click="clearFilter">My List</router-link>

            <!-- Algos Dropdown -->
            <div class="relative algos-dropdown">
              <button
                @click="toggleAlgosMenu"
                :class="activeAlgorithm ? 'nav-button-active' : 'nav-button'"
              >
                {{ activeAlgorithmLabel || 'Algos' }}
                <svg class="w-3.5 h-3.5 ml-1.5 inline transition-transform" :class="{ 'rotate-180': algosMenuOpen }" 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>
              <div v-if="algosMenuOpen" class="profile-menu absolute left-0 mt-2 w-52">
                <div class="floating-glass-header py-2 rounded-xl">
                  <div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Discovery Algorithms</div>
                  <button
                    v-for="algo in algorithms"
                    :key="algo.id"
                    @click="handleAlgoSelect(algo.id)"
                    class="profile-menu-item flex items-center justify-between px-4 py-2.5 w-full text-left"
                  >
                    <span>{{ algo.label }}</span>
                    <svg
                      v-if="activeAlgorithm === algo.id"
                      class="w-4 h-4 text-white/80"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                  </button>
                  <template v-if="activeAlgorithm">
                    <div class="border-t border-white/10 my-1"></div>
                    <button
                      @click="handleAlgoClear"
                      class="profile-menu-item flex items-center gap-3 px-4 py-2.5 text-white/50 w-full text-left text-sm"
                    >
                      Clear filter
                    </button>
                  </template>
                </div>
              </div>
            </div>
          </nav>
        </div>

        <!-- Right Side Actions -->
        <div class="flex items-center gap-4">
          <!-- Nostr Login (persona switcher or extension) -->
          <div v-if="!nostrLoggedIn" class="hidden md:flex items-center gap-2">
            <!-- Persona Switcher (dev) -->
            <div class="relative persona-dropdown">
              <button @click="togglePersonaMenu" class="nav-button px-3 py-2 text-xs">
                Persona
                <svg class="w-3 h-3 ml-1 inline" 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>
              <div v-if="personaMenuOpen" class="profile-menu absolute right-0 mt-2 w-52">
                <div class="floating-glass-header py-2 rounded-xl">
                  <div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Test Personas</div>
                  <button
                    v-for="persona in testPersonas"
                    :key="persona.pubkey"
                    @click="handlePersonaLogin(persona)"
                    class="profile-menu-item flex items-center gap-3 px-4 py-2 w-full text-left"
                  >
                    <img :src="`https://robohash.org/${persona.pubkey}.png`" class="w-6 h-6 rounded-full" :alt="persona.name" />
                    <span>{{ persona.name }}</span>
                  </button>
                  <div class="border-t border-white/10 my-1"></div>
                  <div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Tastemakers</div>
                  <button
                    v-for="persona in tastemakerPersonas"
                    :key="persona.pubkey"
                    @click="handlePersonaLogin(persona)"
                    class="profile-menu-item flex items-center gap-3 px-4 py-2 w-full text-left"
                  >
                    <img :src="`https://robohash.org/${persona.pubkey}.png`" class="w-6 h-6 rounded-full" :alt="persona.name" />
                    <span>{{ persona.name }}</span>
                  </button>
                </div>
              </div>
            </div>

            <!-- Extension Login -->
            <button @click="handleExtensionLogin" class="nav-button px-3 py-2 text-xs">
              Extension
            </button>
          </div>

          <!-- Sign In (app auth, if not Nostr logged in) -->
          <button 
            v-if="!isAuthenticated && showAuth && !nostrLoggedIn"
            @click="$emit('openAuth')"
            class="hidden md:block hero-play-button px-4 py-2 text-sm"
          >
            Sign In
          </button>

          <!-- Search -->
          <button v-if="showSearch" class="hidden md:block p-2 hover:bg-white/10 rounded-lg transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>

          <!-- Active Nostr Account -->
          <div v-if="nostrLoggedIn" class="hidden md:block relative profile-dropdown">
            <button 
              @click="toggleDropdown"
              class="profile-button flex items-center gap-2"
            >
              <img
                v-if="nostrActivePubkey"
                :src="`https://robohash.org/${nostrActivePubkey}.png`"
                class="w-8 h-8 rounded-full"
                alt="Avatar"
              />
              <span class="text-white text-sm font-medium">{{ nostrActiveName }}</span>
              <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': dropdownOpen }" 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>

            <div v-if="dropdownOpen" class="profile-menu absolute right-0 mt-2 w-48">
              <div class="floating-glass-header py-2 rounded-xl">
                <button @click="navigateTo('/profile')" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 w-full text-left">
                  <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                  <span>Profile</span>
                </button>
                <button @click="navigateTo('/library')" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 w-full text-left">
                  <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                  <span>My Library</span>
                </button>
                <div class="border-t border-white/10 my-1"></div>
                <button @click="handleLogout" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 text-red-400 w-full text-left">
                  <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                  </svg>
                  <span>Sign Out</span>
                </button>
              </div>
            </div>
          </div>

          <!-- Fallback: App-auth profile (when Nostr not logged in but app auth is) -->
          <div v-else-if="isAuthenticated" class="hidden md:block relative profile-dropdown">
            <button @click="toggleDropdown" class="profile-button flex items-center gap-2">
              <div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-500 to-pink-500 flex items-center justify-center text-xs font-bold text-white">
                {{ userInitials }}
              </div>
              <span class="text-white text-sm font-medium">{{ userName }}</span>
            </button>
          </div>

          <!-- Mobile -->
          <div class="md:hidden flex items-center gap-2 mr-2">
            <img
              v-if="nostrLoggedIn && nostrActivePubkey"
              :src="`https://robohash.org/${nostrActivePubkey}.png`"
              class="w-7 h-7 rounded-full"
              alt="Avatar"
            />
            <span v-if="nostrLoggedIn" class="text-white text-sm font-medium">{{ nostrActiveName }}</span>
            <template v-else-if="isAuthenticated">
              <div class="w-7 h-7 rounded-full bg-gradient-to-br from-orange-500 to-pink-500 flex items-center justify-center text-xs font-bold text-white">
                {{ userInitials }}
              </div>
              <span class="text-white text-sm font-medium">{{ userName }}</span>
            </template>
            <button v-else-if="showAuth" @click="$emit('openAuth')" class="text-white text-sm font-medium">Sign In</button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuth } from '../composables/useAuth'
import { useAccounts } from '../composables/useAccounts'
import { useContentDiscovery } from '../composables/useContentDiscovery'

type Persona = { name: string; nsec: string; pubkey: string }

interface Props {
  showNav?: boolean
  showSearch?: boolean
  showAuth?: boolean
}

interface Emits {
  (e: 'openAuth'): void
}

withDefaults(defineProps<Props>(), {
  showNav: true,
  showSearch: true,
  showAuth: true,
})

defineEmits<Emits>()

const router = useRouter()
const route = useRoute()
const { user, isAuthenticated, logout: appLogout } = useAuth()
const {
  isLoggedIn: nostrLoggedIn,
  activePubkey: nostrActivePubkey,
  activeName: nostrActiveName,
  testPersonas,
  tastemakerPersonas,
  loginWithExtension,
  loginWithPersona,
  logout: nostrLogout,
} = useAccounts()

const {
  activeAlgorithm,
  activeAlgorithmLabel,
  algorithms,
  setAlgorithm: _setAlgorithm,
} = useContentDiscovery()

const dropdownOpen = ref(false)
const personaMenuOpen = ref(false)
const algosMenuOpen = ref(false)

function toggleAlgosMenu() {
  algosMenuOpen.value = !algosMenuOpen.value
  dropdownOpen.value = false
  personaMenuOpen.value = false
}

/** Select an algorithm from the dropdown, navigate to Films if needed */
function handleAlgoSelect(id: string) {
  _setAlgorithm(id as any)
  algosMenuOpen.value = false
  if (route.path !== '/') {
    router.push('/')
  }
}

/** Clear the active filter from the dropdown */
function handleAlgoClear() {
  if (activeAlgorithm.value) {
    _setAlgorithm(activeAlgorithm.value as any) // toggle off
  }
  algosMenuOpen.value = false
}

const userInitials = computed(() => {
  if (nostrActiveName.value) return nostrActiveName.value[0].toUpperCase()
  if (!user.value?.legalName) return 'U'
  const names = user.value.legalName.split(' ')
  return names.length > 1
    ? `${names[0][0]}${names[names.length - 1][0]}`
    : names[0][0]
})

const userName = computed(() => {
  if (nostrActiveName.value) return nostrActiveName.value
  return user.value?.legalName?.split(' ')[0] || 'Guest'
})

function isRoute(path: string): boolean {
  return route.path === path
}

/** Navigate to Films and clear any active filter */
function handleFilmsClick() {
  if (activeAlgorithm.value) {
    _setAlgorithm(activeAlgorithm.value as any) // toggle off
  }
  if (route.path !== '/') {
    router.push('/')
  }
}

/** Clear active filter (used when navigating to My List) */
function clearFilter() {
  if (activeAlgorithm.value) {
    _setAlgorithm(activeAlgorithm.value as any) // toggle off
  }
}

function toggleDropdown() {
  dropdownOpen.value = !dropdownOpen.value
  personaMenuOpen.value = false
  algosMenuOpen.value = false
}

function togglePersonaMenu() {
  personaMenuOpen.value = !personaMenuOpen.value
  dropdownOpen.value = false
  algosMenuOpen.value = false
}

function navigateTo(path: string) {
  dropdownOpen.value = false
  router.push(path)
}

async function handlePersonaLogin(persona: Persona) {
  personaMenuOpen.value = false
  await loginWithPersona(persona)
}

async function handleExtensionLogin() {
  await loginWithExtension()
}

async function handleLogout() {
  nostrLogout()
  await appLogout()
  dropdownOpen.value = false
  router.push('/')
}

const handleClickOutside = (event: MouseEvent) => {
  const dropdown = document.querySelector('.profile-dropdown')
  const personaDropdown = document.querySelector('.persona-dropdown')
  const algosDropdown = document.querySelector('.algos-dropdown')
  if (dropdown && !dropdown.contains(event.target as Node)) {
    dropdownOpen.value = false
  }
  if (personaDropdown && !personaDropdown.contains(event.target as Node)) {
    personaMenuOpen.value = false
  }
  if (algosDropdown && !algosDropdown.contains(event.target as Node)) {
    algosMenuOpen.value = false
  }
}

onMounted(() => {
  window.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  window.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
/* Glass Header */
.floating-glass-header {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Navigation Button Styles */
.nav-button {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.nav-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.nav-button:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.35);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.nav-button:hover::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
}

.nav-button-active {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 1);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.nav-button-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.nav-button-active:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.40);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Sign In Button (reuses hero-play-button pattern) */
.hero-play-button {
  position: relative;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  color: rgba(0, 0, 0, 0.9);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.hero-play-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.4), rgba(50, 50, 50, 0.2));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-play-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Profile Dropdown Styles */
.profile-button {
  padding: 6px 12px 6px 6px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.profile-menu {
  z-index: 100;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-menu-item {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

.profile-menu-item svg {
  opacity: 0.8;
}

.profile-menu-item:hover svg {
  opacity: 1;
}
</style>
