import 'dart:async';
 import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:kmobile/di/injection.dart';
 import 'package:kmobile/features/dashboard/screens/dashboard_screen.dart';
 import 'package:kmobile/widgets/pin_input_field.dart';
 import '../../../api/services/change_password_service.dart';

 class ChangeTpinOtpScreen extends StatefulWidget {
   final String newTpin;
   final String mobileNumber; // Receive mobile number

   const ChangeTpinOtpScreen({
     super.key,
     required this.newTpin,
     required this.mobileNumber,
   });

   @override
   State<ChangeTpinOtpScreen> createState() => _ChangeTpinOtpScreenState();
 }

 class _ChangeTpinOtpScreenState extends State<ChangeTpinOtpScreen> {
   final _otpController = TextEditingController();
   final ChangePasswordService _changePasswordService = getIt<ChangePasswordService>();
   bool _isLoading = false;

   void _handleVerifyOtp() async {
     if (_otpController.text.length != 6) {
       ScaffoldMessenger.of(context).showSnackBar(
         const SnackBar(content: Text('Please enter a valid 6-digit OTP')),
       );
       return;
     }

     setState(() {
       _isLoading = true;
     });

     String message = 'An unknown error occurred.';
     bool success = false;

     try {
       // 1. Validate the OTP
       final responseString = await _changePasswordService.validateOtp(
         otp: _otpController.text,
         mobileNumber: widget.mobileNumber,
       );
       final response = jsonDecode(responseString);

       // 2. Check status and set message
       if (response['statusCode'] == 200 || response['statusCode'] == 2000) {
         message = 'TPIN changed successfully!';
         success = true;
       } else {
         message = response['message'] ?? 'Invalid OTP. Please try again.';
       }
     } catch (e) {
       message = 'Failed to verify OTP: $e';
     } finally {
       // 3. Show feedback
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
             content: Text(message),
             backgroundColor: success ? Colors.green : Colors.red,
           ),
         );

         // 4. Navigate to dashboard after 5 seconds
         Timer(const Duration(seconds: 5), () {
           if (mounted) {
             Navigator.of(context).pushAndRemoveUntil(
               MaterialPageRoute(builder: (context) => const DashboardScreen()),
               (Route<dynamic> route) => false,
             );
           }
         });
       }
     }
   }

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Verify OTP'),
       ),
       body: SingleChildScrollView(
         padding: const EdgeInsets.all(16.0),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             const SizedBox(height: 24),
             const Text(
               'Enter the OTP sent to your registered mobile number.',
               textAlign: TextAlign.center,
               style: TextStyle(fontSize: 16),
             ),
             const SizedBox(height: 32),
             PinInputField(
               controller: _otpController,
             ),
             const SizedBox(height: 32),
             SizedBox(
               width: double.infinity,
               child: ElevatedButton(
                 onPressed: _isLoading ? null : _handleVerifyOtp,
                 child: _isLoading
                     ? const SizedBox(
                         height: 24,
                         width: 24,
                         child: CircularProgressIndicator(
                           color: Colors.white,
                           strokeWidth: 2.5,
                         ),
                       )
                     : const Text('Verify & Change TPIN'),
               ),
             ),
           ],
         ),
       ),
     );
   }
 }