@oxyhq/services 5.4.2 → 5.4.3

package/lib/commonjs/ui/screens/AccountSwitcherScreen.js

@@ -0,0 +1,788 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _OxyContext = require("../context/OxyContext.js");
+var _sonner = require("../../lib/sonner.js");
+var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ModernAccountSwitcherScreen = ({
+  onClose,
+  theme,
+  navigate,
+  goBack,
+  oxyServices
+}) => {
+  const {
+    user,
+    sessions,
+    activeSessionId,
+    switchSession,
+    removeSession,
+    logoutAll,
+    isLoading
+  } = (0, _OxyContext.useOxy)();
+  const [sessionsWithUsers, setSessionsWithUsers] = (0, _react.useState)([]);
+  const [switchingToUserId, setSwitchingToUserId] = (0, _react.useState)(null);
+  const [removingUserId, setRemovingUserId] = (0, _react.useState)(null);
+
+  // Device session management state
+  const [showDeviceManagement, setShowDeviceManagement] = (0, _react.useState)(false);
+  const [deviceSessions, setDeviceSessions] = (0, _react.useState)([]);
+  const [loadingDeviceSessions, setLoadingDeviceSessions] = (0, _react.useState)(false);
+  const [remotingLogoutSessionId, setRemoteLogoutSessionId] = (0, _react.useState)(null);
+  const [loggingOutAllDevices, setLoggingOutAllDevices] = (0, _react.useState)(false);
+  const screenWidth = _reactNative.Dimensions.get('window').width;
+  const isDarkTheme = theme === 'dark';
+
+  // Modern color scheme
+  const colors = {
+    background: isDarkTheme ? '#000000' : '#FFFFFF',
+    surface: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+    card: isDarkTheme ? '#2C2C2E' : '#FFFFFF',
+    text: isDarkTheme ? '#FFFFFF' : '#000000',
+    secondaryText: isDarkTheme ? '#8E8E93' : '#6D6D70',
+    accent: '#007AFF',
+    destructive: '#FF3B30',
+    success: '#34C759',
+    border: isDarkTheme ? '#38383A' : '#C6C6C8',
+    activeCard: isDarkTheme ? '#0A84FF20' : '#007AFF15',
+    shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'
+  };
+
+  // Load user profiles for sessions
+  (0, _react.useEffect)(() => {
+    const loadUserProfiles = async () => {
+      if (!sessions.length || !oxyServices) return;
+      const updatedSessions = sessions.map(session => ({
+        ...session,
+        isLoadingProfile: true
+      }));
+      setSessionsWithUsers(updatedSessions);
+
+      // Load profiles for each session
+      for (let i = 0; i < sessions.length; i++) {
+        const session = sessions[i];
+        try {
+          // Try to get user profile using the session
+          const userProfile = await oxyServices.getUserBySession(session.sessionId);
+          setSessionsWithUsers(prev => prev.map(s => s.sessionId === session.sessionId ? {
+            ...s,
+            userProfile,
+            isLoadingProfile: false
+          } : s));
+        } catch (error) {
+          console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+          setSessionsWithUsers(prev => prev.map(s => s.sessionId === session.sessionId ? {
+            ...s,
+            isLoadingProfile: false
+          } : s));
+        }
+      }
+    };
+    loadUserProfiles();
+  }, [sessions, oxyServices]);
+  const handleSwitchSession = async sessionId => {
+    if (sessionId === user?.sessionId) return; // Already active session
+
+    setSwitchingToUserId(sessionId);
+    try {
+      await switchSession(sessionId);
+      _sonner.toast.success('Account switched successfully!');
+      if (onClose) {
+        onClose();
+      }
+    } catch (error) {
+      console.error('Switch session failed:', error);
+      _sonner.toast.error('There was a problem switching accounts. Please try again.');
+    } finally {
+      setSwitchingToUserId(null);
+    }
+  };
+  const handleRemoveSession = async sessionId => {
+    const sessionToRemove = sessionsWithUsers.find(s => s.sessionId === sessionId);
+    if (!sessionToRemove) return;
+    const displayName = typeof sessionToRemove.userProfile?.name === 'object' ? sessionToRemove.userProfile.name.full || sessionToRemove.userProfile.name.first || sessionToRemove.userProfile.username : sessionToRemove.userProfile?.name || sessionToRemove.userProfile?.username || 'this account';
+    _reactNative.Alert.alert('Remove Account', `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`, [{
+      text: 'Cancel',
+      style: 'cancel'
+    }, {
+      text: 'Remove',
+      style: 'destructive',
+      onPress: async () => {
+        setRemovingUserId(sessionId);
+        try {
+          await removeSession(sessionId);
+          _sonner.toast.success('Account removed successfully!');
+        } catch (error) {
+          console.error('Remove session failed:', error);
+          _sonner.toast.error('There was a problem removing the account. Please try again.');
+        } finally {
+          setRemovingUserId(null);
+        }
+      }
+    }], {
+      cancelable: true
+    });
+  };
+  const handleLogoutAll = async () => {
+    // IMPORTANT DEBUG INFO - Check this in console
+    console.log('🔴 DEBUG handleLogoutAll called');
+    console.log('🔴 Current user:', user);
+    console.log('🔴 activeSessionId:', activeSessionId);
+    console.log('🔴 sessions count:', sessions?.length || 0);
+    console.log('🔴 sessions array:', sessions);
+    console.log('🔴 isLoading:', isLoading);
+    console.log('🔴 logoutAll function type:', typeof logoutAll);
+
+    // Check if we have the required data
+    if (!activeSessionId) {
+      console.error('🔴 ERROR: No activeSessionId found!');
+      _sonner.toast.error('No active session found. You may already be logged out.');
+      return;
+    }
+    if (typeof logoutAll !== 'function') {
+      console.error('🔴 ERROR: logoutAll is not a function!', typeof logoutAll);
+      _sonner.toast.error('Logout function not available. Please try refreshing the app.');
+      return;
+    }
+
+    // TEMPORARY: Skip confirmation dialog to test direct logout
+    console.log('🔴 TESTING: Bypassing confirmation dialog for direct test');
+    try {
+      console.log('🔴 TESTING: About to call logoutAll() directly');
+      await logoutAll();
+      console.log('🔴 TESTING: logoutAll() completed successfully');
+      _sonner.toast.success('All accounts signed out successfully!');
+      if (onClose) {
+        console.log('🔴 TESTING: Calling onClose');
+        onClose();
+      }
+    } catch (error) {
+      console.error('🔴 TESTING: Logout all failed:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+      _sonner.toast.error(`There was a problem signing out: ${errorMessage}`);
+    }
+  };
+
+  // Device session management functions
+  const loadAllDeviceSessions = async () => {
+    if (!oxyServices || !user?.sessionId) return;
+    setLoadingDeviceSessions(true);
+    try {
+      // This would call the API to get all device sessions for the current user
+      const allSessions = await oxyServices.getDeviceSessions(user.sessionId);
+      setDeviceSessions(allSessions || []);
+    } catch (error) {
+      console.error('Failed to load device sessions:', error);
+      _sonner.toast.error('Failed to load device sessions. Please try again.');
+    } finally {
+      setLoadingDeviceSessions(false);
+    }
+  };
+  const handleRemoteSessionLogout = async (sessionId, deviceName) => {
+    _reactNative.Alert.alert('Remove Device Session', `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`, [{
+      text: 'Cancel',
+      style: 'cancel'
+    }, {
+      text: 'Sign Out',
+      style: 'destructive',
+      onPress: async () => {
+        setRemoteLogoutSessionId(sessionId);
+        try {
+          await oxyServices?.logoutSecureSession(user?.sessionId || '', sessionId);
+          // Refresh device sessions list
+          await loadAllDeviceSessions();
+          _sonner.toast.success(`Signed out from ${deviceName} successfully!`);
+        } catch (error) {
+          console.error('Remote logout failed:', error);
+          _sonner.toast.error('There was a problem signing out from the device. Please try again.');
+        } finally {
+          setRemoteLogoutSessionId(null);
+        }
+      }
+    }], {
+      cancelable: true
+    });
+  };
+  const handleLogoutAllDevices = async () => {
+    const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
+    if (otherDevicesCount === 0) {
+      _sonner.toast.info('No other device sessions found to sign out from.');
+      return;
+    }
+    _reactNative.Alert.alert('Sign Out All Other Devices', `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`, [{
+      text: 'Cancel',
+      style: 'cancel'
+    }, {
+      text: 'Sign Out All',
+      style: 'destructive',
+      onPress: async () => {
+        setLoggingOutAllDevices(true);
+        try {
+          await oxyServices?.logoutAllDeviceSessions(user?.sessionId || '', undefined, true);
+          // Refresh device sessions list
+          await loadAllDeviceSessions();
+          _sonner.toast.success('Signed out from all other devices successfully!');
+        } catch (error) {
+          console.error('Logout all devices failed:', error);
+          _sonner.toast.error('There was a problem signing out from other devices. Please try again.');
+        } finally {
+          setLoggingOutAllDevices(false);
+        }
+      }
+    }], {
+      cancelable: true
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: '#f2f2f2'
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.backButton,
+        onPress: goBack,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+          name: "chevron-back",
+          size: 24,
+          color: "#007AFF"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.headerTitle,
+        children: "Account Switcher"
+      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: onClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.closeButtonText,
+          children: "\xD7"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.content,
+      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.loadingContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          size: "large",
+          color: "#007AFF"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.loadingText,
+          children: "Loading accounts..."
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [user && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.section,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionTitle,
+            children: "Current Account"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.userIcon,
+              children: [user.avatar?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                source: {
+                  uri: user.avatar.url
+                },
+                style: styles.accountAvatarImage
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.accountAvatarFallback,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.accountAvatarText,
+                  children: (typeof user.name === 'string' ? user.name : user.name?.first || user.username)?.charAt(0).toUpperCase()
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.activeBadge,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                  name: "checkmark",
+                  size: 12,
+                  color: "#fff"
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.settingInfo,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingLabel,
+                  children: typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingDescription,
+                  children: user.email || user.username
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.currentBadge,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.currentBadgeText,
+                children: "Current"
+              })
+            })]
+          })]
+        }), sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.section,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.sectionTitle,
+            children: ["Other Accounts (", sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length, ")"]
+          }), sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).map((sessionWithUser, index, filteredArray) => {
+            const isFirst = index === 0;
+            const isLast = index === filteredArray.length - 1;
+            const isSwitching = switchingToUserId === sessionWithUser.sessionId;
+            const isRemoving = removingUserId === sessionWithUser.sessionId;
+            const {
+              userProfile,
+              isLoadingProfile
+            } = sessionWithUser;
+            const displayName = typeof userProfile?.name === 'object' ? userProfile.name.full || userProfile.name.first || userProfile.username : userProfile?.name || userProfile?.username || 'Unknown User';
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.userIcon,
+                children: isLoadingProfile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                    size: "small",
+                    color: "#007AFF"
+                  })
+                }) : userProfile?.avatar?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: userProfile.avatar.url
+                  },
+                  style: styles.accountAvatarImage
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.accountAvatarText,
+                    children: displayName.charAt(0).toUpperCase()
+                  })
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.settingInfo,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.settingLabel,
+                    children: displayName
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    style: styles.settingDescription,
+                    children: ["@", userProfile?.username || 'unknown']
+                  })]
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.accountActions,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  style: styles.switchButton,
+                  onPress: () => handleSwitchSession(sessionWithUser.sessionId),
+                  disabled: isSwitching || isRemoving,
+                  children: isSwitching ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                    size: "small",
+                    color: "#007AFF"
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.switchButtonText,
+                    children: "Switch"
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                  style: styles.removeButton,
+                  onPress: () => handleRemoveSession(sessionWithUser.sessionId),
+                  disabled: isSwitching || isRemoving,
+                  children: isRemoving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                    size: "small",
+                    color: "#FF3B30"
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                    name: "trash",
+                    size: 16,
+                    color: "#FF3B30"
+                  })
+                })]
+              })]
+            }, sessionWithUser.sessionId);
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.section,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionTitle,
+            children: "Quick Actions"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem],
+            onPress: () => navigate?.('SignIn'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "person-add",
+                size: 20,
+                color: "#007AFF",
+                style: styles.settingIcon
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingLabel,
+                  children: "Add Another Account"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingDescription,
+                  children: "Sign in with a different account"
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.settingItem,
+            onPress: () => setShowDeviceManagement(!showDeviceManagement),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "devices",
+                size: 20,
+                color: "#5856D6",
+                style: styles.settingIcon
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                  style: styles.settingLabel,
+                  children: [showDeviceManagement ? 'Hide' : 'Manage', " Device Sessions"]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingDescription,
+                  children: "View and manage sessions on other devices"
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.settingItem, styles.lastSettingItem],
+            onPress: handleLogoutAll,
+            disabled: sessionsWithUsers.length === 0,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "log-out",
+                size: 20,
+                color: "#FF3B30",
+                style: styles.settingIcon
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.settingLabel, {
+                    color: sessionsWithUsers.length === 0 ? '#ccc' : '#FF3B30'
+                  }],
+                  children: "Sign Out All Accounts"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingDescription,
+                  children: "Remove all accounts from this device"
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          })]
+        }), showDeviceManagement && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.section,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionTitle,
+            children: "Device Sessions"
+          }), loadingDeviceSessions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.loadingContainer,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                size: "small",
+                color: "#007AFF"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.loadingText,
+                children: "Loading device sessions..."
+              })]
+            })
+          }) : deviceSessions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "phone-portrait",
+                size: 20,
+                color: "#ccc",
+                style: styles.settingIcon
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingLabel,
+                  children: "No device sessions found"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.settingDescription,
+                  children: "Device session management not available"
+                })]
+              })]
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: deviceSessions.map((session, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.settingItem, index === 0 && styles.firstSettingItem, index === deviceSessions.length - 1 && styles.lastSettingItem],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.settingInfo,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                  name: session.isCurrent ? "phone-portrait" : "phone-portrait-outline",
+                  size: 20,
+                  color: session.isCurrent ? "#34C759" : "#8E8E93",
+                  style: styles.settingIcon
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    style: styles.settingLabel,
+                    children: [session.deviceName, " ", session.isCurrent ? '(This device)' : '']
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    style: styles.settingDescription,
+                    children: ["Last active: ", new Date(session.lastActive).toLocaleDateString()]
+                  })]
+                })]
+              }), !session.isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                style: styles.removeButton,
+                onPress: () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
+                disabled: remotingLogoutSessionId === session.sessionId,
+                children: remotingLogoutSessionId === session.sessionId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                  size: "small",
+                  color: "#FF3B30"
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                  name: "log-out",
+                  size: 16,
+                  color: "#FF3B30"
+                })
+              })]
+            }, session.sessionId))
+          })]
+        }), sessionsWithUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.section,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.emptyStateContainer,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "person-outline",
+                size: 48,
+                color: "#ccc"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.emptyStateTitle,
+                children: "No saved accounts"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.emptyStateDescription,
+                children: "Add another account to switch between them quickly"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                style: styles.addAccountButton,
+                onPress: () => navigate?.('SignIn'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.addAccountButtonText,
+                  children: "Add Account"
+                })
+              })]
+            })
+          })
+        })]
+      })
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f2f2f2'
+  },
+  header: {
+    paddingHorizontal: 20,
+    paddingTop: 60,
+    paddingBottom: 16,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#000'
+  },
+  backButton: {
+    padding: 8
+  },
+  closeButton: {
+    padding: 8
+  },
+  closeButtonText: {
+    fontSize: 24,
+    color: '#000',
+    fontWeight: '300'
+  },
+  content: {
+    flex: 1,
+    padding: 16
+  },
+  section: {
+    marginBottom: 24
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12
+  },
+  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
+  },
+  currentAccountCard: {
+    borderWidth: 2,
+    borderColor: '#007AFF',
+    backgroundColor: '#007AFF08'
+  },
+  settingInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  settingIcon: {
+    marginRight: 12
+  },
+  settingLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2
+  },
+  settingDescription: {
+    fontSize: 14,
+    color: '#666'
+  },
+  userIcon: {
+    marginRight: 12,
+    position: 'relative'
+  },
+  accountAvatarImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 20
+  },
+  accountAvatarFallback: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#d169e5',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  accountAvatarText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold'
+  },
+  activeBadge: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: '#34C759',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: '#fff'
+  },
+  currentBadge: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12
+  },
+  currentBadgeText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  accountActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  switchButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 16,
+    minWidth: 60,
+    alignItems: 'center'
+  },
+  switchButtonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  removeButton: {
+    padding: 8,
+    borderRadius: 16,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#FF3B30',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 20,
+    gap: 12
+  },
+  loadingText: {
+    fontSize: 16,
+    color: '#666'
+  },
+  emptyStateContainer: {
+    alignItems: 'center',
+    paddingVertical: 32,
+    paddingHorizontal: 20
+  },
+  emptyStateTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginTop: 16,
+    marginBottom: 8
+  },
+  emptyStateDescription: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 20
+  },
+  addAccountButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 20
+  },
+  addAccountButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600'
+  }
+});
+var _default = exports.default = ModernAccountSwitcherScreen;
+//# sourceMappingURL=AccountSwitcherScreen.js.map