digital-pilates/app/(tabs)/index.tsx

import { PlanCard } from '@/components/PlanCard';
import { SearchBox } from '@/components/SearchBox';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
// Removed WorkoutCard import since we no longer use the horizontal carousel
import { getChineseGreeting } from '@/utils/date';
import { useRouter } from 'expo-router';
import React, { useEffect, useRef } from 'react';
import { Pressable, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';

// 移除旧的“热门活动”滑动数据，改为固定的“热点功能”卡片

export default function HomeScreen() {
  const router = useRouter();
  const hasOpenedLoginRef = useRef(false);

  useEffect(() => {
    // 仅在本次会话首次进入首页时打开登录页，可返回关闭
    if (!hasOpenedLoginRef.current) {
      hasOpenedLoginRef.current = true;
      router.push('/auth/login');
    }
  }, [router]);
  return (
    <SafeAreaView style={styles.safeArea}>
      <ThemedView style={styles.container}>
        <ScrollView showsVerticalScrollIndicator={false}>
          {/* Header Section */}
          <View style={styles.header}>
            <ThemedText style={styles.greeting}>{getChineseGreeting()} 🔥</ThemedText>
            <ThemedText style={styles.userName}>新学员，欢迎你</ThemedText>
          </View>

          {/* Search Box */}
          <SearchBox placeholder="搜索" />

          {/* Hot Features Section */}
          <View style={styles.sectionContainer}>
            <ThemedText style={styles.sectionTitle}>热点功能</ThemedText>

            <View style={styles.featureGrid}>
              <Pressable
                style={[styles.featureCard, styles.featureCardPrimary]}
                onPress={() => router.push('/ai-posture-assessment')}
              >
                <ThemedText style={styles.featureTitle}>AI体态评估</ThemedText>
                <ThemedText style={styles.featureSubtitle}>3分钟获取体态报告</ThemedText>
                <View style={styles.featureCta}>
                  <ThemedText style={styles.featureCtaText}>开始评估</ThemedText>
                </View>
              </Pressable>

              <Pressable
                style={[styles.featureCard, styles.featureCardSecondary]}
                onPress={() => router.push('/health-consultation' as any)}
              >
                <ThemedText style={styles.featureTitle}>在线教练</ThemedText>
                <ThemedText style={styles.featureSubtitle}>认证教练 · 1对1即时解答</ThemedText>
                <View style={styles.featureCta}>
                  <ThemedText style={styles.featureCtaText}>立即咨询</ThemedText>
                </View>
              </Pressable>
            </View>
          </View>

          {/* Today Plan Section */}
          <View style={styles.sectionContainer}>
            <ThemedText style={styles.sectionTitle}>为你推荐</ThemedText>

            <View style={styles.planList}>
              <PlanCard
                image={'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Imagettpg.png'}
                title="体态评估"
                subtitle="评估你的体态，制定训练计划"
                level="初学者"
                progress={0}
              />
              <PlanCard
                image={'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Image30play@2x.png'}
                title="30日训练打卡"
                subtitle="坚持30天，养成训练习惯"
                level="初学者"
                progress={0.75}
              />
            </View>
          </View>



          {/* Add some spacing at the bottom */}
          <View style={styles.bottomSpacing} />
        </ScrollView>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#F7F8FA',
  },
  container: {
    flex: 1,
    backgroundColor: '#F7F8FA',
  },
  header: {
    paddingHorizontal: 24,
    paddingTop: 16,
    paddingBottom: 8,
  },
  greeting: {
    fontSize: 16,
    color: '#8A8A8E',
    fontWeight: '400',
    marginBottom: 6,
  },
  userName: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#1A1A1A',
    lineHeight: 36,
  },
  sectionContainer: {
    marginTop: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1A1A1A',
    paddingHorizontal: 24,
    marginBottom: 18,
  },
  featureGrid: {
    paddingHorizontal: 24,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  featureCard: {
    width: '48%',
    borderRadius: 16,
    padding: 16,
    backgroundColor: '#FFFFFF',
    // iOS shadow
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 6 },
    // Android shadow
    elevation: 4,
  },
  featureCardPrimary: {
    backgroundColor: '#EEF2FF', // 柔和的靛蓝背景
  },
  featureCardSecondary: {
    backgroundColor: '#F0FDFA', // 柔和的青绿背景
  },
  featureIcon: {
    fontSize: 28,
    marginBottom: 8,
  },
  featureTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#0F172A',
    marginBottom: 6,
  },
  featureSubtitle: {
    fontSize: 12,
    color: '#6B7280',
    lineHeight: 16,
    marginBottom: 12,
  },
  featureCta: {
    alignSelf: 'flex-start',
    backgroundColor: '#0F172A',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 999,
  },
  featureCtaText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: '600',
  },
  planList: {
    paddingHorizontal: 24,
  },
  // 移除旧的滑动样式
  bottomSpacing: {
    height: 120,
  },
});