rebreak-monorepo/apps/rebreak-native/app/settings.tsx

import { Alert, Platform, Pressable, ScrollView, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { colors } from '../lib/theme';
import { useAuthStore } from '../stores/auth';
import { AppHeader } from '../components/AppHeader';

type SectionRow = {
  icon: React.ComponentProps<typeof Ionicons>['name'];
  iconColor: string;
  label: string;
  sublabel: string;
  soon?: boolean;
  destructive?: boolean;
  onPress?: () => void;
};

type Section = {
  key: string;
  title: string;
  rows: SectionRow[];
};

export default function SettingsScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();
  const { signOut } = useAuthStore();

  async function handleSignOut() {
    Alert.alert(
      t('auth.signOut'),
      '',
      [
        { text: t('common.cancel'), style: 'cancel' },
        {
          text: t('auth.signOut'),
          style: 'destructive',
          onPress: async () => {
            await signOut();
            router.replace('/');
          },
        },
      ],
    );
  }

  const sections: Section[] = [
    {
      key: 'profile',
      title: t('settings.section_profile'),
      rows: [
        {
          icon: 'person-outline',
          iconColor: '#6366f1',
          label: t('settings.profile_edit'),
          sublabel: t('settings.profile_edit_desc'),
          soon: true,
        },
        {
          icon: 'image-outline',
          iconColor: '#6366f1',
          label: t('settings.profile_avatar'),
          sublabel: t('settings.profile_avatar_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'theme',
      title: t('settings.section_theme'),
      rows: [
        {
          icon: 'color-palette-outline',
          iconColor: '#a78bfa',
          label: t('settings.theme'),
          sublabel: t('settings.theme_desc'),
          soon: true,
        },
        {
          icon: 'language-outline',
          iconColor: '#a78bfa',
          label: t('settings.language'),
          sublabel: t('settings.language_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'notifications',
      title: t('settings.section_notifications'),
      rows: [
        {
          icon: 'notifications-outline',
          iconColor: '#2563eb',
          label: t('settings.notifications_push'),
          sublabel: t('settings.notifications_push_desc'),
          soon: true,
        },
        {
          icon: 'flame-outline',
          iconColor: '#f97316',
          label: t('settings.notifications_streak'),
          sublabel: t('settings.notifications_streak_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'devices',
      title: t('settings.section_devices'),
      rows: [
        {
          icon: 'phone-portrait-outline',
          iconColor: '#16a34a',
          label: t('settings.devices'),
          sublabel: t('settings.devices_desc'),
          soon: true,
        },
        {
          icon: 'star-outline',
          iconColor: colors.brandOrange,
          label: t('settings.subscription'),
          sublabel: t('settings.subscription_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'lyra',
      title: t('settings.section_lyra'),
      rows: [
        {
          icon: 'mic-outline',
          iconColor: '#ec4899',
          label: t('settings.lyra_voice'),
          sublabel: t('settings.lyra_voice_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'account',
      title: t('settings.danger_section'),
      rows: [
        {
          icon: 'log-out-outline',
          iconColor: colors.textMuted,
          label: t('settings.sign_out'),
          sublabel: '',
          onPress: handleSignOut,
        },
        {
          icon: 'trash-outline',
          iconColor: colors.error,
          label: t('settings.delete_account'),
          sublabel: t('settings.delete_desc'),
          destructive: true,
          soon: true,
        },
      ],
    },
  ];

  if (__DEV__) {
    sections.push({
      key: 'debug',
      title: t('settings.section_debug'),
      rows: [
        {
          icon: 'bug-outline',
          iconColor: '#737373',
          label: t('settings.debug_llm'),
          sublabel: t('settings.debug_llm_desc'),
          soon: true,
        },
        {
          icon: 'volume-high-outline',
          iconColor: '#737373',
          label: t('settings.debug_tts'),
          sublabel: t('settings.debug_tts_desc'),
          soon: true,
        },
      ],
    });
  }

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

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingTop: 16,
          paddingBottom: insets.bottom + 40,
        }}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            backgroundColor: '#fef3c7',
            borderRadius: 14,
            padding: 14,
            marginBottom: 20,
            borderWidth: 1,
            borderColor: '#fde68a',
            flexDirection: 'row',
            gap: 10,
            alignItems: 'flex-start',
          }}
        >
          <Ionicons name="construct-outline" size={18} color="#b45309" style={{ marginTop: 1 }} />
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: '#78350f' }}>
              {t('settings.coming_soon_title')}
            </Text>
            <Text
              style={{
                fontSize: 12,
                fontFamily: 'Nunito_400Regular',
                color: '#92400e',
                marginTop: 4,
                lineHeight: 17,
              }}
            >
              {t('settings.coming_soon_desc')}
            </Text>
          </View>
        </View>

        {sections.map((section) => (
          <View key={section.key} style={{ marginBottom: 24 }}>
            <Text
              style={{
                fontSize: 11,
                color: '#a3a3a3',
                fontFamily: 'Nunito_600SemiBold',
                textTransform: 'uppercase',
                letterSpacing: 1,
                marginBottom: 8,
                marginLeft: 4,
              }}
            >
              {section.title}
            </Text>
            <View
              style={{
                backgroundColor: colors.surface,
                borderRadius: 14,
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0.05)',
                overflow: 'hidden',
              }}
            >
              {section.rows.map((row, i) => (
                <Pressable
                  key={row.label}
                  onPress={row.soon ? undefined : row.onPress}
                  disabled={row.soon}
                  style={({ pressed }) => ({
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 12,
                    paddingHorizontal: 14,
                    minHeight: 56,
                    borderBottomWidth: i < section.rows.length - 1 ? 1 : 0,
                    borderBottomColor: 'rgba(0,0,0,0.04)',
                    opacity: row.soon ? 0.5 : pressed ? 0.7 : 1,
                    backgroundColor: pressed && !row.soon ? '#f5f5f5' : 'transparent',
                  })}
                >
                  <View
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: 10,
                      backgroundColor: row.iconColor + '18',
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexShrink: 0,
                    }}
                  >
                    <Ionicons
                      name={row.icon}
                      size={18}
                      color={row.destructive ? colors.error : row.iconColor}
                    />
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text
                      style={{
                        fontSize: 15,
                        color: row.destructive ? colors.error : colors.text,
                        fontFamily: 'Nunito_600SemiBold',
                      }}
                    >
                      {row.label}
                    </Text>
                    {row.sublabel ? (
                      <Text
                        style={{
                          fontSize: 12,
                          color: colors.textMuted,
                          fontFamily: 'Nunito_400Regular',
                          marginTop: 2,
                        }}
                      >
                        {row.sublabel}
                      </Text>
                    ) : null}
                  </View>
                  {row.soon ? (
                    <Text
                      style={{
                        fontSize: 10,
                        color: '#a3a3a3',
                        fontFamily: 'Nunito_600SemiBold',
                        textTransform: 'uppercase',
                        letterSpacing: 0.5,
                        flexShrink: 0,
                      }}
                    >
                      {t('settings.soon_badge')}
                    </Text>
                  ) : (
                    <Ionicons
                      name="chevron-forward"
                      size={16}
                      color="#d4d4d8"
                      style={{ flexShrink: 0 }}
                    />
                  )}
                </Pressable>
              ))}
            </View>
          </View>
        ))}

        <Text
          style={{
            textAlign: 'center',
            fontSize: 11,
            color: '#a3a3a3',
            fontFamily: 'Nunito_400Regular',
            marginTop: 6,
            opacity: 0.7,
          }}
        >
          {t('settings.skeleton_footer')}
        </Text>
        <Text
          style={{
            textAlign: 'center',
            fontSize: 10,
            color: '#a3a3a3',
            fontFamily: 'Nunito_400Regular',
            marginTop: 4,
            opacity: 0.5,
          }}
        >
          {Platform.OS}
        </Text>
      </ScrollView>
    </View>
  );
}