import '../../../l10n/app_localizations.dart';
import 'package:flutter/material.dart';
import 'package:kmobile/features/fund_transfer/screens/tpin_set_screen.dart';
import 'package:kmobile/api/services/change_password_service.dart';
import 'package:kmobile/di/injection.dart';

class TpinOtpScreen extends StatefulWidget {
  const TpinOtpScreen({super.key});

  @override
  State<TpinOtpScreen> createState() => _TpinOtpScreenState();
}

class _TpinOtpScreenState extends State<TpinOtpScreen> {
  final List<FocusNode> _focusNodes = List.generate(6, (_) => FocusNode());
  final List<TextEditingController> _controllers = List.generate(
    6,
    (_) => TextEditingController(),
  );
   bool _isLoading = false;
 final ChangePasswordService _changePasswordService = getIt<ChangePasswordService>();

  @override
  void dispose() {
    for (final node in _focusNodes) {
      node.dispose();
    }
    for (final ctrl in _controllers) {
      ctrl.dispose();
    }
    super.dispose();
  }

  void _onOtpChanged(int idx, String value) {
    if (value.length == 1 && idx <5) {
      _focusNodes[idx + 1].requestFocus();
    }
    if (value.isEmpty && idx > 0) {
      _focusNodes[idx - 1].requestFocus();
    }
    setState(() {});
  }

  String get _enteredOtp => _controllers.map((c) => c.text).join();

void _verifyOtp() async {
  setState(() {
    _isLoading = true;
  });

  try {
    // IMPORTANT: You may need to pass the mobile number here as well
    await _changePasswordService.validateOtp(
      otp: _enteredOtp,
      mobileNumber: '8981274001', // Replace with actual mobile number
    );

    if (mounted) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => const TpinSetScreen()),
      );
    }
  } catch (e) {
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(AppLocalizations.of(context).invalidOtp)),
      );
    }
  } finally {
    if (mounted) {
      setState(() {
        _isLoading = false;
      });
    }
  }
}

  @override
 Widget build(BuildContext context) {
   final theme = Theme.of(context);
   return Scaffold(
     appBar: AppBar(
       title: Text(AppLocalizations.of(context).enterOtp),
       centerTitle: true,
       elevation: 0,
     ),
     body: Center(
       child: SingleChildScrollView(
         child: Column(
           children: [
             Icon(
               Icons.lock_outline,
               size: 48,
               color: theme.colorScheme.primary,
             ),
             const SizedBox(height: 16),
             Text(
               AppLocalizations.of(context).otpVerification,
               style: theme.textTheme.titleLarge?.copyWith(
                 fontWeight: FontWeight.bold,
                 color: theme.colorScheme.primary,
               ),
             ),
             const SizedBox(height: 8),
             Text(
               AppLocalizations.of(context).otpSentMessage,
               textAlign: TextAlign.center,
               style: theme.textTheme.bodyMedium?.copyWith(
                 color: Colors.grey[700],
               ),
             ),
             const SizedBox(height: 32),
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: List.generate(6, (i) {
                 return Container(
                   width: 32,
                   margin: const EdgeInsets.symmetric(horizontal: 8),
                   child: TextField(
                     controller: _controllers[i],
                     focusNode: _focusNodes[i],
                     keyboardType: TextInputType.number,
                     textAlign: TextAlign.center,
                     maxLength: 1,
                     obscureText: true,
                     obscuringCharacter: '*',
                     decoration: InputDecoration(
                       counterText: '',
                       filled: true,
                       fillColor: Theme.of(context).primaryColorLight,
                       border: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(12),
                         borderSide: BorderSide(
                           color: theme.colorScheme.primary,
                           width: 2,
                         ),
                       ),
                       focusedBorder: OutlineInputBorder(
                         borderRadius: BorderRadius.circular(12),
                         borderSide: BorderSide(
                           color: theme.colorScheme.primary,
                           width: 2.5,
                         ),
                       ),
                     ),
                     onChanged: (val) => _onOtpChanged(i, val),
                   ),
                 );
               }),
             ),
             const SizedBox(height: 32),
             ElevatedButton.icon(
               // Update icon to show a loading indicator
               icon: _isLoading
                   ? const SizedBox(
                       width: 20,
                       height: 20,
                       child: CircularProgressIndicator(
                         color: Colors.white,
                         strokeWidth: 2,
                       ),
                     )
                   : const Icon(Icons.verified_user_rounded),
               label: Text(
                 AppLocalizations.of(context).verifyOtp,
                 style: const TextStyle(
                     fontSize: 18, fontWeight: FontWeight.w600),
               ),
               style: ElevatedButton.styleFrom(
                 backgroundColor: theme.colorScheme.onPrimary,
                 padding: const EdgeInsets.symmetric(
                   vertical: 14,
                   horizontal: 28,
                 ),
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(30),
                 ),
               ),
               // Update onPressed to handle loading state
               onPressed: (_enteredOtp.length == 6 && !_isLoading)
                   ? _verifyOtp
                   : null,
             ),
             const SizedBox(height: 16),
             TextButton(
               onPressed: () {
                 // You can also add a getOtp call here for resending
                 ScaffoldMessenger.of(context).showSnackBar(
                   SnackBar(
                     content: Text(AppLocalizations.of(context).otpResent),
                   ),
                 );
               },
               child: Text(AppLocalizations.of(context).resendOtp),
             ),
             const SizedBox(height: 60),
           ],
         ),
       ),
     ),
   );
 }
 }