<script setup>
import { useRouter } from 'vue-router';
import Button from 'primevue/button';
import Avatar from 'primevue/avatar';
import { authState, logout } from '../store/auth.js';

const router = useRouter();

const navItems = [
  { label: 'Dashboard', icon: 'pi pi-home', to: '/' },
  { label: 'Product Groups', icon: 'pi pi-sitemap', to: '/product-groups', accent: 'var(--module-product-groups)' },
  { label: 'Pricing & Costing', icon: 'pi pi-tags', to: '/pricing', accent: 'var(--module-pricing)' },
  { label: 'Import Management', icon: 'pi pi-file-import', to: '/imports', accent: 'var(--module-imports)' },
  { label: 'Stock', icon: 'pi pi-box', to: '/stock', accent: 'var(--module-stock)' },
];

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

<template>
  <div class="shell">
    <aside class="sidebar">
      <div class="brand">
        <span class="brand-mark">M</span>
        <span class="brand-name">Medicus</span>
      </div>
      <nav class="nav">
        <router-link
          v-for="item in navItems"
          :key="item.to"
          :to="item.to"
          class="nav-item"
          :style="item.accent ? { '--accent-color': item.accent } : {}"
          active-class="active"
        >
          <i :class="item.icon"></i>
          <span>{{ item.label }}</span>
        </router-link>
      </nav>
      <div class="sidebar-footer">
        <span class="poc-badge">POC BUILD</span>
      </div>
    </aside>

    <div class="main-column">
      <header class="topbar">
        <div></div>
        <div class="user-block" v-if="authState.user">
          <Avatar :label="authState.user.name?.charAt(0) || 'U'" shape="circle" />
          <div class="user-meta">
            <strong>{{ authState.user.name }}</strong>
            <span>{{ authState.user.role }}</span>
          </div>
          <Button icon="pi pi-sign-out" text rounded aria-label="Log out" @click="handleLogout" />
        </div>
      </header>
      <main class="content">
        <slot />
      </main>
    </div>
  </div>
</template>

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

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-text);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem 1.5rem;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: #1e2430;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}

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

.nav-item {
  --accent-color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: var(--accent-color);
}

.sidebar-footer {
  padding: 0.5rem;
}

.poc-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}

.main-column {
  flex: 1;
  min-width: 0;
}

.topbar {
  height: 64px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.user-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 0.85rem;
}

.user-meta span {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: capitalize;
}
</style>
