import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';

export default function AboutScreen() {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
      <AppHeader showBack title={t('help.about_title')} />

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingTop: 20,
          paddingBottom: insets.bottom + 40,
        }}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            backgroundColor: colors.card,
            borderRadius: 14,
            padding: 16,
            marginBottom: 16,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.04,
            shadowRadius: 3,
            elevation: 1,
          }}
        >
          <Text
            style={{
              fontSize: 22,
              fontFamily: 'Nunito_800ExtraBold',
              color: colors.text,
              marginBottom: 12,
            }}
          >
            {t('help.about_headline')}
          </Text>
          <Text
            style={{
              fontSize: 15,
              fontFamily: 'Nunito_400Regular',
              color: colors.text,
              lineHeight: 24,
            }}
          >
            {t('help.about_body')}
          </Text>
        </View>

        <View
          style={{
            backgroundColor: colors.card,
            borderRadius: 14,
            overflow: 'hidden',
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.04,
            shadowRadius: 3,
            elevation: 1,
          }}
        >
          {(
            [
              { icon: 'shield-checkmark-outline', label: t('help.about_fact_diga') },
              { icon: 'server-outline', label: t('help.about_fact_servers') },
              { icon: 'lock-closed-outline', label: t('help.about_fact_privacy') },
            ] as { icon: React.ComponentProps<typeof Ionicons>['name']; label: string }[]
          ).map((item, i, arr) => (
            <View
              key={item.icon}
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 14,
                paddingHorizontal: 16,
                paddingVertical: 14,
                borderBottomWidth: i < arr.length - 1 ? 1 : 0,
                borderBottomColor: colors.border,
              }}
            >
              <View
                style={{
                  width: 34,
                  height: 34,
                  borderRadius: 10,
                  backgroundColor: colors.surfaceElevated,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Ionicons name={item.icon} size={17} color={colors.textMuted} />
              </View>
              <Text
                style={{
                  flex: 1,
                  fontSize: 14,
                  fontFamily: 'Nunito_400Regular',
                  color: colors.text,
                  lineHeight: 20,
                }}
              >
                {item.label}
              </Text>
            </View>
          ))}
        </View>

        <TouchableOpacity
          onPress={() => Linking.openURL('https://rebreak.org')}
          activeOpacity={0.7}
          style={{ marginTop: 20, alignItems: 'center' }}
        >
          <Text
            style={{
              fontSize: 13,
              fontFamily: 'Nunito_400Regular',
              color: '#6366f1',
            }}
          >
            rebreak.org
          </Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}