"use strict";

import { View, Text } 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 RecoverVerifyStep = ({
  colors,
  styles,
  nextStep,
  prevStep,
  verificationCode,
  setVerificationCode,
  errorMessage,
  setErrorMessage,
  successMessage,
  setSuccessMessage,
  isLoading,
  setIsLoading,
  identifier
}) => {
  const {
    t
  } = useI18n();
  const handleVerifyCode = async () => {
    setErrorMessage('');
    setSuccessMessage('');
    if (verificationCode.length !== 6) {
      setErrorMessage(t('recover.enterCode'));
      return;
    }
    // For recovery via TOTP, proceed to reset step; server will validate during reset
    nextStep();
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.modernHeader,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, {
          color: colors.text
        }],
        children: t('recover.verify.title')
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, {
          color: colors.secondaryText
        }],
        children: t('recover.enterCode')
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.modernInputContainer,
      children: [/*#__PURE__*/_jsx(PinInput, {
        value: verificationCode,
        onChange: setVerificationCode,
        length: 6,
        disabled: isLoading,
        autoFocus: true,
        colors: colors
      }), successMessage && /*#__PURE__*/_jsxs(View, {
        style: {
          flexDirection: 'row',
          alignItems: 'center',
          marginTop: 16,
          padding: 12,
          backgroundColor: colors.success + '10',
          borderRadius: 8,
          borderWidth: 1,
          borderColor: colors.success + '30'
        },
        children: [/*#__PURE__*/_jsx(Ionicons, {
          name: "checkmark-circle",
          size: 20,
          color: colors.success,
          style: {
            marginRight: 8
          }
        }), /*#__PURE__*/_jsx(Text, {
          style: [styles.footerText, {
            color: colors.success,
            fontSize: 14
          }],
          children: successMessage
        })]
      }), 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
        })]
      })]
    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
      buttons: [{
        text: t('common.actions.back'),
        onPress: prevStep,
        icon: 'arrow-back',
        variant: 'transparent'
      }, {
        text: t('recover.verify.action'),
        onPress: handleVerifyCode,
        icon: 'checkmark-circle-outline',
        variant: 'primary',
        loading: isLoading,
        disabled: isLoading || verificationCode.length !== 6
      }],
      colors: colors
    })]
  });
};
export default RecoverVerifyStep;
//# sourceMappingURL=RecoverVerifyStep.js.map