<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import PanelMenu from 'primevue/panelmenu';
import { MENU_ITEMS, LAYOUT } from '@/core/constants/app.constants';
import { useCurrentUser } from '@/core/composables/useCurrentUser';

const props = defineProps<{
  visible: boolean;
  collapsed: boolean;
  mobile: boolean;
}>();

const { currentUser } = useCurrentUser();
const router = useRouter();

// 역할 기반 메뉴 필터링
const filteredMenu = computed(() => {
  const userRoles = currentUser.value?.roles ?? [];
  return filterByRole(MENU_ITEMS, userRoles);
});

function filterByRole(items: typeof MENU_ITEMS, roles: string[]) {
  return items
    .filter((item) => item.roles.some((r) => roles.includes(r)))
    .map((item) => ({
      ...item,
      command: item.to ? () => router.push(item.to) : undefined,
      items: item.items
        ? item.items
            .filter((sub) => sub.roles.some((r) => roles.includes(r)))
            .map((sub) => ({
              ...sub,
              command: () => router.push(sub.to),
            }))
        : undefined,
    }));
}

const sidebarStyle = computed(() =>
  props.mobile ? {} : { width: props.collapsed ? `${LAYOUT.sidebarCollapsedWidth}px` : `${LAYOUT.sidebarWidth}px` },
);
</script>

<template>
  <aside
    class="app-sidebar"
    :class="{
      'app-sidebar--visible': visible,
      'app-sidebar--collapsed': collapsed,
      'app-sidebar--mobile': mobile,
    }"
    :style="sidebarStyle"
  >
    <!-- Logo -->
    <div class="app-sidebar__header">
      <img src="@/assets/images/logo.svg" alt="WTM" class="app-sidebar__logo" />
      <span v-if="!collapsed" class="app-sidebar__title">WTM</span>
    </div>

    <!-- Menu -->
    <nav class="app-sidebar__nav">
      <PanelMenu :model="filteredMenu" class="app-sidebar__menu" />
    </nav>
  </aside>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: $color-surface-card;
  border-right: 1px solid $color-border;
  z-index: $z-sidebar;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease, transform 0.2s ease;

  &--mobile {
    transform: translateX(-100%);
    width: $sidebar-width !important;

    &.app-sidebar--visible {
      transform: translateX(0);
    }
  }

  &--collapsed {
    .app-sidebar__title,
    .app-sidebar__nav :deep(.p-panelmenu-header-content span),
    .app-sidebar__nav :deep(.p-menuitem-text) {
      display: none;
    }
  }

  &__header {
    display: flex;
    align-items: center;
    gap: $space-sm;
    height: $topbar-height;
    padding: 0 $space-md;
    border-bottom: 1px solid $color-border;
  }

  &__logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  &__title {
    font-size: $font-size-lg;
    font-weight: 700;
    color: $color-primary;
    white-space: nowrap;
  }

  &__nav {
    padding: $space-sm 0;
  }

  &__menu :deep(.p-panelmenu) {
    border: none;
    background: transparent;
  }
}
</style>
