<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { Sunny, Moon, Monitor } from '@element-plus/icons-vue'
import { useSettingsStore } from '@/stores/settings'
import { useTheme, ThemeMode } from '@/composables/useTheme'

defineProps({
  totalCount: {
    type: Number,
    default: 0,
  },
  shortcutLabel: {
    type: String,
    default: 'Ctrl + K',
  },
})

const emit = defineEmits(['open-search', 'create-link', 'import-data', 'import-browser-bookmarks', 'open-settings', 'view-change'])

const settingsStore = useSettingsStore()
const { state } = storeToRefs(settingsStore)
const { themeMode, isDark, cycleTheme } = useTheme()

const libraryView = computed({
  get: () => state.value?.libraryView || 'tag',
  set: (value) => {
    settingsStore.updateSettings({ libraryView: value })
    emit('view-change', value)
  },
})

// 获取当前主题的图标
const currentThemeIcon = computed(() => {
  switch (themeMode.value) {
    case ThemeMode.DARK:
      return Moon
    case ThemeMode.SYSTEM:
      return Monitor
    default:
      return Sunny
  }
})

// 获取主题切换按钮的提示文字
const themeTooltip = computed(() => {
  switch (themeMode.value) {
    case ThemeMode.LIGHT:
      return '当前：浅色主题（点击切换）'
    case ThemeMode.DARK:
      return '当前：深色主题（点击切换）'
    case ThemeMode.SYSTEM:
      return '当前：跟随系统（点击切换）'
    default:
      return '切换主题'
  }
})

import styles from './AppShell.module.scss'
</script>

<template>
  <div :class="styles.container">
    <div :class="styles.inner">
      <div :class="styles.topRow">
        <section :class="styles.hero" name="hero">
          <span :class="styles.heroNote">MVP 基础版</span>
          <h1 :class="styles.heroHeading">掌控你的网页书签</h1>
          <p :class="styles.heroDescription">
            快速启动全局搜索，统一管理收藏链接，把日常必备的网页资源纳入一个高效的工作空间，配合筛选与快捷操作更有条理。
          </p>
          <div :class="styles.heroActions">
            <el-button type="primary" size="large" @click="emit('open-search')">
              打开搜索（{{ shortcutLabel }}）
            </el-button>
            <el-button size="large" @click="emit('create-link')">新增书签</el-button>
            <el-button size="large" text @click="emit('import-data')">导入数据</el-button>
            <el-button size="large" text @click="emit('import-browser-bookmarks')">导入浏览器书签</el-button>
            <el-button size="large" text @click="emit('open-settings')">偏好设置</el-button>
            
            <!-- 主题快速切换按钮 -->
            <div :class="styles.themeToggle">
              <el-tooltip :content="themeTooltip" placement="bottom">
                <el-button 
                  size="large" 
                  circle 
                  @click="cycleTheme"
                >
                  <component :is="currentThemeIcon" />
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </section>
        <section :class="styles.section" name="recent">
          <header :class="styles.sectionHeader">
            <h2 :class="styles.sectionTitle">最近动态</h2>
            <span :class="styles.sectionHint">显示最近访问的链接与快捷操作。</span>
          </header>
          <div :class="styles.sectionContent">
            <slot name="recent">
              <div :class="styles.placeholder">
                <el-empty description="暂无最近访问，先尝试新增一个书签吧。" />
              </div>
            </slot>
          </div>
        </section>
      </div>
      <main :class="styles.main">
        <section :class="styles.section" name="library">
          <header :class="styles.sectionHeader">
            <div>
              <h2 :class="styles.sectionTitle">全部书签</h2>
              <span :class="styles.sectionHint">
                当前本地保存 {{ totalCount }} 条记录。
              </span>
            </div>
            <el-radio-group v-model="libraryView" size="small" class="view-switcher">
              <el-radio-button value="tag">标签视图</el-radio-button>
              <el-radio-button value="all">全部书签</el-radio-button>
            </el-radio-group>
          </header>
          <slot name="library">
            <div :class="styles.placeholder">
              <el-empty description="列表还是空的，可以导入或新增书签来填充。" />
            </div>
          </slot>
        </section>
      </main>
    </div>
  </div>
</template>
