<script setup lang="ts">
import { useConfigStore } from '@/stores'
import { ref, onMounted, onUnmounted } from 'vue'
defineOptions({
  name: 'AppHeader'
})

const configStore = useConfigStore()
const isDark = ref(false)

// 检测当前主题
const checkDarkMode = () => {
  isDark.value =
    document.documentElement.classList.contains('dark') ||
    window.matchMedia('(prefers-color-scheme: dark)').matches
}

onMounted(() => {
  checkDarkMode()

  // 监听系统主题变化
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  mediaQuery.addEventListener('change', checkDarkMode)

  // 监听类名变化
  const observer = new MutationObserver(checkDarkMode)
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  })

  onUnmounted(() => {
    mediaQuery.removeEventListener('change', checkDarkMode)
    observer.disconnect()
  })
})
</script>

<template>
  <div
    class="bg-[var(--color-bg)] h-[60px] relative pl-[28px] font-[900] text-[24px] absolute left-1/2 transform -translate-x-1/2 w-[600px] h-[60px] dark:bg-black flex items-center justify-center transition-[top]"
  >
    <svg-icon
      icon-class="icons"
      class="header-icon"
      size="100% "
      :style="{
        filter: isDark
          ? 'drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))'
          : 'drop-shadow(0px 0px 5px rgba(161, 161, 161, 0.2))',
        stroke: 'var(--color-border)',
        strokeWidth: '1px',
        strokeLinejoin: 'round'
      }"
    />
    <h2
      className="flex items-center gap-3 text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3 absolute left-1/2 transform -translate-x-1/2"
    >
      <img src="/logo.png" alt="logo" className="w-8" />
      <p>
        <span className="text-[#9e0000]">数联网</span
        ><span className="text-[var(--color-text-title)]">多智能体协同平台</span>
      </p>
    </h2>
  </div>
</template>
<style scoped lang="scss">
.header-icon {
  color: var(--color-header-bg);
}
</style>
