<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { RouterLink, useRoute, type RouteLocationRaw } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

interface ContextualNavAction {
  label: string
  to: RouteLocationRaw
}

const authStore = useAuthStore()
const route = useRoute()

const signatureImage = {
  src: '/assets/signature.png',
  alt: "R' Yehoshua Gerzi",
}

onMounted(() => {
  void authStore.fetchUser()
})

async function handleLogout(): Promise<void> {
  await authStore.logout()
}

const navItems = [
  { label: 'Torah Media', href: '/media', icon: '▶' },
  { label: 'About', href: '/about', icon: 'ⓘ' },
  { label: 'Contact', href: '/contact', icon: '➤' },
  { label: 'Donate', href: '/donate', icon: '♡' },
]

const routeElementId = computed(() => {
  const currentRouteElementId = route.params.id

  if (Array.isArray(currentRouteElementId)) {
    return currentRouteElementId.join('/')
  }

  if (typeof currentRouteElementId === 'string') {
    return currentRouteElementId
  }

  return null
})

const contextualNavAction = computed<ContextualNavAction | null>(() => {
  if (!authStore.isAuthenticated || routeElementId.value === null) {
    return null
  }

  if (route.name === 'element') {
    return {
      label: 'Edit Element',
      to: { name: 'admin-element', params: { id: routeElementId.value } },
    }
  }

  if (route.name === 'admin-element') {
    return {
      label: 'View Element',
      to: { name: 'element', params: { id: routeElementId.value } },
    }
  }

  return null
})
</script>

<template>
  <header class="site-header">
    <RouterLink class="site-header__brand" to="/">
      <img v-bind="signatureImage" class="site-header__signature" />
    </RouterLink>
    <nav class="site-header__nav">
      <RouterLink
        v-for="item in navItems"
        :key="item.href"
        :to="item.href"
        class="site-header__nav-link"
      >
        <span class="site-header__nav-icon" aria-hidden="true">
          {{ item.icon }}
        </span>
        <span>{{ item.label }}</span>
      </RouterLink>
      <RouterLink
        v-if="contextualNavAction !== null"
        :to="contextualNavAction.to"
        class="site-header__nav-link"
        data-cy="navbar-element-mode"
      >
        {{ contextualNavAction.label }}
      </RouterLink>
      <button
        v-if="authStore.isAuthenticated"
        data-cy="navbar-logout"
        type="button"
        class="site-header__nav-link"
        @click="handleLogout"
      >
        Logout
      </button>
    </nav>
  </header>
</template>

<style scoped>
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(244, 239, 225, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
}

.site-header__signature {
  height: 36px;
  width: auto;
}

.site-header__nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background 0.15s ease;
}

.site-header__nav-link:hover {
  background: var(--color-cream);
}

.site-header__nav-icon {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--color-slate);
}

@media (max-width: 768px) {
  .site-header {
    padding: 0.75rem 1rem;
  }

  .site-header__nav-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }
}
</style>
