<template>
  <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <!-- Logo and main nav -->
        <div class="flex">
          <router-link to="/" class="flex items-center">
            <span class="text-xl font-bold text-primary-600">Notytex</span>
          </router-link>
          
          <nav class="hidden md:ml-8 md:flex md:space-x-4">
            <router-link 
              v-for="item in navigation" 
              :key="item.name"
              :to="item.to"
              class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors"
              :class="isActive(item.to) 
                ? 'text-primary-600 bg-primary-50' 
                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'"
            >
              <component :is="item.icon" class="w-4 h-4 mr-2" />
              {{ item.name }}
            </router-link>
          </nav>
        </div>

        <!-- Right side -->
        <div class="flex items-center space-x-4">
          <router-link to="/config" class="text-gray-500 hover:text-gray-700">
            <CogIcon class="w-5 h-5" />
          </router-link>
          
          <!-- Mobile menu button -->
          <button 
            @click="mobileMenuOpen = !mobileMenuOpen"
            class="md:hidden p-2 rounded-md text-gray-500 hover:text-gray-700"
          >
            <MenuIcon v-if="!mobileMenuOpen" class="w-6 h-6" />
            <XIcon v-else class="w-6 h-6" />
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile menu -->
    <div v-if="mobileMenuOpen" class="md:hidden border-t border-gray-200">
      <nav class="px-4 py-3 space-y-1">
        <router-link 
          v-for="item in navigation" 
          :key="item.name"
          :to="item.to"
          class="flex items-center px-3 py-2 text-sm font-medium rounded-md"
          :class="isActive(item.to) 
            ? 'text-primary-600 bg-primary-50' 
            : 'text-gray-600 hover:bg-gray-50'"
          @click="mobileMenuOpen = false"
        >
          <component :is="item.icon" class="w-4 h-4 mr-2" />
          {{ item.name }}
        </router-link>
      </nav>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { HomeIcon, UsersIcon, ClipboardIcon, AcademicCapIcon, CogIcon, MenuIcon, XIcon } from '@/components/icons'

const route = useRoute()
const mobileMenuOpen = ref(false)

const navigation = [
  { name: 'Accueil', to: '/', icon: HomeIcon },
  { name: 'Classes', to: '/classes', icon: UsersIcon },
  { name: 'Évaluations', to: '/assessments', icon: ClipboardIcon },
  { name: 'Élèves', to: '/students', icon: AcademicCapIcon }
]

function isActive(path) {
  if (path === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(path)
}
</script>
