"use strict";

import { useRef, useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import PinInput from '../../components/internal/PinInput';
import { useI18n } from '../../hooks/useI18n';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const SignInTotpStep = ({
  colors,
  styles,
  navigate,
  prevStep,
  nextStep,
  username,
  mfaToken,
  completeMfaLogin,
  errorMessage,
  setErrorMessage,
  isLoading
}) => {
  const [code, setCode] = useState('');
  const inputRef = useRef(null);
  const {
    t
  } = useI18n();
  const handleVerify = async () => {
    if (!code || code.length !== 6) {
      setErrorMessage?.(t('recover.enterCode'));
      return;
    }
    try {
      setErrorMessage?.('');
      await completeMfaLogin?.(mfaToken, code);
      // Login completed; higher-level navigation should continue automatically
    } catch (e) {
      setErrorMessage?.(e?.message || t('signin.totp.invalidCode') || 'Invalid code. Please try again.');
      setTimeout(() => inputRef.current?.focus(), 0);
    }
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.modernHeader,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, {
          color: colors.text
        }],
        children: t('signin.totp.title') || 'Two‑Factor Code'
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, {
          color: colors.secondaryText
        }],
        children: t('signin.totp.subtitle', {
          username
        }) || `Enter the 6‑digit code from your authenticator app for @${username}`
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.modernInputContainer,
      children: [/*#__PURE__*/_jsx(PinInput, {
        ref: inputRef,
        value: code,
        onChange: setCode,
        length: 6,
        disabled: isLoading,
        autoFocus: true,
        colors: colors
      }), errorMessage ? /*#__PURE__*/_jsxs(View, {
        style: {
          flexDirection: 'row',
          alignItems: 'center',
          marginTop: 16,
          padding: 12,
          backgroundColor: colors.error + '10',
          borderRadius: 8,
          borderWidth: 1,
          borderColor: colors.error + '30'
        },
        children: [/*#__PURE__*/_jsx(Ionicons, {
          name: "alert-circle",
          size: 20,
          color: colors.error,
          style: {
            marginRight: 8
          }
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.footerText, {
            color: colors.error,
            fontSize: 14
          }],
          children: errorMessage
        })]
      }) : null]
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      buttons: [{
        text: t('common.actions.back'),
        onPress: prevStep,
        icon: 'arrow-back',
        variant: 'transparent'
      }, {
        text: t('signin.actions.verify'),
        onPress: handleVerify,
        icon: 'shield-checkmark',
        variant: 'primary',
        loading: isLoading,
        disabled: isLoading || code.length !== 6
      }],
      colors: colors
    }), /*#__PURE__*/_jsxs(View, {
      style: {
        marginTop: 12,
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.footerText, {
          color: colors.secondaryText
        }],
        children: t('signin.totp.noAccess') || 'No access to your authenticator?'
      }), /*#__PURE__*/_jsxs(View, {
        style: {
          flexDirection: 'row',
          gap: 12,
          marginTop: 6
        },
        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: () => navigate('RecoverAccount', {
            prefillUsername: username
          }),
          children: /*#__PURE__*/_jsx(Text, {
            style: [styles.linkText, {
              color: colors.primary
            }],
            children: t('signin.totp.useBackupCode') || 'Use backup code'
          })
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.footerText, {
            color: colors.secondaryText
          }],
          children: "\u2022"
        }), /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: () => navigate('RecoverAccount', {
            prefillUsername: username
          }),
          children: /*#__PURE__*/_jsx(Text, {
            style: [styles.linkText, {
              color: colors.primary
            }],
            children: t('signin.totp.useRecoveryKey') || 'Use recovery key'
          })
        })]
      })]
    })]
  });
};
export default SignInTotpStep;
//# sourceMappingURL=SignInTotpStep.js.map