<script setup lang="ts">
import Button from 'primevue/button';
import Avatar from 'primevue/avatar';
import Menu from 'primevue/menu';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCurrentUser } from '@/core/composables/useCurrentUser';

const emit = defineEmits<{ 'toggle-sidebar': [] }>();
const { currentUser } = useCurrentUser();
const router = useRouter();

const userMenu = ref();
const userMenuItems = [
  { label: '내 정보',       icon: 'pi pi-user',     command: () => router.push('/profile') },
  { label: '비밀번호 변경', icon: 'pi pi-key',      command: () => router.push('/change-password') },
  { separator: true },
  { label: '로그아웃',      icon: 'pi pi-sign-out', command: () => router.push('/login') },
];

function toggleUserMenu(event: Event) {
  userMenu.value.toggle(event);
}
</script>

<template>
  <header class="app-topbar">
    <div class="app-topbar__left">
      <Button
        icon="pi pi-bars"
        text
        rounded
        severity="secondary"
        @click="emit('toggle-sidebar')"
      />
    </div>

    <div class="app-topbar__right">
      <!-- 알림 -->
      <Button
        icon="pi pi-bell"
        text
        rounded
        severity="secondary"
        class="app-topbar__notify-btn"
      />

      <!-- 사용자 메뉴 -->
      <Button text rounded @click="toggleUserMenu" class="app-topbar__user-btn">
        <Avatar
          :label="currentUser?.fullName?.charAt(0) ?? '?'"
          shape="circle"
          size="normal"
        />
        <span class="app-topbar__username">{{ currentUser?.fullName }}</span>
      </Button>
      <Menu ref="userMenu" :model="userMenuItems" popup />
    </div>
  </header>
</template>

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

.app-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: $topbar-height;
  background: $color-surface-card;
  border-bottom: 1px solid $color-border;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $space-md;
  z-index: $z-topbar;

  &__right {
    display: flex;
    align-items: center;
    gap: $space-xs;
  }

  &__notify-btn {
    position: relative;
  }

  &__user-btn {
    display: flex;
    align-items: center;
    gap: $space-sm;
  }

  &__username {
    font-size: $font-size-sm;
    @media (max-width: $bp-tablet) {
      display: none;
    }
  }
}
</style>
