import Constants from 'expo-constants';
import { Platform, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
import { useTranslation } from 'react-i18next';
import { clampContentWidth, isIPadLike } from '@/src/utils/device';

export default function SettingsScreen() {
  const { t } = useTranslation();
  const { width, height } = useWindowDimensions();
  const isTablet = isIPadLike(width, height);
  const contentWidth = isTablet ? clampContentWidth(width, 720, 24) : undefined;

  const version =
    Constants.expoConfig?.version ??
    // 兜底：部分环境下 expoConfig 可能为空
    'unknown';

  return (
    <View style={styles.container}>
      <View style={[styles.contentWrap, contentWidth ? { width: contentWidth } : null]}>
      <View style={styles.section}>
        <Text style={styles.label}>{t('settings.version')}</Text>
        <Text style={styles.value}>{version}</Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.cardTitle}>{t('settings.widgetTitle')}</Text>
        <Text style={styles.cardText}>{t('settings.widgetDesc')}</Text>
      </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, width: '100%', alignSelf: 'stretch', padding: 16 },
  contentWrap: {
    width: '100%',
    alignSelf: 'center',
    gap: 16,
  },
  section: {
    borderRadius: 14,
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#E5E7EB',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  label: { color: '#374151', fontSize: 16 },
  value: {
    color: '#111827',
    fontSize: 16,
    fontWeight: '600',
    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : undefined,
  },
  card: {
    borderRadius: 16,
    padding: 16,
    backgroundColor: '#111827',
  },
  cardTitle: { color: 'white', fontSize: 16, fontWeight: '700', marginBottom: 8 },
  cardText: { color: '#E5E7EB', fontSize: 14, lineHeight: 20 },
});