import { PlanCard } from '@/components/PlanCard';
import { SearchBox } from '@/components/SearchBox';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { WorkoutCard } from '@/components/WorkoutCard';
import { getChineseGreeting } from '@/utils/date';
import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';

const workoutData = [
  {
    id: 1,
    title: 'AI体态评估',
    duration: 5,
    imageSource: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/Imagettpg.png',
  },
  {
    id: 2,
    title: '认证教练',
    imageSource: require('@/assets/images/react-logo.png'),
  }
];

export default function HomeScreen() {
  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="搜索" />

          {/* Popular Workouts Section */}
          <View style={styles.sectionContainer}>
            <ThemedText style={styles.sectionTitle}>热门活动</ThemedText>

            <ScrollView
              horizontal
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={styles.workoutScrollContainer}
              style={styles.workoutScroll}
            >
              {workoutData.map((workout) => (
                <WorkoutCard
                  key={workout.id}
                  title={workout.title}
                  duration={workout.duration}
                  imageSource={workout.imageSource}
                  onPress={() => console.log(`Pressed ${workout.title}`)}
                />
              ))}
            </ScrollView>
          </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,
  },
  planList: {
    paddingHorizontal: 24,
  },
  workoutScroll: {
    paddingLeft: 24,
  },
  workoutScrollContainer: {
    paddingRight: 24,
  },
  bottomSpacing: {
    height: 120,
  },
});