<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Icon } from '@iconify/vue'

const props = defineProps({
  collapsed: { type: Boolean, default: false }
})

const emit = defineEmits(['toggle-sidebar'])

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const username = computed(() => userStore.userInfo?.name || userStore.userInfo?.username || '用户')
const storeName = computed(() => userStore.userInfo?.store?.name || '所有门店 (总览)')

const pageTitle = computed(() => {
  const titles = route.matched.filter(r => r.meta?.title && !r.meta?.hidden)
  return titles.length ? titles[titles.length - 1].meta.title : '工作台'
})

const today = computed(() => {
  const d = new Date()
  const days = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
  return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日 ${days[d.getDay()]}`
})

async function handleLogout() {
  await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await userStore.logout()
  router.push('/login')
  ElMessage.success('已安全退出')
}
</script>

<template>
  <div class="flex items-center justify-between h-full px-8 bg-white border-b border-gray-100">
    <!-- Left -->
    <div class="flex items-center gap-4">
      <!-- Collapse toggle -->
      <button
        class="p-2 rounded-xl hover:bg-gray-50 text-gray-400 hover:text-gray-600 transition-colors"
        @click="emit('toggle-sidebar')"
      >
        <Icon :icon="collapsed ? 'solar:sidebar-minimalistic-bold' : 'solar:sidebar-minimalistic-bold'" class="text-xl" />
      </button>

      <!-- Title + date -->
      <h3 class="text-base font-bold text-gray-800">{{ pageTitle }}</h3>
      <div class="h-4 w-px bg-gray-200"></div>
      <div class="flex items-center text-xs text-gray-400 gap-1.5">
        <Icon icon="solar:calendar-bold" class="text-sm" />
        <span>{{ today }}</span>
      </div>
    </div>

    <!-- Right -->
    <div class="flex items-center gap-5">
      <!-- Bell -->
      <div class="relative cursor-pointer">
        <Icon icon="solar:bell-bing-bold-duotone" class="text-2xl text-gray-400 hover:text-rose-500 transition-colors" />
        <span class="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 text-white text-[9px] rounded-full flex items-center justify-center font-bold border-2 border-white">3</span>
      </div>

      <!-- Store selector -->
      <div class="flex items-center gap-1.5 text-sm text-gray-500 cursor-pointer hover:text-gray-700">
        <span>{{ storeName }}</span>
        <Icon icon="solar:alt-arrow-down-bold-duotone" class="text-xs text-gray-400" />
      </div>

      <!-- User -->
      <el-dropdown trigger="click" placement="bottom-end">
        <div class="flex items-center gap-2.5 cursor-pointer px-3 py-1.5 rounded-xl hover:bg-gray-50 transition-colors">
          <div class="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center text-rose-500 font-bold text-sm">
            {{ username.charAt(0) }}
          </div>
          <span class="text-sm font-medium text-gray-700">{{ username }}</span>
          <Icon icon="solar:alt-arrow-down-bold-duotone" class="text-xs text-gray-400" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <Icon icon="solar:user-bold-duotone" class="mr-2" />
              个人信息
            </el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">
              <Icon icon="solar:logout-bold-duotone" class="mr-2" />
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
