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_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/widgets/confetti/my_confetti.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_state.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/screens/diamond_screen.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/screens/question_screen.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:showcaseview/showcaseview.dart';

class QuestionPage extends StatelessWidget {
  const QuestionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ShowCaseWidget(
      builder: (context) {
        return Scaffold(
          body: Container(
            height: context.heightScreen,
            width: context.widthScreen,
            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: SafeArea(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: MySpaces.s16),
                child: Column(
                  children: [
                    MyConfetti(
                      controller: context.read<QuestionBloc>().confettiController,
                    ),
                    MySpaces.s4.gapHeight,
                    _topButtons(context),
                    MySpaces.s10.gapHeight,
                    _stepper(),
                    Expanded(
                      child: BlocBuilder<QuestionBloc, QuestionState>(
                        buildWhen: (previous, current) =>
                        (previous.currentQuestion?.order !=
                            current.currentQuestion?.order),
                        builder: (context, state) {
                          if (state.currentQuestion?.order ==
                              state.levelEntity?.questions?.length) {
                            return DiamondScreen();
                          } else {
                            return QuestionScreen();
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }


  Widget _topButtons(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GlassyButton(
          image: MyAssets.home, 
          onTap: () => context.read<QuestionBloc>().goToLevelPage(context: context),
        ),
        Spacer(),
        BlocBuilder<QuestionBloc, QuestionState>(
          builder: (context, state) => Text(
            '${context.translate.step} ${state.levelEntity?.order ?? 1}',
            style: Marhey.bold14.copyWith(
              color: MyColors.white,
            ),
          ),
        ),
        Spacer(),
        GlassyButton(
          image: MyAssets.leaf,
          onTap: () => context.read<QuestionBloc>().showHadith(context: context),
        ),
        MySpaces.s10.gapWidth,
        GlassyButton(image: MyAssets.music, onTap: () {}),
      ],
    );
  }

  Widget _stepper() {
    return BlocBuilder<QuestionBloc, QuestionState>(
      builder: (context, state) => QuestionStepper(
        length: state.levelEntity?.questions?.length ?? 0,
        currentStep: state.currentQuestion?.order ?? 1,
      ),
    );
  }
}