import { SectionCard } from '@/components/profile/SectionCard';
import { SettingItem } from '@/components/profile/SettingItem';
import { AppColors } from '@/constants/theme';
import { mockUserProfile, settingsSections } from '@/data/mockData';
import { Ionicons } from '@expo/vector-icons';
import React, { useState } from 'react';
import { Alert, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function ProfileScreen() {
  const [settings, setSettings] = useState({
    largeFont: false,
    darkMode: false,
    reminder: true,
  });

  const handleToggle = (key: keyof typeof settings) => (value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  const showToast = (message: string) => {
    Alert.alert('提示', message);
  };

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <ScrollView 
        style={styles.content}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
      >
        {/* Profile Header */}
        <View style={styles.profileHeader}>
          <View style={styles.avatar}>
            <Ionicons 
              name="person-outline" 
              size={36} 
              color={AppColors.deepPurple} 
            />
          </View>
          <Text style={styles.profileName}>{mockUserProfile.nickname}</Text>
          <View style={styles.planBadge}>
            <View style={styles.planDot} />
            <Text style={styles.planText}>{mockUserProfile.planLabel}</Text>
          </View>
        </View>

        {/* Payment Section */}
        <SectionCard title={settingsSections.payment.title}>
          {settingsSections.payment.items.map((item, index) => (
            <SettingItem
              key={item.id}
              icon={item.icon}
              label={item.label}
              description={item.description}
              type={item.type}
              isLast={index === settingsSections.payment.items.length - 1}
              onPress={() => showToast('功能开发中...')}
            />
          ))}
        </SectionCard>

        {/* Privacy Section */}
        {/* <SectionCard title={settingsSections.privacy.title}>
          {settingsSections.privacy.items.map((item, index) => (
            <SettingItem
              key={item.id}
              icon={item.icon}
              label={item.label}
              description={item.description}
              type={item.type}
              isLast={index === settingsSections.privacy.items.length - 1}
              onPress={() => showToast('数据导出中...')}
            />
          ))}
        </SectionCard> */}

        {/* Settings Section */}
        {/* <SectionCard title={settingsSections.settings.title}>
          <SettingItem
            icon="time-outline"
            label="语速"
            description="标准"
            type="arrow"
            onPress={() => showToast('功能开发中...')}
          />
          <SettingItem
            icon="text-outline"
            label="大字模式"
            type="toggle"
            value={settings.largeFont}
            onToggle={handleToggle('largeFont')}
          />
          <SettingItem
            icon="moon-outline"
            label="夜间模式"
            type="toggle"
            value={settings.darkMode}
            onToggle={handleToggle('darkMode')}
            isLast
          />
        </SectionCard> */}

        {/* Help Section */}
        <SectionCard title={settingsSections.help.title}>
          {settingsSections.help.items.map((item, index) => (
            <SettingItem
              key={item.id}
              icon={item.icon}
              label={item.label}
              type={item.type}
              isLast={index === settingsSections.help.items.length - 1}
              onPress={() => showToast('功能开发中...')}
            />
          ))}
        </SectionCard>

        {/* Version Info */}
        <Text style={styles.version}>版本 1.0.0</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.cream,
  },
  content: {
    flex: 1,
  },
  contentContainer: {
    padding: 20,
    paddingTop: 28,
    paddingBottom: 40,
  },
  profileHeader: {
    alignItems: 'center',
    paddingVertical: 20,
    marginBottom: 4,
  },
  avatar: {
    width: 72,
    height: 72,
    borderRadius: 36,
    backgroundColor: AppColors.lavender,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 12,
  },
  profileName: {
    fontSize: 18,
    fontWeight: '600',
    color: AppColors.deepPurple,
    marginBottom: 4,
  },
  planBadge: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  planDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: AppColors.mediumPurple,
    marginRight: 4,
  },
  planText: {
    fontSize: 13,
    color: AppColors.mediumPurple,
  },
  version: {
    textAlign: 'center',
    fontSize: 12,
    color: AppColors.slatePurple,
    marginTop: 20,
  },
});