<script setup lang="ts">
import {
  Banknote,
  BadgeDollarSign,
  Building2,
  Calculator,
  CalendarClock,
  ClipboardList,
  FileChartColumn,
  LayoutDashboard,
  LogOut,
  Network,
  PanelLeftClose,
  PanelLeftOpen,
  ScrollText,
  Settings2,
  HandCoins,
  UserCog,
  UsersRound,
} from "@lucide/vue";
import { computed } from "vue";
import { useRouter } from "vue-router";

import { buildSidebarSections } from "../navigation/sidebarMenu";
import { useAuthStore } from "../stores/auth";

defineProps<{
  collapsed: boolean;
  open: boolean;
}>();

const emit = defineEmits<{
  close: [];
  "toggle-collapse": [];
}>();

const auth = useAuthStore();
const router = useRouter();

const backendIconMap = {
  attendance_realtime: CalendarClock,
  monthly_payroll: Calculator,
  payroll: Banknote,
  jobs: ClipboardList,
  employees: UserCog,
  organization: Network,
  salary_profiles: BadgeDollarSign,
  commissions: HandCoins,
  reports: FileChartColumn,
  configs: Settings2,
  users: UsersRound,
  operation_logs: ScrollText,
};

const menuSections = computed(() =>
  buildSidebarSections(auth.menus).map((section) => ({
    ...section,
    items: section.items.map((menu) => ({
      ...menu,
      icon: menu.code === "dashboard" ? LayoutDashboard : backendIconMap[menu.code as keyof typeof backendIconMap] || ClipboardList,
    })),
  })),
);

function logout(): void {
  auth.logout();
  emit("close");
  router.push("/login");
}
</script>

<template>
  <aside class="sidebar" :class="{ 'is-open': open }">
    <div class="brand">
      <div class="brand-main">
        <div class="brand-mark">
          <Building2 :size="22" aria-hidden="true" />
        </div>
        <div class="brand-copy">
          <p class="brand-title">企业薪酬管理</p>
          <p class="brand-subtitle">管理门户</p>
        </div>
      </div>
    </div>

    <nav class="sidebar-nav" aria-label="主导航">
      <section v-for="section in menuSections" :key="section.code" class="nav-section">
        <p class="nav-section-title">{{ section.title }}</p>
        <RouterLink
          v-for="item in section.items"
          :key="item.code"
          :to="item.path"
          class="nav-link"
          active-class="is-active"
          :title="`${section.title} / ${item.name}`"
          @click="emit('close')"
        >
          <component :is="item.icon" :size="20" aria-hidden="true" />
          <span>{{ item.name }}</span>
        </RouterLink>
      </section>
    </nav>

    <div class="sidebar-footer">
      <button
        class="nav-link nav-button"
        type="button"
        :title="collapsed ? '展开侧边栏' : '收起侧边栏'"
        @click="emit('toggle-collapse')"
      >
        <PanelLeftOpen v-if="collapsed" :size="21" aria-hidden="true" />
        <PanelLeftClose v-else :size="21" aria-hidden="true" />
        <span>{{ collapsed ? "展开侧栏" : "收起侧栏" }}</span>
      </button>
      <button class="nav-link nav-button danger" type="button" title="退出登录" @click="logout">
        <LogOut :size="21" aria-hidden="true" />
        <span>退出登录</span>
      </button>
    </div>
  </aside>
</template>
