<template>
  <aside class="sidebar" :class="{ collapsed }">
    <div class="sidebar-header">
      <div class="brand-mark">PS</div>
      <h4 class="logo-text">POSHManager</h4>
      <button class="sidebar-collapse-button" type="button" :title="collapsed ? 'Expand navigation' : 'Collapse navigation'" @click="$emit('toggle-collapse')">
        <component :is="collapsed ? PanelLeftOpen : PanelLeftClose" :size="17" />
      </button>
    </div>
    <nav class="metismenu">
      <div class="menu-label">Operations</div>
      <button v-for="item in primaryNav" :key="item.id" :class="{ active: view === item.id }" :title="collapsed ? item.label : undefined" @click="$emit('update:view', item.id)">
        <span class="parent-icon"><component :is="item.icon" :size="18" /></span>
        <span class="menu-title">{{ item.label }}</span>
      </button>
      <div class="menu-label">Administration</div>
      <button v-for="item in adminNav" :key="item.id" :class="{ active: view === item.id }" :title="collapsed ? item.label : undefined" @click="$emit('update:view', item.id)">
        <span class="parent-icon"><component :is="item.icon" :size="18" /></span>
        <span class="menu-title">{{ item.label }}</span>
      </button>
    </nav>
    <div class="sidebar-user">
      <span class="user-orb">{{ initials }}</span>
      <div>
        <strong>{{ user?.displayName || 'Operator' }}</strong>
        <small>{{ user?.role || 'session' }}</small>
      </div>
    </div>
  </aside>
</template>

<script setup>
import { computed } from 'vue';
import { PanelLeftClose, PanelLeftOpen } from '@lucide/vue';

const props = defineProps({
  nav: { type: Array, required: true },
  user: { type: Object, default: null },
  view: { type: String, required: true },
  collapsed: Boolean
});

defineEmits(['update:view', 'toggle-collapse']);

const accountNav = ['profile', 'users', 'admin'];
const primaryNav = computed(() => props.nav.filter((item) => !accountNav.includes(item.id)));
const adminNav = computed(() => props.nav.filter((item) => accountNav.includes(item.id)));
const initials = computed(() => (props.user?.displayName || 'PS').split(/\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase());
</script>
