import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.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/screen_size.dart';
import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box.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';

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

  @override
  Widget build(BuildContext 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(),
                MySpaces.s10.gapHeight,
                QuestionStepper(),
                _titles(),
                MySpaces.s14.gapHeight,
                _questions(),
                _bottomDetail(context),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _topButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GlassyButton(image: MyAssets.home, onTap: () {}),
        Text(
          'Toothbrushing etiquette',
          style: GoogleFonts.marhey(
            fontSize: 14,
            fontWeight: FontWeight.w700,
            color: Colors.white,
          ),
        ),
        GlassyButton(image: MyAssets.music, onTap: () {}),
      ],
    );
  }

  Column _titles() {
    return Column(
      spacing: MySpaces.s4,
      children: [
        Text(
          'Question 1 / 5',
          style: GoogleFonts.marhey(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: Colors.white.withValues(alpha: 0.5),
            shadows: [
              Shadow(
                offset: Offset(0, 1),
                blurRadius: 1,
                color: Color(0xFF000000).withValues(alpha: 0.25),
              ),
            ],
          ),
        ),
        Text(
          'Heda wants her teeth to be clean. Which of her actions do you think is correct?',
         textAlign: TextAlign.center,
          style: GoogleFonts.marhey(
            fontSize: 22,
            fontWeight: FontWeight.w600,
            color: Colors.white,
            shadows: [
              Shadow(
                offset: Offset(0, 1),
                blurRadius: 1,
                color: Color(0xFF000000).withValues(alpha: 0.25),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Expanded _questions() {
    return Expanded(
      child: GridView.builder(
        itemCount: 4,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: MySpaces.s20,
          mainAxisSpacing: 50,
        ),
        itemBuilder: (context, index) => AnswerBox(),
      ),
    );
  }

  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: () {},
            ),
          ),
        ],
      ),
    );
  }
}