<template>
  <a-layout-sider
    class="side-nav"
    :width="240"
    theme="dark"
    :trigger="null"
  >
    <div class="side-nav__logo">
      <h1 class="side-nav__title">Fischer AgentKit</h1>
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      theme="dark"
      mode="inline"
      @click="handleMenuClick"
    >
      <a-menu-item key="/">
        <template #icon><MessageOutlined /></template>
        <span>智能对话</span>
      </a-menu-item>
      <a-menu-item key="/workflow">
        <template #icon><ApartmentOutlined /></template>
        <span>工作流</span>
      </a-menu-item>
      <a-menu-item key="/knowledge">
        <template #icon><BookOutlined /></template>
        <span>知识库</span>
      </a-menu-item>
      <a-menu-item key="/skills">
        <template #icon><AppstoreOutlined /></template>
        <span>技能</span>
      </a-menu-item>
      <a-menu-item key="/terminal">
        <template #icon><CodeOutlined /></template>
        <span>终端</span>
      </a-menu-item>
      <a-menu-item key="/computer-use">
        <template #icon><DesktopOutlined /></template>
        <span>Computer Use</span>
      </a-menu-item>
      <a-menu-item key="/evolution">
        <template #icon><RiseOutlined /></template>
        <span>自进化</span>
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item key="/settings">
        <template #icon><SettingOutlined /></template>
        <span>设置</span>
      </a-menu-item>
    </a-menu>
    <div class="side-nav__footer">
      <a-badge
        :status="wsConnected ? 'success' : 'error'"
        :text="wsConnected ? '已连接' : '未连接'"
      />
    </div>
  </a-layout-sider>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { LayoutSider as ALayoutSider, Menu as AMenu, MenuItem as AMenuItem, MenuDivider as AMenuDivider, Badge as ABadge } from 'ant-design-vue'
import {
  MessageOutlined,
  ApartmentOutlined,
  BookOutlined,
  AppstoreOutlined,
  CodeOutlined,
  DesktopOutlined,
  RiseOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue'
import { useChatStore } from '@/stores/chat'

const router = useRouter()
const route = useRoute()
const chatStore = useChatStore()

const selectedKeys = ref<string[]>([route.path])

const wsConnected = computed(() => chatStore.isWsConnected)

watch(
  () => route.path,
  (path) => {
    selectedKeys.value = [path]
  }
)

function handleMenuClick({ key }: { key: string }): void {
  router.push(key)
}
</script>

<style scoped>
.side-nav {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.side-nav :deep(.ant-layout-sider-children) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.side-nav__logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.side-nav__title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.side-nav__footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.side-nav__footer :deep(.ant-badge-status-text) {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}
</style>
