<script setup lang="ts">
import ModalAuthentication from "~/components/ModalAuthentication.vue";

const colorMode = useColorMode()
const dayjs = useDayjs()
const modal = useModal()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})

const links = [
  {
    label: '绘画',
    icon: 'i-tabler-brush',
    to: '/aigc/drawing'
  }, {
    label: '聊天',
    icon: 'i-tabler-message-2',
    to: '/aigc/chat'
  }, {
    label: 'PPT',
    icon: 'i-tabler-file-type-ppt',
    to: '/aigc/ppt-course-gen'
  }
]

const open_login_modal = () => {
  modal.open(ModalAuthentication, {})
}
</script>

<template>
  <div class="relative grid w-full min-h-screen">
    <header>
      <h1 class="inline-flex flex-col">
        <span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">眩生花 AI 助手</span>
        <span class="text-xs text-neutral-600 dark:text-neutral-300">这里可以有一个副标题</span>
      </h1>
      <div class="hidden md:block">
        <UHorizontalNavigation :links="links" class="select-none"/>
      </div>
      <div class="flex flex-row items-center gap-4">
        <ClientOnly>
          <UButton
              :icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
              color="gray"
              variant="ghost"
              aria-label="Theme"
              @click="isDark = !isDark"
          />
          <UButton label="登录或注册" size="xs" class="font-bold" color="indigo" @click="open_login_modal"/>
        </ClientOnly>
        <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
      </div>
    </header>

    <main>
      <slot/>
    </main>

    <footer>
      <p class="text-sm text-neutral-500">© {{ dayjs().year() }} 重庆眩生花科技有限公司</p>
    </footer>
  </div>
</template>

<style>
body {
  @apply bg-neutral-50 dark:bg-neutral-950 bg-fixed;
  @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')];
}
</style>

<style scoped>
header {
  @apply fixed inset-x-0 h-16 bg-white border-b;
  @apply dark:bg-neutral-900 dark:border-neutral-800;
  @apply flex flex-row items-center justify-between px-4;
}

main {
  @apply min-h-[calc(100vh-4rem)] pt-16;
}

footer {
  @apply h-16 bg-white border-t;
  @apply dark:bg-neutral-900 dark:border-neutral-800;
  @apply flex flex-row items-center justify-between px-4;
}
</style>