<template>
  <aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full shrink-0">
    <div class="px-6 py-5 border-b border-gray-100">
      <h1 class="text-lg font-bold text-indigo-600 tracking-tight">DocuVault</h1>
      <p class="text-xs text-indigo-500 font-semibold mt-0.5">Admin</p>
    </div>

    <nav class="flex-1 px-3 py-4 overflow-y-auto">
      <router-link
        to="/admin"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path === '/admin' }"
      >
        <AppIcon name="home" class="w-4 h-4 mr-2 shrink-0" />
        Overview
      </router-link>

      <router-link
        to="/admin/users"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path.startsWith('/admin/users') }"
      >
        <AppIcon name="users" class="w-4 h-4 mr-2 shrink-0" />
        Users
      </router-link>

      <router-link
        to="/admin/quotas"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path.startsWith('/admin/quotas') }"
      >
        <AppIcon name="chartBar" class="w-4 h-4 mr-2 shrink-0" />
        Quotas
      </router-link>

      <router-link
        to="/admin/ai"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path.startsWith('/admin/ai') }"
      >
        <AppIcon name="lightBulb" class="w-4 h-4 mr-2 shrink-0" />
        AI Config
      </router-link>

      <router-link
        to="/admin/audit"
        class="nav-link"
        :class="{ 'nav-link-active': $route.path.startsWith('/admin/audit') }"
      >
        <AppIcon name="clipboardList" class="w-4 h-4 mr-2 shrink-0" />
        Audit Log
      </router-link>
    </nav>

    <div class="px-3 py-4 border-t border-gray-100">
      <div v-if="authStore.user" class="flex items-center gap-3 px-4 py-3 border-t border-gray-100 mt-2 -mx-3">
        <div class="bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-full w-8 h-8 flex items-center justify-center shrink-0">
          {{ authStore.user.email ? authStore.user.email[0].toUpperCase() : '?' }}
        </div>
        <span class="text-xs text-gray-600 truncate flex-1">{{ authStore.user.email }}</span>
        <button
          @click="signOut"
          aria-label="Sign out"
          class="text-gray-400 hover:text-gray-600 active:text-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded"
        >
          <AppIcon name="logout" class="w-4 h-4" />
        </button>
      </div>
    </div>
  </aside>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../stores/auth.js'
import AppIcon from '../ui/AppIcon.vue'

const authStore = useAuthStore()
const router = useRouter()

async function signOut() {
  await authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.nav-link {
  @apply flex items-center px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 transition-colors text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1;
}
.nav-link-active {
  @apply bg-indigo-50 text-indigo-700;
}
</style>
