<template>
  <div class="home-view">
    <!-- 侧边栏 -->
    <ChatSidebar />

    <!-- 主内容区 -->
    <ChatMain ref="chatMainRef" @toggle-sidebar="toggleSidebar" />

    <!-- 模态框 -->
    <SearchModal />
    <ShortcutsModal />
    <SettingsModal />
    <ConversationSettingsModal />
    <ShareModal />
    <ShareResultModal />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useChatStore } from '@/stores/chat'
import { useSettingsStore } from '@/stores/settings'
import { useKeyboard, getDefaultShortcuts } from '@/composables/useKeyboard'
import ChatSidebar from '@/components/sidebar/ChatSidebar.vue'
import ChatMain from '@/components/chat/ChatMain.vue'
import SearchModal from '@/components/modals/SearchModal.vue'
import ShortcutsModal from '@/components/modals/ShortcutsModal.vue'
import SettingsModal from '@/components/modals/SettingsModal.vue'
import ConversationSettingsModal from '@/components/modals/ConversationSettingsModal.vue'
import ShareModal from '@/components/modals/ShareModal.vue'
import ShareResultModal from '@/components/modals/ShareResultModal.vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const chatStore = useChatStore()
const settingsStore = useSettingsStore()

const chatMainRef = ref<InstanceType<typeof ChatMain> | null>(null)

function toggleSidebar() {
  settingsStore.toggleSidebar()
}

function newChat() {
  chatStore.createConversation()
  window.$toast?.('已创建新对话', 'success')
}

function focusInput() {
  chatMainRef.value?.focusInput()
}

// 快捷键
useKeyboard(
  getDefaultShortcuts({
    newChat,
    toggleSidebar,
    focusInput,
    sendMessage: () => {},
    cancelStream: () => {
      if (chatStore.isStreaming) {
        chatStore.stopStreaming()
        window.$toast?.('已停止生成', 'info')
      }
    },
    toggleTheme: () => {
      settingsStore.toggleTheme()
      window.$toast?.(`主题已切换`, 'success')
    },
    showShortcuts: () => {
      settingsStore.openShortcutsModal()
    },
    searchConversations: () => {
      settingsStore.openSearchModal()
    },
  }),
)

// 初始化认证
authStore.init()
</script>

<style lang="scss" scoped>
.home-view {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>