import 'package:eatvio_app/core/locator_service.dart';
import 'package:eatvio_app/core/theme/custom_text_style.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/bottom_sheet_with_blur.dart';
import 'package:eatvio_app/core/widgets/custom_outlined_button.dart';
import 'package:eatvio_app/core/widgets/custom_text_form_field.dart';
import 'package:eatvio_app/core/widgets/loader.dart';
import 'package:eatvio_app/core/widgets/main_background_bouble.dart';
import 'package:eatvio_app/core/widgets/success_published_diet_bottom_sheet.dart';
import 'package:eatvio_app/features/create_diet/presentation/widgets/error_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/cubit/create_plan_cubit.dart';
import 'package:eatvio_app/features/create_plan/presentation/cubit/create_plan_state.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/option_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/options_count_button.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/plan_duration_drop_down_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/plan_image_picker_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/plan_type_choice_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/select_exact_option_widget.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';

class CreatePlanScreen extends StatelessWidget {
  static const name = 'createPlanScreen';
  static const path = '/create-Plan-screen';
  const CreatePlanScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => sl<CreatePlanCubit>(),
      child: const CreatePlanScreenContent(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final s = S.of(context);
    return BlocBuilder<CreatePlanCubit, CreatePlanState>(
      buildWhen: (previous, current) => previous.planCreated != current.planCreated || previous.isLoading != current.isLoading,
      builder: (context, state) {
        if (state.planCreated) {
          WidgetsBinding.instance.addPostFrameCallback((_) {
            if (!context.mounted) return;
            context.pop();
            showBottomSheetWithBlur(
              userRootNavigator: true,
              context: context,
              child: SuccessPublishedDietOrPlanBottomSheet(
                title: state.planData.name ?? 'План',
                isPlan: true,
              ),
            );
          });
        }
        return Scaffold(
          backgroundColor: appTheme.gray100,
          appBar: AppBar(
            centerTitle: true,
            title: Text(
              s.adding_plan,
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              softWrap: true,
              style: TextStyles.headingXLSemibold.copyWith(color: appTheme.black),
            ),
          ),
          body: Stack(
            children: [
              SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 8),
                    MainBackgroundBouble(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const SizedBox(height: 16),
                          Text(
                            s.label,
                            textAlign: TextAlign.center,
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                            style: TextStyles.textSMedium.copyWith(color: appTheme.black),
                          ),
                          const SizedBox(height: 4),
                          BlocBuilder<CreatePlanCubit, CreatePlanState>(
                            buildWhen: (previous, current) => previous.validationState != current.validationState,
                            builder: (context, state) {
                              return Column(
                                children: [
                                  CustomTextFormField(
                                    hintText: s.plan_label_desc,
                                    hasError: state.validationState.titleHasError,
                                    onChanged: (value) {
                                      context.read<CreatePlanCubit>().setName(value);
                                    },
                                    maxLength: 150,
                                  ),
                                  if (state.validationState.titleHasError) ...[
                                    const SizedBox(height: 4),
                                    ValidationErrorWidget(error: s.atLeast3Symbols),
                                  ],
                                ],
                              );
                            },
                          ),
                          const SizedBox(height: 12),
                          Text(
                            s.plan_duration,
                            textAlign: TextAlign.center,
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                            style: TextStyles.textSMedium.copyWith(color: appTheme.black),
                          ),
                          const SizedBox(height: 4),
                          const PlanDurationDropDownWidget(),
                          const SizedBox(height: 20),
                          const PlanImagePickerWidget(),
                          const SizedBox(height: 16),
                          const PlanTypeChoiceWidget(),
                          const SizedBox(height: 16),
                          Text(
                            s.plan_desc,
                            textAlign: TextAlign.center,
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                            style: TextStyles.textSMedium.copyWith(color: appTheme.black),
                          ),
                          const SizedBox(height: 4),
                          BlocBuilder<CreatePlanCubit, CreatePlanState>(
                            buildWhen: (previous, current) => previous.validationState != current.validationState,
                            builder: (context, state) {
                              return Column(
                                children: [
                                  SizedBox(
                                    height: 132,
                                    child: CustomTextFormField(
                                      hasError: state.validationState.descriptionHasError,
                                      textAlignVertical: TextAlignVertical.top,
                                      maxLength: 1000,
                                      maxLines: null,
                                      minLines: null,
                                      expands: true,
                                      hintText: s.plan_desc_example,
                                      onChanged: (value) {
                                        context.read<CreatePlanCubit>().setDetails(value);
                                      },
                                    ),
                                  ),
                                  if (state.validationState.descriptionHasError) ...[
                                    const SizedBox(height: 4),
                                    ValidationErrorWidget(error: s.atLeast3Symbols),
                                  ],
                                ],
                              );
                            },
                          ),
                          const SizedBox(height: 16),
                        ],
                      ),
                    ),
                    const SizedBox(height: 20),
                    Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Text(
                        s.services,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: TextStyles.headingXLSemibold.copyWith(color: appTheme.blueGray400),
                      ),
                    ),
                    const SizedBox(height: 8),
                    const OptionsCountButton(),
                    const SizedBox(height: 20),
                    BlocBuilder<CreatePlanCubit, CreatePlanState>(
                      buildWhen: (previous, current) => previous.selectedOptionIndex != current.selectedOptionIndex,
                      builder: (context, state) {
                        if (state.selectedOptionIndex == null) {
                          return const SizedBox.shrink();
                        }
                        return Padding(
                          padding: const EdgeInsets.only(left: 16),
                          child: Text(
                            '${s.option} ${(state.selectedOptionIndex ?? 0) + 1}',
                            style: TextStyles.textLSemibold.copyWith(color: appTheme.blueGray400),
                          ),
                        );
                      },
                    ),
                    const SizedBox(height: 8),
                    const OptionWidget(),
                    const SizedBox(height: 20),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Column(
                        children: [
                          // CustomOutlinedButton(
                          //   onPressed: () {},
                          //   text: s.to_draft,
                          //   height: 52,
                          //   buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.gray),
                          //   buttonStyle: ButtonStyle(
                          //     side: const WidgetStatePropertyAll(BorderSide.none),
                          //     backgroundColor: WidgetStatePropertyAll(appTheme.dottedBorder),
                          //   ),
                          // ),
                          // const SizedBox(height: 12),
                          // CustomOutlinedButton(
                          //   onPressed: () async {},
                          //   text: s.preview,
                          //   height: 52,
                          //   buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.gray),
                          //   buttonStyle: ButtonStyle(
                          //     side: const WidgetStatePropertyAll(BorderSide.none),
                          //     backgroundColor: WidgetStatePropertyAll(appTheme.dottedBorder),
                          //   ),
                          // ),
                          // const SizedBox(height: 12),
                          state.isLoading
                              ? const Loader()
                              : CustomOutlinedButton(
                                  onPressed: () async {
                                    await context.read<CreatePlanCubit>().publishPlan();
                                  },
                                  text: s.publish,
                                  height: 52,
                                  buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.whiteA700),
                                  buttonStyle: ButtonStyle(
                                    side: const WidgetStatePropertyAll(BorderSide.none),
                                    backgroundColor: WidgetStatePropertyAll(appTheme.blueA400),
                                  ),
                                ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 80),
                  ],
                ),
              ),
              BlocBuilder<CreatePlanCubit, CreatePlanState>(
                builder: (context, state) {
                  if (state.selectedOptionIndex == null) {
                    return const SizedBox.shrink();
                  }
                  return const Padding(
                    padding: EdgeInsets.only(bottom: 24.0),
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: SelectExactOptionWidget(),
                    ),
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  }
}