import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_audios.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart';
import 'package:hadi_hoda_flutter/core/utils/gap.dart';
import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart';
import 'package:hadi_hoda_flutter/core/widgets/animations/fade_anim.dart';
import 'package:hadi_hoda_flutter/core/widgets/animations/slide_anim.dart';
import 'package:hadi_hoda_flutter/core/widgets/animations/slide_down_fade.dart';
import 'package:hadi_hoda_flutter/core/widgets/animations/slide_up_fade.dart';
import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box_showcase.dart';
import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
import 'package:hadi_hoda_flutter/core/widgets/pop_scope/my_pop_scope.dart';
import 'package:hadi_hoda_flutter/core/widgets/showcase/my_showcase_widget.dart';
import 'package:hadi_hoda_flutter/features/guider/presentation/bloc/guider_bloc.dart';
import 'package:hadi_hoda_flutter/features/guider/presentation/bloc/guider_state.dart';
import 'package:hadi_hoda_flutter/features/question/domain/entity/answer_entity.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/glassy_button.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/question_stepper.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/question_title.dart';

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

  @override
  State<GuiderPage> createState() => _GuiderPageState();
}

class _GuiderPageState extends State<GuiderPage> with TickerProviderStateMixin {

  @override
  void initState() {
    super.initState();
    context
        .read<GuiderBloc>()
        .animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
      reverseDuration: Duration(milliseconds: 500),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MyPopScope(
        child: Directionality(
          textDirection: TextDirection.ltr,
          child: Container(
            height: context.heightScreen,
            width: context.widthScreen,
            padding: EdgeInsets.symmetric(
              horizontal:
              setSize(
                context: context,
                mobile: MySpaces.s16,
                tablet: MySpaces.s30,
              ) ??
                  0,
            ),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Color(0XFF6930DA), Color(0XFF263AA1)],
              ),
              image: DecorationImage(
                image: AssetImage(MyAssets.pattern),
                scale: 3,
                repeat: ImageRepeat.repeat,
                colorFilter: ColorFilter.mode(
                  Colors.black.withValues(alpha: 0.3),
                  BlendMode.srcIn,
                ),
              ),
            ),
            child: Column(
              children: [
                setPlatform<double>(
                  android: MySpaces.s20,
                  iOS: 50,
                )?.gapHeight ??
                    SizedBox.shrink(),
                _topButtons(context),
                MySpaces.s10.gapHeight,
                Expanded(
                  child: Column(
                    children: [
                      _stepper(context),
                      _titles(context),
                      MySpaces.s20.gapHeight,
                      Expanded(child: _answers(context)),
                      _bottom(context),
                    ],
                  ),
                ),
                setPlatform<double>(android: MySpaces.s20)?.gapHeight ??
                    SizedBox.shrink(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _topButtons(BuildContext context) {
    return SlideDownFade(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GlassyButton(
            image: MyAssets.home,
            audio: MyAudios.back,
            onTap: () {},
          ),
          BlocBuilder<GuiderBloc, GuiderState>(
            builder: (context, state) =>
                QuestionTitle(
                  step: state.levelEntity?.order,
                  currentQuestion: state.currentQuestion?.order,
                  questionLength: state.levelEntity?.questions?.length,
                ),
          ),
          GlassyButton(image: MyAssets.music, onTap: () {}),
        ],
      ),
    );
  }

  Widget _stepper(BuildContext context) {
    return FadeAnim(
      child: MyShowcaseWidget(
        globalKey: context
            .read<GuiderBloc>()
            .showCaseKey['stepper_key']!,
        description: context.translate.showcase_stepper,
        child: QuestionStepper(length: 4, currentStep: 1),
      ),
    );
  }

  Widget _titles(BuildContext context) {
    return BlocBuilder<GuiderBloc, GuiderState>(
      builder: (context, state) =>
          FadeAnim(
            child: Text(
              state.currentQuestion?.title ?? '',
              textAlign: TextAlign.center,
              maxLines: 3,
              style: MYTextStyle.titr1.copyWith(
                shadows: [
                  BoxShadow(
                    offset: Offset(0, 2),
                    color: MyColors.black.withValues(alpha: 0.25),
                  ),
                ],
              ),
            ),
          ),
    );
  }

  Widget _answers(BuildContext context) {
    return BlocBuilder<GuiderBloc, GuiderState>(
      builder: (context, state) =>
          GridView.builder(
            itemCount: state.currentQuestion?.answers?.length ?? 0,
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            clipBehavior: Clip.none,
            padding: EdgeInsets.symmetric(
              horizontal: setSize(context: context, tablet: 70) ?? 0,
            ),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: MySpaces.s20,
              mainAxisSpacing: 20,
              childAspectRatio: 0.75,
            ),
            itemBuilder: (context, index) =>
            state.currentQuestion?.answers?[index].imageId == null
                ? SizedBox.shrink()
                : SlideAnim(
              controller: context.read<GuiderBloc>().animationController,
              index: index,
              child: AnswerBoxShowCase(
                globalKey: context
                    .read<GuiderBloc>()
                    .showCaseKey['notif_key_$index']!,
                answerGlobalKey: context
                    .read<GuiderBloc>()
                    .showCaseKey['answer_key_$index']!,
                index: state.currentQuestion?.answers?[index].order ?? 1,
                answer:
                state.currentQuestion?.answers?[index] ?? AnswerEntity(),
                correctAnswer: 0,
                onNotifTap: (AnswerEntity answer) {},
                onTap: (isCorrect, correctAnswer) {},
              ),
            ),
          ),
    );
  }

  Widget _bottom(BuildContext context) {
    return SlideUpFade(
      child: SizedBox(
        width: context.widthScreen,
        child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: [
            MyShowcaseWidget(
              globalKey: context
                  .read<GuiderBloc>()
                  .showCaseKey['guide_key']!,
              description: context.translate.showcase_guide,
              type: ShowcaseTooltipType.top,
              child: MyImage(
                image: MyAssets.globe,
                fit: BoxFit.cover,
                size: setSize(context: context, tablet: 120),
              ),
            ),
            PositionedDirectional(
              end: 0,
              child: MyShowcaseWidget(
                globalKey: context
                    .read<GuiderBloc>()
                    .showCaseKey['hadith_key']!,
                type: ShowcaseTooltipType.topLeft,
                description: context.translate.showcase_hadith,
                child: GlassyButton(image: MyAssets.leaf, onTap: () {}),
              ),
            ),
          ],
        ),
      ),
    );
  }
}