<script setup lang="ts">
import Header from './components/Header.vue'
import Main from './components/Main/index.vue'
import { ref, onMounted } from 'vue'
import FloatWindow from './components/Main/TaskTemplate/TaskSyllabus/components/FloatWindow.vue'
import PlanModification from './components/Main/TaskTemplate/TaskSyllabus/Branch/PlanModification.vue'
import { useAgentsStore } from '@/stores/modules/agents'
import PlanTask from './components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue'
import AgentAllocation from './components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue'
const isDarkMode = ref(false)
const agentsStore = useAgentsStore()
// 初始化主题
const initTheme = () => {
  const savedTheme = localStorage.getItem('theme')
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches

  if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
    enableDarkMode()
  } else {
    enableLightMode()
  }
}

// 启用深色模式
const enableDarkMode = () => {
  document.documentElement.classList.add('dark')
  isDarkMode.value = true
  localStorage.setItem('theme', 'dark')
}

// 启用浅色模式
const enableLightMode = () => {
  document.documentElement.classList.remove('dark')
  isDarkMode.value = false
  localStorage.setItem('theme', 'light')
}

// 切换主题
const toggleTheme = () => {
  if (isDarkMode.value) {
    enableLightMode()
  } else {
    enableDarkMode()
  }
}

// 组件挂载时初始化主题
onMounted(() => {
  initTheme()
})
</script>

<template>
  <div class="h-full relative">
    <!-- 主题切换按钮 - 放置在页面右上角 -->
    <div class="absolute top-4 right-4 z-50">
      <button
        @click="toggleTheme"
        class="w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center"
        :class="{
          'bg-[#ebebeb] hover:bg-[var(--color-bg-hover)]': !isDarkMode,
          'bg-[#0e131c] hover:bg-[var(--color-bg-hover)]': isDarkMode
        }"
        :title="isDarkMode ? '切换到浅色模式' : '切换到深色模式'"
      >
        <!-- 浅色模式图标 -->
        <svg-icon
          v-if="!isDarkMode"
          icon-class="sunny"
          size="20px"
          :color="isDarkMode ? 'var(--color-text-title)' : 'var(--color-text-title)'"
          class="transition-opacity duration-300"
        />
        <!-- 深色模式图标 -->
        <svg-icon
          v-else
          icon-class="moon"
          size="20px"
          :color="isDarkMode ? 'var(--color-text-title)' : 'var(--color-text-title)'"
          class="transition-opacity duration-300"
        />
      </button>
    </div>

    <Header />
    <Main />

    <FloatWindow
      v-if="agentsStore.planModificationWindow"
      title="任务大纲探索"
      @close="agentsStore.closePlanModification"
    >
      <PlanModification />
    </FloatWindow>

    <FloatWindow
      v-if="agentsStore.planTaskWindow"
      title="任务过程探索"
      @close="agentsStore.closePlanTask"
    >
      <PlanTask />
    </FloatWindow>

    <FloatWindow
      v-if="agentsStore.agentAllocationDialog"
      title="智能体探索"
      @close="agentsStore.closeAgentAllocationDialog"
    >
      <AgentAllocation />
    </FloatWindow>
  </div>
</template>
