<script setup lang="ts">
import { editais } from '~/data/mock/editais'
import { prazos } from '~/data/mock/prazos'
import { documentos } from '~/data/mock/documentos'

const { user, logout } = useAuth()
const route = useRoute()

const contagemPorStatus = computed(() => {
  const counts: Record<string, number> = {}
  for (const e of editais) {
    counts[e.status] = (counts[e.status] ?? 0) + 1
  }
  return counts
})

const alertasPrazos = computed(() => prazos.filter(p => p.urgencia === 'critico' || p.urgencia === 'urgente').length)
const docsVencendo = computed(() => documentos.filter(d => d.status === 'vencendo' || d.status === 'vencida').length)

const navItems = computed(() => [
  {
    label: '',
    items: [
      { label: 'Dashboard', icon: 'i-heroicons-home', to: '/' },
    ],
  },
  {
    label: 'Oportunidades',
    items: [
      { label: 'Todos os Editais', icon: 'i-heroicons-clipboard-document-list', to: '/oportunidades', badge: editais.length, badgeVariant: 'default' },
      { label: 'Em Análise', icon: 'i-heroicons-magnifying-glass', to: '/oportunidades/em-analise', badge: contagemPorStatus.value.em_analise ?? 0, badgeVariant: 'default' },
      { label: 'Elaborando Proposta', icon: 'i-heroicons-pencil-square', to: '/oportunidades/elaborando-proposta', badge: contagemPorStatus.value.elaborando_proposta ?? 0, badgeVariant: 'warning' },
      { label: 'Participando', icon: 'i-heroicons-play', to: '/oportunidades/participando', badge: contagemPorStatus.value.participando ?? 0, badgeVariant: 'default' },
      { label: 'Recurso', icon: 'i-heroicons-scale', to: '/oportunidades/recurso', badge: contagemPorStatus.value.recurso ?? 0, badgeVariant: 'warning' },
      { label: 'Vencidas', icon: 'i-heroicons-trophy', to: '/oportunidades/vencidas', badge: contagemPorStatus.value.vencida ?? 0, badgeVariant: 'success' },
      { label: 'Perdidas', icon: 'i-heroicons-x-circle', to: '/oportunidades/perdidas', badge: contagemPorStatus.value.perdida ?? 0, badgeVariant: 'neutral' },
    ],
  },
  {
    label: 'Pipeline',
    items: [
      { label: 'Kanban de Processos', icon: 'i-heroicons-view-columns', to: '/pipeline' },
    ],
  },
  {
    label: 'Gestão',
    items: [
      { label: 'Documentos', icon: 'i-heroicons-folder', to: '/gestao/documentos', badge: docsVencendo.value || undefined, badgeVariant: 'warning' },
      { label: 'Prazos', icon: 'i-heroicons-clock', to: '/gestao/prazos', badge: alertasPrazos.value || undefined, badgeVariant: 'warning' },
      { label: 'Órgãos Públicos', icon: 'i-heroicons-building-library', to: '/gestao/orgaos' },
      { label: 'Concorrentes', icon: 'i-heroicons-building-office-2', to: '/gestao/concorrentes' },
      { label: 'Contratos', icon: 'i-heroicons-document-text', to: '/gestao/contratos' },
    ],
  },
  {
    label: 'Inteligência',
    items: [
      { label: 'Inteligência de Mercado', icon: 'i-heroicons-chart-bar', to: '/inteligencia' },
    ],
  },
  {
    label: 'Sistema',
    items: [
      { label: 'Usuários', icon: 'i-heroicons-users', to: '/sistema/usuarios' },
      { label: 'Configurações', icon: 'i-heroicons-cog-6-tooth', to: '/sistema/configuracoes' },
    ],
  },
])

function isActive(to: string) {
  return route.path === to
}
</script>

<template>
  <aside class="sidebar">
    <div class="sidebar-logo">
      <div class="logo-icon">
        <UIcon name="i-heroicons-home" class="text-white w-4 h-4" />
      </div>
      <span class="logo-name">Licitatche</span>
    </div>

    <nav class="sidebar-nav">
      <template v-for="group in navItems" :key="group.label">
        <p v-if="group.label" class="nav-label">{{ group.label }}</p>
        <NuxtLink
          v-for="item in group.items"
          :key="item.to"
          :to="item.to"
          class="nav-item"
          :class="{ active: isActive(item.to) }"
        >
          <UIcon :name="item.icon" class="nav-icon" />
          <span class="nav-text">{{ item.label }}</span>
          <UBadge
            v-if="item.badge"
            :label="String(item.badge)"
            variant="soft"
            :color="item.badgeVariant === 'warning' ? 'warning' : item.badgeVariant === 'success' ? 'success' : item.badgeVariant === 'neutral' ? 'neutral' : 'primary'"
            size="xs"
          />
        </NuxtLink>
        <div v-if="group.label" class="nav-divider" />
      </template>
    </nav>

    <div class="sidebar-footer">
      <div class="user-row">
        <UAvatar :alt="user?.nome ?? 'A'" size="xs" />
        <div class="user-info">
          <p class="user-name">{{ user?.nome }}</p>
          <p class="user-role">{{ user?.papel }}</p>
        </div>
        <UButton icon="i-heroicons-arrow-right-on-rectangle" variant="ghost" color="neutral" size="xs" @click="logout" />
      </div>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 232px;
  min-height: 100vh;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.sidebar-logo {
  padding: 18px 14px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #1e293b;
  position: sticky;
  top: 0;
  background: #0f172a;
  z-index: 1;
}
.logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.logo-name { font-size: 14px; font-weight: 700; color: #f1f5f9; }
.sidebar-nav { padding: 8px; flex: 1; }
.nav-label {
  font-size: 9.5px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 8px 3px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px;
  color: #94a3b8; text-decoration: none;
  font-size: 12.5px; margin-bottom: 1px;
  transition: background 0.15s;
}
.nav-item:hover { background: #1e293b; color: #e2e8f0; }
.nav-item.active { background: #1e3a5f; color: #93c5fd; }
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
.nav-text { flex: 1; }
.nav-divider { height: 1px; background: #1e293b; margin: 4px 0; }
.sidebar-footer {
  padding: 10px 8px;
  border-top: 1px solid #1e293b;
  position: sticky; bottom: 0; background: #0f172a;
}
.user-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; }
.user-row:hover { background: #1e293b; }
.user-info { flex: 1; }
.user-name { font-size: 12px; font-weight: 600; color: #e2e8f0; }
.user-role { font-size: 10.5px; color: #64748b; }
</style>
