Resend OTP

// Resend OTP with countdown and error handling
class OTPResendManager {
  constructor(apiKey, apiSecret) {
    this.auth = 'Basic ' + btoa(apiKey + ':' + apiSecret);
    this.baseUrl = 'https://api.sendexa.co/v1';
    this.cooldownTimer = null;
  }
  
  async resendOTP(identifier, options = {}) {
    const { phone, id, metadata } = this.parseIdentifier(identifier);
    
    try {
      const response = await fetch(`${this.baseUrl}/otp/resend`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': this.auth
        },
        body: JSON.stringify({
          phone,
          id,
          metadata
        })
      });
      
      const data = await response.json();
      
      if (!response.ok) {
        if (data.error?.code === 'COOLDOWN_ACTIVE') {
          // Handle cooldown
          const retryAfter = data.error.details.retryAfter;
          this.startCooldown(retryAfter, () => {
            if (options.onCooldownEnd) options.onCooldownEnd();
          });
          
          return {
            success: false,
            cooldown: true,
            retryAfter,
            message: `Please wait ${retryAfter} seconds`
          };
        }
        
        return {
          success: false,
          error: data.error?.code || 'UNKNOWN_ERROR',
          message: data.message
        };
      }
      
      // Success - new OTP created
      return {
        success: true,
        otpId: data.data.id,
        expiresAt: data.data.expiry.expiresAt,
        data: data.data
      };
      
    } catch (error) {
      return {
        success: false,
        error: 'NETWORK_ERROR',
        message: error.message
      };
    }
  }
  
  parseIdentifier(identifier) {
    if (typeof identifier === 'string') {
      // Check if it's an OTP ID or phone number
      if (identifier.startsWith('otp_')) {
        return { id: identifier };
      } else {
        return { phone: identifier };
      }
    }
    return identifier; // Already an object with phone/id
  }
  
  startCooldown(seconds, onEnd) {
    if (this.cooldownTimer) {
      clearInterval(this.cooldownTimer);
    }
    
    let remaining = seconds;
    this.cooldownTimer = setInterval(() => {
      remaining--;
      
      if (remaining <= 0) {
        clearInterval(this.cooldownTimer);
        if (onEnd) onEnd();
      }
      
      // Dispatch event for UI updates
      window.dispatchEvent(new CustomEvent('otpCooldown', {
        detail: { remaining }
      }));
    }, 1000);
  }
}

// Usage with React component
function ResendButton({ phone, onResend }) {
  const [cooldown, setCooldown] = useState(0);
  const [loading, setLoading] = useState(false);
  const manager = useRef(new OTPResendManager('api_key', 'api_secret'));
  
  useEffect(() => {
    const handleCooldown = (e) => {
      setCooldown(e.detail.remaining);
    };
    
    window.addEventListener('otpCooldown', handleCooldown);
    return () => window.removeEventListener('otpCooldown', handleCooldown);
  }, []);
  
  const handleResend = async () => {
    setLoading(true);
    
    const result = await manager.current.resendOTP(phone, {
      onCooldownEnd: () => {
        setCooldown(0);
      }
    });
    
    setLoading(false);
    
    if (result.success) {
      onResend?.(result.otpId);
      toast.success('New code sent!');
    } else if (result.cooldown) {
      toast.info(result.message);
    } else {
      toast.error(result.message);
    }
  };
  
  return (
    <button
      onClick={handleResend}
      disabled={loading || cooldown > 0}
      className="text-blue-600 disabled:opacity-50"
    >
      {loading ? 'Sending...' : 
       cooldown > 0 ? `Resend in ${cooldown}s` : 
       'Resend Code'}
    </button>
  );
}