<template>
  <aside class="sidebar" :class="{ mobile: isMobile }">
    <!-- Логотип -->
    <div class="sidebar-logo">
      <i data-lucide="layout-grid"></i>
    </div>
    
    <!-- Меню навигации -->
    <nav class="sidebar-nav">
      <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }" title="Доска задач">
        <i data-lucide="kanban"></i>
      </router-link>
      <router-link to="/archive" class="nav-item" :class="{ active: $route.path === '/archive' }" title="Архив">
        <i data-lucide="archive"></i>
      </router-link>
      <router-link to="/team" class="nav-item" :class="{ active: $route.path === '/team' }" title="Команда">
        <i data-lucide="users"></i>
      </router-link>
      <router-link 
        v-if="pendingInvitesCount > 0" 
        to="/invites" 
        class="nav-item invites" 
        :class="{ active: $route.path === '/invites' }" 
        title="Приглашения"
      >
        <i data-lucide="mail"></i>
        <span class="invites-badge">{{ pendingInvitesCount }}</span>
      </router-link>
    </nav>
  </aside>
</template>

<script setup>
import { computed, onMounted, onUpdated } from 'vue'
import { useMobile } from '../composables/useMobile'
import { useProjectsStore } from '../stores/projects'

const { isMobile } = useMobile()
const store = useProjectsStore()

const pendingInvitesCount = computed(() => store.pendingInvitesCount)

const refreshIcons = () => {
  if (window.lucide) {
    window.lucide.createIcons()
  }
}

onMounted(refreshIcons)
onUpdated(refreshIcons)
</script>

<style scoped>
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  border-right: 1px solid var(--border);
  z-index: 100;
}

.sidebar-logo {
  width: 44px;
  height: 44px;
  background: var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.sidebar-logo i {
  width: 24px;
  height: 24px;
  color: #000;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.nav-item.active {
  background: rgba(0, 212, 170, 0.15);
  color: var(--accent);
}

.nav-item i {
  width: 22px;
  height: 22px;
}

/* Приглашения */
.nav-item.invites {
  position: relative;
}

.invites-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  background: #ef4444;
  color: white;
  border-radius: 9px;
}

/* ========== MOBILE: Нижняя навигация ========== */
.sidebar.mobile {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(64px + var(--safe-area-bottom, 0px));
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0;
  padding-bottom: calc(8px + var(--safe-area-bottom, 0px));
  border-right: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--bg-body);
  backdrop-filter: blur(10px);
}

.sidebar.mobile .sidebar-logo {
  display: none;
}

.sidebar.mobile .sidebar-nav {
  flex-direction: row;
  gap: 32px;
}

.sidebar.mobile .nav-item {
  width: 48px;
  height: 48px;
}

.sidebar.mobile .nav-item i {
  width: 24px;
  height: 24px;
}
</style>
