<template>
  <view class="home">
    <view class="header-banner">
      <text class="slogan">让每个人都能用好 AI</text>
      <text class="sub-slogan">宇之然 AI 学习与实践平台</text>
    </view>

    <view class="section">
      <view class="section-header">
        <text class="section-title">推荐课程</text>
        <text class="section-more" @tap="goCourses">更多 ></text>
      </view>
      <scroll-view class="course-scroll" scroll-x>
        <view class="course-list">
          <view class="course-card" v-for="item in courses" :key="item.id" @tap="goCourse(item.id)">
            <image class="course-cover" :src="item.cover || '/static/default-course.png'" mode="aspectFill" />
            <view class="course-info">
              <text class="course-title">{{ item.title }}</text>
              <text class="course-price" v-if="item.isFree">免费</text>
              <text class="course-price price-pay" v-else>¥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="section">
      <view class="section-header">
        <text class="section-title">热门提示词</text>
        <text class="section-more" @tap="goPrompts">更多 ></text>
      </view>
      <view class="prompt-list">
        <view class="prompt-item" v-for="item in prompts" :key="item.id" @tap="goPrompt(item.id)">
          <text class="prompt-title">{{ item.title }}</text>
          <text class="prompt-desc">{{ item.description }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-header">
        <text class="section-title">热门圈子</text>
        <text class="section-more" @tap="goCircles">更多 ></text>
      </view>
      <view class="circle-list">
        <view class="circle-item" v-for="item in circles" :key="item.id" @tap="goCircle(item.id)">
          <text class="circle-name">#{{ item.name }}</text>
          <text class="circle-count">{{ item._count?.members || 0 }} 人加入</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-header">
        <text class="section-title">社区动态</text>
        <text class="section-more" @tap="goCommunity">更多 ></text>
      </view>
      <view class="post-list">
        <view class="post-item" v-for="item in posts" :key="item.id" @tap="goPost(item.id)">
          <text class="post-title">{{ item.title }}</text>
          <text class="post-meta">{{ item.user?.nickname }} · {{ item.likeCount }} 赞</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/index'

const courses = ref<any[]>([])
const prompts = ref<any[]>([])
const circles = ref<any[]>([])
const posts = ref<any[]>([])

onMounted(async () => {
  try {
    const [c, p, cr, po] = await Promise.all([
      api.courses.list({ pageSize: 5 }),
      api.prompts.list({ pageSize: 5 }),
      api.circles.list({ pageSize: 5 }),
      api.community.posts({ pageSize: 5 }),
    ])
    courses.value = (c as any)?.items || []
    prompts.value = (p as any)?.items || []
    circles.value = (cr as any)?.items || []
    posts.value = (po as any)?.items || []
  } catch (e) {
    console.error('Home load error:', e)
  }
})

const goCourses = () => uni.switchTab({ url: '/pages/courses/index' })
const goPrompts = () => uni.navigateTo({ url: '/pages/prompts/index' })
const goCircles = () => uni.navigateTo({ url: '/pages/circles/index' })
const goCommunity = () => uni.switchTab({ url: '/pages/community/index' })
const goCourse = (id: number) => uni.navigateTo({ url: `/pages/course-detail/index?id=${id}` })
const goPrompt = (id: number) => uni.navigateTo({ url: `/pages/prompt-detail/index?id=${id}` })
const goCircle = (id: number) => uni.navigateTo({ url: `/pages/circle-detail/index?id=${id}` })
const goPost = (id: number) => uni.navigateTo({ url: `/pages/post-detail/index?id=${id}` })
</script>

<style scoped>
.home { padding-bottom: 20rpx; }
.header-banner {
  background: linear-gradient(135deg, var(--brand), #6c5ce7);
  padding: 60rpx 40rpx;
  text-align: center;
}
.slogan { font-size: 44rpx; font-weight: bold; color: var(--card); display: block; }
.sub-slogan { font-size: 28rpx; color: rgba(255,255,255,0.8); margin-top: 16rpx; display: block; }
.section { padding: 30rpx 30rpx 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
.section-title { font-size: 32rpx; font-weight: bold; }
.section-more { font-size: 26rpx; color: var(--brand); }
.course-scroll { white-space: nowrap; }
.course-list { display: flex; gap: 20rpx; }
.course-card {
  width: 280rpx; background: var(--card); border-radius: 16rpx; overflow: hidden; display: inline-block;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.course-cover { width: 280rpx; height: 160rpx; }
.course-info { padding: 16rpx; }
.course-title { font-size: 26rpx; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-price { font-size: 24rpx; color: var(--brand); margin-top: 8rpx; display: inline-block; }
.price-pay { color: #ff6b6b; }
.prompt-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
.prompt-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.prompt-item:last-child { border-bottom: none; }
.prompt-title { font-size: 28rpx; font-weight: 500; display: block; }
.prompt-desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
.circle-item {
  background: var(--card); border-radius: 12rpx; padding: 20rpx; flex: 1; min-width: 200rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.circle-name { font-size: 28rpx; font-weight: 500; color: var(--brand); display: block; }
.circle-count { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
.post-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
.post-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.post-item:last-child { border-bottom: none; }
.post-title { font-size: 28rpx; font-weight: 500; display: block; }
.post-meta { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
</style>
