import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { createPinia } from 'pinia'
import App from './App.vue'

// 导入页面组件
// 便签列表页面
import NoteListPage from './pages/NoteListPage.vue'
// 便签编辑页面（用于新建和编辑便签）
import NoteEditorPage from './pages/NoteEditorPage.vue'
// 文件夹管理页面
import FolderPage from './pages/FolderPage.vue'
// 设置页面
import SettingsPage from './pages/SettingsPage.vue'

// 导入数据库初始化函数
import { initDB } from './utils/indexedDBStorage'

// 配置路由规则
// 定义应用的所有路由路径和对应的组件
const routes = [
  // 根路径重定向到便签列表页面
  { path: '/', redirect: '/notes' },
  // 便签列表页面路由
  { path: '/notes', component: NoteListPage },
  // 编辑便签页面路由（带便签ID参数）
  { path: '/notes/:id', component: NoteEditorPage, props: true },
  // 新建便签页面路由
  { path: '/editor', component: NoteEditorPage },
  // 编辑便签页面路由（带便签ID参数）
  { path: '/editor/:id', component: NoteEditorPage, props: true },
  // 文件夹管理页面路由
  { path: '/folders', component: FolderPage },
  // 设置页面路由
  { path: '/settings', component: SettingsPage }
]

// 创建路由实例
// 使用Hash模式以支持静态文件部署
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 创建并挂载Vue应用实例
// 配置Pinia状态管理和Vue Router路由
const app = createApp(App)

// 初始化数据库
initDB().then(() => {
  console.log('数据库初始化成功')
}).catch(error => {
  console.error('数据库初始化失败:', error)
  // 即使数据库初始化失败，也继续启动应用
  // 这样可以确保应用在没有IndexedDB支持的环境中仍然可以运行
})

// 使用Pinia进行状态管理
app.use(createPinia())
// 使用Vue Router进行路由管理
app.use(router)
// 挂载应用到DOM元素
app.mount('#app')