import 'dart:async';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/dependencies.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/features/services_price_list/services_price_list_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';

class ServicesPriceListPage extends StatefulWidget {
  const ServicesPriceListPage({super.key});

  @override
  State<ServicesPriceListPage> createState() => _ServicesPriceListPageState();
}

class _ServicesPriceListPageState extends State<ServicesPriceListPage> {
  late ServicesPriceListViewModel servicesPriceListViewModel;
  late AppState appState;

  @override
  void initState() {
    scheduleMicrotask(() {
      servicesPriceListViewModel.initServicesPriceListProvider();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    servicesPriceListViewModel = Provider.of<ServicesPriceListViewModel>(context, listen: false);
    appState = getIt.get<AppState>();

    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: CollapsingListView(
        title: LocaleKeys.servicePriceList.tr(context: context),
        child: SingleChildScrollView(
          padding: EdgeInsets.all(24.h),
          child: Consumer<ServicesPriceListViewModel>(builder: (context, model, child) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                    color: AppColors.whiteColor,
                    borderRadius: 24.h,
                    hasShadow: true,
                  ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
                    child: LocaleKeys.servicePriceListDesc.tr(context: context).toText12(isBold: true, color: AppColors.textColorLight),
                  ),
                ),
                SizedBox(height: 16.h),
                model.isServicesPriceListLoading
                    ? ListView.separated(
                        shrinkWrap: true,
                        padding: EdgeInsets.zero,
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: 5,
                        separatorBuilder: (context, index) => SizedBox(height: 12.h),
                        itemBuilder: (context, index) => _buildLoadingCard(),
                      )
                    : model.filteredServicesPriceList.isEmpty
                        ? Container(
                            decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                              color: AppColors.whiteColor,
                              borderRadius: 24.h,
                              hasShadow: true,
                            ),
                            padding: EdgeInsets.all(40.h),
                            child: Center(
                              child: LocaleKeys.noDataAvailable.tr(context: context).toText16(
                                    color: AppColors.textColorLight,
                                  ),
                            ),
                          )
                        : Container(
                            decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                              color: AppColors.whiteColor,
                              borderRadius: 24.h,
                              hasShadow: true,
                            ),
                            padding: EdgeInsets.all(16.h),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                LocaleKeys.serviceName.tr(context: context).toText18(weight: FontWeight.bold, color: AppColors.textColor),
                                SizedBox(height: 16.h),
                                ListView.separated(
                                  shrinkWrap: true,
                                  padding: EdgeInsets.zero,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemCount: model.filteredServicesPriceList.length,
                                  separatorBuilder: (context, index) => Divider(height: 1.h, color: AppColors.dividerColor).withVerticalPadding(),
                                  itemBuilder: (context, index) {
                                    final service = model.filteredServicesPriceList[index];
                                    return AnimationConfiguration.staggeredList(
                                      position: index,
                                      duration: const Duration(milliseconds: 500),
                                      child: SlideAnimation(
                                        verticalOffset: 100.0,
                                        child: FadeInAnimation(
                                          child: Column(
                                            crossAxisAlignment: CrossAxisAlignment.start,
                                            children: [
                                              Row(
                                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: [
                                                  Expanded(
                                                    child: (appState.isArabic() ? service.nameAR ?? service.nameEN ?? '' : service.nameEN ?? service.nameAR ?? '').toText16(
                                                      weight: FontWeight.w600,
                                                      color: AppColors.textColor,
                                                    ),
                                                  ),
                                                  SizedBox(width: 12.w),
                                                  Utils.getPaymentAmountWithSymbol('${service.price ?? 0}'.toText16(isBold: true), AppColors.blackColor, 13, isSaudiCurrency: true),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    );
                                  },
                                ),
                              ],
                            ),
                          ),
                SizedBox(height: 16.h),
                Container(
                  decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                    color: AppColors.whiteColor,
                    borderRadius: 24.h,
                    hasShadow: true,
                  ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
                    child: LocaleKeys.servicePriceListRights.tr(context: context).toText12(isBold: true, color: AppColors.textColorLight),
                  ),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  Widget _buildLoadingCard() {
    return Shimmer.fromColors(
      baseColor: AppColors.greyColor.withValues(alpha: 0.3),
      highlightColor: AppColors.greyColor.withValues(alpha: 0.1),
      child: Container(
        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
          color: AppColors.whiteColor,
          borderRadius: 24.h,
          hasShadow: true,
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Container(
                  height: 20.h,
                  decoration: BoxDecoration(
                    color: AppColors.greyColor,
                    borderRadius: BorderRadius.circular(4.r),
                  ),
                ),
              ),
              SizedBox(width: 12.w),
              Container(
                width: 80.w,
                height: 32.h,
                decoration: BoxDecoration(
                  color: AppColors.greyColor,
                  borderRadius: BorderRadius.circular(12.r),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
