import React, { useState } from 'react';
import { StyleSheet, Text, View, ScrollView, SafeAreaView, TouchableOpacity, Image, Switch } from 'react-native';
import { StatusBar } from 'expo-status-bar';

/**
 * 主屏幕组件 - 采用中文显示与注释
 * 包含计数器和主题切换功能
 */
export const MainScreen = () => {
  const [count, setCount] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 主题样式定义
  const theme = {
    background: isDarkMode ? '#1C1C1E' : '#F5F7FA',
    card: isDarkMode ? '#2C2C2E' : '#FFFFFF',
    text: isDarkMode ? '#FFFFFF' : '#1C1C1E',
    secondaryText: isDarkMode ? '#AEAEB2' : '#3A3A3C',
    accent: '#007AFF',
    border: isDarkMode ? '#3A3A3C' : '#E5E5EA',
  };

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
      <StatusBar style={isDarkMode ? 'light' : 'dark'} />
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        {/* 顶部标题栏 */}
        <View style={[styles.header, { backgroundColor: theme.accent }]}>
          <Text style={styles.headerTitle}>React Native 中文项目</Text>
          <Text style={styles.headerSubtitle}>跨平台移动端 & Web 应用</Text>
        </View>

        {/* 核心功能展示区 */}
        <View style={styles.content}>
          {/* 主题切换卡片 */}
          <View style={[styles.card, { backgroundColor: theme.card }]}>
            <View style={styles.switchRow}>
              <Text style={[styles.cardTitle, { color: theme.text, marginBottom: 0 }]}>
                {isDarkMode ? '深色模式' : '浅色模式'}
              </Text>
              <Switch
                value={isDarkMode}
                onValueChange={setIsDarkMode}
                trackColor={{ false: '#767577', true: '#34C759' }}
                thumbColor={isDarkMode ? '#FFFFFF' : '#f4f3f4'}
              />
            </View>
          </View>

          {/* 交互计数器卡片 */}
          <View style={[styles.card, { backgroundColor: theme.card }]}>
            <Text style={[styles.cardTitle, { color: theme.text }]}>交互计数器</Text>
            <View style={styles.counterContainer}>
              <Text style={[styles.counterText, { color: theme.text }]}>{count}</Text>
              <View style={styles.buttonRow}>
                <TouchableOpacity 
                  style={[styles.smallButton, { backgroundColor: theme.accent }]}
                  onPress={() => setCount(count + 1)}
                >
                  <Text style={styles.smallButtonText}>增加</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                  style={[styles.smallButton, { backgroundColor: '#FF3B30' }]}
                  onPress={() => setCount(0)}
                >
                  <Text style={styles.smallButtonText}>重置</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>

          <View style={[styles.card, { backgroundColor: theme.card }]}>
            <Text style={[styles.cardTitle, { color: theme.text }]}>项目特点</Text>
            <View style={styles.featureItem}>
              <Text style={[styles.featureDot, { color: theme.accent }]}>•</Text>
              <Text style={[styles.featureText, { color: theme.secondaryText }]}>全面支持 iOS, Android 和 Web</Text>
            </View>
            <View style={styles.featureItem}>
              <Text style={[styles.featureDot, { color: theme.accent }]}>•</Text>
              <Text style={[styles.featureText, { color: theme.secondaryText }]}>中文界面与详细的代码注释</Text>
            </View>
            <View style={styles.featureItem}>
              <Text style={[styles.featureDot, { color: theme.accent }]}>•</Text>
              <Text style={[styles.featureText, { color: theme.secondaryText }]}>响应式布局，适配多种屏幕尺寸</Text>
            </View>
          </View>

          {/* 交互示例 */}
          <TouchableOpacity 
            style={[styles.button, { backgroundColor: theme.accent }]}
            onPress={() => alert('欢迎使用 React Native!')}
          >
            <Text style={styles.buttonText}>点击交互示例</Text>
          </TouchableOpacity>

          {/* 底部信息 */}
          <View style={styles.footer}>
            <Text style={[styles.footerText, { color: isDarkMode ? '#636366' : '#8E8E93' }]}>
              © 2024 中文 React Native 项目
            </Text>
            <Text style={[styles.footerText, { color: isDarkMode ? '#636366' : '#8E8E93' }]}>
              由 Trae AI 强力驱动
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  scrollContainer: {
    flexGrow: 1,
  },
  header: {
    padding: 30,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 10,
    elevation: 5,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 8,
  },
  headerSubtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  content: {
    padding: 20,
    gap: 15,
  },
  card: {
    borderRadius: 16,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 2,
  },
  switchRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  cardTitle: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 15,
    borderLeftWidth: 4,
    borderLeftColor: '#007AFF',
    paddingLeft: 10,
  },
  counterContainer: {
    alignItems: 'center',
    paddingVertical: 10,
  },
  counterText: {
    fontSize: 48,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  buttonRow: {
    flexDirection: 'row',
    gap: 15,
  },
  smallButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
    minWidth: 80,
    alignItems: 'center',
  },
  smallButtonText: {
    color: '#FFFFFF',
    fontWeight: '600',
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  featureDot: {
    fontSize: 18,
    marginRight: 10,
  },
  featureText: {
    fontSize: 16,
    lineHeight: 24,
  },
  button: {
    borderRadius: 12,
    paddingVertical: 15,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '600',
  },
  footer: {
    marginTop: 30,
    marginBottom: 20,
    alignItems: 'center',
  },
  footerText: {
    fontSize: 14,
    lineHeight: 20,
  },
});