import Constants from 'expo-constants';
import React from 'react';
import { View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { SafeAreaView } from 'react-native-safe-area-context';

import { Text } from '@/components/ui/text';
import { ScreenHeader } from '@/components/screen-header';
import { config } from '@/core/config';

export default function AboutScreen() {
  const { t } = useTranslation('profile');
  const version = Constants.expoConfig?.version ?? '1.0.0';
  const showBackend = config.showAboutBackendUrl;

  return (
    <View className="flex-1 bg-background">
      <ScreenHeader title={t('about.title')} />
      <SafeAreaView className="flex-1 items-center justify-center gap-4 px-6">
        <Text variant="h2" className="text-foreground">
          {t('about.appName')}
        </Text>
        <Text className="text-muted-foreground">{t('about.appSubtitle')}</Text>
        <Text className="text-sm text-muted-foreground">
          {t('about.version', { version })}
        </Text>
        {showBackend ? (
          <View className="w-full max-w-sm items-center gap-1">
            <Text className="text-sm text-muted-foreground">
              {t('about.backend')}
            </Text>
            <Text
              selectable
              className="text-center font-mono text-xs text-muted-foreground"
            >
              {config.apiBaseUrl}
            </Text>
          </View>
        ) : null}
        <Text className="mt-8 text-center text-sm leading-5 text-muted-foreground">
          {t('about.tagline')}
        </Text>
      </SafeAreaView>
    </View>
  );
}