import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import React from 'react';
import {
  Image,
  ImageBackground,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Colors } from '@/constants/Colors';

type Exercise = {
  id: string;
  title: string;
  duration: string;
  imageUri: string;
};

const EXERCISES: Exercise[] = [
  {
    id: '1',
    title: 'Jumping Jacks',
    duration: '00:30',
    imageUri:
      'https://images.unsplash.com/photo-1546483875-ad9014c88eba?q=80&w=400&auto=format&fit=crop',
  },
  {
    id: '2',
    title: 'Squats',
    duration: '00:45',
    imageUri:
      'https://images.unsplash.com/photo-1583454110551-21f2fa2f36f0?q=80&w=400&auto=format&fit=crop',
  },
  {
    id: '3',
    title: 'Backward Lunge',
    duration: '00:40',
    imageUri:
      'https://images.unsplash.com/photo-1597074866923-5c3bfa3b6c46?q=80&w=400&auto=format&fit=crop',
  },
  {
    id: '4',
    title: 'High Knees',
    duration: '00:30',
    imageUri:
      'https://images.unsplash.com/photo-1596357395104-5bcae0b1a5eb?q=80&w=400&auto=format&fit=crop',
  },
];

export default function AIPostureAssessmentScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();

  const theme = Colors.dark; // 该页面采用深色视觉

  return (
    <View style={[styles.screen, { backgroundColor: theme.background }]}>
      {/* Header */}
      <View style={[styles.header, { paddingTop: insets.top + 8 }]}>
        <TouchableOpacity
          accessibilityRole="button"
          onPress={() => router.back()}
          style={styles.backButton}
        >
          <Ionicons name="chevron-back" size={24} color="#ECEDEE" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>AI体态评估</Text>
        <View style={{ width: 32 }} />
      </View>

      <ScrollView
        contentContainerStyle={{ paddingBottom: insets.bottom + 120 }}
        showsVerticalScrollIndicator={false}
      >
        {/* Hero */}
        <View style={styles.heroContainer}>
          <ImageBackground
            source={{
              uri:
                'https://images.unsplash.com/photo-1594737625785-c6683fc87c73?q=80&w=1200&auto=format&fit=crop',
            }}
            style={styles.heroImage}
            imageStyle={{ borderRadius: 28 }}
          >
            <View style={styles.heroOverlay} />
          </ImageBackground>

          {/* Floating stats */}
          <View style={styles.statsFloating}>
            <StatCard
              icon={<Ionicons name="time-outline" size={18} color="#192126" />}
              label="Time"
              value="20 min"
            />
            <View style={styles.divider} />
            <StatCard
              icon={<Ionicons name="flame-outline" size={18} color="#192126" />}
              label="Burn"
              value="95 kcal"
            />
          </View>
        </View>

        {/* Title & description */}
        <View style={styles.contentSection}>
          <Text style={styles.title}>Lower Body Training</Text>
          <Text style={styles.description}>
            The lower abdomen and hips are the most difficult areas of the body to reduce when we are on
            a diet. Even so, in this area, especially the legs as a whole, you can reduce weight even if
            you don't use tools.
          </Text>
        </View>

        {/* Rounds header */}
        <View style={styles.roundsHeader}>
          <Text style={styles.roundsTitle}>Rounds</Text>
          <Text style={styles.roundsCount}>1/8</Text>
        </View>

        {/* Exercise list */}
        <View style={{ gap: 14, marginHorizontal: 20 }}>
          {EXERCISES.map((item) => (
            <ExerciseItem key={item.id} exercise={item} />)
          )}
        </View>
      </ScrollView>

      {/* Bottom CTA */}
      <View style={[styles.bottomCtaWrap, { paddingBottom: insets.bottom + 10 }]}>
        <TouchableOpacity
          activeOpacity={0.9}
          onPress={() => { }}
          style={[styles.bottomCta, { backgroundColor: theme.primary }]}
        >
          <Text style={styles.bottomCtaText}>Lets Workout</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

function StatCard({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
}) {
  return (
    <View style={styles.statCard}>
      <View style={styles.statIconWrap}>{icon}</View>
      <View style={{ marginLeft: 8 }}>
        <Text style={styles.statLabel}>{label}</Text>
        <Text style={styles.statValue}>{value}</Text>
      </View>
    </View>
  );
}

function ExerciseItem({ exercise }: { exercise: Exercise }) {
  return (
    <View style={styles.exerciseItem}>
      <Image source={{ uri: exercise.imageUri }} style={styles.exerciseThumb} />
      <View style={{ flex: 1, marginHorizontal: 12 }}>
        <Text style={styles.exerciseTitle}>{exercise.title}</Text>
        <Text style={styles.exerciseDuration}>{exercise.duration}</Text>
      </View>
      <TouchableOpacity style={styles.exercisePlayButton}>
        <Ionicons name="play" size={18} color="#BBF246" />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
  },
  backButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.06)',
  },
  headerTitle: {
    fontSize: 22,
    color: '#ECEDEE',
    fontWeight: '700',
  },
  heroContainer: {
    marginTop: 14,
    marginHorizontal: 16,
  },
  heroImage: {
    height: 260,
    borderRadius: 28,
    overflow: 'hidden',
    justifyContent: 'flex-end',
  },
  heroOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.18)',
    borderRadius: 28,
  },
  statsFloating: {
    position: 'absolute',
    left: 22,
    right: 22,
    bottom: -26,
    height: 72,
    borderRadius: 20,
    backgroundColor: '#1E262C',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingHorizontal: 14,
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 10,
    shadowOffset: { width: 0, height: 6 },
    elevation: 6,
  },
  divider: {
    width: 1,
    height: 36,
    backgroundColor: 'rgba(255,255,255,0.08)',
  },
  statCard: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  statIconWrap: {
    width: 36,
    height: 36,
    borderRadius: 12,
    backgroundColor: '#BBF246',
    alignItems: 'center',
    justifyContent: 'center',
  },
  statLabel: {
    color: 'rgba(255,255,255,0.75)',
    fontSize: 12,
    marginBottom: 2,
  },
  statValue: {
    color: '#ECEDEE',
    fontSize: 16,
    fontWeight: '700',
  },
  contentSection: {
    marginTop: 46,
    paddingHorizontal: 20,
    gap: 12,
  },
  title: {
    fontSize: 28,
    color: '#ECEDEE',
    fontWeight: '800',
  },
  description: {
    fontSize: 15,
    lineHeight: 22,
    color: 'rgba(255,255,255,0.75)',
  },
  roundsHeader: {
    marginTop: 18,
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  roundsTitle: {
    color: '#ECEDEE',
    fontSize: 22,
    fontWeight: '700',
  },
  roundsCount: {
    color: 'rgba(255,255,255,0.6)',
    fontSize: 16,
  },
  exerciseItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1E262C',
    padding: 12,
    borderRadius: 18,
  },
  exerciseThumb: {
    width: 56,
    height: 56,
    borderRadius: 12,
  },
  exerciseTitle: {
    color: '#ECEDEE',
    fontSize: 16,
    fontWeight: '600',
  },
  exerciseDuration: {
    color: 'rgba(255,255,255,0.6)',
    marginTop: 4,
    fontSize: 13,
  },
  exercisePlayButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#192126',
  },
  bottomCtaWrap: {
    position: 'absolute',
    left: 16,
    right: 16,
    bottom: 0,
  },
  bottomCta: {
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomCtaText: {
    color: '#192126',
    fontSize: 18,
    fontWeight: '800',
  },
});