@oxyhq/services 5.3.11 → 5.4.1

package/lib/module/ui/screens/AccountSettingsScreen.js

@@ -1,174 +1,389 @@
 "use strict";
 
-import React, { useEffect, useState } from 'react';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Switch } from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, TextInput, Animated } from 'react-native';
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontFamilies } from '../styles/fonts';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AccountSettingsScreen = ({
-  goBack,
+  onClose,
   theme,
-  activeTab = 'profile'
+  goBack,
+  navigate
 }) => {
   const {
     user,
     oxyServices,
     isLoading: authLoading
   } = useOxy();
-  const [currentTab, setCurrentTab] = useState(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(null);
 
-  // Notification preferences
-  const [emailNotifications, setEmailNotifications] = useState(true);
-  const [pushNotifications, setPushNotifications] = useState(true);
-
-  // Theme and styling
+  // 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('');
   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 => {
+    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 => {
-    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 = {
         username,
-        bio
+        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');
-    } catch (error) {
-      toast.error(error.message || 'Failed to update profile');
-    } 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
-      });
+      animateSaveButton(1); // Scale back to normal
 
-      // Clear form fields after successful update
-      setCurrentPassword('');
-      setNewPassword('');
-      setConfirmPassword('');
-      toast.success('Password updated successfully');
-    } catch (error) {
-      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');
+      if (onClose) {
+        onClose();
+      } else if (goBack) {
+        goBack();
+      }
     } catch (error) {
-      toast.error(error.message || 'Failed to update notification preferences');
+      toast.error(error.message || 'Failed to update profile');
+      animateSaveButton(1); // Scale back to normal on error
     } 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.', [{
+    Alert.alert('Update Avatar', 'Choose how you want to update your profile picture', [{
       text: 'Cancel',
       style: 'cancel'
     }, {
       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'
     }]);
   };
+  const startEditing = (type, currentValue) => {
+    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);
+  };
+  const saveField = type => {
+    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);
+  };
+  const cancelEditing = () => {
+    setEditingField(null);
+  };
+  const getFieldLabel = type => {
+    const labels = {
+      displayName: 'Display Name',
+      username: 'Username',
+      email: 'Email',
+      bio: 'Bio',
+      location: 'Location',
+      website: 'Website'
+    };
+    return labels[type] || 'Field';
+  };
+  const getFieldIcon = type => {
+    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] || {
+      name: 'person',
+      color: '#007AFF'
+    };
+  };
+  const renderEditingField = type => {
+    const fieldConfig = {
+      displayName: {
+        label: 'Display Name',
+        value: displayName,
+        placeholder: 'Enter your display name',
+        icon: 'person',
+        color: '#007AFF',
+        multiline: false,
+        keyboardType: 'default'
+      },
+      username: {
+        label: 'Username',
+        value: username,
+        placeholder: 'Choose a username',
+        icon: 'at',
+        color: '#5856D6',
+        multiline: false,
+        keyboardType: 'default'
+      },
+      email: {
+        label: 'Email',
+        value: email,
+        placeholder: 'Enter your email address',
+        icon: 'mail',
+        color: '#FF9500',
+        multiline: false,
+        keyboardType: 'email-address'
+      },
+      bio: {
+        label: 'Bio',
+        value: bio,
+        placeholder: 'Tell people about yourself...',
+        icon: 'document-text',
+        color: '#34C759',
+        multiline: true,
+        keyboardType: 'default'
+      },
+      location: {
+        label: 'Location',
+        value: location,
+        placeholder: 'Enter your location',
+        icon: 'location',
+        color: '#FF3B30',
+        multiline: false,
+        keyboardType: 'default'
+      },
+      website: {
+        label: 'Website',
+        value: website,
+        placeholder: 'Enter your website URL',
+        icon: 'link',
+        color: '#32D74B',
+        multiline: false,
+        keyboardType: 'url'
+      }
+    };
+    const config = fieldConfig[type];
+    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 => {
+      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;
+      }
+    };
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.editingFieldContainer,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.editingFieldContent,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.newValueSection,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.editingFieldLabel,
+            children: `Enter ${config.label.toLowerCase()}:`
+          }), /*#__PURE__*/_jsx(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: true,
+            selectionColor: primaryColor
+          })]
+        })
+      })
+    });
+  };
+  const renderField = (type, label, value, placeholder, icon, iconColor, multiline = false, keyboardType = 'default', isFirst = false, isLast = false) => {
+    const itemStyles = [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem];
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: itemStyles,
+      onPress: () => startEditing(type, value),
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.settingInfo,
+        children: [/*#__PURE__*/_jsx(OxyIcon, {
+          name: icon,
+          size: 20,
+          color: iconColor,
+          style: styles.settingIcon
+        }), /*#__PURE__*/_jsxs(View, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.settingLabel,
+            children: label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.settingDescription,
+            children: value || placeholder
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(OxyIcon, {
+        name: "chevron-forward",
+        size: 16,
+        color: "#ccc"
+      })]
+    });
+  };
   if (authLoading || !user) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, {
@@ -181,452 +396,434 @@ const AccountSettingsScreen = ({
       })
     });
   }
-  const renderProfileTab = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.tabContent,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.avatarSection,
-      children: [/*#__PURE__*/_jsx(Avatar, {
-        uri: avatarUrl,
-        name: username,
-        size: 100,
-        theme: theme
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.changeAvatarButton, {
-          backgroundColor: primaryColor
-        }],
-        onPress: handleAvatarUpdate,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.changeAvatarText,
-          children: "Change Avatar"
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: textColor
-        }],
-        children: "Username"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Enter your username",
-        placeholderTextColor: placeholderColor,
-        value: username,
-        onChangeText: setUsername,
-        testID: "username-input"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: textColor
-        }],
-        children: "Email"
-      }), /*#__PURE__*/_jsx(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"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: textColor
-        }],
-        children: "Bio"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.textArea, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Tell us about yourself",
-        placeholderTextColor: placeholderColor,
-        value: bio,
-        onChangeText: setBio,
-        multiline: true,
-        numberOfLines: 4,
-        testID: "bio-input"
-      })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.saveButton, {
-        backgroundColor: primaryColor,
-        opacity: isLoading ? 0.7 : 1
-      }],
-      onPress: handleSaveProfile,
-      disabled: isLoading,
-      testID: "save-profile-button",
-      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: styles.saveButtonText,
-        children: "Save Profile"
-      })
-    })]
-  });
-  const renderPasswordTab = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.tabContent,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: textColor
-        }],
-        children: "Current Password"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Enter your current password",
-        placeholderTextColor: placeholderColor,
-        value: currentPassword,
-        onChangeText: setCurrentPassword,
-        secureTextEntry: true,
-        testID: "current-password-input"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: textColor
-        }],
-        children: "New Password"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Enter your new password",
-        placeholderTextColor: placeholderColor,
-        value: newPassword,
-        onChangeText: setNewPassword,
-        secureTextEntry: true,
-        testID: "new-password-input"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.passwordHint, {
-          color: isDarkTheme ? '#AAAAAA' : '#666666'
-        }],
-        children: "Password must be at least 8 characters long"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.inputContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: textColor
-        }],
-        children: "Confirm New Password"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Confirm your new password",
-        placeholderTextColor: placeholderColor,
-        value: confirmPassword,
-        onChangeText: setConfirmPassword,
-        secureTextEntry: true,
-        testID: "confirm-password-input"
-      })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.saveButton, {
-        backgroundColor: primaryColor,
-        opacity: isLoading ? 0.7 : 1
-      }],
-      onPress: handleChangePassword,
-      disabled: isLoading,
-      testID: "change-password-button",
-      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: styles.saveButtonText,
-        children: "Change Password"
-      })
-    })]
-  });
-  const renderNotificationsTab = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.tabContent,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.settingRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.settingLabel, {
-          color: textColor
-        }],
-        children: "Email Notifications"
-      }), /*#__PURE__*/_jsx(Switch, {
-        value: emailNotifications,
-        onValueChange: setEmailNotifications,
-        trackColor: {
-          false: '#767577',
-          true: primaryColor
-        },
-        thumbColor: "#f4f3f4",
-        testID: "email-notifications-switch"
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.settingRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.settingLabel, {
-          color: textColor
-        }],
-        children: "Push Notifications"
-      }), /*#__PURE__*/_jsx(Switch, {
-        value: pushNotifications,
-        onValueChange: setPushNotifications,
-        trackColor: {
-          false: '#767577',
-          true: primaryColor
-        },
-        thumbColor: "#f4f3f4",
-        testID: "push-notifications-switch"
-      })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.saveButton, {
-        backgroundColor: primaryColor,
-        opacity: isLoading ? 0.7 : 1
-      }],
-      onPress: handleSaveNotifications,
-      disabled: isLoading,
-      testID: "save-notifications-button",
-      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: styles.saveButtonText,
-        children: "Save Preferences"
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
       backgroundColor
     }],
-    children: /*#__PURE__*/_jsxs(ScrollView, {
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContainer,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.header,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.backButton,
-          onPress: goBack,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.backButtonText, {
-              color: primaryColor
-            }],
-            children: "Back"
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.title, {
-            color: textColor
-          }],
-          children: "Account Settings"
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.header,
+      children: editingField ? /*#__PURE__*/_jsxs(View, {
+        style: styles.editingHeader,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.editingHeaderTop,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.cancelButton,
+            onPress: cancelEditing,
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "close",
+              size: 24,
+              color: "#666"
+            })
+          }), /*#__PURE__*/_jsx(Animated.View, {
+            style: {
+              transform: [{
+                scale: saveButtonScale
+              }]
+            },
+            children: /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: [styles.saveHeaderButton, {
+                opacity: isSaving ? 0.7 : 1,
+                backgroundColor: editingField ? getFieldIcon(editingField).color : '#007AFF'
+              }],
+              onPress: () => saveField(editingField),
+              disabled: isSaving,
+              children: isSaving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                size: "small",
+                color: "#fff"
+              }) : /*#__PURE__*/_jsx(Text, {
+                style: styles.saveButtonText,
+                children: "Save"
+              })
+            })
+          })]
         }), /*#__PURE__*/_jsx(View, {
-          style: styles.backButtonPlaceholder
+          style: styles.editingHeaderBottom,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.headerTitleWithIcon,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: getFieldIcon(editingField).name,
+              size: 50,
+              color: getFieldIcon(editingField).color,
+              style: styles.headerIcon
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.headerTitleLarge,
+              children: getFieldLabel(editingField)
+            })]
+          })
         })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.tabsContainer, {
-          borderColor
-        }],
+      }) : /*#__PURE__*/_jsxs(View, {
+        style: styles.normalHeader,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.tabButton, currentTab === 'profile' && [styles.activeTabButton, {
-            borderColor: primaryColor
-          }]],
-          onPress: () => setCurrentTab('profile'),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.tabButtonText, {
-              color: currentTab === 'profile' ? primaryColor : textColor
-            }],
-            children: "Profile"
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.tabButton, currentTab === 'password' && [styles.activeTabButton, {
-            borderColor: primaryColor
-          }]],
-          onPress: () => setCurrentTab('password'),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.tabButtonText, {
-              color: currentTab === 'password' ? primaryColor : textColor
-            }],
-            children: "Password"
+          style: styles.cancelButton,
+          onPress: onClose || goBack,
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "close",
+            size: 24,
+            color: "#666"
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.tabButton, currentTab === 'notifications' && [styles.activeTabButton, {
-            borderColor: primaryColor
-          }]],
-          onPress: () => setCurrentTab('notifications'),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.tabButtonText, {
-              color: currentTab === 'notifications' ? primaryColor : textColor
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerTitle,
+          children: "Account Settings"
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            transform: [{
+              scale: saveButtonScale
+            }]
+          },
+          children: /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.saveIconButton, {
+              opacity: isSaving ? 0.7 : 1
             }],
-            children: "Notifications"
+            onPress: handleSave,
+            disabled: isSaving,
+            children: isSaving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: primaryColor
+            }) : /*#__PURE__*/_jsx(Ionicons, {
+              name: "checkmark",
+              size: 24,
+              color: primaryColor
+            })
           })
         })]
-      }), errorMessage ? /*#__PURE__*/_jsx(View, {
-        style: styles.errorContainer,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.errorText,
-          children: errorMessage
-        })
-      }) : null, successMessage ? /*#__PURE__*/_jsx(View, {
-        style: styles.successContainer,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.successText,
-          children: successMessage
-        })
-      }) : null, currentTab === 'profile' && renderProfileTab(), currentTab === 'password' && renderPasswordTab(), currentTab === 'notifications' && renderNotificationsTab()]
-    })
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: editingField ? styles.contentEditing : styles.content,
+      children: editingField ?
+      /*#__PURE__*/
+      // Show only the editing interface when editing
+      _jsx(View, {
+        style: styles.editingOnlyContainer,
+        children: renderEditingField(editingField)
+      }) :
+      /*#__PURE__*/
+      // Show all settings when not editing
+      _jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Profile Picture"
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            onPress: handleAvatarUpdate,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.userIcon,
+              children: /*#__PURE__*/_jsx(Avatar, {
+                uri: avatarUrl,
+                name: displayName || username,
+                size: 50,
+                theme: theme
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.settingInfo,
+              children: /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "Profile Photo"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: avatarUrl ? 'Tap to change your profile picture' : 'Tap to add a profile picture'
+                })]
+              })
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Basic Information"
+          }), 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)]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "About You"
+          }), 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)]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Quick Actions"
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem],
+            onPress: () => toast.info('Privacy settings coming soon!'),
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "shield-checkmark",
+                size: 20,
+                color: "#8E8E93",
+                style: styles.settingIcon
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "Privacy Settings"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: "Control who can see your profile"
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.lastSettingItem],
+            onPress: () => toast.info('Account verification coming soon!'),
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "checkmark-circle",
+                size: 20,
+                color: "#30D158",
+                style: styles.settingIcon
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "Verify Account"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: "Get a verified badge"
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          })]
+        })]
+      })
+    })]
   });
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    backgroundColor: '#f2f2f2'
   },
-  scrollView: {
-    flex: 1
+  header: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0'
+  },
+  normalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
   },
-  scrollContainer: {
-    padding: 20
+  editingHeader: {
+    flexDirection: 'column'
   },
-  header: {
+  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'
+    fontWeight: 'bold',
+    color: '#000',
+    fontFamily: fontFamilies.phuduBold
   },
-  backButton: {
-    padding: 10
+  headerTitleWithIcon: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    flex: 1,
+    justifyContent: 'flex-start',
+    maxWidth: '90%'
   },
-  backButtonText: {
-    fontSize: 16,
-    fontWeight: '600'
+  headerTitleLarge: {
+    fontSize: 48,
+    fontWeight: '800',
+    color: '#000',
+    fontFamily: fontFamilies.phuduExtraBold,
+    textAlign: 'left'
   },
-  backButtonPlaceholder: {
-    width: 40
+  headerIcon: {
+    marginBottom: 2
   },
-  tabsContainer: {
-    flexDirection: 'row',
-    marginBottom: 24,
-    borderBottomWidth: 1
+  cancelButton: {
+    padding: 5
   },
-  tabButton: {
-    flex: 1,
+  saveHeaderButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    minWidth: 60,
     alignItems: 'center',
-    paddingVertical: 12
+    justifyContent: 'center'
   },
-  activeTabButton: {
-    borderBottomWidth: 2
+  saveIconButton: {
+    padding: 5
   },
-  tabButtonText: {
+  saveButtonText: {
+    color: '#fff',
     fontSize: 16,
-    fontWeight: '500'
+    fontWeight: '600',
+    fontFamily: fontFamilies.phuduSemiBold
   },
-  tabContent: {
+  content: {
+    flex: 1,
+    padding: 16
+  },
+  contentEditing: {
+    flex: 1,
+    padding: 0
+  },
+  section: {
     marginBottom: 24
   },
-  avatarSection: {
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+    fontFamily: fontFamilies.phuduSemiBold
+  },
+  settingItem: {
+    backgroundColor: '#fff',
+    padding: 16,
+    flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 24
+    justifyContent: 'space-between',
+    marginBottom: 2
   },
-  changeAvatarButton: {
-    marginTop: 12,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 20
+  firstSettingItem: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24
   },
-  changeAvatarText: {
-    color: '#FFFFFF',
-    fontWeight: '600'
+  lastSettingItem: {
+    borderBottomLeftRadius: 24,
+    borderBottomRightRadius: 24,
+    marginBottom: 8
   },
-  inputContainer: {
-    marginBottom: 16
+  settingInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
   },
-  label: {
+  settingIcon: {
+    marginRight: 12
+  },
+  settingLabel: {
     fontSize: 16,
-    marginBottom: 8
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2
   },
-  input: {
-    height: 50,
-    borderRadius: 8,
-    borderWidth: 1,
-    paddingHorizontal: 12,
-    fontSize: 16
+  settingDescription: {
+    fontSize: 14,
+    color: '#666'
   },
-  textArea: {
-    minHeight: 100,
+  userIcon: {
+    marginRight: 12
+  },
+  // Inline editing styles
+  editingContainer: {
+    flex: 1
+  },
+  editingActions: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  editingButton: {
+    padding: 8
+  },
+  editingButtonText: {
+    fontSize: 16,
+    fontWeight: '500'
+  },
+  inlineInput: {
+    backgroundColor: '#f8f8f8',
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
     borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    minHeight: 44
+  },
+  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'
+    alignItems: 'center'
   },
-  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
+  },
+  newValueSection: {
+    flex: 1
   },
-  successContainer: {
-    backgroundColor: '#E8F5E9',
+  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;