import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function GoalDemoScreen() {
  const router = useRouter();
  const theme = useColorScheme() ?? 'light';
  const colorTokens = Colors[theme];

  return (
    <SafeAreaView style={styles.container}>
      <LinearGradient
        colors={[
          colorTokens.backgroundGradientStart,
          colorTokens.backgroundGradientEnd,
        ]}
        style={styles.backgroundGradient}
      />

      <View style={styles.content}>
        <View style={styles.header}>
          <TouchableOpacity
            style={[styles.backButton, { backgroundColor: colorTokens.card }]}
            onPress={() => router.back()}
          >
            <Ionicons name="arrow-back" size={24} color={colorTokens.text} />
          </TouchableOpacity>

          <Text style={[styles.title, { color: colorTokens.text }]}>
            目标管理演示
          </Text>
        </View>

        <View style={styles.demoContainer}>
          <View style={[styles.demoCard, { backgroundColor: colorTokens.card }]}>
            <View style={styles.iconContainer}>
              <Ionicons name="flag" size={48} color={colorTokens.primary} />
            </View>

            <Text style={[styles.demoTitle, { color: colorTokens.text }]}>
              智能目标管理系统
            </Text>

            <Text style={[styles.demoDescription, { color: colorTokens.textSecondary }]}>
              体验高保真的目标管理界面，包含待办事项卡片滑动、时间筛选器和可滚动时间轴。界面完全按照您的需求设计，支持：
            </Text>

            <View style={styles.featureList}>
              <View style={styles.featureItem}>
                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
                  横向滑动的待办事项卡片（首屏1.5张）
                </Text>
              </View>

              <View style={styles.featureItem}>
                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
                  天/周/月时间筛选选择器
                </Text>
              </View>

              <View style={styles.featureItem}>
                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
                  可滚动的时间轴和任务显示
                </Text>
              </View>

              <View style={styles.featureItem}>
                <Ionicons name="checkmark-circle" size={16} color={colorTokens.primary} />
                <Text style={[styles.featureText, { color: colorTokens.textSecondary }]}>
                  支持同一时间多任务的左右上下滑动
                </Text>
              </View>
            </View>

            <TouchableOpacity
              style={[styles.enterButton, { backgroundColor: colorTokens.primary }]}
              onPress={() => router.push('/goals')}
            >
              <Text style={[styles.enterButtonText, { color: colorTokens.onPrimary }]}>
                进入目标管理页面
              </Text>
              <Ionicons name="arrow-forward" size={20} color={colorTokens.onPrimary} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundGradient: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  content: {
    flex: 1,
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 30,
    marginTop: 20,
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 24,
    fontWeight: '800',
  },
  demoContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  demoCard: {
    borderRadius: 24,
    padding: 32,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.15,
    shadowRadius: 20,
    elevation: 10,
    alignItems: 'center',
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#E6F3FF',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 24,
  },
  demoTitle: {
    fontSize: 24,
    fontWeight: '700',
    marginBottom: 16,
    textAlign: 'center',
  },
  demoDescription: {
    fontSize: 16,
    lineHeight: 24,
    textAlign: 'center',
    marginBottom: 24,
  },
  featureList: {
    alignSelf: 'stretch',
    marginBottom: 32,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  featureText: {
    fontSize: 14,
    marginLeft: 8,
    flex: 1,
  },
  enterButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 32,
    paddingVertical: 16,
    borderRadius: 28,
    shadowColor: '#87CEEB',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  enterButtonText: {
    fontSize: 16,
    fontWeight: '700',
    marginRight: 8,
  },
});