<script setup>
import { RouterLink, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useUiStore } from '@/stores/ui'
import IconBtn from '@/components/ui/IconBtn.vue'

const auth = useAuthStore()
const ui = useUiStore()
const router = useRouter()

async function handleLogout() {
  await auth.logout()
  router.replace('/')
}
</script>

<template>
  <header class="app-header">
    <div class="header-left">
      <button v-if="auth.isAuthenticated" class="hamburger" type="button" aria-label="메뉴" @click="ui.toggleSidebar()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" />
        </svg>
      </button>
      <RouterLink to="/" class="brand">
        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
          <rect width="32" height="32" rx="7" fill="#00bc7e" />
          <g fill="#ffffff">
            <rect x="7.5" y="17" width="3.4" height="8" rx="1.7" />
            <rect x="14.3" y="12.5" width="3.4" height="12.5" rx="1.7" />
            <rect x="21.1" y="8" width="3.4" height="17" rx="1.7" />
          </g>
        </svg>
        <span class="brand-text">SlimBudget</span>
      </RouterLink>
    </div>

    <div class="header-right">
      <template v-if="auth.isAuthenticated">
        <span class="username">{{ auth.user?.name || auth.user?.loginId }}님</span>
        <IconBtn icon="logout" title="로그아웃" @click="handleLogout" />
      </template>
      <IconBtn v-else icon="login" title="로그인" variant="primary" @click="ui.openLogin()" />
    </div>
  </header>
</template>

<style scoped>
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 1.5rem;
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hamburger {
  display: none;
  padding: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  line-height: 0;
}
.hamburger svg {
  width: 22px;
  height: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-heading);
}
.brand:hover {
  background: transparent;
}
.brand-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.brand-text {
  letter-spacing: -0.01em;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.username {
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .hamburger {
    display: inline-flex;
  }
  .app-header {
    padding: 0 1rem;
  }
}
</style>
