import React, { useState } from "react";
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Image } from "react-native";
import { useTranslation } from 'react-i18next';
import MyStatusbar from "./component/MyStatusbar";
import MyHeader from "./component/MyHeader";
import LanguageModal from "./component/LanguageModal.tsx";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { RootStackParamList } from "../App";
import pxToDp from "./helper/pxToDp";
import DeviceInfo from "react-native-device-info";
import { LANGUAGES } from "./i18n";

type Props = NativeStackScreenProps<RootStackParamList>;

export default function SettingScreen({ navigation }: Props) {
  const { t, i18n } = useTranslation();
  const [languageModalVisible, setLanguageModalVisible] = useState(false);

  // 获取当前语言显示名称
  const getCurrentLanguageLabel = (): string => {
    const currentLang = i18n.language;
    const language = LANGUAGES.find(lang => lang.key === currentLang);
    return language?.label || '中文';
  };

  return (
    <View style={styles.container}>
      <MyStatusbar backgroundColor="#f2f3f7" dark></MyStatusbar>
      <MyHeader 
        title={t('settings.title')} 
        textColor="#333" 
        backgroundColor="#f2f3f7" 
        navigation={navigation}
      ></MyHeader>
      
      <View style={{ flex: 1, alignItems: 'center', paddingTop: pxToDp(24) }}>
        {/* 软件语言 */}
        <TouchableOpacity 
          style={styles.settingItem}
          onPress={() => setLanguageModalVisible(true)}
        >
          <View style={styles.settingItemLeft}>
            <Image 
              style={styles.icon} 
              source={require("./img/_SoftwareLanguage.png")}
            />
            <Text style={styles.settingLabel}>{t('settings.language')}</Text>
          </View>
          <View style={styles.settingItemRight}>
            <Text style={styles.settingValue}>{getCurrentLanguageLabel()}</Text>
            <Image 
              style={styles.arrow} 
              source={require("./img/Return2.png")}
            />
          </View>
        </TouchableOpacity>

        {/* 隐私协议 */}
        <TouchableOpacity 
          style={[styles.settingItem, { marginTop: pxToDp(20) }]}
          onPress={() => navigation.navigate("Privacy")}
        >
          <View style={styles.settingItemLeft}>
            <Image 
              style={styles.icon} 
              source={require("./img/_PrivacyAgreement.png")}
            />
            <Text style={styles.settingLabel}>{t('settings.privacy')}</Text>
          </View>
          <View style={styles.settingItemRight}>
            <Image 
              style={styles.arrow} 
              source={require("./img/Return2.png")}
            />
          </View>
        </TouchableOpacity>

        {/* 版本号 */}
        <View style={[styles.settingItem, { marginTop: pxToDp(20) }]}>
          <View style={styles.settingItemLeft}>
            <Image 
              style={styles.icon} 
              source={require("./img/_Versionnumber.png")}
            />
            <Text style={styles.settingLabel}>{t('settings.version')}</Text>
          </View>
          <View style={styles.settingItemRight}>
            <Text style={styles.settingValue}>{DeviceInfo.getVersion()}</Text>
          </View>
        </View>
      </View>

      {/* 语言切换弹窗 */}
      <LanguageModal
        visible={languageModalVisible}
        onClose={() => setLanguageModalVisible(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f2f3f7",
  },
  settingItem: {
    width: pxToDp(670),
    height: pxToDp(108),
    borderRadius: pxToDp(24),
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: pxToDp(32),
  },
  settingItemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  settingItemRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: pxToDp(40),
    height: pxToDp(40),
    marginRight: pxToDp(12),
  },
  settingLabel: {
    fontSize: pxToDp(30),
    color: '#333',
  },
  settingValue: {
    fontSize: pxToDp(30),
    color: "#999",
    marginRight: pxToDp(14),
  },
  arrow: {
    width: pxToDp(14),
    height: pxToDp(24),
  },
});