@oxyhq/services 5.3.11 → 5.4.1

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

@@ -1,21 +1,28 @@
 "use strict";
 
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Platform, Image } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Image } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
+import OxyIcon from '../components/icon/OxyIcon';
 import { toast } from '../../lib/sonner';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AccountOverviewScreen = ({
   onClose,
-  theme
+  theme,
+  navigate
 }) => {
   const {
     user,
     logout,
-    isLoading
+    isLoading,
+    sessions,
+    activeSessionId,
+    oxyServices
   } = useOxy();
   const [showMoreAccounts, setShowMoreAccounts] = useState(false);
+  const [additionalAccountsData, setAdditionalAccountsData] = useState([]);
+  const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
   const isDarkTheme = theme === 'dark';
   const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
   const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
@@ -25,15 +32,52 @@ const AccountOverviewScreen = ({
   const dangerColor = '#D32F2F';
   const iconColor = isDarkTheme ? '#BBBBBB' : '#666666';
 
-  // Mock additional accounts (for demo purposes)
-  const additionalAccounts = [{
-    id: '2',
-    username: 'Albert Isern Alvarez',
-    email: 'albert.isern.alvarez@gmail.com',
-    avatar: {
-      url: 'https://example.com/avatar2.jpg'
-    }
-  }];
+  // Get additional accounts from sessions (excluding current user)
+  const additionalAccounts = sessions.filter(session => session.sessionId !== activeSessionId && session.userId !== user?.id);
+
+  // Load user profiles for additional accounts
+  React.useEffect(() => {
+    const loadAdditionalAccountsData = async () => {
+      if (!oxyServices || additionalAccounts.length === 0) {
+        setAdditionalAccountsData([]);
+        return;
+      }
+      setLoadingAdditionalAccounts(true);
+      try {
+        const accountsData = await Promise.all(additionalAccounts.map(async session => {
+          try {
+            const userProfile = await oxyServices.getUserBySession(session.sessionId);
+            return {
+              id: session.sessionId,
+              sessionId: session.sessionId,
+              username: userProfile.username,
+              email: userProfile.email,
+              name: userProfile.name,
+              avatar: userProfile.avatar,
+              userProfile
+            };
+          } catch (error) {
+            console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+            return {
+              id: session.sessionId,
+              sessionId: session.sessionId,
+              username: session.username || 'Unknown User',
+              email: 'No email available',
+              avatar: null,
+              userProfile: null
+            };
+          }
+        }));
+        setAdditionalAccountsData(accountsData);
+      } catch (error) {
+        console.error('Failed to load additional accounts:', error);
+        setAdditionalAccountsData([]);
+      } finally {
+        setLoadingAdditionalAccounts(false);
+      }
+    };
+    loadAdditionalAccountsData();
+  }, [sessions, activeSessionId, user?.id, oxyServices]);
 
   // Feature settings (with mock values)
   const features = {
@@ -78,29 +122,6 @@ const AccountOverviewScreen = ({
       cancelable: true
     });
   };
-  const renderFeatureItem = (icon, title, value, onPress) => /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: [styles.featureItem, {
-      borderColor
-    }],
-    onPress: onPress,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.featureItemLeft,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.iconContainer,
-        children: icon
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.featureItemTitle, {
-          color: textColor
-        }],
-        children: title
-      })]
-    }), value !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: [styles.featureItemValue, {
-        color: iconColor
-      }],
-      children: value
-    })]
-  });
   if (!user) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, {
@@ -126,437 +147,684 @@ const AccountOverviewScreen = ({
       })
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
-      backgroundColor
+      backgroundColor: '#f2f2f2'
     }],
-    children: /*#__PURE__*/_jsxs(ScrollView, {
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContainer,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        children: "Account"
+      }), onClose && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: onClose,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.closeButtonText,
+          children: "\xD7"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.content,
       children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.header,
+        style: styles.section,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.accountEmail, {
-            color: textColor
-          }],
-          children: user.email || user.username
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.closeIcon,
-          onPress: onClose,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: {
-              fontSize: 24,
-              color: textColor
-            },
-            children: "\xD7"
-          })
+          style: styles.sectionTitle,
+          children: "Profile"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.userIcon,
+            children: /*#__PURE__*/_jsx(Avatar, {
+              uri: user?.avatar?.url,
+              name: user?.name?.full,
+              size: 40,
+              theme: theme
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.settingInfo,
+            children: /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: user.email || user.username
+              })]
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.manageButton,
+            onPress: () => toast.info('Manage your Oxy Account feature coming soon!'),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.manageButtonText,
+              children: "Manage"
+            })
+          })]
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.profileContainer, {
-          backgroundColor: secondaryBackgroundColor
-        }],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.avatarContainer,
-          children: /*#__PURE__*/_jsx(Avatar, {
-            uri: user?.avatar?.url,
-            name: user?.name?.full,
-            size: 70,
-            theme: theme
-          })
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.greeting, {
-            color: textColor
-          }],
-          children: ["Hi, ", user?.name?.first, "!"]
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.manageAccountButton, {
-            borderColor
-          }],
-          onPress: () => toast.info('Manage your Oxy Account feature coming soon!'),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.manageAccountText, {
-              color: textColor
-            }],
-            children: "Manage your Oxy Account"
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.sectionHeader, {
-          borderColor
-        }],
-        onPress: () => setShowMoreAccounts(!showMoreAccounts),
+        style: styles.section,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionHeaderText, {
-            color: textColor
-          }],
-          children: showMoreAccounts ? "Hide more accounts" : "Show more accounts"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: textColor,
-            fontSize: 16
-          },
-          children: showMoreAccounts ? "▲" : "▼"
-        })]
-      }), showMoreAccounts && /*#__PURE__*/_jsxs(View, {
-        style: [styles.accountsContainer, {
-          backgroundColor: secondaryBackgroundColor
-        }],
-        children: [additionalAccounts.map(account => /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.accountItem, {
-            borderColor
-          }],
-          onPress: () => toast.info(`Switch to ${account.username}?`),
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.accountItemLeft,
-            children: [account.avatar.url ? /*#__PURE__*/_jsx(Image, {
-              source: {
-                uri: account.avatar.url
-              },
-              style: styles.accountAvatar
-            }) : /*#__PURE__*/_jsx(View, {
-              style: [styles.accountAvatar, {
-                backgroundColor: primaryColor
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.avatarText,
-                children: account.username.charAt(0).toUpperCase()
-              })
+          style: styles.sectionTitle,
+          children: "Account Settings"
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.firstSettingItem],
+          onPress: () => navigate?.('AccountSettings', {
+            activeTab: 'profile'
+          }),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "person-circle",
+              size: 20,
+              color: "#007AFF",
+              style: styles.settingIcon
             }), /*#__PURE__*/_jsxs(View, {
               children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.accountName, {
-                  color: textColor
-                }],
-                children: account.username
+                style: styles.settingLabel,
+                children: "Edit Profile"
               }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.accountEmail, {
-                  color: iconColor
-                }],
-                children: account.email
+                style: styles.settingDescription,
+                children: "Update your personal information"
               })]
             })]
-          })
-        }, account.id)), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.accountItem, {
-            borderColor
-          }],
-          onPress: handleAddAccount,
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingItem,
+          onPress: () => navigate?.('AccountSettings', {
+            activeTab: 'password'
+          }),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "shield-checkmark",
+              size: 20,
+              color: "#30D158",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Security & Privacy"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Password, 2FA, and privacy settings"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingItem,
+          onPress: () => navigate?.('AccountSettings', {
+            activeTab: 'notifications'
+          }),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "notifications",
+              size: 20,
+              color: "#FF9500",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Notifications"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Manage your notification preferences"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem],
+          onPress: () => navigate?.('PremiumSubscription'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "star",
+              size: 20,
+              color: "#FFD700",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Oxy+ Subscriptions"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: user.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), user.isPremium && /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.lastSettingItem],
+          onPress: () => navigate?.('BillingManagement'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "card",
+              size: 20,
+              color: "#34C759",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Billing Management"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Payment methods and invoices"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        })]
+      }), showMoreAccounts && /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.sectionTitle,
+          children: ["Additional Accounts", additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : '']
+        }), loadingAdditionalAccounts ? /*#__PURE__*/_jsx(View, {
+          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
           children: /*#__PURE__*/_jsxs(View, {
-            style: styles.accountItemLeft,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.accountAvatar, styles.addAccountIcon, {
-                borderColor
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: {
-                  fontSize: 20,
-                  color: textColor
-                },
-                children: "+"
-              })
+            style: styles.loadingContainer,
+            children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: "#007AFF"
             }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.accountItemAction, {
-                color: textColor
-              }],
-              children: "Add another account"
+              style: styles.loadingText,
+              children: "Loading accounts..."
             })]
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.accountItem, {
-            borderColor
-          }],
-          onPress: handleSignOutAll,
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.accountItemLeft,
+        }) : additionalAccountsData.length > 0 ? /*#__PURE__*/_jsx(_Fragment, {
+          children: additionalAccountsData.map((account, index) => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, index === 0 && styles.firstSettingItem, index === additionalAccountsData.length - 1 && styles.lastSettingItem],
+            onPress: () => {
+              toast.info(`Switch to ${account.username}?`);
+              // TODO: Implement account switching logic
+              // switchSession(account.sessionId);
+            },
             children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.accountAvatar, styles.signOutIcon, {
-                borderColor
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: {
-                  fontSize: 20,
-                  color: textColor
+              style: styles.userIcon,
+              children: account.avatar?.url ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: account.avatar.url
                 },
-                children: "\u2190"
+                style: styles.accountAvatarImage
+              }) : /*#__PURE__*/_jsx(View, {
+                style: styles.accountAvatarFallback,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.accountAvatarText,
+                  children: account.username?.charAt(0).toUpperCase() || '?'
+                })
               })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.accountItemAction, {
-                color: textColor
-              }],
-              children: "Sign out of all accounts"
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.settingInfo,
+              children: /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: typeof account.name === 'object' ? account.name?.full || account.name?.first || account.username : account.name || account.username
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: account.email || account.username
+                })]
+              })
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          }, account.id))
+        }) : /*#__PURE__*/_jsx(View, {
+          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "person-outline",
+              size: 20,
+              color: "#ccc",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "No other accounts"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Add another account to switch between them"
+              })]
             })]
           })
         })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.sectionHeader,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionHeaderText, {
-            color: textColor
-          }],
-          children: "More from Oxy"
-        })
+      }), showMoreAccounts && /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "Account Management"
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.firstSettingItem],
+          onPress: handleAddAccount,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "add",
+              size: 20,
+              color: "#007AFF",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Add another account"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Sign in with a different account"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.lastSettingItem],
+          onPress: handleSignOutAll,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "log-out",
+              size: 20,
+              color: "#FF3B30",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Sign out of all accounts"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Remove all accounts from this device"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.featuresContainer, {
-          backgroundColor: secondaryBackgroundColor
-        }],
-        children: [renderFeatureItem(/*#__PURE__*/_jsx(Text, {
-          style: {
-            fontSize: 18
-          },
-          children: "\uD83D\uDD52"
-        }), 'History', 'Saving', () => toast.info('View your history feature coming soon!')), renderFeatureItem(/*#__PURE__*/_jsx(Text, {
-          style: {
-            fontSize: 18
-          },
-          children: "\u23F1\uFE0F"
-        }), 'Delete last 15 minutes', null, () => toast.info('Delete recent history feature coming soon!')), renderFeatureItem(/*#__PURE__*/_jsx(Text, {
-          style: {
-            fontSize: 18
-          },
-          children: "\uD83D\uDCCB"
-        }), 'Saves & Collections', null, () => toast.info('Saved items feature coming soon!')), renderFeatureItem(/*#__PURE__*/_jsx(Text, {
-          style: {
-            fontSize: 18
-          },
-          children: "\uD83D\uDD0D"
-        }), 'Search personalization', null, () => toast.info('Search personalization feature coming soon!')), renderFeatureItem(/*#__PURE__*/_jsx(Text, {
-          style: {
-            fontSize: 18
-          },
-          children: "\uD83D\uDEE1\uFE0F"
-        }), 'SafeSearch', features.safeSearch ? 'On' : 'Off', () => toast.info('SafeSearch settings feature coming soon!')), renderFeatureItem(/*#__PURE__*/_jsx(Text, {
-          style: {
-            fontSize: 18
-          },
-          children: "\uD83C\uDF10"
-        }), 'Language', features.language, () => toast.info('Language settings feature coming soon!'))]
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "Quick Actions"
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.firstSettingItem],
+          onPress: () => setShowMoreAccounts(!showMoreAccounts),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "people",
+              size: 20,
+              color: "#5856D6",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.settingLabel,
+                children: [showMoreAccounts ? 'Hide' : 'Show', " Account Switcher"]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: showMoreAccounts ? 'Hide account switcher' : additionalAccountsData.length > 0 ? `Switch between ${additionalAccountsData.length + 1} accounts` : loadingAdditionalAccounts ? 'Loading additional accounts...' : 'Manage multiple accounts'
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingItem,
+          onPress: () => toast.info('Download account data feature coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "download",
+              size: 20,
+              color: "#34C759",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Download My Data"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Export your account information"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.lastSettingItem],
+          onPress: () => toast.info('Delete account feature coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "trash",
+              size: 20,
+              color: "#FF3B30",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Delete Account"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Permanently delete your account"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.footerContainer,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.footerButtonsRow,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.footerButton,
-            onPress: () => toast.info('More settings feature coming soon!'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.footerButtonText, {
-                color: textColor
-              }],
-              children: "More settings"
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.footerButton,
-            onPress: () => toast.info('Help & support feature coming soon!'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.footerButtonText, {
-                color: textColor
-              }],
-              children: "Help"
-            })
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "Support & Settings"
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.firstSettingItem],
+          onPress: () => toast.info('Account preferences coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "settings",
+              size: 20,
+              color: "#8E8E93",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Account Preferences"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Customize your account experience"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
           })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.footerLinksRow,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: () => toast.info('Privacy Policy feature coming soon!'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.footerLink, {
-                color: iconColor
-              }],
-              children: "Privacy Policy"
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [{
-              color: iconColor,
-              marginHorizontal: 5
-            }],
-            children: "\u2022"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: () => toast.info('Terms of Service feature coming soon!'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.footerLink, {
-                color: iconColor
-              }],
-              children: "Terms of Service"
-            })
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingItem,
+          onPress: () => toast.info('Help & support feature coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "help-circle",
+              size: 20,
+              color: "#007AFF",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Help & Support"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Get help with your account"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingItem,
+          onPress: () => toast.info('Connected apps feature coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "link",
+              size: 20,
+              color: "#32D74B",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Connected Apps"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Manage third-party app access"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.settingItem,
+          onPress: () => toast.info('Privacy Policy feature coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "document-lock",
+              size: 20,
+              color: "#FF9F0A",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Privacy Policy"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Learn about data protection"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.settingItem, styles.lastSettingItem],
+          onPress: () => toast.info('Terms of Service feature coming soon!'),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "document-text",
+              size: 20,
+              color: "#5856D6",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.settingLabel,
+                children: "Terms of Service"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Read our terms and conditions"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-forward",
+            size: 16,
+            color: "#ccc"
           })]
         })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.signOutButton],
+          onPress: confirmLogout,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.settingInfo,
+            children: [/*#__PURE__*/_jsx(OxyIcon, {
+              name: "log-out",
+              size: 20,
+              color: "#ff4757",
+              style: styles.settingIcon
+            }), /*#__PURE__*/_jsxs(View, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.settingLabel, {
+                  color: '#ff4757'
+                }],
+                children: "Sign Out"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.settingDescription,
+                children: "Sign out of your account"
+              })]
+            })]
+          })
+        })
       })]
-    })
+    })]
   });
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollContainer: {
-    padding: 20
+    flex: 1,
+    backgroundColor: '#f2f2f2'
   },
   header: {
+    paddingHorizontal: 20,
+    paddingTop: 60,
+    paddingBottom: 16,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 20
-  },
-  closeIcon: {
-    padding: 8
-  },
-  profileContainer: {
-    padding: 20,
-    borderRadius: 15,
-    alignItems: 'center',
-    marginBottom: 20
-  },
-  avatarContainer: {
-    margin: 10
-  },
-  avatar: {
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-    justifyContent: 'center',
     alignItems: 'center'
   },
-  avatarText: {
-    color: 'white',
-    fontSize: 30,
-    fontWeight: 'bold'
-  },
-  greeting: {
-    fontFamily: Platform.OS === 'web' ? 'Phudu' // Use CSS font name directly for web
-    : 'Phudu-Bold',
-    // Use exact font name as registered with Font.loadAsync
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    // Only apply fontWeight on web
-    fontSize: 20,
-    marginVertical: 10
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#000'
   },
-  manageAccountButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderWidth: 1,
-    borderRadius: 20,
-    marginTop: 10
+  closeButton: {
+    padding: 8
   },
-  manageAccountText: {
-    fontSize: 14
+  closeButtonText: {
+    fontSize: 24,
+    color: '#000',
+    fontWeight: '300'
   },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 15,
-    borderBottomWidth: 1,
-    marginBottom: 10
+  content: {
+    flex: 1,
+    padding: 16
   },
-  sectionHeaderText: {
-    fontFamily: Platform.OS === 'web' ? 'Phudu' // Use CSS font name directly for web
-    : 'Phudu-Bold',
-    // Use exact font name as registered with Font.loadAsync
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    // Only apply fontWeight on web
-    fontSize: 16
+  section: {
+    marginBottom: 24
   },
-  accountsContainer: {
-    borderRadius: 15,
-    marginBottom: 20,
-    overflow: 'hidden'
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12
   },
-  accountItem: {
+  settingItem: {
+    backgroundColor: '#fff',
+    padding: 16,
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 15,
-    borderBottomWidth: 1
-  },
-  accountItemLeft: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  accountAvatar: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    marginRight: 15,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  accountName: {
-    fontSize: 15,
-    fontWeight: '500'
-  },
-  accountEmail: {
-    fontSize: 14
-  },
-  accountItemAction: {
-    fontSize: 15
-  },
-  addAccountIcon: {
-    backgroundColor: 'transparent',
-    borderWidth: 1
+    justifyContent: 'space-between',
+    marginBottom: 2
   },
-  signOutIcon: {
-    backgroundColor: 'transparent',
-    borderWidth: 1
+  firstSettingItem: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24
   },
-  featuresContainer: {
-    borderRadius: 15,
-    overflow: 'hidden',
-    marginBottom: 20
+  lastSettingItem: {
+    borderBottomLeftRadius: 24,
+    borderBottomRightRadius: 24,
+    marginBottom: 8
   },
-  featureItem: {
+  settingInfo: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 15,
-    borderBottomWidth: 1
-  },
-  featureItemLeft: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flex: 1
   },
-  iconContainer: {
-    width: 36,
-    height: 36,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 15
+  settingIcon: {
+    marginRight: 12
   },
-  featureItemTitle: {
-    fontSize: 15,
+  settingLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2
+  },
+  settingDescription: {
+    fontSize: 14,
+    color: '#666'
+  },
+  userIcon: {
+    marginRight: 12
+  },
+  manageButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 16
+  },
+  manageButtonText: {
+    color: '#fff',
+    fontSize: 14,
     fontWeight: '500'
   },
-  featureItemValue: {
-    fontSize: 14
+  accountAvatarImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 20
   },
-  footerContainer: {
-    marginBottom: 30
+  accountAvatarFallback: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#d169e5',
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  footerButtonsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 20
+  accountAvatarText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold'
   },
-  footerButton: {
-    flex: 1,
-    padding: 15,
-    alignItems: 'center'
+  signOutButton: {
+    borderWidth: 1,
+    borderColor: '#ff4757'
   },
-  footerButtonText: {
-    fontSize: 15
+  message: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 24,
+    color: '#333'
   },
-  footerLinksRow: {
+  loadingContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'center',
-    alignItems: 'center'
+    paddingVertical: 20,
+    gap: 12
   },
-  footerLink: {
-    fontSize: 13
-  },
-  message: {
+  loadingText: {
     fontSize: 16,
-    textAlign: 'center',
-    marginTop: 24
+    color: '#666'
   }
 });
 export default AccountOverviewScreen;