<template>
  <div class="flex flex-col h-screen w-screen overflow-hidden">
    <div class="flex flex-1 overflow-hidden">
      <!-- 侧边栏 -->
      <aside :class="['flex flex-col bg-white border-r border-gray-200 transition-all duration-300 no-drag', appStore.collapsed ? 'w-16' : 'w-56']">
        <!-- Logo -->
        <div class="flex items-center h-14 px-4 border-b border-gray-200 shrink-0">
          <el-icon class="text-blue-500 text-xl shrink-0"><Monitor /></el-icon>
          <template v-if="!appStore.collapsed">
            <el-button class="ml-2 font-semibold text-gray-800 truncate" link @click="showAppInfo = true">
              {{ appStore.title }}
            </el-button>
          </template>
        </div>

        <!-- 自定义菜单 -->
        <nav class="flex-1 px-3 py-4 space-y-1">
          <div
            v-for="(item, index) in menus"
            :key="index"
            :class="[
              'flex items-center rounded-xl cursor-pointer transition-all duration-200 ease-out group relative overflow-hidden',
              appStore.collapsed ? 'justify-center px-0 py-3 mx-auto w-11' : 'px-4 py-3 mx-0',
              $route.path === item.index
                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-md shadow-blue-200'
                : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
            ]"
            @click="router.push(item.index)"
          >
            <!-- 图标 -->
            <div
              :class="[
                'flex items-center justify-center shrink-0 transition-transform duration-200',
                appStore.collapsed ? 'w-6 h-6' : 'w-5 h-5',
                $route.path === item.index ? 'scale-110' : 'group-hover:scale-105',
              ]"
            >
              <el-icon :class="['transition-colors duration-200', appStore.collapsed ? 'text-xl' : 'text-lg']">
                <component :is="item.icon" />
              </el-icon>
            </div>

            <!-- 文字 -->
            <span v-show="!appStore.collapsed" class="ml-3 text-sm font-medium whitespace-nowrap transition-all duration-200">
              {{ item.name }}
            </span>

            <!-- Active 指示条 -->
            <div
              v-if="$route.path === item.index && !appStore.collapsed"
              class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-white/50 rounded-l-full"
            />
          </div>
        </nav>

        <!-- 折叠按钮 -->
        <div class="p-3 border-t border-gray-200">
          <el-button :icon="appStore.collapsed ? Expand : Fold" circle size="small" @click="appStore.toggleSidebar" />
        </div>
      </aside>

      <!-- 主内容区 -->
      <div class="flex flex-col flex-1 overflow-hidden">
        <!-- 顶部栏 -->
        <header class="flex items-center justify-between h-14 px-6 bg-white border-b border-gray-200 shrink-0">
          <h1 class="text-base font-medium text-gray-700">{{ currentTitle }}</h1>
          <div class="flex items-center gap-2">
            <el-avatar :size="32" class="bg-blue-500">U</el-avatar>
          </div>
        </header>

        <!-- 页面内容 -->
        <main class="flex-1 overflow-hidden p-6">
          <div class="h-full overflow-auto">
            <router-view />
          </div>
        </main>
      </div>
    </div>

    <!-- 应用信息弹窗 -->
    <el-dialog v-model="showAppInfo" :title="appStore.title" width="400">
      <div class="p-4 text-center">
        <p class="text-lg font-medium mb-2">欢迎使用 {{ appStore.title }}</p>
        <p class="text-sm text-gray-500">这是一个基于 Electron 和 Vue 3 的应用示例。</p>
      </div>
      <template #footer>
        <div class="flex justify-end">
          <el-button type="primary" @click="showAppInfo = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useAppStore } from '@/stores/app';
import { House, Monitor, Expand, Fold, ChatDotRound, Search, Collection, Clock } from '@element-plus/icons-vue';
import router from '@/router';

const route = useRoute();
const appStore = useAppStore();

const menus = ref([
  { name: '新对话', index: '/', icon: House },
  { name: '知识空间', index: '/knowledge', icon: Collection },
  { name: 'opencode对话', index: '/chat', icon: ChatDotRound },
  { name: '发现设备', index: '/bonjour', icon: Search },
  { name: '历史对话', index: '/history', icon: Clock },
]);

const showAppInfo = ref(false);

const currentTitle = computed(() => route.meta?.title || appStore.title);
</script>
