import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:tanami_app/core/routes/route_name.dart';
import 'package:tanami_app/core/routes/routes.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/features/securePin/presentation/widgets/forgot_pin_dialog.dart';
import 'package:tanami_app/shared/components/text_widget.dart';
import 'package:tanami_app/shared/components/toast_message.dart';

import '../bloc/pin_bloc.dart';

class PinKey extends StatelessWidget {
  final String fromScreen;
  const PinKey({
    super.key,
    required this.fromScreen,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        const Gap(20),
        BlocConsumer<PinBloc, PinState>(
          listener: (context, state) {
            if (state.pinComplete &&
                state.error.isEmpty &&
                !state.verifiedOnce) {
              if (fromScreen == "login" || fromScreen == "LoginedInUser") {
                successToastMessage(context, AppText.pinVerifiedSucess);
                goRouter.pushNamed(RouteName.mainScreen);
              } else if (fromScreen == "reset-pin") {
                log("Running this");
                successToastMessage(context, AppText.pinUpdatedSucess);
                goRouter.pop();
              } else {
                context.read<PinBloc>().add(SavePinPressed());
                goRouter.pushNamed(RouteName.confirmPinScreen);
              }
            }
          },
          builder: (context, state) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(6, (index) {
                return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  width: 32,
                  height: 32,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: index < state.pin.length
                          ? AppColor.pinFillBorderColor
                          : AppColor.pinInActiveBorderColor,
                    ),
                    color: index < state.pin.length
                        ? AppColor.pinFillColor
                        : Colors.transparent,
                  ),
                );
              }),
            );
          },
        ),
        (fromScreen == "login" || fromScreen == "forgot-pin")
            ? const Gap(20)
            : const Gap(0),
        (fromScreen == "login")
            ? GestureDetector(
                onTap: () {
                  forgotPinDialog(context);
                },
                child: Padding(
                  padding: const EdgeInsets.only(
                    right: 50,
                  ),
                  child: TextWidget().text15W500(
                    AppText.forgotPinCode,
                    clr: AppColor.hintTextColor,
                    textDecoration: TextDecoration.underline,
                  ),
                ),
              )
            : const SizedBox(),
        const Gap(20),
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.3,
          ),
          itemCount: 12,
          itemBuilder: (context, index) {
            if (index == 9) {
              return const SizedBox.shrink();
            } else if (index == 11) {
              return GestureDetector(
                onTap: () {
                  context.read<PinBloc>().add(BackspacePressed());
                },
                child: Container(
                  margin: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.black12),
                  ),
                  child: const Icon(
                    Icons.arrow_back_rounded,
                  ),
                ),
              );
            } else {
              final number = index == 10 ? '0' : '${index + 1}';
              return GestureDetector(
                onTap: () {
                  context.read<PinBloc>().add(NumberPressed(number));
                },
                child: Container(
                  margin: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.black12),
                  ),
                  child: Center(
                      child: TextWidget().text20W700(
                    number,
                    clr: AppColor.plainBlack,
                  )),
                ),
              );
            }
          },
        ),
      ],
    );
  }
}