<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { api, type ActiveBookState, type QuizStats, type QuizTrack } from '../api/request'

type HomeMode = 'accumulation' | 'book'

const HOME_MODE_KEY = 'wordloop_home_mode'

const mode = ref<HomeMode>('accumulation')
const accStats = ref<QuizStats | null>(null)
const bookStats = ref<QuizStats | null>(null)
const activeBook = ref<ActiveBookState | null>(null)
const loading = ref(true)

const activeBookTitle = computed(() => activeBook.value?.book?.title ?? '未设置')

function loadMode() {
  const saved = localStorage.getItem(HOME_MODE_KEY)
  if (saved === 'book' || saved === 'accumulation') mode.value = saved
}

function switchMode(next: HomeMode) {
  mode.value = next
  localStorage.setItem(HOME_MODE_KEY, next)
}

async function loadAll() {
  loading.value = true
  try {
    const [accRes, bookRes, activeRes] = await Promise.all([
      api.quizStats('accumulation'),
      api.quizStats('book'),
      api.getActiveBook(),
    ])
    accStats.value = accRes.data
    bookStats.value = bookRes.data
    activeBook.value = activeRes.data
  } finally {
    loading.value = false
  }
}

function quizLink(track: QuizTrack) {
  return { path: '/quiz', query: { track } }
}

function spellLink(track: QuizTrack) {
  return { path: '/spell', query: { track } }
}

function wordsLink(bookId?: number) {
  return bookId ? { path: '/words', query: { book_id: String(bookId) } } : { path: '/words' }
}

onMounted(() => {
  loadMode()
  loadAll()
})
</script>

<template>
  <div class="page">
    <h1 class="page-title">WordLoop</h1>

    <div class="mode-tabs">
      <button
        type="button"
        class="mode-tab"
        :class="{ active: mode === 'accumulation' }"
        @click="switchMode('accumulation')"
      >
        日常积累
      </button>
      <button
        type="button"
        class="mode-tab"
        :class="{ active: mode === 'book' }"
        @click="switchMode('book')"
      >
        词书练习
      </button>
    </div>

    <p v-if="loading" class="muted">加载中...</p>

    <template v-else-if="mode === 'accumulation' && accStats">
      <div class="acc-toolbar">
        <p class="mode-desc">翻译加词 · 自由积累 · 独立记忆曲线</p>
        <router-link to="/accumulation-settings" class="btn btn-outline settings-link">学习设置</router-link>
      </div>
      <div class="card highlight-card acc-card">
        <div class="highlight-title">今日积累练习</div>
        <div class="highlight-value">
          {{ accStats.today_completed }} / {{ accStats.daily_target }}
        </div>
        <div class="highlight-sub">
          词库 {{ accStats.total_words }} · 掌握 {{ accStats.mastered_count }} · 正确率
          {{ accStats.today_accuracy }}%
        </div>
      </div>
      <div class="quick-actions">
        <router-link :to="wordsLink()" class="btn btn-outline">记忆曲线</router-link>
        <router-link :to="quizLink('accumulation')" class="btn btn-primary">每日训练</router-link>
        <router-link :to="spellLink('accumulation')" class="btn btn-outline">拼写练习</router-link>
        <router-link :to="{ path: '/coach', query: { track: 'accumulation' } }" class="btn btn-outline">
          记忆对话
        </router-link>
      </div>
    </template>

    <template v-else-if="mode === 'book'">
      <div class="book-toolbar">
        <p class="mode-desc">按单元顺序 · 与日常积累完全分开</p>
        <router-link to="/book-settings" class="btn btn-outline settings-link">词书设置</router-link>
      </div>

      <div v-if="activeBook?.book && bookStats" class="card highlight-card book-card">
        <div class="highlight-title">{{ activeBookTitle }}</div>
        <div class="highlight-value">
          {{ bookStats.today_completed }} / {{ bookStats.daily_target }}
        </div>
        <div class="highlight-sub">
          已学 {{ activeBook.progress?.introduced ?? 0 }} / {{ activeBook.progress?.total ?? 0 }}
          · 掌握 {{ bookStats.mastered_count }}
          · 待解锁 {{ activeBook.progress?.locked ?? 0 }}
        </div>
      </div>
      <div v-else class="card empty-book-card">
        <p>尚未选择词书</p>
        <router-link to="/book-settings" class="btn btn-primary">去词书设置</router-link>
      </div>

      <div v-if="activeBook?.book && bookStats" class="quick-actions">
        <router-link :to="wordsLink(activeBook.book.id)" class="btn btn-outline">记忆曲线</router-link>
        <router-link :to="quizLink('book')" class="btn btn-primary">每日训练</router-link>
        <router-link :to="spellLink('book')" class="btn btn-outline">拼写练习</router-link>
        <router-link :to="{ path: '/coach', query: { track: 'book' } }" class="btn btn-outline">
          记忆对话
        </router-link>
      </div>
    </template>
  </div>
</template>

<style scoped>
.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--bg-soft, #f3f4f6);
  border-radius: 12px;
}
.mode-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
}
.mode-tab.active {
  background: #fff;
  color: var(--text, #111);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.mode-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}
.muted { color: var(--muted); }
.acc-toolbar,
.book-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.acc-toolbar .mode-desc,
.book-toolbar .mode-desc { margin: 0; flex: 1; }
.settings-link {
  text-decoration: none;
  font-size: 13px;
  padding: 8px 12px;
  white-space: nowrap;
}
.highlight-card {
  color: #fff;
  margin-bottom: 12px;
}
.acc-card {
  background: linear-gradient(135deg, #4f6ef7, #6b8cff);
}
.book-card {
  background: linear-gradient(135deg, #0d9488, #2dd4bf);
}
.empty-book-card {
  text-align: center;
  padding: 24px 16px;
  margin-bottom: 12px;
}
.empty-book-card p {
  margin: 0 0 12px;
  color: var(--muted);
}
.highlight-title { font-size: 14px; opacity: 0.9; }
.highlight-value { font-size: 32px; font-weight: 800; margin: 8px 0; }
.highlight-sub { font-size: 13px; opacity: 0.9; line-height: 1.5; }
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.quick-actions .btn { text-decoration: none; text-align: center; }
</style>
