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/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';

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: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    width: 48,
                    height: 48,
                    padding: EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.white.withValues(alpha: 0.3),
                          Color(0XFF6930DA).withValues(alpha: 0.1),
                        ],
                      ),
                      border: Border.all(
                        color: Colors.white.withValues(alpha: 0.3),
                      ),
                    ),
                    child: MyImage(image: MyAssets.home),
                  ),
                  Text(
                    'Toothbrushing etiquette',
                    style: GoogleFonts.marhey(
                      fontSize: 14,
                      fontWeight: FontWeight.w700,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    width: 48,
                    height: 48,
                    padding: EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.white.withValues(alpha: 0.3),
                          Color(0XFF6930DA).withValues(alpha: 0.1),
                        ],
                      ),
                      border: Border.all(
                        color: Colors.white.withValues(alpha: 0.3),
                      ),
                    ),
                    child: MyImage(image: MyAssets.music),
                  ),
                ],
              ),
              Column(
                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?',
                    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(
                child: GridView.builder(
                  itemCount: 4,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 20,
                    mainAxisSpacing: 30,
                  ),
                  itemBuilder: (context, index) => AnswerBox(),
                ),
              ),
              SizedBox(
                width: context.widthScreen,
                child: Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    Positioned.directional(
                      textDirection: Directionality.of(context),
                      start: 0,
                      top: -10,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          MyImage(image: MyAssets.bubbleChatLeft),
                          Text(
                            'Your answer\nwas not correct.',
                            textAlign: TextAlign.center,
                            style: GoogleFonts.marhey(
                              fontSize: 12,
                              fontWeight: FontWeight.w500,
                              color: Color(0XFFB5AEEE),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsetsDirectional.only(end: 90),
                      child: MyImage(image: MyAssets.persons),
                    ),
                    Positioned.directional(
                      textDirection: Directionality.of(context),
                      start: 220,
                      top: -20,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          MyImage(image: MyAssets.bubbleChatRight),
                          Text(
                            'Be more\ncareful.',
                            textAlign: TextAlign.center,
                            style: GoogleFonts.marhey(
                              fontSize: 12,
                              fontWeight: FontWeight.w500,
                              color: Color(0XFFB5AEEE),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Positioned.directional(
                      textDirection: Directionality.of(context),
                      end: 0,
                      bottom: 10,
                      child: Container(
                        height: 48,
                        width: 48,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [Color(0XFFA393FF), Color(0XFFC6BCFB)],
                          ),
                        ),
                        child: Icon(
                          Icons.refresh,
                          size: 40,
                          color: Color(0XFF263AA1),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}