@oxyhq/services 6.10.8 → 7.0.0

package/src/ui/screens/ManageAccountScreen.tsx

@@ -0,0 +1,1102 @@
+import type React from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import {
+    View,
+    Text,
+    ScrollView,
+    StyleSheet,
+    ActivityIndicator,
+    TouchableOpacity,
+    RefreshControl,
+    Platform,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import {
+    getAccountDisplayName,
+    getAccountFallbackHandle,
+    logger as loggerUtil,
+    packageInfo,
+} from '@oxyhq/core';
+import type { BaseScreenProps } from '../types/navigation';
+import Header from '../components/Header';
+import Avatar from '../components/Avatar';
+import { SettingsIcon } from '../components/SettingsIcon';
+import DeleteAccountModal from '../components/modals/DeleteAccountModal';
+import { useOxy } from '../context/OxyContext';
+import { useI18n } from '../hooks/useI18n';
+import { useCurrentUser } from '../hooks/queries/useAccountQueries';
+import { useUserSubscription } from '../hooks/queries/usePaymentQueries';
+import { useDeviceSessions } from '../hooks/queries/useServicesQueries';
+import { useColorScheme } from '../hooks/useColorScheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
+import { screenContentStyle } from '../constants/spacing';
+
+interface DeviceSessionRow {
+    sessionId: string;
+    deviceId: string;
+    deviceName: string;
+    isActive: boolean;
+    lastActive: string;
+    expiresAt: string;
+    isCurrent: boolean;
+}
+
+const formatRelative = (dateString?: string): string => {
+    if (!dateString) {
+        return '—';
+    }
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    const absMin = Math.abs(diffMs) / 60000;
+    const isFuture = diffMs > 0;
+    if (absMin < 1) {
+        return isFuture ? 'in moments' : 'just now';
+    }
+    if (absMin < 60) {
+        const v = Math.floor(absMin);
+        return isFuture ? `in ${v}m` : `${v}m ago`;
+    }
+    const hrs = absMin / 60;
+    if (hrs < 24) {
+        const v = Math.floor(hrs);
+        return isFuture ? `in ${v}h` : `${v}h ago`;
+    }
+    const days = hrs / 24;
+    if (days < 7) {
+        const v = Math.floor(days);
+        return isFuture ? `in ${v}d` : `${v}d ago`;
+    }
+    return date.toLocaleDateString();
+};
+
+/**
+ * Unified "Manage your Oxy Account" screen.
+ *
+ * Replaces AccountOverview + AccountSettings + the per-account half of
+ * SessionManagement. Lists ONLY the active user's profile, sessions on this
+ * device, and security/destructive actions for THIS account. Multi-account
+ * surface lives in {@link AccountMenu} — keep these concerns separate.
+ */
+const ManageAccountScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    goBack,
+    navigate,
+    theme,
+}) => {
+    const bloomTheme = useTheme();
+    const { t, locale } = useI18n();
+    const colorScheme = useColorScheme();
+    const palette = useMemo(
+        () => Colors[normalizeColorScheme(colorScheme, normalizeTheme(theme))],
+        [colorScheme, theme],
+    );
+    const {
+        user: contextUser,
+        isAuthenticated,
+        oxyServices,
+        activeSessionId,
+        logout,
+        openAvatarPicker,
+        managedAccounts,
+    } = useOxy();
+
+    const { data: userFromQuery, isLoading: userLoading } = useCurrentUser({
+        enabled: isAuthenticated,
+    });
+    const user = userFromQuery ?? contextUser;
+
+    const { data: subscription } = useUserSubscription({ enabled: isAuthenticated });
+    const {
+        data: deviceSessions,
+        isLoading: deviceSessionsLoading,
+        refetch: refetchDeviceSessions,
+        isRefetching: deviceSessionsRefetching,
+    } = useDeviceSessions({ enabled: isAuthenticated && !!activeSessionId });
+
+    const signOutDialog = useDialogControl();
+    const signOutAllDevicesDialog = useDialogControl();
+    const removeDeviceDialog = useDialogControl();
+    const downloadDataDialog = useDialogControl();
+    const deleteAccountDialog = useDialogControl();
+
+    const [pendingRemoveDevice, setPendingRemoveDevice] = useState<DeviceSessionRow | null>(null);
+    const [removingDeviceId, setRemovingDeviceId] = useState<string | null>(null);
+    const [signingOutAllDevices, setSigningOutAllDevices] = useState(false);
+    const [signingOut, setSigningOut] = useState(false);
+
+    const displayName = useMemo(() => getAccountDisplayName(user, locale), [user, locale]);
+    const handle = useMemo(() => getAccountFallbackHandle(user), [user]);
+    const avatarUri = useMemo(() => {
+        return user?.avatar
+            ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb')
+            : undefined;
+    }, [user?.avatar, oxyServices]);
+
+    const handleSignOut = useCallback(async () => {
+        if (signingOut) {
+            return;
+        }
+        setSigningOut(true);
+        try {
+            await logout();
+            toast.success(t('common.actions.signedOut') || 'Signed out');
+            onClose?.();
+        } catch (error) {
+            loggerUtil.warn('Sign out failed', { component: 'ManageAccountScreen' }, error as unknown);
+            toast.error(t('common.errors.signOutFailed') || 'Failed to sign out');
+        } finally {
+            setSigningOut(false);
+        }
+    }, [signingOut, logout, t, onClose]);
+
+    const confirmRemoveDevice = useCallback((device: DeviceSessionRow) => {
+        setPendingRemoveDevice(device);
+        removeDeviceDialog.open();
+    }, [removeDeviceDialog]);
+
+    const handleRemoveDevice = useCallback(async () => {
+        if (!pendingRemoveDevice || !activeSessionId) {
+            return;
+        }
+        const target = pendingRemoveDevice;
+        setRemovingDeviceId(target.sessionId);
+        try {
+            await oxyServices.logoutSession(activeSessionId, target.sessionId);
+            await refetchDeviceSessions();
+            toast.success(
+                t('manageAccount.toasts.deviceRemoved', { name: target.deviceName })
+                || `Signed out from ${target.deviceName}`,
+            );
+        } catch (error) {
+            loggerUtil.warn('Remove device failed', { component: 'ManageAccountScreen' }, error as unknown);
+            toast.error(t('manageAccount.toasts.deviceRemoveFailed') || 'Failed to remove device');
+        } finally {
+            setRemovingDeviceId(null);
+            setPendingRemoveDevice(null);
+        }
+    }, [pendingRemoveDevice, activeSessionId, oxyServices, refetchDeviceSessions, t]);
+
+    const handleSignOutAllDevices = useCallback(async () => {
+        if (!activeSessionId || signingOutAllDevices) {
+            return;
+        }
+        setSigningOutAllDevices(true);
+        try {
+            await oxyServices.logoutAllDeviceSessions(activeSessionId);
+            await refetchDeviceSessions();
+            toast.success(
+                t('manageAccount.toasts.allDevicesSignedOut')
+                || 'Signed out from all other devices',
+            );
+        } catch (error) {
+            loggerUtil.warn('Sign out all devices failed', { component: 'ManageAccountScreen' }, error as unknown);
+            toast.error(
+                t('manageAccount.toasts.allDevicesFailed')
+                || 'Failed to sign out from other devices',
+            );
+        } finally {
+            setSigningOutAllDevices(false);
+        }
+    }, [activeSessionId, signingOutAllDevices, oxyServices, refetchDeviceSessions, t]);
+
+    const performDownload = useCallback(
+        async (format: 'json' | 'csv') => {
+            if (!user) {
+                toast.error(
+                    t('accountOverview.items.downloadData.error') || 'Service not available',
+                );
+                return;
+            }
+            try {
+                toast.info(
+                    t('accountOverview.items.downloadData.downloading')
+                    || 'Preparing download...',
+                );
+                const blob = await oxyServices.downloadAccountData(format);
+                if (Platform.OS === 'web') {
+                    const url = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = `account-data-${Date.now()}.${format}`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(url);
+                }
+                toast.success(
+                    t('accountOverview.items.downloadData.success')
+                    || 'Data downloaded successfully',
+                );
+            } catch (error) {
+                loggerUtil.warn(
+                    'Download account data failed',
+                    { component: 'ManageAccountScreen' },
+                    error as unknown,
+                );
+                toast.error(
+                    (error instanceof Error ? error.message : null)
+                    || t('accountOverview.items.downloadData.error')
+                    || 'Failed to download data',
+                );
+            }
+        },
+        [oxyServices, user, t],
+    );
+
+    const handleConfirmDelete = useCallback(
+        async (confirmText: string) => {
+            if (!user) {
+                throw new Error(
+                    t('accountOverview.items.deleteAccount.error')
+                    || 'Service not available',
+                );
+            }
+            await oxyServices.deleteAccount(confirmText);
+            toast.success(
+                t('accountOverview.items.deleteAccount.success')
+                || 'Account deleted successfully',
+            );
+            deleteAccountDialog.close();
+            await logout();
+            onClose?.();
+        },
+        [oxyServices, user, logout, onClose, t, deleteAccountDialog],
+    );
+
+    const handleDownloadData = useCallback(() => {
+        if (!user) {
+            toast.error(
+                t('accountOverview.items.downloadData.error') || 'Service not available',
+            );
+            return;
+        }
+        downloadDataDialog.open();
+    }, [user, t, downloadDataDialog]);
+
+    const handleDeleteAccount = useCallback(() => {
+        if (!user) {
+            toast.error(
+                t('accountOverview.items.deleteAccount.error') || 'User not available',
+            );
+            return;
+        }
+        deleteAccountDialog.open();
+    }, [user, t, deleteAccountDialog]);
+
+    if (!isAuthenticated) {
+        return (
+            <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+                <Header
+                    title={t('manageAccount.title') || 'Manage your Oxy Account'}
+                    onBack={goBack || onClose}
+                    elevation="subtle"
+                />
+                <View style={styles.center}>
+                    <Text style={[styles.notSignedIn, { color: bloomTheme.colors.text }]}>
+                        {t('common.status.notSignedIn') || 'Not signed in'}
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+
+    if (userLoading && !user) {
+        return (
+            <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+                <Header
+                    title={t('manageAccount.title') || 'Manage your Oxy Account'}
+                    onBack={goBack || onClose}
+                    elevation="subtle"
+                />
+                <View style={styles.center}>
+                    <ActivityIndicator color={bloomTheme.colors.primary} size="large" />
+                </View>
+            </View>
+        );
+    }
+
+    const deviceRows: DeviceSessionRow[] = (deviceSessions ?? []) as DeviceSessionRow[];
+    const otherDevices = deviceRows.filter((d) => !d.isCurrent);
+
+    return (
+        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+            <Header
+                title={t('manageAccount.title') || 'Manage your Oxy Account'}
+                onBack={goBack || onClose}
+                elevation="subtle"
+            />
+            <ScrollView
+                style={styles.scroll}
+                contentContainerStyle={styles.scrollContent}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={deviceSessionsRefetching}
+                        onRefresh={refetchDeviceSessions}
+                        tintColor={bloomTheme.colors.primary}
+                    />
+                }
+            >
+                {/* Profile card */}
+                <View
+                    style={[
+                        styles.profileCard,
+                        { backgroundColor: bloomTheme.colors.card },
+                    ]}
+                >
+                    <TouchableOpacity
+                        onPress={openAvatarPicker}
+                        accessibilityRole="button"
+                        accessibilityLabel={t('editProfile.changeAvatar') || 'Change avatar'}
+                        style={styles.avatarTouchable}
+                    >
+                        <Avatar uri={avatarUri} name={displayName} size={88} />
+                        <View
+                            style={[
+                                styles.avatarBadge,
+                                { backgroundColor: bloomTheme.colors.primary },
+                            ]}
+                        >
+                            <Ionicons name="camera" size={14} color={bloomTheme.colors.negativeForeground} />
+                        </View>
+                    </TouchableOpacity>
+                    <Text
+                        style={[styles.displayName, { color: bloomTheme.colors.text }]}
+                        numberOfLines={1}
+                    >
+                        {displayName}
+                    </Text>
+                    {handle ? (
+                        <Text
+                            style={[styles.handle, { color: bloomTheme.colors.textSecondary }]}
+                            numberOfLines={1}
+                        >
+                            {user?.username ? `@${handle}` : handle}
+                        </Text>
+                    ) : null}
+                    {user?.email ? (
+                        <Text
+                            style={[styles.email, { color: bloomTheme.colors.textSecondary }]}
+                            numberOfLines={1}
+                        >
+                            {user.email}
+                        </Text>
+                    ) : null}
+                </View>
+
+                {/* Profile section */}
+                <SettingsListGroup title={t('manageAccount.sections.profile') || 'Profile'}>
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="account-circle"
+                                color={palette.iconPersonalInfo}
+                            />
+                        }
+                        title={t('manageAccount.items.editProfile.title') || 'Edit profile'}
+                        description={
+                            t('manageAccount.items.editProfile.subtitle')
+                            || 'Name, username, bio, links'
+                        }
+                        onPress={() =>
+                            navigate?.('EditProfileField', { field: 'username' })
+                        }
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="palette"
+                                color={palette.iconData}
+                            />
+                        }
+                        title={t('manageAccount.items.theme.title') || 'Theme color'}
+                        description={
+                            t('manageAccount.items.theme.subtitle')
+                            || 'Personalize your Bloom color'
+                        }
+                        onPress={() =>
+                            navigate?.('EditProfileField', { field: 'color' })
+                        }
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="eye"
+                                color={palette.iconHome}
+                            />
+                        }
+                        title={t('editProfile.items.previewProfile.title') || 'Preview profile'}
+                        description={
+                            t('editProfile.items.previewProfile.subtitle')
+                            || 'See how your profile looks to others'
+                        }
+                        onPress={() =>
+                            user?.id ? navigate?.('Profile', { userId: user.id }) : undefined
+                        }
+                        disabled={!user?.id}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="check-circle"
+                                color={palette.iconPersonalInfo}
+                            />
+                        }
+                        title={
+                            t('editProfile.items.verifyAccount.title') || 'Verify account'
+                        }
+                        description={
+                            t('editProfile.items.verifyAccount.subtitle')
+                            || 'Get a verified badge'
+                        }
+                        onPress={() => navigate?.('AccountVerification')}
+                    />
+                </SettingsListGroup>
+
+                {/* Sessions section */}
+                <SettingsListGroup
+                    title={t('manageAccount.sections.sessions') || 'Sessions & devices'}
+                >
+                    {deviceSessionsLoading ? (
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon name="sync" color={bloomTheme.colors.primary} />
+                            }
+                            title={
+                                t('manageAccount.sessions.loading') || 'Loading sessions…'
+                            }
+                            rightElement={
+                                <ActivityIndicator
+                                    color={bloomTheme.colors.primary}
+                                    size="small"
+                                />
+                            }
+                            showChevron={false}
+                            disabled
+                        />
+                    ) : deviceRows.length === 0 ? (
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="cellphone"
+                                    color={bloomTheme.colors.textTertiary}
+                                />
+                            }
+                            title={t('manageAccount.sessions.empty') || 'No active sessions'}
+                            showChevron={false}
+                            disabled
+                        />
+                    ) : (
+                        deviceRows.map((device) => (
+                            <SettingsListItem
+                                key={`device-${device.sessionId}`}
+                                icon={
+                                    <SettingsIcon
+                                        name={device.isCurrent ? 'cellphone' : 'cellphone-basic'}
+                                        color={
+                                            device.isCurrent
+                                                ? bloomTheme.colors.success
+                                                : bloomTheme.colors.primary
+                                        }
+                                    />
+                                }
+                                title={`${device.deviceName}${device.isCurrent ? ` (${t('manageAccount.sessions.thisDevice') || 'This device'})` : ''}`}
+                                description={
+                                    t('manageAccount.sessions.lastActive', {
+                                        relative: formatRelative(device.lastActive),
+                                    }) || `Last active ${formatRelative(device.lastActive)}`
+                                }
+                                onPress={
+                                    device.isCurrent
+                                        ? undefined
+                                        : () => confirmRemoveDevice(device)
+                                }
+                                disabled={
+                                    device.isCurrent
+                                    || removingDeviceId === device.sessionId
+                                }
+                                rightElement={
+                                    !device.isCurrent ? (
+                                        removingDeviceId === device.sessionId ? (
+                                            <ActivityIndicator
+                                                color={bloomTheme.colors.error}
+                                                size="small"
+                                            />
+                                        ) : (
+                                            <Ionicons
+                                                name="log-out-outline"
+                                                size={18}
+                                                color={bloomTheme.colors.error}
+                                            />
+                                        )
+                                    ) : undefined
+                                }
+                                showChevron={false}
+                            />
+                        ))
+                    )}
+                    {otherDevices.length > 0 ? (
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="logout"
+                                    color={bloomTheme.colors.error}
+                                />
+                            }
+                            title={
+                                t('manageAccount.sessions.signOutAllOnThisDevice')
+                                || 'Sign out of all other devices'
+                            }
+                            description={
+                                t('manageAccount.sessions.signOutAllSubtitle', {
+                                    count: otherDevices.length,
+                                })
+                                || `End ${otherDevices.length} other device session(s)`
+                            }
+                            onPress={() => signOutAllDevicesDialog.open()}
+                            destructive
+                            showChevron={false}
+                            disabled={signingOutAllDevices}
+                            rightElement={
+                                signingOutAllDevices ? (
+                                    <ActivityIndicator
+                                        color={bloomTheme.colors.error}
+                                        size="small"
+                                    />
+                                ) : undefined
+                            }
+                        />
+                    ) : null}
+                </SettingsListGroup>
+
+                {/* Security section */}
+                <SettingsListGroup
+                    title={t('manageAccount.sections.security') || 'Security'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="shield-check"
+                                color={palette.iconSecurity}
+                            />
+                        }
+                        title={
+                            t('manageAccount.items.security.title') || 'Security settings'
+                        }
+                        description={
+                            t('manageAccount.items.security.subtitle')
+                            || 'Password, 2FA, recovery'
+                        }
+                        onPress={() => navigate?.('PrivacySettings')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="star"
+                                color={palette.iconPayments}
+                            />
+                        }
+                        title={
+                            t('accountOverview.items.premium.title') || 'Oxy+'
+                        }
+                        description={
+                            user?.isPremium
+                                ? (t('accountOverview.items.premium.manage') || 'Manage your premium plan')
+                                : (t('accountOverview.items.premium.upgrade') || 'Upgrade to premium features')
+                        }
+                        onPress={() => navigate?.('PremiumSubscription')}
+                    />
+                    {user?.isPremium || subscription?.status === 'active' ? (
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="credit-card"
+                                    color={palette.iconPersonalInfo}
+                                />
+                            }
+                            title={
+                                t('manageAccount.items.billing.title') || 'Billing'
+                            }
+                            description={
+                                t('manageAccount.items.billing.subtitle')
+                                || 'Manage subscription and payment methods'
+                            }
+                            onPress={() => navigate?.('PaymentGateway')}
+                        />
+                    ) : null}
+                </SettingsListGroup>
+
+                {/* Account & data */}
+                <SettingsListGroup
+                    title={t('accountOverview.sections.quickActions') || 'Account & data'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="clock" color={palette.iconSecurity} />
+                        }
+                        title={t('accountOverview.items.history.title') || 'History'}
+                        description={
+                            t('accountOverview.items.history.subtitle')
+                            || 'View and manage your search history'
+                        }
+                        onPress={() => navigate?.('HistoryView')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="bookmark" color={palette.iconStorage} />
+                        }
+                        title={
+                            t('accountOverview.items.saves.title') || 'Saves & Collections'
+                        }
+                        description={
+                            t('accountOverview.items.saves.subtitle')
+                            || 'View your saved items and collections'
+                        }
+                        onPress={() => navigate?.('SavesCollections')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="folder" color={palette.iconStorage} />
+                        }
+                        title={
+                            t('accountCenter.items.fileManagement.title') || 'Files'
+                        }
+                        description={
+                            t('accountCenter.items.fileManagement.subtitle')
+                            || 'Upload, download, and manage your files'
+                        }
+                        onPress={() => navigate?.('FileManagement')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="download"
+                                color={palette.iconPersonalInfo}
+                            />
+                        }
+                        title={
+                            t('accountOverview.items.downloadData.title')
+                            || 'Download your data'
+                        }
+                        description={
+                            t('accountOverview.items.downloadData.subtitle')
+                            || 'Export a copy of your account data'
+                        }
+                        onPress={handleDownloadData}
+                    />
+                </SettingsListGroup>
+
+                {/* Managed accounts */}
+                {managedAccounts.length > 0 || isAuthenticated ? (
+                    <SettingsListGroup
+                        title={
+                            t('accountCenter.sections.managedAccounts')
+                            || 'Managed accounts'
+                        }
+                    >
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="account-switch"
+                                    color={palette.iconStorage}
+                                />
+                            }
+                            title={
+                                t('accountCenter.items.manageIdentities.title')
+                                || 'Manage identities'
+                            }
+                            description={
+                                managedAccounts.length > 0
+                                    ? (
+                                        t('accountCenter.items.manageIdentities.count', {
+                                            count: managedAccounts.length,
+                                        })
+                                        || `${managedAccounts.length} managed ${managedAccounts.length === 1 ? 'identity' : 'identities'}`
+                                    )
+                                    : (
+                                        t('accountCenter.items.manageIdentities.empty')
+                                        || 'Sub-accounts you control'
+                                    )
+                            }
+                            onPress={() => navigate?.('CreateManagedAccount')}
+                        />
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="account-plus"
+                                    color={palette.iconPersonalInfo}
+                                />
+                            }
+                            title={
+                                t('accountCenter.items.createIdentity.title')
+                                || 'Create new identity'
+                            }
+                            description={
+                                t('accountCenter.items.createIdentity.subtitle')
+                                || 'Add a managed sub-account'
+                            }
+                            onPress={() => navigate?.('CreateManagedAccount')}
+                        />
+                    </SettingsListGroup>
+                ) : null}
+
+                {/* Preferences */}
+                <SettingsListGroup
+                    title={t('manageAccount.sections.preferences') || 'Preferences'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="cog" color={palette.iconData} />
+                        }
+                        title={t('preferences.title') || 'Preferences'}
+                        description={
+                            t('preferences.subtitle')
+                            || 'Theme, motion, and regional settings'
+                        }
+                        onPress={() => navigate?.('Preferences')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="bell" color={palette.iconPersonalInfo} />
+                        }
+                        title={t('notifications.title') || 'Notifications'}
+                        description={
+                            t('notifications.subtitle')
+                            || 'Manage push, email, and security alerts'
+                        }
+                        onPress={() => navigate?.('Notifications')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="translate" color={palette.iconPersonalInfo} />
+                        }
+                        title={t('language.title') || 'Language'}
+                        description={
+                            t('language.subtitle') || 'Choose your preferred language'
+                        }
+                        onPress={() => navigate?.('LanguageSelector')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="apps" color={palette.iconData} />
+                        }
+                        title={t('connectedApps.title') || 'Connected apps'}
+                        description={
+                            t('connectedApps.subtitle')
+                            || 'Manage third-party app access'
+                        }
+                        onPress={() => navigate?.('ConnectedApps')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="magnify" color={palette.iconSecurity} />
+                        }
+                        title={
+                            t('accountOverview.items.searchSettings.title') || 'Search settings'
+                        }
+                        description={
+                            t('accountOverview.items.searchSettings.subtitle')
+                            || 'SafeSearch and personalization'
+                        }
+                        onPress={() => navigate?.('SearchSettings')}
+                    />
+                </SettingsListGroup>
+
+                {/* Support */}
+                <SettingsListGroup
+                    title={t('accountOverview.sections.support') || 'Support'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="help-circle" color={palette.iconSecurity} />
+                        }
+                        title={t('accountOverview.items.help.title') || 'Help & support'}
+                        description={
+                            t('accountOverview.items.help.subtitle')
+                            || 'Get help and contact support'
+                        }
+                        onPress={() => navigate?.('HelpSupport')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="message-text"
+                                color={palette.iconData}
+                            />
+                        }
+                        title={t('feedback.title') || 'Send feedback'}
+                        description={
+                            t('feedback.subtitle') || 'Tell us what you think'
+                        }
+                        onPress={() => navigate?.('Feedback')}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="information" color={palette.iconHome} />
+                        }
+                        title={t('accountOverview.items.about.title') || 'About'}
+                        description={
+                            t('accountOverview.items.about.subtitle')
+                            || 'Version and system details'
+                        }
+                        onPress={() => navigate?.('AppInfo')}
+                    />
+                </SettingsListGroup>
+
+                {/* Legal */}
+                <SettingsListGroup
+                    title={t('manageAccount.sections.legal') || 'Legal'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="shield-check"
+                                color={palette.iconPersonalInfo}
+                            />
+                        }
+                        title={
+                            t('accountOverview.items.privacyPolicy.title') || 'Privacy policy'
+                        }
+                        description={
+                            t('accountOverview.items.privacyPolicy.subtitle')
+                            || 'How we handle your data'
+                        }
+                        onPress={() => navigate?.('LegalDocuments', { initialStep: 1 })}
+                    />
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon
+                                name="file-document"
+                                color={palette.iconSecurity}
+                            />
+                        }
+                        title={
+                            t('accountOverview.items.termsOfService.title') || 'Terms of service'
+                        }
+                        description={
+                            t('accountOverview.items.termsOfService.subtitle')
+                            || 'Terms and conditions of use'
+                        }
+                        onPress={() => navigate?.('LegalDocuments', { initialStep: 2 })}
+                    />
+                </SettingsListGroup>
+
+                {/* Danger zone */}
+                <SettingsListGroup
+                    title={t('manageAccount.sections.dangerZone') || 'Danger zone'}
+                >
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="delete" color={bloomTheme.colors.error} />
+                        }
+                        title={
+                            t('accountOverview.items.deleteAccount.title') || 'Delete account'
+                        }
+                        description={
+                            t('accountOverview.items.deleteAccount.subtitle')
+                            || 'Permanently delete your account and all data'
+                        }
+                        onPress={handleDeleteAccount}
+                        destructive
+                    />
+                </SettingsListGroup>
+
+                {/* Sign out of this account */}
+                <SettingsListGroup>
+                    <SettingsListItem
+                        icon={
+                            <SettingsIcon name="logout" color={bloomTheme.colors.error} />
+                        }
+                        title={
+                            t('manageAccount.signOutOfThisAccount')
+                            || 'Sign out of this account'
+                        }
+                        onPress={() => signOutDialog.open()}
+                        destructive
+                        showChevron={false}
+                        disabled={signingOut}
+                        rightElement={
+                            signingOut ? (
+                                <ActivityIndicator
+                                    color={bloomTheme.colors.error}
+                                    size="small"
+                                />
+                            ) : undefined
+                        }
+                    />
+                </SettingsListGroup>
+
+                <View style={styles.versionContainer}>
+                    <Text
+                        style={[
+                            styles.versionText,
+                            { color: bloomTheme.colors.textTertiary },
+                        ]}
+                    >
+                        {t('accountCenter.version', { version: packageInfo.version })
+                            || `Version ${packageInfo.version}`}
+                    </Text>
+                </View>
+
+                <View style={styles.footerSpacer} />
+            </ScrollView>
+
+            <Dialog
+                control={signOutDialog}
+                title={t('common.actions.signOut') || 'Sign out'}
+                description={
+                    t('common.confirms.signOut')
+                    || 'Are you sure you want to sign out?'
+                }
+                actions={[
+                    {
+                        label: t('common.actions.signOut') || 'Sign out',
+                        color: 'destructive',
+                        onPress: handleSignOut,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={signOutAllDevicesDialog}
+                title={
+                    t('manageAccount.confirms.signOutAllDevicesTitle')
+                    || 'Sign out of all other devices'
+                }
+                description={
+                    t('manageAccount.confirms.signOutAllDevices', {
+                        count: otherDevices.length,
+                    })
+                    || `End ${otherDevices.length} other device session(s)? This won't sign you out here.`
+                }
+                actions={[
+                    {
+                        label: t('common.actions.signOut') || 'Sign out',
+                        color: 'destructive',
+                        onPress: handleSignOutAllDevices,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={removeDeviceDialog}
+                title={
+                    t('manageAccount.confirms.removeDeviceTitle') || 'Remove device'
+                }
+                description={
+                    pendingRemoveDevice
+                        ? (t('manageAccount.confirms.removeDevice', {
+                            name: pendingRemoveDevice.deviceName,
+                        })
+                            || `Sign out from "${pendingRemoveDevice.deviceName}"?`)
+                        : ''
+                }
+                actions={[
+                    {
+                        label: t('common.remove') || 'Remove',
+                        color: 'destructive',
+                        onPress: handleRemoveDevice,
+                    },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={downloadDataDialog}
+                title={
+                    t('accountOverview.items.downloadData.confirmTitle')
+                    || 'Download account data'
+                }
+                description={
+                    t('accountOverview.items.downloadData.confirmMessage')
+                    || 'Choose the format for your account data export:'
+                }
+                actions={[
+                    { label: 'JSON', onPress: () => performDownload('json') },
+                    { label: 'CSV', onPress: () => performDownload('csv') },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            {user ? (
+                <DeleteAccountModal
+                    control={deleteAccountDialog}
+                    username={user.username || ''}
+                    onDelete={handleConfirmDelete}
+                    t={t}
+                />
+            ) : null}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    center: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    notSignedIn: {
+        fontSize: 16,
+    },
+    scroll: {
+        flex: 1,
+    },
+    scrollContent: {
+        ...screenContentStyle,
+        paddingTop: 0,
+    },
+    profileCard: {
+        alignItems: 'center',
+        paddingVertical: 24,
+        paddingHorizontal: 20,
+        borderRadius: 24,
+        marginBottom: 16,
+    },
+    avatarTouchable: {
+        position: 'relative',
+        marginBottom: 12,
+    },
+    avatarBadge: {
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        borderColor: '#fff',
+    },
+    displayName: {
+        fontSize: 22,
+        fontWeight: '700',
+        marginBottom: 4,
+    },
+    handle: {
+        fontSize: 14,
+        marginBottom: 2,
+    },
+    email: {
+        fontSize: 14,
+    },
+    footerSpacer: {
+        height: 24,
+    },
+    versionContainer: {
+        alignItems: 'center',
+        marginTop: 12,
+        marginBottom: 8,
+    },
+    versionText: {
+        fontSize: 12,
+    },
+});
+
+export default ManageAccountScreen;