import 'dart:async';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../application/auth/resend_form/resend_form_bloc.dart';
import '../../../../application/auth/verify_form/verify_form_bloc.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/auth/auth.dart';
import '../../../../injection.dart';
import '../../../components/toast/flushbar.dart';
import '../../../router/app_router.gr.dart';

@RoutePage()
class OtpPage extends StatefulWidget implements AutoRouteWrapper {
  final String registrationToken;
  final String phoneNumber;

  const OtpPage({
    super.key,
    required this.registrationToken,
    required this.phoneNumber,
  });

  @override
  State<OtpPage> createState() => _OtpPageState();

  @override
  Widget wrappedRoute(BuildContext context) => MultiBlocProvider(
    providers: [
      BlocProvider(
        create: (context) => getIt<VerifyFormBloc>()
          ..add(VerifyFormEvent.registrationTokenChanged(registrationToken)),
      ),
      BlocProvider(
        create: (context) => getIt<ResendFormBloc>()
          ..add(ResendFormEvent.phoneNumberChanged(phoneNumber))
          ..add(ResendFormEvent.purposeChanged('registration')),
      ),
    ],
    child: this,
  );
}

class _OtpPageState extends State<OtpPage> {
  final List<TextEditingController> _controllers = List.generate(
    6,
    (index) => TextEditingController(),
  );
  final List<FocusNode> _focusNodes = List.generate(6, (index) => FocusNode());

  Timer? _timer;
  int _secondsRemaining = 18;
  bool _canResend = false;

  @override
  void initState() {
    super.initState();
    _startTimer();
  }

  void _startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_secondsRemaining > 0) {
        setState(() {
          _secondsRemaining--;
        });
      } else {
        setState(() {
          _canResend = true;
        });
        _timer?.cancel();
      }
    });
  }

  void _resendCode() {
    setState(() {
      _secondsRemaining = 18;
      _canResend = false;
    });
    _startTimer();
    // Add your resend logic here
    context.read<ResendFormBloc>().add(ResendFormEvent.submitted());
  }

  String _formatTime(int seconds) {
    int minutes = seconds ~/ 60;
    int remainingSeconds = seconds % 60;
    return '${minutes.toString().padLeft(2, '0')}:${remainingSeconds.toString().padLeft(2, '0')}';
  }

  void _onCodeChanged(String value, int index) {
    if (value.isNotEmpty) {
      // Move to next field
      if (index < 5) {
        _focusNodes[index + 1].requestFocus();
      } else {
        // Last field, unfocus
        _focusNodes[index].unfocus();
        _verifyCode();
      }
    } else {
      // Handle backspace - move to previous field
      if (index > 0) {
        _focusNodes[index - 1].requestFocus();
      }
    }
  }

  void _verifyCode() {
    String code = _controllers.map((controller) => controller.text).join();
    if (code.length == 6) {
      // context.router.push(CreatePasswordRoute());
      context.read<VerifyFormBloc>().add(VerifyFormEvent.otpCodeChanged(code));
      context.read<VerifyFormBloc>().add(VerifyFormEvent.submitted());
    }
  }

  @override
  void dispose() {
    _timer?.cancel();
    for (var controller in _controllers) {
      controller.dispose();
    }
    for (var focusNode in _focusNodes) {
      focusNode.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MultiBlocListener(
      listeners: [
        BlocListener<VerifyFormBloc, VerifyFormState>(
          listenWhen: (p, c) =>
              p.failureOrVerifyOption != c.failureOrVerifyOption,
          listener: (context, state) {
            state.failureOrVerifyOption.fold(
              () {},
              (either) => either.fold(
                (f) => AppFlushbar.showAuthFailureToast(context, f),
                (data) {
                  if (data.status == "FAILED") {
                    AppFlushbar.showSuccess(context, data.message);
                    Future.delayed(Duration(milliseconds: 1000), () {
                      context.router.replaceAll([LoginRoute()]);
                    });
                  } else {
                    AppFlushbar.showSuccess(context, data.message);
                    Future.delayed(Duration(milliseconds: 1000), () {
                      context.router.push(
                        CreatePasswordRoute(
                          registrationToken: widget.registrationToken,
                        ),
                      );
                    });
                  }
                },
              ),
            );
          },
        ),
        BlocListener<ResendFormBloc, ResendFormState>(
          listenWhen: (p, c) =>
              p.failureOrResendOption != c.failureOrResendOption,
          listener: (context, state) {
            state.failureOrResendOption.fold(
              () {},
              (either) => either.fold(
                (f) => AppFlushbar.showAuthFailureToast(context, f),
                (data) {
                  if (data.status.isSuccess) {
                    AppFlushbar.showSuccess(context, data.message);
                  } else {
                    AppFlushbar.showError(context, data.message);
                  }
                },
              ),
            );
          },
        ),
      ],
      child: Scaffold(
        appBar: AppBar(title: Text('Verifikasi')),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 20),

              // Title
              Text(
                'Masukan Kode Verifikasi',
                style: AppStyle.xl.copyWith(
                  fontWeight: FontWeight.w600,
                  color: AppColor.textPrimary,
                ),
              ),

              const SizedBox(height: 12),

              // Description
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: 'Kami telah mengirimkan kode verifikasi melalui ',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.textSecondary,
                        height: 1.4,
                      ),
                    ),
                    TextSpan(
                      text: 'Whatsapp',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.success,
                        fontWeight: FontWeight.w500,
                        height: 1.4,
                      ),
                    ),
                    TextSpan(
                      text: ' ke ',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.textSecondary,
                        height: 1.4,
                      ),
                    ),
                    TextSpan(
                      text: '+${widget.phoneNumber}',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.textPrimary,
                        fontWeight: FontWeight.w500,
                        height: 1.4,
                      ),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 6),

              // Hidden text fields for input
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: List.generate(6, (index) {
                  return Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(right: index == 5 ? 0 : 8.0),
                      child: TextFormField(
                        controller: _controllers[index],
                        focusNode: _focusNodes[index],
                        keyboardType: TextInputType.number,
                        maxLength: 1,
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly,
                        ],
                        decoration: InputDecoration(counterText: ''),
                        textAlign: TextAlign.center,
                        style: AppStyle.lg.copyWith(
                          color: AppColor.primary,
                          fontWeight: FontWeight.w600,
                        ),
                        cursorColor: AppColor.primary,
                        onChanged: (value) {
                          setState(() {});
                          _onCodeChanged(value, index);
                        },
                      ),
                    ),
                  );
                }),
              ),

              const SizedBox(height: 40),

              // Timer and Resend Section
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Mohon tunggu untuk kirim ulang kode ',
                    style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
                  ),
                  Text(
                    _formatTime(_secondsRemaining),
                    style: AppStyle.xs.copyWith(
                      color: AppColor.textSecondary,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),

              if (_canResend) ...[
                const SizedBox(height: 12),
                Center(
                  child: TextButton(
                    onPressed: _resendCode,
                    child: Text(
                      'Kirim Ulang Kode',
                      style: AppStyle.sm.copyWith(
                        color: AppColor.success,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ),
              ],

              const SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }
}
