import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import '../services/api_service.dart'; import 'otp_wait_screen.dart'; class PhoneInputScreen extends StatefulWidget { const PhoneInputScreen({super.key}); @override State createState() => _PhoneInputScreenState(); } class _PhoneInputScreenState extends State { final TextEditingController _phoneController = TextEditingController(); String _deviceType = Platform.isIOS ? 'ios' : 'android'; bool _isLoading = false; @override void dispose() { _phoneController.dispose(); super.dispose(); } String _getFullPhone() { final digits = _phoneController.text.trim(); return '+962$digits'; } bool _validatePhone() { final digits = _phoneController.text.trim(); // Jordanian phone numbers: 9 digits starting with 7 if (digits.length != 9) { return false; } if (!digits.startsWith('7')) { return false; } return true; } Future _sendOtp() async { if (!_validatePhone()) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Directionality( textDirection: TextDirection.rtl, child: Text('يرجى إدخال رقم هاتف صحيح (9 أرقام تبدأ بـ 7)'), ), backgroundColor: Colors.red, duration: Duration(seconds: 3), ), ); return; } setState(() { _isLoading = true; }); try { final phone = _getFullPhone(); final result = await ApiService.requestOtp(phone, _deviceType); if (!mounted) return; if (result['success'] == true) { final method = result['method'] as String? ?? 'flash_call'; final expiresIn = result['expires_in'] as int? ?? 120; Navigator.of(context).push( MaterialPageRoute( builder: (context) => OtpWaitScreen( phone: phone, method: method, expiresIn: expiresIn, ), ), ); } else { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Directionality( textDirection: TextDirection.rtl, child: Text(result['message'] ?? 'حدث خطأ، أعد المحاولة'), ), backgroundColor: Colors.red, duration: const Duration(seconds: 3), ), ); } } catch (e) { if (!mounted) return; ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Directionality( textDirection: TextDirection.rtl, child: Text('حدث خطأ في الاتصال بالخادم'), ), backgroundColor: Colors.red, duration: Duration(seconds: 3), ), ); } finally { if (mounted) { setState(() { _isLoading = false; }); } } } @override Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.rtl, child: Scaffold( backgroundColor: Colors.white, body: SafeArea( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 40), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox(height: 40), // App Icon Container( width: 80, height: 80, decoration: BoxDecoration( color: Colors.green.shade50, shape: BoxShape.circle, ), child: Icon( Icons.phone_android_rounded, size: 40, color: Colors.green.shade700, ), ), const SizedBox(height: 20), // App Title const Text( 'Flash OTP', style: TextStyle( fontSize: 32, fontWeight: FontWeight.bold, color: Colors.green, ), ), const SizedBox(height: 8), Text( 'تحقق من رقم هاتفك بسرعة', style: TextStyle( fontSize: 16, color: Colors.grey.shade600, ), ), const SizedBox(height: 48), // Phone Number Input Align( alignment: Alignment.centerRight, child: Text( 'رقم الهاتف', style: TextStyle( fontSize: 14, fontWeight: FontWeight.w600, color: Colors.grey.shade800, ), ), ), const SizedBox(height: 8), // Phone field with +962 prefix Row( textDirection: TextDirection.ltr, children: [ // +962 prefix Container( height: 56, padding: const EdgeInsets.symmetric(horizontal: 16), decoration: BoxDecoration( color: Colors.grey.shade100, border: Border.all(color: Colors.grey.shade300), borderRadius: const BorderRadius.only( topRight: Radius.zero, bottomRight: Radius.zero, topLeft: Radius.circular(12), bottomLeft: Radius.circular(12), ), ), child: Center( child: Text( '+962', style: TextStyle( fontSize: 18, fontWeight: FontWeight.w600, color: Colors.grey.shade700, ), ), ), ), // Phone number input Expanded( child: TextField( controller: _phoneController, keyboardType: TextInputType.phone, textDirection: TextDirection.ltr, textAlign: TextAlign.left, maxLength: 9, inputFormatters: [ FilteringTextInputFormatter.digitsOnly, ], decoration: InputDecoration( hintText: '7XXXXXXXX', hintStyle: TextStyle(color: Colors.grey.shade400), counterText: '', border: OutlineInputBorder( borderRadius: const BorderRadius.only( topLeft: Radius.zero, bottomLeft: Radius.zero, topRight: Radius.circular(12), bottomRight: Radius.circular(12), ), borderSide: BorderSide(color: Colors.grey.shade300), ), enabledBorder: OutlineInputBorder( borderRadius: const BorderRadius.only( topLeft: Radius.zero, bottomLeft: Radius.zero, topRight: Radius.circular(12), bottomRight: Radius.circular(12), ), borderSide: BorderSide(color: Colors.grey.shade300), ), focusedBorder: OutlineInputBorder( borderRadius: const BorderRadius.only( topLeft: Radius.zero, bottomLeft: Radius.zero, topRight: Radius.circular(12), bottomRight: Radius.circular(12), ), borderSide: const BorderSide( color: Colors.green, width: 2), ), contentPadding: const EdgeInsets.symmetric( horizontal: 16, vertical: 16), filled: true, fillColor: Colors.white, ), style: const TextStyle( fontSize: 18, letterSpacing: 1.5, ), ), ), ], ), const SizedBox(height: 24), // Device Type Toggle Align( alignment: Alignment.centerRight, child: Text( 'نوع الجهاز', style: TextStyle( fontSize: 14, fontWeight: FontWeight.w600, color: Colors.grey.shade800, ), ), ), const SizedBox(height: 8), Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey.shade300), borderRadius: BorderRadius.circular(12), ), child: Row( children: [ // Android Expanded( child: GestureDetector( onTap: () { setState(() { _deviceType = 'android'; }); }, child: Container( padding: const EdgeInsets.symmetric(vertical: 14), decoration: BoxDecoration( color: _deviceType == 'android' ? Colors.green : Colors.transparent, borderRadius: const BorderRadius.only( topRight: Radius.circular(11), bottomRight: Radius.circular(11), ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.android, color: _deviceType == 'android' ? Colors.white : Colors.grey.shade600, size: 20, ), const SizedBox(width: 6), Text( 'Android', style: TextStyle( color: _deviceType == 'android' ? Colors.white : Colors.grey.shade600, fontWeight: FontWeight.w600, ), ), ], ), ), ), ), // Divider Container( width: 1, height: 30, color: Colors.grey.shade300, ), // iOS Expanded( child: GestureDetector( onTap: () { setState(() { _deviceType = 'ios'; }); }, child: Container( padding: const EdgeInsets.symmetric(vertical: 14), decoration: BoxDecoration( color: _deviceType == 'ios' ? Colors.green : Colors.transparent, borderRadius: const BorderRadius.only( topLeft: Radius.circular(11), bottomLeft: Radius.circular(11), ), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.phone_iphone, color: _deviceType == 'ios' ? Colors.white : Colors.grey.shade600, size: 20, ), const SizedBox(width: 6), Text( 'iOS', style: TextStyle( color: _deviceType == 'ios' ? Colors.white : Colors.grey.shade600, fontWeight: FontWeight.w600, ), ), ], ), ), ), ), ], ), ), const SizedBox(height: 48), // Send OTP Button SizedBox( width: double.infinity, height: 56, child: ElevatedButton( onPressed: _isLoading ? null : _sendOtp, style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white, disabledBackgroundColor: Colors.green.shade300, disabledForegroundColor: Colors.white70, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), elevation: 2, ), child: _isLoading ? const SizedBox( width: 24, height: 24, child: CircularProgressIndicator( color: Colors.white, strokeWidth: 2.5, ), ) : const Text( 'إرسال رمز التحقق', style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, ), ), ), ), const SizedBox(height: 24), // Info text Text( _deviceType == 'android' ? 'سيتم الاتصال برقمك تلقائياً لاستلام الرمز' : 'سيتم إرسال رمز التحقق عبر الرسائل النصية', textAlign: TextAlign.center, style: TextStyle( fontSize: 13, color: Colors.grey.shade500, ), ), ], ), ), ), ), ); } }