<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import OnboardingWizard from '@/components/onboarding/OnboardingWizard.vue'

const auth = useAuthStore()
const showOnboarding = ref(false)
const flaskOrigin = import.meta.env.VITE_FLASK_ORIGIN || ''
const generateUrl = flaskOrigin ? `${flaskOrigin}/` : '/'

onMounted(async () => {
  if (!auth.ready) await auth.refresh()
  showOnboarding.value = (auth as any).isNewUser ?? false
})

function openLegacyGenerate() {
  window.location.href = generateUrl
}

function onOnboardingDone() {
  showOnboarding.value = false
}
</script>

<template>
  <div class="home">
    <!-- 新用户引导 -->
    <OnboardingWizard v-if="showOnboarding" @done="onOnboardingDone" />

    <div v-else>
      <el-card shadow="never" class="hero">
        <h1>提示词大师</h1>
        <p class="lead">
          智能 AI 提示词生成平台：将简单想法变为专业 Prompt，覆盖饭菜规划、古诗词解析、简历优化等 15 种场景。
        </p>
        <el-space wrap>
          <el-button type="primary" @click="$router.push({ name: 'generate' })">提示词生成</el-button>
          <el-button @click="$router.push({ name: 'optimization' })">提示词优化</el-button>
          <el-button @click="$router.push({ name: 'resume-optimization' })">简历优化</el-button>
          <el-button @click="$router.push({ name: 'meal-planning' })">饭菜规划</el-button>
          <el-button @click="$router.push({ name: 'poetry' })">古诗词</el-button>
          <el-button @click="$router.push({ name: 'android-tools' })">Android 工具</el-button>
          <el-button @click="$router.push({ name: 'favorites' })">收藏</el-button>
          <el-button @click="$router.push({ name: 'history' })">历史</el-button>
          <el-button @click="$router.push({ name: 'profile' })">个人资料</el-button>
        </el-space>
      </el-card>

      <el-card shadow="never" class="status">
        <template #header>会话状态</template>
        <p v-if="!auth.ready">正在检测登录状态…</p>
        <template v-else>
          <p v-if="auth.loggedIn">
            已登录：<strong>{{ auth.nickname || auth.userId }}</strong>
          </p>
          <p v-else>未登录 — 仍可使用核心功能，登录后可收藏和查看历史。</p>
        </template>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/assets/styles/variables' as *;

.home {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero {
  border-radius: 12px;
  border: 1px solid $border-color;

  h1 {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    color: $text-color;
  }
}

.lead {
  margin: 0 0 1.25rem;
  line-height: 1.65;
  color: $text-secondary;
  font-size: 0.95rem;
}

.status {
  border-radius: 12px;
  border: 1px solid $border-color;

  p {
    margin: 0;
    color: $text-secondary;
  }
}
</style>
