<!-- src/layouts/MainLayout.vue -->
<template>
  <div class="min-h-screen bg-base-100">
    <div class="drawer drawer-overlay" :class="{ 'md:drawer-open': isLargeSidebarOpen }">
      <!-- Sidebar Toggle for Mobile -->
      <input id="drawer" type="checkbox" class="drawer-toggle" />

      <!-- Main Content -->
      <div class="drawer-content flex flex-col">
        <!-- Top Navigation -->
        <header class="w-full navbar bg-base-100 border-b border-base-200 h-14 min-h-[3rem]">
          <!-- Mobile menu button -->
          <div class="flex-none">
            <div class="md:hidden">
              <label for="drawer" class="btn btn-square btn-ghost h-10 min-h-[2.5rem]">
                <MenuIcon class="w-5 h-5" />
              </label>
            </div>
            <!-- Desktop menu button -->
            <div class="hidden md:flex">
              <label @click="toggleSidebarLarge" class="btn btn-square btn-ghost h-10 min-h-[2.5rem]">
                <MenuIcon class="w-5 h-5" />
              </label>
            </div>
          </div>

          <div class="flex-auto space-x-1 justify-end">
            <button class="btn btn-ghost btn-circle h-10 min-h-[2.5rem]" @click="toggleTheme">
              <SunIcon v-if="isDark" class="w-5 h-5" />
              <MoonIcon v-else class="w-5 h-5" />
            </button>
            <button class="btn btn-ghost btn-circle h-10 min-h-[2.5rem] hidden">
              <div class="indicator">
                <BellIcon class="w-5 h-5" />
                <span class="badge badge-xs badge-primary indicator-item"></span>
              </div>
            </button>
            <div class="dropdown dropdown-bottom dropdown-end">
              <label tabindex="0" class="btn btn-ghost rounded-btn px-1.5 hover:bg-base-content/20 h-10 min-h-[2.5rem]">
                <div class="flex items-center gap-2">
                  <!-- 有头像时显示头像 -->
                  <div v-if="userInfo.avatar" class="avatar">
                    <div class="mask mask-squircle w-8 h-8">
                      <img :src="userInfo.avatar" :alt="userInfo.name">
                      <!-- <img src='../assets/logo.svg' :alt="userInfo.name"> -->
                    </div>
                  </div>
                  <!-- 没有头像时显示首字母 -->
                  <div v-else class="avatar placeholder">
                    <div class="bg-neutral text-neutral-content w-8 mask mask-squircle">
                      <span class="text-sm">{{ userInitials }}</span>
                    </div>
                  </div>
                  <div class="flex flex-col items-start">
                    <p class="text-sm/none">{{ userInfo.username }}</p>
                    <p class="mt-1 text-xs/none text-primary">Edit</p>
                  </div>
                </div>
              </label>
              <ul class="menu menu-sm dropdown-content mt-2 z-[1] p-1.5 shadow bg-base-100 rounded-box w-32">
                <template v-for="item in userNavigation" :key="item.name || 'divider'">
                  <hr v-if="item.type === 'divider'" class="-mx-2 my-1 border-base-content/10">
                  <li v-else :class="item.class">
                    <a href="#" class="py-1.5" @click.prevent="handleNavigation(item)">
                      <component :is="item.icon" class="w-4 h-4" />
                      {{ item.name }}
                    </a>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </header>

        <!-- Main Content Area -->
        <main class="flex-1 overflow-y-auto p-6 bg-base-200">
          <router-view></router-view>
        </main>
      </div>

      <!-- Sidebar -->
      <div class="drawer-side">
        <label for="drawer" class="drawer-overlay"></label>
        <Sidebar />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { MenuIcon, SunIcon, MoonIcon, BellIcon, User, Settings, LogOut } from 'lucide-vue-next'
import Sidebar from '@/components/dashboard/Sidebar.vue'
import { useAuthStore } from '../stores/auth'
import { useRouter } from 'vue-router'

const router = useRouter()
const authStore = useAuthStore()
const isDark = ref(false)
const isLargeSidebarOpen = ref(true)

const userInfo = computed(() => {
  return authStore.user || {}
})


onMounted(async () => {
  if (!userInfo) {
    await authStore.getProfile()
  }

})


const userInitials = computed(() => {
  // If name exists, use it first
  if (userInfo.value.name) {
    return userInfo.value.name
      .split(' ')
      .map(word => word[0])
      .join('')
      .toUpperCase()
      .slice(0, 2); // Max 2 letters
  }

  if (userInfo.value.username) {
    return userInfo.value.username
      .split(' ')
      .map(word => word[0])
      .join('')
      .toUpperCase()
      .slice(0, 2); // Max 2 letters
  }

  return 'U';
});

const userNavigation = reactive([
  { name: 'Profile',  icon: User },
  { type: 'divider' },
  { name: 'Logout',  icon: LogOut, class: 'text-error' }
]);

const handleNavigation = (item) => {
  if (item.name === 'Profile') {
    router.push('/dashboard/settings/profile')
  } else if (item.name === 'Logout'){
    authStore.logout()
  }
}

const toggleSidebarLarge = () => {
  isLargeSidebarOpen.value = !isLargeSidebarOpen.value
}

const toggleTheme = () => {
  isDark.value = !isDark.value
  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'emerald')
}
</script>