<script setup>
import { useRouter } from 'vue-router'
import { useWorkspaceStore } from '@/stores/workspace'
import { useNotesStore } from '@/stores/notes'
import { useNotebooksStore } from '@/stores/notebooks'
import UserProfile from './UserProfile.vue'
import SearchInput from './SearchInput.vue'
import AddNoteButton from './AddNoteButton.vue'
import MenuItem from './MenuItem.vue'
import NotebookTree from './NotebookTree.vue'
import { FileText, Tag, Settings, Trash2, PanelLeftClose } from 'lucide-vue-next'
import { useUiStore } from '@/stores/ui'

const router = useRouter()
const workspaceStore = useWorkspaceStore()
const notesStore = useNotesStore()
const notebooksStore = useNotebooksStore()
const uiStore = useUiStore()

async function handleSearch(query) {
  notesStore.setFilter('search', query)
  router.push({ name: 'search', query: { q: query } })
}

async function handleAddNote() {
  const note = await notesStore.createNote()
  if (note) {
    router.push({ name: 'note-detail', params: { id: note.id } })
  }
}
</script>

<template>
  <div class="flex flex-col h-full">
    <!-- 用户信息 + 折叠按钮 -->
    <div class="flex items-center justify-between px-4 py-3 border-b" :style="{ borderColor: 'var(--p-surface-200)' }">
      <UserProfile />
      <button
        class="p-1.5 rounded-md hover:bg-[var(--p-surface-100)] transition-colors"
        @click="uiStore.toggleLeft()"
        title="收起侧边栏"
      >
        <PanelLeftClose :size="18" :style="{ color: 'var(--p-surface-500)' }" />
      </button>
    </div>

    <!-- 搜索框 + 新建按钮 -->
    <div class="flex items-center gap-2 px-3 py-2">
      <SearchInput class="flex-1" @search="handleSearch" />
      <AddNoteButton @click="handleAddNote" />
    </div>

    <!-- 菜单项 -->
    <nav class="flex-1 overflow-y-auto px-2">
      <MenuItem label="笔记" :icon="FileText" @click="router.push({ name: 'notes' })" />
      <MenuItem label="标签" :icon="Tag" @click="router.push({ name: 'tags' })" />

      <!-- 笔记本区域 -->
      <div class="mt-3">
        <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider" :style="{ color: 'var(--p-surface-400)' }">
          笔记本
        </div>
        <NotebookTree />
      </div>
    </nav>

    <!-- 底部固定 -->
    <div class="border-t px-2 py-2" :style="{ borderColor: 'var(--p-surface-200)' }">
      <MenuItem label="设置" :icon="Settings" @click="router.push({ name: 'settings' })" />
      <MenuItem label="废纸篓" :icon="Trash2" @click="router.push({ name: 'trash' })" />
    </div>
  </div>
</template>
