"use strict";

import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import HighFive from '../../../assets/illustrations/HighFive';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import TextField from '../../components/internal/TextField';
import { useI18n } from '../../hooks/useI18n';
import { stepStyles } from '../../styles/spacing';
import Avatar from '../../components/Avatar';
import { useOxy } from '../../context/OxyContext';
import { toast } from '../../../lib/sonner';
import { useAccountStore, useAccounts, useAccountLoading } from '../../stores/accountStore';
import { fontFamilies } from '../../styles/fonts';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const MAX_QUICK_ACCOUNTS = 3;
const getThemeMode = theme => theme === 'dark' ? 'dark' : 'light';
const SignInUsernameStep = ({
  colors,
  styles,
  theme,
  navigate,
  nextStep,
  username,
  setUsername,
  errorMessage,
  setErrorMessage,
  validationStatus,
  userProfile,
  isValidating,
  isAddAccountMode,
  user,
  validateUsername
}) => {
  const inputRef = useRef(null);
  const {
    t
  } = useI18n();
  const {
    sessions,
    activeSessionId,
    switchSession,
    oxyServices
  } = useOxy();
  const baseStyles = stepStyles;
  const themeMode = getThemeMode(theme);
  const [switchingSessionId, setSwitchingSessionId] = useState(null);
  const [showAccounts, setShowAccounts] = useState(false);
  const previousSessionIdsRef = useRef('');

  // Zustand store - use stable selectors
  const quickAccounts = useAccounts();
  const loadingAccounts = useAccountLoading();
  const isLoading = useAccountStore(state => state.loading);

  // Store actions are stable - get them once
  const loadAccountsRef = useRef(useAccountStore.getState().loadAccounts);
  const setAccountsRef = useRef(useAccountStore.getState().setAccounts);
  const moveAccountToTopRef = useRef(useAccountStore.getState().moveAccountToTop);

  // Update refs if store changes (shouldn't happen, but safe)
  useEffect(() => {
    loadAccountsRef.current = useAccountStore.getState().loadAccounts;
    setAccountsRef.current = useAccountStore.getState().setAccounts;
    moveAccountToTopRef.current = useAccountStore.getState().moveAccountToTop;
  }, []);
  const sessionsToLoad = useMemo(() => {
    const allSessions = sessions || [];
    return allSessions.slice(0, MAX_QUICK_ACCOUNTS);
  }, [sessions]);
  const sessionsToLoadIds = useMemo(() => sessionsToLoad.map(s => s.sessionId).sort().join(','), [sessionsToLoad]);
  useEffect(() => {
    if (previousSessionIdsRef.current === sessionsToLoadIds || isLoading) return;
    if (!sessionsToLoad.length || !oxyServices) {
      setAccountsRef.current([]);
      previousSessionIdsRef.current = sessionsToLoadIds;
      return;
    }
    previousSessionIdsRef.current = sessionsToLoadIds;
    const uniqueSessionIds = Array.from(new Set(sessionsToLoad.map(s => s.sessionId)));
    if (uniqueSessionIds.length === 0) {
      setAccountsRef.current([]);
      return;
    }
    const currentAccounts = useAccountStore.getState().accounts;
    const accountsArray = Object.values(currentAccounts);
    void loadAccountsRef.current(uniqueSessionIds, oxyServices, accountsArray);
  }, [sessionsToLoadIds, oxyServices, isLoading]);
  const handleSwitchAccount = useCallback(async sessionId => {
    if (switchingSessionId || sessionId === activeSessionId) return;
    setSwitchingSessionId(sessionId);
    moveAccountToTopRef.current(sessionId);
    switchSession(sessionId).catch(error => {
      if (__DEV__) console.error('Failed to switch account:', error);
      const state = useAccountStore.getState();
      const account = state.accounts[sessionId];
      if (account) {
        const filtered = Object.values(state.accounts).filter(a => a.sessionId !== sessionId);
        setAccountsRef.current([...filtered, account]);
      }
      toast.error(t('signin.actions.switchAccountFailed') || 'Unable to switch accounts. Please try again.');
    }).finally(() => {
      setSwitchingSessionId(null);
    });
  }, [switchSession, switchingSessionId, activeSessionId, t]);
  const accountsForDisplay = useMemo(() => {
    const sessionMap = new Map(sessions?.map(s => [s.sessionId, s]) || []);
    return quickAccounts.map(account => {
      const session = sessionMap.get(account.sessionId);
      const isCurrent = session?.isCurrent === true || account.sessionId === activeSessionId;
      return {
        ...account,
        isCurrent
      };
    });
  }, [quickAccounts, sessions, activeSessionId]);
  const handleUsernameChange = useCallback(text => {
    const filteredText = text.replace(/[^a-zA-Z0-9]/g, '');
    setUsername(filteredText);
    if (errorMessage) setErrorMessage('');
  }, [setUsername, setErrorMessage, errorMessage]);
  const handleContinue = useCallback(async () => {
    const trimmedUsername = username?.trim() || '';
    if (!trimmedUsername) {
      setErrorMessage(t('signin.username.required') || 'Please enter your username.');
      setTimeout(() => inputRef.current?.focus(), 0);
      return;
    }
    if (trimmedUsername.length < 3) {
      setErrorMessage(t('signin.username.minLength') || 'Username must be at least 3 characters.');
      return;
    }
    try {
      const isValid = await validateUsername(trimmedUsername);
      if (isValid) {
        nextStep();
      }
    } catch (error) {
      if (__DEV__) console.error('Error during username validation:', error);
      setErrorMessage('Unable to validate username. Please try again.');
    }
  }, [username, validateUsername, nextStep, setErrorMessage, t]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, {
        alignItems: 'flex-start',
        position: 'relative'
      }],
      children: [/*#__PURE__*/_jsx(HighFive, {
        width: 100,
        height: 100
      }), /*#__PURE__*/_jsx(TouchableOpacity, {
        style: [stylesheet.languageButton, {
          backgroundColor: colors.inputBackground
        }],
        onPress: () => navigate('LanguageSelector'),
        activeOpacity: 0.7,
        children: /*#__PURE__*/_jsx(Ionicons, {
          name: "globe-outline",
          size: 20,
          color: colors.primary
        })
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, baseStyles.title, {
          color: colors.text,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signin.title')
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, baseStyles.subtitle, {
          color: colors.secondaryText,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signin.subtitle')
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing],
      children: /*#__PURE__*/_jsx(TextField, {
        ref: inputRef,
        label: t('common.labels.username'),
        leading: /*#__PURE__*/_jsx(Ionicons, {
          name: "person-outline",
          size: 24,
          color: colors.secondaryText
        }),
        value: username,
        onChangeText: handleUsernameChange,
        formatValue: text => text.replace(/[^a-zA-Z0-9]/g, ''),
        maxLength: 30,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "username-input",
        variant: "filled",
        error: validationStatus === 'invalid' ? errorMessage : undefined,
        loading: validationStatus === 'validating',
        success: validationStatus === 'valid',
        helperText: t('signin.username.helper') || '3-30 characters, letters and numbers only',
        onSubmitEditing: () => handleContinue(),
        autoFocus: true,
        accessibilityLabel: t('common.labels.username'),
        accessibilityHint: t('signin.username.helper') || 'Enter your username, 3-30 characters, letters and numbers only',
        style: {
          marginBottom: 0
        }
      })
    }), accountsForDisplay.length > 0 && /*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, stylesheet.dividerContainer],
      children: [/*#__PURE__*/_jsx(View, {
        style: [stylesheet.dividerLine, {
          backgroundColor: colors.border
        }]
      }), /*#__PURE__*/_jsx(Text, {
        style: [stylesheet.dividerText, {
          color: colors.secondaryText
        }],
        children: t('signin.or') || 'or'
      }), /*#__PURE__*/_jsx(View, {
        style: [stylesheet.dividerLine, {
          backgroundColor: colors.border
        }]
      })]
    }), accountsForDisplay.length > 0 ? /*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing],
      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
        style: [stylesheet.toggleButton, {
          backgroundColor: colors.inputBackground
        }],
        onPress: () => setShowAccounts(!showAccounts),
        activeOpacity: 0.7,
        children: /*#__PURE__*/_jsxs(View, {
          style: stylesheet.toggleButtonContent,
          children: [/*#__PURE__*/_jsx(Ionicons, {
            name: showAccounts ? 'chevron-down' : 'chevron-forward',
            size: 18,
            color: colors.primary
          }), /*#__PURE__*/_jsx(Text, {
            style: [stylesheet.toggleButtonText, {
              color: colors.text
            }],
            children: t('signin.alreadySignedInWith') || 'Already signed in with'
          }), accountsForDisplay.length > 0 && /*#__PURE__*/_jsx(View, {
            style: stylesheet.avatarsContainer,
            children: accountsForDisplay.slice(0, 5).map((account, index) => /*#__PURE__*/_jsx(View, {
              style: [stylesheet.avatarWrapper, account.isCurrent && stylesheet.currentAvatarWrapper, index > 0 && {
                marginLeft: -12
              }, {
                zIndex: Math.min(accountsForDisplay.length, 5) - index
              }, {
                borderColor: colors.inputBackground || colors.background || '#FFFFFF'
              }],
              children: /*#__PURE__*/_jsx(Avatar, {
                name: account.displayName,
                size: 28,
                theme: themeMode,
                backgroundColor: colors.primary,
                uri: account.avatarUrl
              })
            }, `avatar-${account.sessionId}`))
          }), !showAccounts && accountsForDisplay.length === 0 && quickAccounts.length > 0 && /*#__PURE__*/_jsx(View, {
            style: [stylesheet.accountCountBadge, {
              backgroundColor: `${colors.primary}15`
            }],
            children: /*#__PURE__*/_jsx(Text, {
              style: [stylesheet.accountCountText, {
                color: colors.primary
              }],
              children: quickAccounts.length
            })
          })]
        })
      }), showAccounts && /*#__PURE__*/_jsx(View, {
        style: stylesheet.accountsList,
        children: loadingAccounts && accountsForDisplay.length === 0 ? /*#__PURE__*/_jsx(View, {
          style: stylesheet.accountItem,
          children: /*#__PURE__*/_jsx(ActivityIndicator, {
            color: colors.primary,
            size: "small"
          })
        }) : /*#__PURE__*/_jsxs(_Fragment, {
          children: [accountsForDisplay.map(account => /*#__PURE__*/_jsx(TouchableOpacity, {
            style: [stylesheet.accountItem, {
              backgroundColor: colors.inputBackground
            }, switchingSessionId === account.sessionId && stylesheet.accountItemLoading],
            onPress: () => handleSwitchAccount(account.sessionId),
            disabled: switchingSessionId === account.sessionId || account.isCurrent,
            activeOpacity: 0.7,
            children: switchingSessionId === account.sessionId ? /*#__PURE__*/_jsx(ActivityIndicator, {
              color: colors.primary,
              size: "small"
            }) : /*#__PURE__*/_jsxs(_Fragment, {
              children: [/*#__PURE__*/_jsx(View, {
                style: [stylesheet.accountItemAvatarWrapper, {
                  borderColor: colors.inputBackground || colors.background || '#FFFFFF'
                }],
                children: /*#__PURE__*/_jsx(Avatar, {
                  name: account.displayName,
                  size: 36,
                  theme: themeMode,
                  backgroundColor: colors.primary,
                  uri: account.avatarUrl
                })
              }), /*#__PURE__*/_jsxs(View, {
                style: stylesheet.accountItemText,
                children: [/*#__PURE__*/_jsx(Text, {
                  style: [stylesheet.accountItemName, {
                    color: colors.text
                  }],
                  numberOfLines: 1,
                  children: account.displayName
                }), account.username && /*#__PURE__*/_jsxs(Text, {
                  style: [stylesheet.accountItemUsername, {
                    color: colors.secondaryText
                  }],
                  numberOfLines: 1,
                  children: ["@", account.username]
                })]
              }), account.isCurrent ? /*#__PURE__*/_jsx(View, {
                style: [stylesheet.currentAccountBadgeContainer, {
                  backgroundColor: `${colors.primary}20`
                }],
                children: /*#__PURE__*/_jsx(Text, {
                  style: [stylesheet.currentAccountBadge, {
                    color: colors.primary
                  }],
                  children: t('signin.currentAccount') || 'Current'
                })
              }) : null]
            })
          }, `account-${account.sessionId}`)), sessions && sessions.length > MAX_QUICK_ACCOUNTS && /*#__PURE__*/_jsxs(TouchableOpacity, {
            style: [stylesheet.accountItem, stylesheet.viewAllItem, {
              backgroundColor: colors.inputBackground
            }],
            onPress: () => navigate('AccountSwitcher'),
            activeOpacity: 0.7,
            children: [/*#__PURE__*/_jsx(Ionicons, {
              name: "chevron-forward",
              size: 18,
              color: colors.primary
            }), /*#__PURE__*/_jsx(Text, {
              style: [stylesheet.viewAllText, {
                color: colors.primary
              }],
              children: t('signin.viewAllAccounts', {
                count: sessions.length - MAX_QUICK_ACCOUNTS
              }) || `View ${sessions.length - MAX_QUICK_ACCOUNTS} more`
            })]
          })]
        })
      })]
    }) : null, /*#__PURE__*/_jsx(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
      children: /*#__PURE__*/_jsx(GroupedPillButtons, {
        buttons: [{
          text: t('common.links.signUp'),
          onPress: () => navigate('SignUp'),
          icon: 'person-add',
          variant: 'transparent'
        }, {
          text: t('common.actions.continue'),
          onPress: handleContinue,
          icon: 'arrow-forward',
          variant: 'primary',
          loading: isValidating,
          disabled: !username || username.trim().length < 3 || isValidating,
          testID: 'username-next-button'
        }],
        colors: colors
      })
    })]
  });
};
export default SignInUsernameStep;
const stylesheet = StyleSheet.create({
  toggleButton: {
    borderRadius: 24,
    borderWidth: 0
  },
  toggleButtonContent: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 10,
    minHeight: 48,
    gap: 10
  },
  toggleButtonText: {
    fontSize: 14,
    fontWeight: '500'
  },
  accountCountBadge: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 16,
    minWidth: 22,
    alignItems: 'center'
  },
  accountCountText: {
    fontSize: 11,
    fontWeight: '600'
  },
  accountsList: {
    gap: 6,
    marginTop: 6
  },
  accountItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 24,
    borderWidth: 0,
    gap: 12,
    minHeight: 56,
    justifyContent: 'space-between'
  },
  accountItemLoading: {
    justifyContent: 'center',
    paddingHorizontal: 16
  },
  accountItemText: {
    flex: 1
  },
  accountItemName: {
    fontSize: 15,
    fontWeight: '500',
    marginBottom: 2
  },
  accountItemUsername: {
    fontSize: 12
  },
  viewAllItem: {
    justifyContent: 'center',
    paddingVertical: 10
  },
  viewAllText: {
    fontSize: 14,
    fontWeight: '500',
    marginLeft: 4
  },
  currentAccountBadgeContainer: {
    paddingHorizontal: 12,
    paddingVertical: 5,
    borderRadius: 12,
    marginLeft: 'auto',
    minWidth: 60,
    alignItems: 'center',
    justifyContent: 'center'
  },
  currentAccountBadge: {
    fontSize: 11,
    fontFamily: fontFamilies.phuduExtraBold,
    letterSpacing: 0.5,
    textTransform: 'uppercase'
  },
  dividerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 8
  },
  dividerLine: {
    flex: 1,
    height: 1
  },
  dividerText: {
    fontSize: 14,
    fontWeight: '500',
    paddingHorizontal: 16,
    textTransform: 'lowercase'
  },
  avatarsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 'auto'
  },
  avatarWrapper: {
    position: 'relative',
    borderRadius: 20,
    borderWidth: 3
  },
  currentAvatarWrapper: {
    borderWidth: 3
  },
  accountItemAvatarWrapper: {
    borderRadius: 20,
    borderWidth: 3
  },
  languageButton: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=SignInUsernameStep.js.map