import 'package:car_customer_app/views/dashboard/widgets/drawer_widget.dart';
import 'package:car_customer_app/views/dashboard/widgets/my_services_categories_widget.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/config/routes.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/general_models/widgets_models.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/enums.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/view_models/ad_view_model.dart';
import 'package:mc_common_app/view_models/appointments_view_model.dart';
import 'package:mc_common_app/view_models/dashboard_view_model_customer.dart';
import 'package:mc_common_app/views/advertisement/components/ads_list_widget.dart';
import 'package:mc_common_app/views/appointments/widgets/common_appointment_slider_widget.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/common_widgets/view_all_widget.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:mc_common_app/widgets/shimmer/home_shimmer_widgets.dart';
import 'package:provider/provider.dart';

class HomeFragment extends StatefulWidget {
  const HomeFragment({Key? key}) : super(key: key);

  @override
  State<HomeFragment> createState() => _HomeFragmentState();
}

class _HomeFragmentState extends State<HomeFragment> {
  bool _isSearchingServices = false;
  final TextEditingController _searchController = TextEditingController();
  String _searchQuery = '';

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  void _toggleSearch() {
    setState(() {
      _isSearchingServices = !_isSearchingServices;
      if (!_isSearchingServices) {
        _searchController.clear();
        _searchQuery = '';
      }
    });
  }

  List<FilterListModel> _filterServices(List<FilterListModel> services) {
    if (_searchQuery.isEmpty) {
      return services;
    }
    return services.where((service) {
      return service.title.toLowerCase().contains(_searchQuery.toLowerCase());
    }).toList();
  }

  Widget _buildServicesHeader() {
    if (_isSearchingServices) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 21),
        child: Row(
          children: [
            Expanded(
              child: Container(
                height: 55,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.grey[300]!, width: 1),
                ),
                child: TextField(
                  controller: _searchController,
                  autofocus: true,
                  style: const TextStyle(fontSize: 16),
                  onChanged: (value) {
                    setState(() {
                      _searchQuery = value;
                    });
                  },
                  decoration: InputDecoration(
                    hintText: LocaleKeys.searchService.tr(),
                    hintStyle: TextStyle(fontSize: 16, color: Colors.grey[600]),
                    prefixIcon: Icon(Icons.search, size: 26, color: Colors.grey[700]),
                    border: InputBorder.none,
                    contentPadding: const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
                  ),
                ),
              ),
            ),
            14.width,
            InkWell(
              onTap: _toggleSearch,
              child: Container(
                height: 55,
                width: 55,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.grey[300]!, width: 1),
                ),
                child: Icon(Icons.close, size: 26, color: Colors.grey[700]),
              ),
            ),
          ],
        ),
      );
    } else {
      return Row(
        children: [
          Expanded(
            child: LocaleKeys.services.tr().toUpperCase().toText(fontSize: 20, isUpperCase: true, fontWeight: FontWeight.w600),
          ),
          InkWell(
            onTap: _toggleSearch,
            child: const Icon(Icons.search, size: 28, color: MyColors.primaryColor),
          ),
        ],
      ).horPaddingMain();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: CustomDrawer(dashboardVM: context.watch<DashboardVmCustomer>()),
      appBar: CustomAppBar(
        isDrawerEnabled: true,
        leadingWidth: 100,
        onTap: () => navigateWithName(context, AppRoutes.settingOptionsMore),
        actions: [
          // IconButton(
          //   onPressed: () {},
          //   icon: const b.Badge(
          //     badgeContent: Text(
          //       '3',
          //       style: TextStyle(
          //         fontSize: 10,
          //         color: Colors.white,
          //       ),
          //     ),
          //     badgeStyle: b.BadgeStyle(
          //       badgeColor: MyColors.primaryColor,
          //       padding: EdgeInsets.all(5),
          //     ),
          //     child: Icon(Icons.notifications_active),
          //   ),
          // ),
          // 10.width,
        ],
      ).toViewOnly(context, onTap: () {
        navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
      }),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: RefreshIndicator(
          onRefresh: () async => await context.read<DashboardVmCustomer>().onRefresh(context),
          child: ListView(
            children: [
              16.height,
              ViewAllWidget(
                title: LocaleKeys.upcoming_appointment.tr().toUpperCase(),
                subTitle: LocaleKeys.view_all.tr(),
                onSubtitleTapped: () {
                  context.read<DashboardVmCustomer>().onNavbarTapped(1);
                  context.read<AppointmentsVM>().applyFilterOnAppointmentsVMForCustomers(appointmentStatusEnum: AppointmentStatusEnum.allAppointments);
                },
              ).horPaddingMain().toViewOnly(context, onTap: () {
                navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
              }),
              Consumer<AppointmentsVM>(
                builder: (BuildContext context, AppointmentsVM appointmentVM, Widget? child) {
                  // Show shimmer when loading
                  if (appointmentVM.state == ViewState.busy) {
                    return const AppointmentSliderShimmer();
                  }
                  // Show actual data when idle
                  return CommonAppointmentSliderWidget()
                      .toWhiteContainer(
                        width: double.infinity,
                        backgroundColor: Colors.transparent,
                      )
                      .margin(left: 21, right: 21)
                      .toViewOnly(context, onTap: () {
                    navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
                  });
                },
              ),

              // SERVICES SECTION
              14.height,
              Consumer(
                builder: (BuildContext context, AppointmentsVM appointmentVM, Widget? child) {
                  // Show shimmer when loading
                  if (appointmentVM.state == ViewState.busy) {
                    return Column(
                      children: [
                        _buildServicesHeader(),
                        14.height,
                        const ServicesGridShimmer(),
                      ],
                    );
                  }
                  // Show actual data when idle
                  if (appointmentVM.branchesCategoriesFilterOptions.isNotEmpty) {
                    // Filter services based on search query
                    final filteredServices = _filterServices(appointmentVM.branchesCategoriesFilterOptions);
                    
                    return Column(
                      children: [
                        _buildServicesHeader().toViewOnly(context, onTap: () {
                          navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
                        }),
                        14.height,
                        filteredServices.isEmpty
                            ? Padding(
                                padding: const EdgeInsets.all(40),
                                child: LocaleKeys.noServiceFound.tr().toText(
                                  fontSize: 16,
                                  color: Colors.grey,
                                  textAlign: TextAlign.center,
                                ),
                              )
                            : MyServicesCategoriesWidget(homeCategories: filteredServices).horPaddingMain(),
                      ],
                    );
                  }
                  return const SizedBox();
                },
              ),

              // NEARBY BRANCHES SECTION
              // 7.height,
              // Consumer(
              //   builder: (BuildContext context, AppointmentsVM appointmentVM, Widget? child) {
              //     if (appointmentVM.state == ViewState.busy) {
              //       return Center(child: CircularProgressIndicator());
              //     }
              //
              //     if (appointmentVM.myRecentBranches.isNotEmpty) {
              //       return Column(
              //         children: [
              //           ViewAllWidget(
              //             title: LocaleKeys.myRecentBranches.tr().toUpperCase(),
              //             subTitle: '',
              //             onSubtitleTapped: () {
              //               // context.read<DashboardVmCustomer>().onNavbarTapped(0);
              //               // context.read<AppointmentsVM>().applyFilterOnBranches(index: 0);
              //             },
              //           ).horPaddingMain(),
              //           MyRecentBranchesWidget(nearbyBranches: appointmentVM.myRecentBranches).horPaddingMain(),
              //         ],
              //       );
              //     }
              //     if (appointmentVM.nearbyBranches.isNotEmpty) {
              //       return Column(
              //         children: [
              //           ViewAllWidget(
              //             title: LocaleKeys.myNearbyBranches.tr().toUpperCase(),
              //             subTitle: LocaleKeys.view_all.tr(),
              //             onSubtitleTapped: () {
              //               context.read<DashboardVmCustomer>().onNavbarTapped(0);
              //               context.read<AppointmentsVM>().applyFilterOnBranches(index: 0);
              //             },
              //           ).horPaddingMain(),
              //           MyRecentBranchesWidget(nearbyBranches: appointmentVM.nearbyBranches).horPaddingMain(),
              //         ],
              //       );
              //     }
              //
              //     return SizedBox();
              //   },
              // ),

              // ADS SECTION
              Consumer(
                builder: (BuildContext context, AdVM adVM, Widget? child) {
                  // Show shimmer when loading
                  if (adVM.state == ViewState.busy) {
                    return Column(
                      children: [
                        15.height,
                        ViewAllWidget(
                          title: LocaleKeys.my_active_Ads.tr().toUpperCase(),
                          subTitle: LocaleKeys.view_all.tr(),
                          onSubtitleTapped: () {},
                        ).horPaddingMain(),
                        14.height,
                        const AdsListShimmer(itemCount: 2),
                      ],
                    );
                  }
                  // Show actual data when idle
                  return Column(
                    children: [
                      if (adVM.myActiveAdsForHome.isNotEmpty) ...[
                        Column(
                          children: [
                            15.height,
                            ViewAllWidget(
                                title: LocaleKeys.my_active_Ads.tr().toUpperCase(),
                                subTitle: LocaleKeys.view_all.tr(),
                                onSubtitleTapped: () {
                                  context.read<DashboardVmCustomer>().onNavbarTapped(3);
                                  context.read<AdVM>().updateIsExploreAds(false);
                                }).horPaddingMain().toViewOnly(context, onTap: () {
                              navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
                            }),
                            AdsListWidget(
                              isDraftAds: false,
                              shouldShowAdStatus: true,
                              isAdsFragment: false,
                              adsList: adVM.myActiveAdsForHome,
                              scrollPhysics: const NeverScrollableScrollPhysics(),
                              hasMoreData: adVM.isExploreAdsTapped ? adVM.hasMoreDataForExploreAds : adVM.hasMoreDataForMyAds,
                            ).toViewOnly(context, onTap: () {
                              navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
                            }),
                          ],
                        )
                      ],
                      // RECOMMENDED ADS SECTION - COMMENTED OUT
                      // if (adVM.exploreAds.isNotEmpty) ...[
                      //   Column(
                      //     children: [
                      //       15.height,
                      //       ViewAllWidget(
                      //         title: LocaleKeys.myRecommendedAds.tr().toUpperCase(),
                      //         subTitle: LocaleKeys.view_all.tr(),
                      //         onSubtitleTapped: () {
                      //           context.read<DashboardVmCustomer>().onNavbarTapped(3);
                      //           context.read<AdVM>().updateIsExploreAds(true);
                      //           context.read<AdVM>().applyFilterOnExploreAds(vehicleBrandId: 0);
                      //         },
                      //       ).horPaddingMain(),
                      //       AdsListWidget(
                      //         isDraftAds: false,
                      //         shouldShowAdStatus: false,
                      //         adsList: adVM.exploreAds.length >= 3 ? adVM.exploreAds.take(3).toList() : adVM.exploreAds,
                      //         isAdsFragment: false,
                      //         scrollPhysics: NeverScrollableScrollPhysics(),
                      //         hasMoreData: adVM.isExploreAdsTapped ? adVM.hasMoreDataForExploreAds : adVM.hasMoreDataForMyAds,
                      //       ),
                      //     ],
                      //   )
                      // ]
                    ],
                  );
                },
              ),
              20.height,
            ],
          ),
        ),
      ),
    );
  }
}