<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useBookmarkStore } from '@/stores/bookmark'
import { useTagStore } from '@/stores/tag'
import { useAuthStore } from '@/stores/auth'
import AppLayout from '@/components/layout/AppLayout.vue'
import BookmarkList from '@/components/bookmark/BookmarkList.vue'
import BookmarkEditor from '@/components/bookmark/BookmarkEditor.vue'
import GlobalSearch from '@/components/search/GlobalSearch.vue'
import type { Bookmark } from '@/types'

const bookmarkStore = useBookmarkStore()
const tagStore = useTagStore()
const authStore = useAuthStore()

const showEditor = ref(false)
const editingBookmark = ref<Bookmark | null>(null)
const showSearch = ref(false)

const tags = computed(() => tagStore.sortedTags)
const bookmarks = computed(() => bookmarkStore.filteredBookmarks)
const currentTag = computed(() => bookmarkStore.currentTag)
const recentBookmarks = computed(() => bookmarkStore.recentBookmarks)

onMounted(async () => {
  await Promise.all([
    bookmarkStore.fetchBookmarks(),
    tagStore.fetchTags()
  ])
})

function handleAddBookmark() {
  editingBookmark.value = null
  showEditor.value = true
}

function handleEditBookmark(bookmark: Bookmark) {
  editingBookmark.value = bookmark
  showEditor.value = true
}

function handleEditorClose() {
  showEditor.value = false
  editingBookmark.value = null
}

function handleTagClick(tagName: string | null) {
  bookmarkStore.setCurrentTag(tagName)
}

function handleSearchOpen() {
  showSearch.value = true
}

function handleSearchClose() {
  showSearch.value = false
}

// 快捷键
function handleKeydown(e: KeyboardEvent) {
  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
    e.preventDefault()
    showSearch.value = true
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})
</script>

<template>
  <AppLayout @search="handleSearchOpen">
    <div class="home-view">
      <!-- 侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <h3>标签</h3>
        </div>
        <div class="tag-list">
          <div
            class="tag-item"
            :class="{ active: currentTag === null }"
            @click="handleTagClick(null)"
          >
            <el-icon><Folder /></el-icon>
            <span>全部书签</span>
            <span class="count">{{ bookmarkStore.bookmarks.length }}</span>
          </div>
          <div
            v-for="tag in tags"
            :key="tag.name"
            class="tag-item"
            :class="{ active: currentTag === tag.name }"
            @click="handleTagClick(tag.name)"
          >
            <el-icon><PriceTag /></el-icon>
            <span class="tag-name">{{ tag.name }}</span>
            <span class="count">{{ tag.count }}</span>
          </div>
        </div>
      </aside>

      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 最近访问 -->
        <section v-if="recentBookmarks.length > 0 && !currentTag" class="recent-section">
          <h3 class="section-title">最近访问</h3>
          <div class="recent-grid">
            <div
              v-for="bookmark in recentBookmarks"
              :key="bookmark.id"
              class="recent-item"
              @click="handleEditBookmark(bookmark)"
            >
              <img
                v-if="bookmark.icon"
                :src="bookmark.icon"
                class="favicon"
                @error="($event.target as HTMLImageElement).style.display = 'none'"
              />
              <span v-else class="favicon-placeholder">{{ bookmark.title[0] }}</span>
              <span class="title">{{ bookmark.title }}</span>
            </div>
          </div>
        </section>

        <!-- 书签列表 -->
        <section class="bookmark-section">
          <div class="section-header">
            <h3 class="section-title">
              {{ currentTag ? `标签: ${currentTag}` : '全部书签' }}
            </h3>
            <el-button type="primary" @click="handleAddBookmark">
              <el-icon><Plus /></el-icon>
              添加书签
            </el-button>
          </div>
          
          <BookmarkList
            :bookmarks="bookmarks"
            :loading="bookmarkStore.loading"
            @edit="handleEditBookmark"
          />
        </section>
      </main>
    </div>

    <!-- 书签编辑器 -->
    <BookmarkEditor
      v-model:visible="showEditor"
      :bookmark="editingBookmark"
      @close="handleEditorClose"
    />

    <!-- 全局搜索 -->
    <GlobalSearch
      v-model:visible="showSearch"
      @close="handleSearchClose"
    />
  </AppLayout>
</template>

<style lang="scss" scoped>
.home-view {
  display: flex;
  height: 100%;
  gap: 24px;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  height: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .sidebar-header {
    margin-bottom: 16px;
    
    h3 {
      font-size: 14px;
      color: #999;
      font-weight: 500;
    }
  }

  .tag-list {
    .tag-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      color: #666;

      &:hover {
        background: #f5f5f5;
      }

      &.active {
        background: #667eea;
        color: #fff;

        .count {
          background: rgba(255, 255, 255, 0.2);
          color: #fff;
        }
      }

      .tag-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .count {
        font-size: 12px;
        background: #f0f0f0;
        padding: 2px 8px;
        border-radius: 10px;
        color: #999;
      }
    }
  }
}

.main-content {
  flex: 1;
  min-width: 0;
}

.recent-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;

  .section-title {
    margin-bottom: 0;
  }
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;

  .recent-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .favicon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
    }

    .favicon-placeholder {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .title {
      font-size: 13px;
      color: #333;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
  }
}

.bookmark-section {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
</style>

