<script setup lang="ts">
import { RouterLink, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'

const router = useRouter()
const auth = useAuthStore()

function handleLogout() {
  auth.logout()
  router.push('/')
}
</script>

<template>
  <header class="app-header">
    <div class="app-header__inner">
      <RouterLink to="/" class="app-header__logo">
        <svg
          class="app-header__logo-icon"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <rect
            x="2"
            y="5"
            width="20"
            height="14"
            rx="2"
            stroke="currentColor"
            stroke-width="2"
          />
          <path
            d="M2 7l10 6 10-6"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        Bilhej
      </RouterLink>
      <nav class="app-header__nav">
        <RouterLink to="/" class="app-header__link">Hem</RouterLink>
        <template v-if="!auth.isAuthenticated">
          <RouterLink to="/logga-in" class="app-header__link"
            >Logga in</RouterLink
          >
          <RouterLink to="/registrera" class="app-header__link"
            >Registrera</RouterLink
          >
        </template>
        <template v-else>
          <RouterLink
            v-if="auth.isAdmin"
            to="/admin"
            class="app-header__link app-header__link--admin"
            >Admin</RouterLink
          >
          <RouterLink to="/orders" class="app-header__link"
            >Mina beställningar</RouterLink
          >
          <span class="app-header__email">{{ auth.email }}</span>
          <button class="app-header__logout" @click="handleLogout">
            Logga ut
          </button>
        </template>
      </nav>
    </div>
  </header>
</template>

<style scoped>
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.app-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.875rem var(--space-lg);
}

.app-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}

.app-header__logo-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.app-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.app-header__link {
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.app-header__link:hover,
.app-header__link.router-link-active {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
}

.app-header__link--admin {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.app-header__link--admin:hover {
  background: #e9d5ff;
  color: var(--color-primary-dark);
}

.app-header__email {
  color: var(--color-muted);
  font-size: 0.8125rem;
  padding: 0 0.5rem;
}

.app-header__logout {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-full);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.app-header__logout:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
</style>
