import 'package:easy_debounce/easy_debounce.dart';
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/add_item_button.dart';
import 'package:eatvio_app/core/widgets/custom_search_bar.dart';
import 'package:eatvio_app/core/widgets/loader.dart';
import 'package:eatvio_app/features/create_plan/presentation/create_plan_screen.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/filter_badge.dart';
import 'package:eatvio_app/features/feed/presentation/widgets/plans_filter_bottom_sheet.dart';
import 'package:eatvio_app/features/my_plans/presentation/cubit/my_plans_cubit.dart';
import 'package:eatvio_app/features/my_plans/presentation/cubit/my_plans_state.dart';
import 'package:eatvio_app/features/my_plans/presentation/widgets/my_plan_widget.dart';
import 'package:eatvio_app/features/my_plans/presentation/widgets/my_plans_tab.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 MyPlansScreen extends StatelessWidget {
  const MyPlansScreen({super.key});
  static const name = 'myPlansScreen';
  static const path = '/my-plans-screen';
  @override
  Widget build(BuildContext context) {
    return BlocProvider(create: (context) => sl<MyPlansCubit>()..loadAllPlans(), child: MyPlansScreenContent());
  }
}

class MyPlansScreenContent extends StatelessWidget {
  MyPlansScreenContent({super.key});

  final activePlansScrollController = ScrollController();
  final draftPlansScrollController = ScrollController();

  final activePlansSearchController = SearchController();
  final draftPlansSearchController = SearchController();

  @override
  Widget build(BuildContext context) {
    final s = S.of(context);
    return Scaffold(
      backgroundColor: appTheme.gray100,
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          s.my_plans,
          maxLines: 2,
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          softWrap: true,
          style: TextStyles.headingXLSemibold.copyWith(color: appTheme.black),
        ),
      ),
      body: BlocBuilder<MyPlansCubit, MyPlansState>(
        buildWhen: (previous, current) => previous.selectedStateIndex != current.selectedStateIndex,
        builder: (context, state) {
          return NestedScrollView(
            controller: switch (state.selectedStateIndex) {
              1 => draftPlansScrollController,
              _ => activePlansScrollController,
            },
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverAppBar(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(bottom: Radius.circular(12)),
                  ),
                  backgroundColor: appTheme.gray100,
                  foregroundColor: appTheme.gray100,
                  automaticallyImplyLeading: false,
                  stretchTriggerOffset: 1,
                  floating: true,
                  primary: false,
                  snap: true,
                  scrolledUnderElevation: 0,
                  bottom: PreferredSize(
                    preferredSize: Size(
                      MediaQuery.sizeOf(context).width,
                      64,
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SizedBox(height: 8),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 4),
                            child: MyPlansTab(),
                          ),
                          SizedBox(height: 8),
                          Row(
                            children: [
                              SizedBox(width: 4),
                              Expanded(
                                child: CustomSearchBar(
                                  enableIcon: false,
                                  backgroundColor: appTheme.whiteA700,
                                  borderRadius: 100,
                                  searchController: switch (state.selectedStateIndex) {
                                    1 => draftPlansSearchController,
                                    _ => activePlansSearchController,
                                  },
                                  onChanged: (query) {
                                    EasyDebounce.debounce(
                                      'searchPlans',
                                      Duration(milliseconds: 500),
                                      () {
                                        context.read<MyPlansCubit>().loadPlans(query: query == '' ? null : query);
                                      },
                                    );
                                  },
                                ),
                              ),
                              SizedBox(width: 12),
                              AddItemButton(
                                onTap: () => GoRouter.of(context).pushNamed(CreatePlanScreen.name),
                              ),
                              SizedBox(width: 4),
                            ],
                          ),
                          SizedBox(height: 16),
                        ],
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: RefreshIndicator(
              onRefresh: () => context.read<MyPlansCubit>().loadPlans(),
              child: BlocBuilder<MyPlansCubit, MyPlansState>(
                builder: (BuildContext context, MyPlansState state) {
                  if (state.isLoading) {
                    return Scaffold(
                      backgroundColor: Colors.grey.shade200,
                      body: const Loader(),
                    );
                  } else if (state.error != null) {
                    return Scaffold(
                      backgroundColor: Colors.grey.shade200,
                      body: Padding(
                        padding: const EdgeInsets.all(16),
                        child: Center(
                          child: Text(state.error ?? ''),
                        ),
                      ),
                    );
                  } else {
                    final plans = switch (state.selectedStateIndex) {
                      1 => state.draftPlans,
                      _ => state.activePlans,
                    };
                    return Stack(
                      children: [
                        SizedBox.expand(),
                        ListView.separated(
                          shrinkWrap: true,
                          physics: BouncingScrollPhysics(),
                          itemBuilder: (context, index) {
                            return MyPlanWidget(plan: plans[index]);
                          },
                          separatorBuilder: (context, index) {
                            return SizedBox(height: 20);
                          },
                          itemCount: plans.length,
                        ),
                        Positioned(
                          right: 0,
                          bottom: 74,
                          child: FilterBadge(
                            filterBottomSheet: PlansFilterBottomSheet(
                              myPlansCubit: context.read<MyPlansCubit>(),
                            ),
                          ),
                        ),
                      ],
                    );
                  }
                },
              ),
            ),
          );
        },
      ),
    );
  }
}