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_spaces.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/images/my_image.dart';
import 'package:hadi_hoda_flutter/core/widgets/inkwell/my_inkwell.dart';
import 'package:hadi_hoda_flutter/features/level/domain/entity/level_entity.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/bloc/level_bloc.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/bloc/level_event.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/bloc/level_state.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/ui/widgets/diamond_level.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/ui/widgets/level_path.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/ui/widgets/level_widget.dart';
import 'package:hadi_hoda_flutter/features/level/presentation/ui/widgets/play_button.dart';

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



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          SingleChildScrollView(
            controller: context.read<LevelBloc>().scrollController,
            reverse: true,
            child: Stack(
              alignment: Alignment.center,
              children: [
                _background(),
                _path(context),
                _levelLocation(context),
                _planets(context),
              ],
            ),
          ),
          _topButtons(context),
          _playButton(context)
        ],
      ),
    );
  }

  Positioned _planets(BuildContext context) {
    return Positioned.fill(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            bottom: 0.3.h,
            right: setSize(context: context, mobile: -40, tablet: -80),
            child: MyImage(
              image: MyAssets.planet1,
              size: setSize(context: context, mobile: 180),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 0.65.h, tablet: 0.9.h),
            child: MyImage(
              image: MyAssets.planet2,
              size: setSize(context: context, mobile: 110),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 0.8.h, tablet: 1.15.h),
            left: setSize(context: context, mobile: -120, tablet: -200),
            child: MyImage(
              image: MyAssets.planet3,
              size: setSize(context: context, mobile: 300),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 1.3.h, tablet: 1.75.h),
            right: 40,
            child: MyImage(
              image: MyAssets.planet4,
              size: setSize(context: context, mobile: 120),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 1.5.h, tablet: 2.0.h),
            left: setSize(context: context, mobile: -130, tablet: -220),
            child: MyImage(
              image: MyAssets.planet5,
              size: setSize(context: context, mobile: 300),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 1.85.h, tablet: 2.55.h),
            right: setSize(context: context, mobile: 20, tablet: 20),
            child: MyImage(
              image: MyAssets.planet6,
              size: setSize(context: context, mobile: 80),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 1.95.h, tablet: 2.6.h),
            child: MyImage(
              image: MyAssets.planet7,
              size: setSize(context: context, mobile: 120),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 2.1.h, tablet: 2.8.h),
            right: setSize(context: context, mobile: -50, tablet: -120),
            child: MyImage(
              image: MyAssets.planet8,
              size: setSize(context: context, mobile: 250),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 2.3.h, tablet: 3.1.h),
            left: -20,
            child: MyImage(
              image: MyAssets.planet9,
              size: setSize(context: context, mobile: 100),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 2.5.h, tablet: 3.4.h),
            child: MyImage(
              image: MyAssets.planet10,
              size: setSize(context: context, mobile: 60),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 2.55.h, tablet: 3.45.h),
            right: 20,
            child: MyImage(
              image: MyAssets.satellite,
              size: setSize(context: context, mobile: 80),
            ),
          ),
          Positioned(
            bottom: setSize(context: context, mobile: 2.6.h, tablet: 3.5.h),
            left: setSize(context: context, mobile: 40),
            child: MyImage(
              image: MyAssets.planetFinal,
              size: setSize(context: context, mobile: 300),
            ),
          ),
        ],
      ),
    );
  }

  Positioned _path(BuildContext context) {
    return Positioned.fill(
      top: setSize(context: context, mobile: 0.3.h, tablet: 0.37.h),
      bottom: setSize(context: context, mobile: 0.15.h, tablet: 200),
      left: MySpaces.s30,
      right: MySpaces.s30,
      child: LevelPath(
        width: setSize(context: context, tablet: 0.45.w, mobile: 0.9.w) ?? 0,
        height: setSize(context: context, tablet: 1.75.h, mobile: 2.55.h) ?? 0,
      ),
    );
  }

   Widget _playButton(BuildContext context) {
     return BlocBuilder<LevelBloc, LevelState>(
         buildWhen: (previous, current) =>
         previous.chooseLevel?.id != current.chooseLevel?.id,
         builder: (context, state) {
           return Positioned(
             bottom: MySpaces.s20,
             child: PlayButton(
               level: state.chooseLevel ?? LevelEntity(),
               onTap: (level) =>
                   context.read<LevelBloc>().goToQuestionPage(context, level),
             ),
           );
         }
     );
   }

  Positioned _topButtons(BuildContext context) {
    return Positioned(
      left: MySpaces.s16,
      right: MySpaces.s16,
      top: MySpaces.s20,
      child: Row(
        spacing: MySpaces.s16,
        children: [
          MyInkwell(
            onTap: () => context.read<LevelBloc>().goToHomePage(context),
            audio: MyAudios.back,
            child: MyImage(
              image: MyAssets.homeButton,
            ),
          ),
          Spacer(),
          DiamondLevel(),
          StreamBuilder<double>(
            initialData: 1,
            stream: context.read<LevelBloc>().volumeStream,
            builder: (context, snapshot) => MyInkwell(
              onTap: () => context.read<LevelBloc>().changeMute(),
              child: MyImage(
                image: snapshot.data == 0 ? MyAssets.musicOff : MyAssets.musicOn,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _background() {
    return Stack(
      children: [
        MyImage(
          image: MyAssets.mapBackground,
          fit: BoxFit.cover,
        ),
      ],
    );
  }

  Widget _levelLocation(BuildContext context) {
    return BlocBuilder<LevelBloc, LevelState>(
      builder: (context, state) => Positioned.fill(
        child: Stack(
          children: [
            ...List.generate(
              context.read<LevelBloc>().levelList.length,
              (index) => Positioned(
                top: context.read<LevelBloc>().locationList[index].top,
                bottom: context.read<LevelBloc>().locationList[index].bottom,
                right: context.read<LevelBloc>().locationList[index].right,
                left: context.read<LevelBloc>().locationList[index].left,
                child: BlocBuilder<LevelBloc, LevelState>(
                  buildWhen: (previous, current) =>
                      previous.chooseLevel?.id != current.chooseLevel?.id,
                  builder: (context, state) => LevelWidget(
                    chooseLevel: state.chooseLevel,
                    level: context.read<LevelBloc>().levelList[index],
                    type: context.read<LevelBloc>().getLevelType(index + 1),
                    onTap: (LevelEntity level, LevelType type) {
                      context.read<LevelBloc>().add(
                        ChooseLevelEvent(level, type),
                      );
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}