<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAdmin } from '@/composables/useAdmin'
import ThemeToggle from '@/components/ui/ThemeToggle.vue'

const router = useRouter()
const { logout } = useAdmin()

async function handleLogout() {
  await logout()
  router.push({ name: 'admin-login' })
}
</script>

<template>
  <div class="admin-shell">
    <aside class="admin-sidebar glass-strong">
      <div class="sidebar-header">
        <router-link to="/" class="brand">Antonym</router-link>
        <span class="admin-badge">Admin</span>
      </div>

      <nav class="sidebar-nav">
        <router-link :to="{ name: 'admin-orders' }" class="nav-item">Orders</router-link>
        <router-link :to="{ name: 'admin-products' }" class="nav-item">Products</router-link>
        <router-link :to="{ name: 'admin-messages' }" class="nav-item">Messages</router-link>
      </nav>

      <div class="sidebar-footer">
        <ThemeToggle />
        <button class="logout-btn" @click="handleLogout">Logout</button>
      </div>
    </aside>

    <main class="admin-main">
      <router-view />
    </main>
  </div>
</template>

<style scoped>
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: 220px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }

.brand { font-weight: 700; font-size: 1.125rem; color: var(--text-primary); text-decoration: none; }

.admin-badge {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #000;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }

.nav-item {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.nav-item:hover { background: var(--glass-bg); color: var(--text-primary); }
.nav-item.router-link-active { background: var(--glass-bg-strong); color: var(--text-primary); }

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.logout-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.logout-btn:hover { color: var(--error); }

.admin-main { flex: 1; padding: 2rem; max-width: 1000px; }
</style>
