<template>
  <div class="h-screen flex flex-col bg-base-100 overflow-hidden">
    <header class="navbar bg-base-200/80 backdrop-blur px-4 gap-2 shrink-0">
      <NuxtLink to="/" class="text-lg font-semibold hover:opacity-80">{{ title }}</NuxtLink>
      <div class="flex-1" />
      <NuxtLink v-if="!isLogin" to="/" class="btn btn-ghost btn-sm">Map</NuxtLink>
      <NuxtLink v-if="!isLogin" to="/profile" class="btn btn-ghost btn-sm">Profile</NuxtLink>
      <NuxtLink v-if="!isLogin && isAdmin" to="/admin" class="btn btn-ghost btn-sm">Admin</NuxtLink>
      <button
        v-if="!isLogin && me"
        type="button"
        class="btn btn-ghost btn-sm btn-outline"
        @click="doLogout"
      >
        Logout
      </button>
      <label class="swap swap-rotate btn btn-ghost btn-sm">
        <input type="checkbox" v-model="dark" @change="toggleTheme" />
        <span class="swap-off">☀️</span>
        <span class="swap-on">🌙</span>
      </label>
      <span v-if="live" class="badge badge-success badge-sm">Live</span>
    </header>
    <main class="flex-1 min-h-0 relative">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const THEME_KEY = 'hnh-map-theme'

function getInitialDark(): boolean {
  if (import.meta.client) {
    const stored = localStorage.getItem(THEME_KEY)
    if (stored === 'dark') return true
    if (stored === 'light') return false
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }
  return false
}

const title = ref('HnH Map')
const dark = ref(false)
const live = ref(false)
const me = ref<{ username?: string; auths?: string[] } | null>(null)

const { isLoginPath } = useAppPaths()
const isLogin = computed(() => isLoginPath(route.path))
const isAdmin = computed(() => !!me.value?.auths?.includes('admin'))

async function loadMe() {
  if (isLogin.value) return
  try {
    me.value = await useMapApi().me()
  } catch {
    me.value = null
  }
}

async function loadConfig() {
  if (isLogin.value) return
  try {
    const config = await useMapApi().getConfig()
    if (config?.title) title.value = config.title
  } catch (_) {}
}

onMounted(() => {
  dark.value = getInitialDark()
  const html = document.documentElement
  html.setAttribute('data-theme', dark.value ? 'dark' : 'light')
})

watch(
  () => route.path,
  (path) => {
    if (!isLoginPath(path)) loadMe().then(loadConfig)
  },
  { immediate: true }
)

function toggleTheme() {
  const html = document.documentElement
  if (dark.value) {
    html.setAttribute('data-theme', 'dark')
    localStorage.setItem(THEME_KEY, 'dark')
  } else {
    html.setAttribute('data-theme', 'light')
    localStorage.setItem(THEME_KEY, 'light')
  }
}

async function doLogout() {
  await useMapApi().logout()
  await router.push('/login')
  me.value = null
}

defineExpose({ setLive: (v: boolean) => { live.value = v } })
</script>
