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";
import { BRAND_NAME, THEME } from "./theme";

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={THEME.background} dark={false}></MyStatusbar>
      <MyHeader 
        title={t('settings.title')} 
        textColor={THEME.text}
        backgroundColor={THEME.background}
        navigation={navigation}
      ></MyHeader>
      
      <View style={{ flex: 1, alignItems: 'center', paddingTop: pxToDp(24) }}>
        <View style={styles.brandBlock}>
          <Text style={styles.brandName}>{BRAND_NAME}</Text>
          <Text style={styles.brandHint}>{t('settings.brandHint')}</Text>
        </View>
        {/* 软件语言 */}
        <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: THEME.background,
  },
  brandBlock: {
    width: pxToDp(670),
    paddingHorizontal: pxToDp(8),
    marginBottom: pxToDp(18),
  },
  brandName: {
    color: THEME.text,
    fontSize: pxToDp(34),
    fontWeight: "700",
    letterSpacing: 1.4,
  },
  brandHint: {
    color: THEME.textMuted,
    fontSize: pxToDp(24),
    marginTop: pxToDp(10),
  },
  settingItem: {
    width: pxToDp(670),
    height: pxToDp(108),
    borderRadius: pxToDp(24),
    backgroundColor: THEME.surface,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: pxToDp(32),
    borderWidth: 1,
    borderColor: THEME.border,
  },
  settingItemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  settingItemRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: pxToDp(40),
    height: pxToDp(40),
    marginRight: pxToDp(12),
    tintColor: THEME.text,
  },
  settingLabel: {
    fontSize: pxToDp(30),
    color: THEME.text,
  },
  settingValue: {
    fontSize: pxToDp(30),
    color: THEME.textMuted,
    marginRight: pxToDp(14),
  },
  arrow: {
    width: pxToDp(14),
    height: pxToDp(24),
    tintColor: THEME.textMuted,
  },
});
