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_image.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/answer_box/answer_box.dart';
import 'package:hadi_hoda_flutter/core/widgets/showcase/question_showcase.dart';
import 'package:hadi_hoda_flutter/features/question/domain/entity/answer_entity.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_event.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_state.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/glassy_button.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/left_blob.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/question_stepper.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/refresh_button.dart';
import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/right_blob.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: [
                    MySpaces.s4.gapHeight,
                    _topButtons(context),
                    MySpaces.s10.gapHeight,
                    _stepper(),
                    _titles(),
                    MySpaces.s14.gapHeight,
                    _answers(),
                    _bottomDetail(context),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }


  Widget _topButtons(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GlassyButton(image: MyAssets.home, onTap: () {}),
        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,
      ),
    );
  }


  Column _titles() {
    return Column(
      spacing: MySpaces.s4,
      children: [
        BlocBuilder<QuestionBloc, QuestionState>(
          builder: (context, state) => Text(
            '${context.translate.question} ${state.currentQuestion?.order ?? 1} / ${state.levelEntity?.questions?.length ?? 0}',
            style: Marhey.medium12.copyWith(
              color: MyColors.white.withValues(alpha: 0.5),
              shadows: [
                Shadow(
                  offset: Offset(0, 1),
                  blurRadius: 1,
                  color: Color(0xFF000000).withValues(alpha: 0.25),
                ),
              ],
            ),
          ),
        ),
        BlocBuilder<QuestionBloc, QuestionState>(
          builder: (context, state) =>  Text(
            state.currentQuestion?.title ?? '',
           textAlign: TextAlign.center,
            style: Marhey.semiBold22.copyWith(
              color: MyColors.white,
              shadows: [
                Shadow(
                  offset: Offset(0, 1),
                  blurRadius: 1,
                  color: Color(0xFF000000).withValues(alpha: 0.25),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Expanded _answers() {
    return Expanded(
      child: GridView.builder(
        itemCount: 4,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: MySpaces.s20,
          mainAxisSpacing: 50,
        ),
        itemBuilder: (context, index) => QuestionShowcase(
          globalKey: context.read<QuestionBloc>().keys[index],
          description: context.translate.tap_to_select,
          child: BlocBuilder<QuestionBloc, QuestionState>(
            builder: (context, state) => AnswerBox(
              key: Key('${state.currentQuestion?.id}'),
              index: state.currentQuestion?.answers?[index].order ?? 1,
              answer: state.currentQuestion?.answers?[index] ?? AnswerEntity(),
              correctAnswer: state.currentQuestion?.correctAnswer ?? 0,
              onTap: () => context.read<QuestionBloc>().add(ChangeQuestionEvent()),
            ),
          ),
        ),
      ),
    );
  }

  Widget _bottomDetail(BuildContext context) {
    return SizedBox(
      width: context.widthScreen,
      child: Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
          PositionedDirectional(
            start: 0,
            top: -10,
            child: LeftBlob(),
          ),
          Padding(
            padding: const EdgeInsetsDirectional.only(end: 60),
            child: MyImage(image: MyAssets.persons),
          ),
          PositionedDirectional(
            start: 210,
            top: -20,
            child: RightBlob(),
          ),
          PositionedDirectional(
            end: 0,
            bottom: 10,
            child: RefreshButton(
              onTap: () {},
            ),
          ),
        ],
      ),
    );
  }
}