<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import type { Theme } from '@/composables/useTheme'
import { scrollToSection } from '@/composables/scrollToSection'
import { portfolioData } from '@/data/portfolio'
import laurelMark from '@/assets/brand/mark.svg'

const props = defineProps<{ theme: Theme }>()
defineEmits<{ toggle: [] }>()

const night = computed(() => props.theme === 'hades')
const visible = ref(false)

function onScroll() {
  visible.value = window.scrollY > window.innerHeight * 0.6
}

onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))

const links: Array<[string, string]> = [
  ['About', 'about'],
  ['Work', 'work'],
  ['Contact', 'contact'],
]

const surname = portfolioData.name.split(' ').pop()?.toUpperCase()
</script>

<template>
  <nav class="port-nav" :class="{ 'port-nav--visible': visible }">
    <div class="port-nav-brand">
      <img :src="laurelMark" alt="" width="28" height="28" />
      <span class="port-nav-name">{{ surname }}</span>
    </div>
    <div class="port-nav-right">
      <span class="port-nav-links">
        <a
          v-for="[label, id] in links"
          :key="id"
          :href="`#${id}`"
          class="port-nav-link"
          @click.prevent="scrollToSection(id)"
          >{{ label }}</a
        >
      </span>
      <button class="port-nav-toggle" @click="$emit('toggle')">
        <i :class="`pi pi-${night ? 'moon' : 'sun'}`" style="font-size: 12px" />
        <span class="port-toggle-text">{{ night ? 'Hades' : 'Apollo' }}</span>
      </button>
    </div>
  </nav>
</template>

<style scoped>
.port-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: color-mix(in srgb, var(--surface-1) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    border-color 0.3s ease;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 16px;
}

.port-nav--visible {
  opacity: 1;
  pointer-events: auto;
  border-bottom-color: var(--border-lo);
}

.port-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.port-nav-name {
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  color: var(--text-high);
  font-weight: 600;
  font-size: 0.86rem;
}

.port-nav-right {
  margin-left: auto;
  display: flex;
  gap: 22px;
  align-items: center;
}

.port-nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
}

.port-nav-link {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.port-nav-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 0.78rem;
}
</style>
