<template>
  <header class="top-nav" aria-label="Main navigation">
    <RouterLink to="/" class="top-nav__brand">
      <span class="top-nav__mark"><img :src="markUrl" alt=""></span>
      <span class="top-nav__wordmark">WeVisto</span>
    </RouterLink>
    <nav class="top-nav__tabs">
      <RouterLink
        v-for="tab in tabs"
        :key="tab.name"
        :to="tab.to"
        :class="['top-nav__tab', { 'top-nav__tab--active': tab.isActive(route) }]"
        :aria-current="tab.isActive(route) ? 'page' : undefined"
      >
        <span class="top-nav__icon" aria-hidden="true" v-html="tab.icon" />
        <span class="top-nav__label">{{ tab.label }}</span>
        <span
          v-if="tab.name === 'library' && imagesStore.pendingCount > 0"
          class="top-nav__badge"
        >{{ imagesStore.pendingCount > 9 ? '9+' : imagesStore.pendingCount }}</span>
      </RouterLink>
    </nav>
  </header>
</template>

<script setup lang="ts">
import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
import { useImagesStore } from '@/stores/images'

const route       = useRoute()
const imagesStore = useImagesStore()
const markUrl     = '/build/icons/apple-touch-icon.png'

interface Tab {
  name: string
  label: string
  to: string
  icon: string
  isActive: (r: RouteLocationNormalizedLoaded) => boolean
}

const tabs: Tab[] = [
  {
    name: 'home', label: 'Home', to: '/',
    icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg>',
    isActive: r => r.path === '/',
  },
  {
    name: 'library', label: 'Library', to: '/library',
    icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
    isActive: r => r.path.startsWith('/library'),
  },
  {
    name: 'settings', label: 'Settings', to: '/settings',
    icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
    isActive: r => r.path.startsWith('/settings'),
  },
]
</script>

<style scoped lang="scss">
.top-nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-top: env(safe-area-inset-top);

  @media (min-width: 960px) {
    display: flex;
    align-items: center;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    height: 60px;
    gap: var(--space-6);
  }

  &__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
  }

  &__mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-2);
    flex-shrink: 0;
    display: block;
  }
  &__mark img { width: 100%; height: 100%; display: block; }

  &__wordmark {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text);
  }

  &__tabs {
    display: flex;
    gap: var(--space-1);
    flex: 1;
    justify-content: flex-start;
    margin-left: var(--space-4);
  }

  &__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 700;
    border-radius: var(--radius-md);
    position: relative;
    transition: color var(--duration-fast), background var(--duration-fast);

    &:hover {
      background: var(--color-surface-2);
      color: var(--color-text);
    }

    &--active {
      color: var(--color-primary);
      background: var(--color-surface-2);
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__label { line-height: 1; }

  &__badge {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}
</style>
