@oxyhq/services 5.3.11 → 5.4.1

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1,185 +1,134 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
     View,
     Text,
-    TextInput,
     TouchableOpacity,
     StyleSheet,
     ActivityIndicator,
     ScrollView,
     Alert,
-    Platform,
-    Switch,
+    TextInput,
+    Animated,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
+import OxyIcon from '../components/icon/OxyIcon';
+import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
+import { fontFamilies } from '../styles/fonts';
 
-interface AccountSettingsScreenProps extends BaseScreenProps {
-    activeTab?: 'profile' | 'password' | 'notifications';
-}
-
-const AccountSettingsScreen: React.FC<AccountSettingsScreenProps> = ({
-    goBack,
+const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
+    onClose,
     theme,
-    activeTab = 'profile',
+    goBack,
+    navigate,
 }) => {
     const { user, oxyServices, isLoading: authLoading } = useOxy();
-    const [currentTab, setCurrentTab] = useState<'profile' | 'password' | 'notifications'>(activeTab);
     const [isLoading, setIsLoading] = useState(false);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [successMessage, setSuccessMessage] = useState('');
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Animation refs
+    const saveButtonScale = useRef(new Animated.Value(1)).current;
 
-    // Profile form state
+    // Form state
+    const [displayName, setDisplayName] = useState('');
     const [username, setUsername] = useState('');
     const [email, setEmail] = useState('');
     const [bio, setBio] = useState('');
+    const [location, setLocation] = useState('');
+    const [website, setWebsite] = useState('');
     const [avatarUrl, setAvatarUrl] = useState('');
 
-    // Password form state
-    const [currentPassword, setCurrentPassword] = useState('');
-    const [newPassword, setNewPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
+    // Editing states
+    const [editingField, setEditingField] = useState<string | null>(null);
 
-    // Notification preferences
-    const [emailNotifications, setEmailNotifications] = useState(true);
-    const [pushNotifications, setPushNotifications] = useState(true);
+    // Temporary input states for inline editing
+    const [tempDisplayName, setTempDisplayName] = useState('');
+    const [tempUsername, setTempUsername] = useState('');
+    const [tempEmail, setTempEmail] = useState('');
+    const [tempBio, setTempBio] = useState('');
+    const [tempLocation, setTempLocation] = useState('');
+    const [tempWebsite, setTempWebsite] = useState('');
 
-    // Theme and styling
     const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const inputBackgroundColor = isDarkTheme ? '#333333' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#0066CC';
-    const placeholderColor = isDarkTheme ? '#AAAAAA' : '#999999';
+    const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
+    const primaryColor = '#007AFF';
+
+    // Animation functions
+    const animateSaveButton = (toValue: number) => {
+        Animated.spring(saveButtonScale, {
+            toValue,
+            useNativeDriver: true,
+            tension: 150,
+            friction: 8,
+        }).start();
+    };
 
     // Load user data
     useEffect(() => {
         if (user) {
+            const userDisplayName = typeof user.name === 'string' 
+                ? user.name 
+                : user.name?.full || user.name?.first || '';
+            
+            setDisplayName(userDisplayName);
             setUsername(user.username || '');
             setEmail(user.email || '');
             setBio(user.bio || '');
+            setLocation(user.location || '');
+            setWebsite(user.website || '');
             setAvatarUrl(user.avatar?.url || '');
         }
     }, [user]);
 
-    const validateEmail = (email: string) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return emailRegex.test(email);
-    };
-
-    const handleSaveProfile = async () => {
-        // Validate inputs
-        if (!username) {
-            setErrorMessage('Username is required');
-            return;
-        }
-
-        if (email && !validateEmail(email)) {
-            setErrorMessage('Please enter a valid email address');
-            return;
-        }
+    const handleSave = async () => {
+        if (!user) return;
 
         try {
-            setIsLoading(true);
-            setErrorMessage('');
-            setSuccessMessage('');
+            setIsSaving(true);
+            animateSaveButton(0.95); // Scale down slightly for animation
 
-            // Prepare updates object
             const updates: Record<string, any> = {
                 username,
+                email,
                 bio,
+                location,
+                website,
             };
 
-            if (email) {
-                updates.email = email;
+            // Handle name field
+            if (displayName) {
+                updates.name = displayName;
             }
 
-            // Only include avatar if it's been changed
-            if (avatarUrl !== user?.avatar?.url) {
+            // Handle avatar
+            if (avatarUrl !== user.avatar?.url) {
                 updates.avatar = { url: avatarUrl };
             }
 
-            // Call API to update user
-            await oxyServices.updateUser(user!.id, updates);
+            await oxyServices.updateProfile(updates);
             toast.success('Profile updated successfully');
+            
+            animateSaveButton(1); // Scale back to normal
+            
+            if (onClose) {
+                onClose();
+            } else if (goBack) {
+                goBack();
+            }
         } catch (error: any) {
             toast.error(error.message || 'Failed to update profile');
+            animateSaveButton(1); // Scale back to normal on error
         } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleChangePassword = async () => {
-        // Validate inputs
-        if (!currentPassword || !newPassword || !confirmPassword) {
-            toast.error('Please fill in all password fields');
-            return;
-        }
-
-        if (newPassword !== confirmPassword) {
-            toast.error('New passwords do not match');
-            return;
-        }
-
-        if (newPassword.length < 8) {
-            toast.error('Password must be at least 8 characters long');
-            return;
-        }
-
-        try {
-            setIsLoading(true);
-            setErrorMessage('');
-            setSuccessMessage('');
-
-            // Call API to update password
-            await oxyServices.updateUser(user!.id, {
-                currentPassword,
-                password: newPassword,
-            });
-
-            // Clear form fields after successful update
-            setCurrentPassword('');
-            setNewPassword('');
-            setConfirmPassword('');
-            toast.success('Password updated successfully');
-        } catch (error: any) {
-            toast.error(error.message || 'Failed to update password');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleSaveNotifications = async () => {
-        try {
-            setIsLoading(true);
-            setErrorMessage('');
-            setSuccessMessage('');
-
-            // Call API to update notification preferences
-            await oxyServices.updateUser(user!.id, {
-                notificationPreferences: {
-                    email: emailNotifications,
-                    push: pushNotifications,
-                },
-            });
-            toast.success('Notification preferences updated successfully');
-        } catch (error: any) {
-            toast.error(error.message || 'Failed to update notification preferences');
-        } finally {
-            setIsLoading(false);
+            setIsSaving(false);
         }
     };
 
     const handleAvatarUpdate = () => {
-        // In a real app, this would open an image picker
-        // For now, we'll use a mock URL to demonstrate the concept
         Alert.alert(
             'Update Avatar',
-            'This would open an image picker in a real app. For now, we\'ll use a mock URL.',
+            'Choose how you want to update your profile picture',
             [
                 {
                     text: 'Cancel',
@@ -188,291 +137,439 @@ const AccountSettingsScreen: React.FC<AccountSettingsScreenProps> = ({
                 {
                     text: 'Use Mock URL',
                     onPress: () => {
-                        const mockUrl = `https://ui-avatars.com/api/?name=${username}&background=random`;
+                        const mockUrl = `https://ui-avatars.com/api/?name=${displayName || username}&background=random`;
                         setAvatarUrl(mockUrl);
                     },
                 },
+                {
+                    text: 'Remove Avatar',
+                    onPress: () => setAvatarUrl(''),
+                    style: 'destructive',
+                },
             ]
         );
     };
 
-    if (authLoading || !user) {
-        return (
-            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
-            </View>
-        );
-    }
-
-    const renderProfileTab = () => (
-        <View style={styles.tabContent}>
-            <View style={styles.avatarSection}>
-                <Avatar 
-                    uri={avatarUrl} 
-                    name={username} 
-                    size={100} 
-                    theme={theme} 
-                />
-                <TouchableOpacity
-                    style={[styles.changeAvatarButton, { backgroundColor: primaryColor }]}
-                    onPress={handleAvatarUpdate}
-                >
-                    <Text style={styles.changeAvatarText}>Change Avatar</Text>
-                </TouchableOpacity>
-            </View>
+    const startEditing = (type: string, currentValue: string) => {
+        switch (type) {
+            case 'displayName':
+                setTempDisplayName(currentValue);
+                break;
+            case 'username':
+                setTempUsername(currentValue);
+                break;
+            case 'email':
+                setTempEmail(currentValue);
+                break;
+            case 'bio':
+                setTempBio(currentValue);
+                break;
+            case 'location':
+                setTempLocation(currentValue);
+                break;
+            case 'website':
+                setTempWebsite(currentValue);
+                break;
+        }
+        setEditingField(type);
+    };
 
-            <View style={styles.inputContainer}>
-                <Text style={[styles.label, { color: textColor }]}>Username</Text>
-                <TextInput
-                    style={[
-                        styles.input,
-                        { backgroundColor: inputBackgroundColor, borderColor, color: textColor }
-                    ]}
-                    placeholder="Enter your username"
-                    placeholderTextColor={placeholderColor}
-                    value={username}
-                    onChangeText={setUsername}
-                    testID="username-input"
-                />
-            </View>
+    const saveField = (type: string) => {
+        animateSaveButton(0.95); // Scale down slightly for animation
+        
+        switch (type) {
+            case 'displayName':
+                setDisplayName(tempDisplayName);
+                break;
+            case 'username':
+                setUsername(tempUsername);
+                break;
+            case 'email':
+                setEmail(tempEmail);
+                break;
+            case 'bio':
+                setBio(tempBio);
+                break;
+            case 'location':
+                setLocation(tempLocation);
+                break;
+            case 'website':
+                setWebsite(tempWebsite);
+                break;
+        }
+        
+        // Brief delay for animation, then reset and close editing
+        setTimeout(() => {
+            animateSaveButton(1);
+            setEditingField(null);
+        }, 150);
+    };
 
-            <View style={styles.inputContainer}>
-                <Text style={[styles.label, { color: textColor }]}>Email</Text>
-                <TextInput
-                    style={[
-                        styles.input,
-                        { backgroundColor: inputBackgroundColor, borderColor, color: textColor }
-                    ]}
-                    placeholder="Enter your email"
-                    placeholderTextColor={placeholderColor}
-                    value={email}
-                    onChangeText={setEmail}
-                    keyboardType="email-address"
-                    testID="email-input"
-                />
-            </View>
+    const cancelEditing = () => {
+        setEditingField(null);
+    };
 
-            <View style={styles.inputContainer}>
-                <Text style={[styles.label, { color: textColor }]}>Bio</Text>
-                <TextInput
-                    style={[
-                        styles.textArea,
-                        { backgroundColor: inputBackgroundColor, borderColor, color: textColor }
-                    ]}
-                    placeholder="Tell us about yourself"
-                    placeholderTextColor={placeholderColor}
-                    value={bio}
-                    onChangeText={setBio}
-                    multiline
-                    numberOfLines={4}
-                    testID="bio-input"
-                />
-            </View>
+    const getFieldLabel = (type: string) => {
+        const labels = {
+            displayName: 'Display Name',
+            username: 'Username',
+            email: 'Email',
+            bio: 'Bio',
+            location: 'Location',
+            website: 'Website'
+        };
+        return labels[type as keyof typeof labels] || 'Field';
+    };
 
-            <TouchableOpacity
-                style={[styles.saveButton, { backgroundColor: primaryColor, opacity: isLoading ? 0.7 : 1 }]}
-                onPress={handleSaveProfile}
-                disabled={isLoading}
-                testID="save-profile-button"
-            >
-                {isLoading ? (
-                    <ActivityIndicator color="#FFFFFF" size="small" />
-                ) : (
-                    <Text style={styles.saveButtonText}>Save Profile</Text>
-                )}
-            </TouchableOpacity>
-        </View>
-    );
+    const getFieldIcon = (type: string) => {
+        const icons = {
+            displayName: { name: 'person', color: '#007AFF' },
+            username: { name: 'at', color: '#5856D6' },
+            email: { name: 'mail', color: '#FF9500' },
+            bio: { name: 'document-text', color: '#34C759' },
+            location: { name: 'location', color: '#FF3B30' },
+            website: { name: 'link', color: '#32D74B' }
+        };
+        return icons[type as keyof typeof icons] || { name: 'person', color: '#007AFF' };
+    };
 
-    const renderPasswordTab = () => (
-        <View style={styles.tabContent}>
-            <View style={styles.inputContainer}>
-                <Text style={[styles.label, { color: textColor }]}>Current Password</Text>
-                <TextInput
-                    style={[
-                        styles.input,
-                        { backgroundColor: inputBackgroundColor, borderColor, color: textColor }
-                    ]}
-                    placeholder="Enter your current password"
-                    placeholderTextColor={placeholderColor}
-                    value={currentPassword}
-                    onChangeText={setCurrentPassword}
-                    secureTextEntry
-                    testID="current-password-input"
-                />
-            </View>
+    const renderEditingField = (type: string) => {
+        const fieldConfig = {
+            displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'person', color: '#007AFF', multiline: false, keyboardType: 'default' as const },
+            username: { label: 'Username', value: username, placeholder: 'Choose a username', icon: 'at', color: '#5856D6', multiline: false, keyboardType: 'default' as const },
+            email: { label: 'Email', value: email, placeholder: 'Enter your email address', icon: 'mail', color: '#FF9500', multiline: false, keyboardType: 'email-address' as const },
+            bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'document-text', color: '#34C759', multiline: true, keyboardType: 'default' as const },
+            location: { label: 'Location', value: location, placeholder: 'Enter your location', icon: 'location', color: '#FF3B30', multiline: false, keyboardType: 'default' as const },
+            website: { label: 'Website', value: website, placeholder: 'Enter your website URL', icon: 'link', color: '#32D74B', multiline: false, keyboardType: 'url' as const }
+        };
+
+        const config = fieldConfig[type as keyof typeof fieldConfig];
+        if (!config) return null;
+
+        const tempValue = (() => {
+            switch (type) {
+                case 'displayName': return tempDisplayName;
+                case 'username': return tempUsername;
+                case 'email': return tempEmail;
+                case 'bio': return tempBio;
+                case 'location': return tempLocation;
+                case 'website': return tempWebsite;
+                default: return '';
+            }
+        })();
+        
+        const setTempValue = (text: string) => {
+            switch (type) {
+                case 'displayName': setTempDisplayName(text); break;
+                case 'username': setTempUsername(text); break;
+                case 'email': setTempEmail(text); break;
+                case 'bio': setTempBio(text); break;
+                case 'location': setTempLocation(text); break;
+                case 'website': setTempWebsite(text); break;
+            }
+        };
 
-            <View style={styles.inputContainer}>
-                <Text style={[styles.label, { color: textColor }]}>New Password</Text>
-                <TextInput
-                    style={[
-                        styles.input,
-                        { backgroundColor: inputBackgroundColor, borderColor, color: textColor }
-                    ]}
-                    placeholder="Enter your new password"
-                    placeholderTextColor={placeholderColor}
-                    value={newPassword}
-                    onChangeText={setNewPassword}
-                    secureTextEntry
-                    testID="new-password-input"
-                />
-                <Text style={[styles.passwordHint, { color: isDarkTheme ? '#AAAAAA' : '#666666' }]}>
-                    Password must be at least 8 characters long
-                </Text>
+        return (
+            <View style={styles.editingFieldContainer}>
+                <View style={styles.editingFieldContent}>
+                    <View style={styles.newValueSection}>
+                        <Text style={styles.editingFieldLabel}>
+                            {`Enter ${config.label.toLowerCase()}:`}
+                        </Text>
+                        <TextInput
+                            style={[
+                                config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput,
+                                { 
+                                    backgroundColor: isDarkTheme ? '#333' : '#fff',
+                                    color: isDarkTheme ? '#fff' : '#000',
+                                    borderColor: primaryColor
+                                }
+                            ]}
+                            value={tempValue}
+                            onChangeText={setTempValue}
+                            placeholder={config.placeholder}
+                            placeholderTextColor={isDarkTheme ? '#aaa' : '#999'}
+                            multiline={config.multiline}
+                            numberOfLines={config.multiline ? 6 : 1}
+                            keyboardType={config.keyboardType}
+                            autoFocus
+                            selectionColor={primaryColor}
+                        />
+                    </View>
+                </View>
             </View>
+        );
+    };
 
-            <View style={styles.inputContainer}>
-                <Text style={[styles.label, { color: textColor }]}>Confirm New Password</Text>
-                <TextInput
-                    style={[
-                        styles.input,
-                        { backgroundColor: inputBackgroundColor, borderColor, color: textColor }
-                    ]}
-                    placeholder="Confirm your new password"
-                    placeholderTextColor={placeholderColor}
-                    value={confirmPassword}
-                    onChangeText={setConfirmPassword}
-                    secureTextEntry
-                    testID="confirm-password-input"
-                />
-            </View>
+    const renderField = (
+        type: string,
+        label: string,
+        value: string,
+        placeholder: string,
+        icon: string,
+        iconColor: string,
+        multiline = false,
+        keyboardType: 'default' | 'email-address' | 'url' = 'default',
+        isFirst = false,
+        isLast = false
+    ) => {
+        const itemStyles = [
+            styles.settingItem,
+            isFirst && styles.firstSettingItem,
+            isLast && styles.lastSettingItem
+        ];
 
-            <TouchableOpacity
-                style={[styles.saveButton, { backgroundColor: primaryColor, opacity: isLoading ? 0.7 : 1 }]}
-                onPress={handleChangePassword}
-                disabled={isLoading}
-                testID="change-password-button"
+        return (
+            <TouchableOpacity 
+                style={itemStyles}
+                onPress={() => startEditing(type, value)}
             >
-                {isLoading ? (
-                    <ActivityIndicator color="#FFFFFF" size="small" />
-                ) : (
-                    <Text style={styles.saveButtonText}>Change Password</Text>
-                )}
+                <View style={styles.settingInfo}>
+                    <OxyIcon name={icon} size={20} color={iconColor} style={styles.settingIcon} />
+                    <View>
+                        <Text style={styles.settingLabel}>{label}</Text>
+                        <Text style={styles.settingDescription}>
+                            {value || placeholder}
+                        </Text>
+                    </View>
+                </View>
+                <OxyIcon name="chevron-forward" size={16} color="#ccc" />
             </TouchableOpacity>
-        </View>
-    );
-
-    const renderNotificationsTab = () => (
-        <View style={styles.tabContent}>
-            <View style={styles.settingRow}>
-                <Text style={[styles.settingLabel, { color: textColor }]}>Email Notifications</Text>
-                <Switch
-                    value={emailNotifications}
-                    onValueChange={setEmailNotifications}
-                    trackColor={{ false: '#767577', true: primaryColor }}
-                    thumbColor="#f4f3f4"
-                    testID="email-notifications-switch"
-                />
-            </View>
+        );
+    };
 
-            <View style={styles.settingRow}>
-                <Text style={[styles.settingLabel, { color: textColor }]}>Push Notifications</Text>
-                <Switch
-                    value={pushNotifications}
-                    onValueChange={setPushNotifications}
-                    trackColor={{ false: '#767577', true: primaryColor }}
-                    thumbColor="#f4f3f4"
-                    testID="push-notifications-switch"
-                />
+    if (authLoading || !user) {
+        return (
+            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
+                <ActivityIndicator size="large" color={primaryColor} />
             </View>
-
-            <TouchableOpacity
-                style={[styles.saveButton, { backgroundColor: primaryColor, opacity: isLoading ? 0.7 : 1 }]}
-                onPress={handleSaveNotifications}
-                disabled={isLoading}
-                testID="save-notifications-button"
-            >
-                {isLoading ? (
-                    <ActivityIndicator color="#FFFFFF" size="small" />
-                ) : (
-                    <Text style={styles.saveButtonText}>Save Preferences</Text>
-                )}
-            </TouchableOpacity>
-        </View>
-    );
+        );
+    }
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
-                <View style={styles.header}>
-                    <TouchableOpacity
-                        style={styles.backButton}
-                        onPress={goBack}
-                    >
-                        <Text style={[styles.backButtonText, { color: primaryColor }]}>Back</Text>
-                    </TouchableOpacity>
-                    <Text style={[styles.title, { color: textColor }]}>Account Settings</Text>
-                    <View style={styles.backButtonPlaceholder} />
-                </View>
-
-                <View style={[styles.tabsContainer, { borderColor }]}>
-                    <TouchableOpacity
-                        style={[
-                            styles.tabButton,
-                            currentTab === 'profile' && [styles.activeTabButton, { borderColor: primaryColor }]
-                        ]}
-                        onPress={() => setCurrentTab('profile')}
-                    >
-                        <Text
-                            style={[
-                                styles.tabButtonText,
-                                { color: currentTab === 'profile' ? primaryColor : textColor }
-                            ]}
-                        >
-                            Profile
-                        </Text>
-                    </TouchableOpacity>
-
-                    <TouchableOpacity
-                        style={[
-                            styles.tabButton,
-                            currentTab === 'password' && [styles.activeTabButton, { borderColor: primaryColor }]
-                        ]}
-                        onPress={() => setCurrentTab('password')}
-                    >
-                        <Text
-                            style={[
-                                styles.tabButtonText,
-                                { color: currentTab === 'password' ? primaryColor : textColor }
-                            ]}
-                        >
-                            Password
-                        </Text>
-                    </TouchableOpacity>
-
-                    <TouchableOpacity
-                        style={[
-                            styles.tabButton,
-                            currentTab === 'notifications' && [styles.activeTabButton, { borderColor: primaryColor }]
-                        ]}
-                        onPress={() => setCurrentTab('notifications')}
-                    >
-                        <Text
-                            style={[
-                                styles.tabButtonText,
-                                { color: currentTab === 'notifications' ? primaryColor : textColor }
-                            ]}
-                        >
-                            Notifications
-                        </Text>
-                    </TouchableOpacity>
-                </View>
-
-                {errorMessage ? (
-                    <View style={styles.errorContainer}>
-                        <Text style={styles.errorText}>{errorMessage}</Text>
+            {/* Header */}
+            <View style={styles.header}>
+                {editingField ? (
+                    <View style={styles.editingHeader}>
+                        <View style={styles.editingHeaderTop}>
+                            <TouchableOpacity style={styles.cancelButton} onPress={cancelEditing}>
+                                <Ionicons name="close" size={24} color="#666" />
+                            </TouchableOpacity>
+                            <Animated.View style={{ transform: [{ scale: saveButtonScale }] }}>
+                                <TouchableOpacity 
+                                    style={[
+                                        styles.saveHeaderButton, 
+                                        { 
+                                            opacity: isSaving ? 0.7 : 1,
+                                            backgroundColor: editingField ? getFieldIcon(editingField).color : '#007AFF'
+                                        }
+                                    ]} 
+                                    onPress={() => saveField(editingField)}
+                                    disabled={isSaving}
+                                >
+                                    {isSaving ? (
+                                        <ActivityIndicator size="small" color="#fff" />
+                                    ) : (
+                                        <Text style={styles.saveButtonText}>Save</Text>
+                                    )}
+                                </TouchableOpacity>
+                            </Animated.View>
+                        </View>
+                        <View style={styles.editingHeaderBottom}>
+                            <View style={styles.headerTitleWithIcon}>
+                                <OxyIcon 
+                                    name={getFieldIcon(editingField).name} 
+                                    size={50} 
+                                    color={getFieldIcon(editingField).color} 
+                                    style={styles.headerIcon} 
+                                />
+                                <Text style={styles.headerTitleLarge}>{getFieldLabel(editingField)}</Text>
+                            </View>
+                        </View>
                     </View>
-                ) : null}
-
-                {successMessage ? (
-                    <View style={styles.successContainer}>
-                        <Text style={styles.successText}>{successMessage}</Text>
+                ) : (
+                    <View style={styles.normalHeader}>
+                        <TouchableOpacity style={styles.cancelButton} onPress={onClose || goBack}>
+                            <Ionicons name="close" size={24} color="#666" />
+                        </TouchableOpacity>
+                        <Text style={styles.headerTitle}>Account Settings</Text>
+                        <Animated.View style={{ transform: [{ scale: saveButtonScale }] }}>
+                            <TouchableOpacity 
+                                style={[styles.saveIconButton, { opacity: isSaving ? 0.7 : 1 }]} 
+                                onPress={handleSave}
+                                disabled={isSaving}
+                            >
+                                {isSaving ? (
+                                    <ActivityIndicator size="small" color={primaryColor} />
+                                ) : (
+                                    <Ionicons name="checkmark" size={24} color={primaryColor} />
+                                )}
+                            </TouchableOpacity>
+                        </Animated.View>
                     </View>
-                ) : null}
+                )}
+            </View>
 
-                {currentTab === 'profile' && renderProfileTab()}
-                {currentTab === 'password' && renderPasswordTab()}
-                {currentTab === 'notifications' && renderNotificationsTab()}
+            <ScrollView style={editingField ? styles.contentEditing : styles.content}>
+                {editingField ? (
+                    // Show only the editing interface when editing
+                    <View style={styles.editingOnlyContainer}>
+                        {renderEditingField(editingField)}
+                    </View>
+                ) : (
+                    // Show all settings when not editing
+                    <>
+                        {/* Profile Picture Section */}
+                        <View style={styles.section}>
+                            <Text style={styles.sectionTitle}>Profile Picture</Text>
+                            
+                            <TouchableOpacity 
+                                style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}
+                                onPress={handleAvatarUpdate}
+                            >
+                                <View style={styles.userIcon}>
+                                    <Avatar
+                                        uri={avatarUrl}
+                                        name={displayName || username}
+                                        size={50}
+                                        theme={theme}
+                                    />
+                                </View>
+                                <View style={styles.settingInfo}>
+                                    <View>
+                                        <Text style={styles.settingLabel}>Profile Photo</Text>
+                                        <Text style={styles.settingDescription}>
+                                            {avatarUrl ? 'Tap to change your profile picture' : 'Tap to add a profile picture'}
+                                        </Text>
+                                    </View>
+                                </View>
+                                <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                            </TouchableOpacity>
+                        </View>
+
+                        {/* Basic Information */}
+                        <View style={styles.section}>
+                            <Text style={styles.sectionTitle}>Basic Information</Text>
+                            
+                            {renderField(
+                                'displayName',
+                                'Display Name',
+                                displayName,
+                                'Add your display name',
+                                'person',
+                                '#007AFF',
+                                false,
+                                'default',
+                                true,
+                                false
+                            )}
+
+                            {renderField(
+                                'username',
+                                'Username',
+                                username,
+                                'Choose a username',
+                                'at',
+                                '#5856D6',
+                                false,
+                                'default',
+                                false,
+                                false
+                            )}
+
+                            {renderField(
+                                'email',
+                                'Email',
+                                email,
+                                'Add your email address',
+                                'mail',
+                                '#FF9500',
+                                false,
+                                'email-address',
+                                false,
+                                true
+                            )}
+                        </View>
+
+                        {/* About You */}
+                        <View style={styles.section}>
+                            <Text style={styles.sectionTitle}>About You</Text>
+                            
+                            {renderField(
+                                'bio',
+                                'Bio',
+                                bio,
+                                'Tell people about yourself',
+                                'document-text',
+                                '#34C759',
+                                true,
+                                'default',
+                                true,
+                                false
+                            )}
+
+                            {renderField(
+                                'location',
+                                'Location',
+                                location,
+                                'Add your location',
+                                'location',
+                                '#FF3B30',
+                                false,
+                                'default',
+                                false,
+                                false
+                            )}
+
+                            {renderField(
+                                'website',
+                                'Website',
+                                website,
+                                'Add your website',
+                                'link',
+                                '#32D74B',
+                                false,
+                                'url',
+                                false,
+                                true
+                            )}
+                        </View>
+
+                        {/* Quick Actions */}
+                        <View style={styles.section}>
+                            <Text style={styles.sectionTitle}>Quick Actions</Text>
+                            
+                            <TouchableOpacity 
+                                style={[styles.settingItem, styles.firstSettingItem]}
+                                onPress={() => toast.info('Privacy settings coming soon!')}
+                            >
+                                <View style={styles.settingInfo}>
+                                    <OxyIcon name="shield-checkmark" size={20} color="#8E8E93" style={styles.settingIcon} />
+                                    <View>
+                                        <Text style={styles.settingLabel}>Privacy Settings</Text>
+                                        <Text style={styles.settingDescription}>Control who can see your profile</Text>
+                                    </View>
+                                </View>
+                                <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                            </TouchableOpacity>
+
+                            <TouchableOpacity 
+                                style={[styles.settingItem, styles.lastSettingItem]}
+                                onPress={() => toast.info('Account verification coming soon!')}
+                            >
+                                <View style={styles.settingInfo}>
+                                    <OxyIcon name="checkmark-circle" size={20} color="#30D158" style={styles.settingIcon} />
+                                    <View>
+                                        <Text style={styles.settingLabel}>Verify Account</Text>
+                                        <Text style={styles.settingDescription}>Get a verified badge</Text>
+                                    </View>
+                                </View>
+                                <OxyIcon name="chevron-forward" size={16} color="#ccc" />
+                            </TouchableOpacity>
+                        </View>
+                    </>
+                )}
             </ScrollView>
         </View>
     );
@@ -481,137 +578,225 @@ const AccountSettingsScreen: React.FC<AccountSettingsScreenProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
+        backgroundColor: '#f2f2f2',
     },
-    scrollView: {
-        flex: 1,
+    header: {
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        backgroundColor: '#fff',
+        borderBottomWidth: 1,
+        borderBottomColor: '#e0e0e0',
     },
-    scrollContainer: {
-        padding: 20,
+    normalHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
     },
-    header: {
+    editingHeader: {
+        flexDirection: 'column',
+    },
+    editingHeaderTop: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 24,
+        marginBottom: 16,
     },
-    title: {
+    editingHeaderBottom: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+    },
+    headerTitle: {
         fontSize: 24,
         fontWeight: 'bold',
+        color: '#000',
+        fontFamily: fontFamilies.phuduBold,
+    },
+    headerTitleWithIcon: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        flex: 1,
+        justifyContent: 'flex-start',
+        maxWidth: '90%',
+    },
+    headerTitleLarge: {
+        fontSize: 48,
+        fontWeight: '800',
+        color: '#000',
+        fontFamily: fontFamilies.phuduExtraBold,
+        textAlign: 'left',
+    },
+    headerIcon: {
+        marginBottom: 2,
     },
-    backButton: {
-        padding: 10,
+    cancelButton: {
+        padding: 5,
     },
-    backButtonText: {
+    saveHeaderButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        minWidth: 60,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    saveIconButton: {
+        padding: 5,
+    },
+    saveButtonText: {
+        color: '#fff',
         fontSize: 16,
         fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
     },
-    backButtonPlaceholder: {
-        width: 40,
+    contentEditing: {
+        flex: 1,
+        padding: 0,
     },
-    tabsContainer: {
-        flexDirection: 'row',
+    section: {
         marginBottom: 24,
-        borderBottomWidth: 1,
     },
-    tabButton: {
-        flex: 1,
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 12,
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    settingItem: {
+        backgroundColor: '#fff',
+        padding: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 2,
+    },
+    firstSettingItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastSettingItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    settingInfo: {
+        flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 12,
+        flex: 1,
     },
-    activeTabButton: {
-        borderBottomWidth: 2,
+    settingIcon: {
+        marginRight: 12,
     },
-    tabButtonText: {
+    settingLabel: {
         fontSize: 16,
         fontWeight: '500',
+        color: '#333',
+        marginBottom: 2,
     },
-    tabContent: {
-        marginBottom: 24,
+    settingDescription: {
+        fontSize: 14,
+        color: '#666',
     },
-    avatarSection: {
-        alignItems: 'center',
-        marginBottom: 24,
+    userIcon: {
+        marginRight: 12,
     },
-    changeAvatarButton: {
-        marginTop: 12,
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-        borderRadius: 20,
+    // Inline editing styles
+    editingContainer: {
+        flex: 1,
     },
-    changeAvatarText: {
-        color: '#FFFFFF',
-        fontWeight: '600',
+    editingActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
     },
-    inputContainer: {
-        marginBottom: 16,
+    editingButton: {
+        padding: 8,
     },
-    label: {
+    editingButtonText: {
         fontSize: 16,
-        marginBottom: 8,
+        fontWeight: '500',
     },
-    input: {
-        height: 50,
-        borderRadius: 8,
+    inlineInput: {
+        backgroundColor: '#f8f8f8',
         borderWidth: 1,
-        paddingHorizontal: 12,
+        borderColor: '#e0e0e0',
+        borderRadius: 8,
+        padding: 12,
         fontSize: 16,
+        minHeight: 44,
     },
-    textArea: {
-        minHeight: 100,
-        borderRadius: 8,
+    inlineTextArea: {
+        backgroundColor: '#f8f8f8',
         borderWidth: 1,
-        paddingHorizontal: 12,
-        paddingTop: 12,
+        borderColor: '#e0e0e0',
+        borderRadius: 8,
+        padding: 12,
         fontSize: 16,
+        minHeight: 100,
         textAlignVertical: 'top',
     },
-    passwordHint: {
-        fontSize: 14,
-        marginTop: 4,
+    // Editing-only mode styles
+    editingOnlyContainer: {
+        flex: 1,
     },
-    saveButton: {
-        height: 50,
-        borderRadius: 25,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: 16,
+    editingFieldContainer: {
+        backgroundColor: '#fff',
+        padding: 16,
+        flex: 1,
     },
-    saveButtonText: {
-        color: '#FFFFFF',
-        fontSize: 16,
-        fontWeight: '600',
+    editingFieldHeader: {
+        marginBottom: 16,
     },
-    settingRow: {
+    editingFieldTitleContainer: {
         flexDirection: 'row',
-        justifyContent: 'space-between',
         alignItems: 'center',
-        paddingVertical: 16,
-        borderBottomWidth: 1,
-        borderBottomColor: '#E0E0E0',
     },
-    settingLabel: {
-        fontSize: 16,
+    editingFieldIcon: {
+        marginRight: 12,
     },
-    errorContainer: {
-        backgroundColor: '#FFEBEE',
-        padding: 16,
-        borderRadius: 8,
-        marginBottom: 16,
+    editingFieldTitle: {
+        fontSize: 20,
+        fontWeight: '600',
+        color: '#000',
     },
-    errorText: {
-        color: '#D32F2F',
-        fontSize: 14,
+    editingFieldContent: {
+        flex: 1,
     },
-    successContainer: {
-        backgroundColor: '#E8F5E9',
+    newValueSection: {
+        flex: 1,
+    },
+    editingFieldLabel: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 12,
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    editingFieldInput: {
+        backgroundColor: '#fff',
+        borderWidth: 2,
+        borderColor: '#e0e0e0',
+        borderRadius: 12,
         padding: 16,
-        borderRadius: 8,
-        marginBottom: 16,
+        fontSize: 17,
+        minHeight: 52,
+        fontWeight: '400',
     },
-    successText: {
-        color: '#2E7D32',
-        fontSize: 14,
+    editingFieldTextArea: {
+        backgroundColor: '#fff',
+        borderWidth: 2,
+        borderColor: '#e0e0e0',
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 17,
+        minHeight: 120,
+        textAlignVertical: 'top',
+        fontWeight: '400',
     },
 });
 
-export default AccountSettingsScreen;
+export default AccountSettingsScreen;