<template>
  <nav class="flex w-[var(--ide-activitybar-w)] shrink-0 flex-col items-center gap-1 border-r border-border bg-surface-1 py-2">
    <button
      v-for="item in items"
      :key="item.view"
      type="button"
      class="relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors"
      :class="isActive(item.view) ? 'bg-surface-3 text-fg' : 'text-fg-subtle hover:bg-surface-2 hover:text-fg'"
      :title="item.label"
      :aria-label="item.label"
      @click="ide.toggleActivity(item.view)"
    >
      <component :is="item.icon" :size="20" :stroke-width="1.75" />
      <span
        v-if="item.badge"
        class="absolute top-1 right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-amber-500 px-1 text-[9px] font-semibold text-amber-950"
      >
        {{ item.badge }}
      </span>
    </button>

    <div class="mt-auto flex flex-col items-center gap-1">
      <RouterLink
        v-for="l in links"
        :key="l.name"
        :to="{ name: l.name }"
        :title="l.label"
        :aria-label="l.label"
        class="flex h-10 w-10 items-center justify-center rounded-lg text-fg-subtle transition-colors hover:bg-surface-2 hover:text-fg"
      >
        <component :is="l.icon" :size="20" :stroke-width="1.75" />
      </RouterLink>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Boxes, FolderTree, GitCompare, LifeBuoy, Settings, SquareTerminal } from '@lucide/vue';
import { useIdeStore, type ActivityView } from '../../stores/ide';
import { useNav } from '../../composables/useNav';

const { t } = useI18n();
const ide = useIdeStore();
const { waitingCount } = useNav();

const isActive = (v: ActivityView): boolean => ide.activeActivity === v && ide.leftVisible;

const items = computed(() => [
  { view: 'explorer' as ActivityView, icon: FolderTree, label: t('ide.activity.explorer'), badge: 0 },
  { view: 'git' as ActivityView, icon: GitCompare, label: t('ide.activity.git'), badge: 0 },
  { view: 'sessions' as ActivityView, icon: SquareTerminal, label: t('ide.activity.sessions'), badge: waitingCount.value },
  { view: 'groups' as ActivityView, icon: Boxes, label: t('ide.activity.groups'), badge: 0 },
]);

const links = computed(() => [
  { name: 'settings', icon: Settings, label: t('nav.settings') },
  { name: 'help', icon: LifeBuoy, label: t('nav.help') },
]);
</script>
