import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.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/my_appointments/my_appointments_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/home/navigation_screen.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/chip/app_custom_chip_widget.dart';
import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
import 'package:lottie/lottie.dart';
import 'package:provider/provider.dart';

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

  AppState? appState;

  @override
  Widget build(BuildContext context) {
    appState = getIt.get<AppState>();
    final currentQueue = getIt.get<MyAppointmentsViewModel>().currentPatientQueueDetails;
    final currentStatus = getIt.get<MyAppointmentsViewModel>().currentQueueStatus;
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: Consumer<MyAppointmentsViewModel>(builder: (context, myAppointmentsVM, child) {
        return Column(
          children: [
            Expanded(
              child: CollapsingListView(
                  title: LocaleKeys.queueing.tr(context: context),
                  child: RefreshIndicator(
                    color: AppColors.primaryRedColor,
                    onRefresh: () async {
                      await myAppointmentsVM.getPatientAppointmentQueueDetails();
                    },
                    child: SingleChildScrollView(
                      physics: const AlwaysScrollableScrollPhysics(),
                      child: Padding(
                        padding: EdgeInsets.all(24.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                                color: AppColors.whiteColor,
                                borderRadius: 20.h,
                                hasShadow: false,
                                side: BorderSide(
                                    color: myAppointmentsVM.isAppointmentQueueDetailsLoading ? AppColors.whiteColor : Utils.getCardBorderColor(myAppointmentsVM.currentQueueStatus), width: 2.w),
                              ),
                              child: Padding(
                                padding: EdgeInsets.all(16.h),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        AppCustomChipWidget(
                                          labelText: myAppointmentsVM.currentQueueStatus == 0 ? LocaleKeys.inQueue.tr(context: context) : LocaleKeys.yourTurn.tr(context: context),
                                          backgroundColor: Utils.getCardBorderColor(myAppointmentsVM.currentQueueStatus).withValues(alpha: 0.20),
                                          textColor: Utils.getCardBorderColor(myAppointmentsVM.currentQueueStatus),
                                        ).toShimmer2(isShow: (currentQueue.queueNo == null || currentQueue.queueNo!.isEmpty)),
                                        Container(
                                            decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                                              color: AppColors.greyColor,
                                              borderRadius: 10.h,
                                              hasShadow: false,
                                            ),
                                            padding: EdgeInsets.all(6.h),
                                            child: Lottie.asset(AppAnimations.hourGlass, repeat: true, reverse: false, frameRate: FrameRate(60), width: 40.h, height: 40.h, fit: BoxFit.fill)),
                                      ],
                                    ).toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading),
                                    SizedBox(height: 10.h),
                                    "Hala ${appState!.getAuthenticatedUser()!.firstName}!!!".toText16(isBold: true).toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading),
                                    SizedBox(height: 8.h),
                                    LocaleKeys.thankYouForPatience
                                        .tr(context: context)
                                        .toText12(isBold: true, color: AppColors.textColorLight)
                                        .toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading),
                                    SizedBox(height: 8.h),
                                    (myAppointmentsVM.currentPatientQueueDetails.queueNo ?? "IM-123")
                                        .toText32(isBold: true)
                                        .toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading || (currentQueue.queueNo == null || currentQueue.queueNo!.isEmpty)),
                                    SizedBox(height: 8.h),
                                    CustomButton(
                                      text: Utils.getCardButtonText(myAppointmentsVM.currentQueueStatus, myAppointmentsVM.currentPatientQueueDetails.roomNo ?? ""),
                                      onPressed: () {},
                                      backgroundColor: Utils.getCardButtonColor(myAppointmentsVM.currentQueueStatus),
                                      borderColor: Utils.getCardButtonColor(myAppointmentsVM.currentQueueStatus).withValues(alpha: 0.01),
                                      textColor: Utils.getCardButtonTextColor(myAppointmentsVM.currentQueueStatus),
                                      fontSize: 12.f,
                                      fontWeight: FontWeight.w600,
                                      borderRadius: 12.r,
                                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                                      height: 40.h,
                                      iconColor: AppColors.whiteColor,
                                      iconSize: 18.h,
                                    ).toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading || (currentQueue.queueNo == null || currentQueue.queueNo!.isEmpty)),
                                  ],
                                ),
                              ),
                            ),
                            SizedBox(height: 16.h),
                            myAppointmentsVM.patientQueueDetailsList.isNotEmpty
                                ? Container(
                                    decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                                      color: AppColors.whiteColor,
                                      borderRadius: 20.h,
                                      hasShadow: true,
                                    ),
                                    child: Padding(
                                      padding: EdgeInsets.all(16.h),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          LocaleKeys.servingNow.tr(context: context).toText16(isBold: true).toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading),
                                          SizedBox(height: 18.h),
                                          ListView.separated(
                                            padding: EdgeInsets.zero,
                                            shrinkWrap: true,
                                            itemCount: myAppointmentsVM.patientQueueDetailsList.length,
                                            physics: NeverScrollableScrollPhysics(),
                                            itemBuilder: (BuildContext context, int index) {
                                              return Row(
                                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                children: [
                                                  myAppointmentsVM.patientQueueDetailsList[index].queueNo!.toText17(isBold: true),
                                                  Row(
                                                    crossAxisAlignment: CrossAxisAlignment.center,
                                                    children: [
                                                      "Room: ${myAppointmentsVM.patientQueueDetailsList[index].roomNo}".toText12(isBold: true),
                                                      SizedBox(width: 8.w),
                                                      AppCustomChipWidget(
                                                        deleteIcon: myAppointmentsVM.patientQueueDetailsList[index].callType == 1 ? AppAssets.call_for_vitals : AppAssets.call_for_doctor,
                                                        labelText: myAppointmentsVM.patientQueueDetailsList[index].callType == 1
                                                            ? LocaleKeys.callForVitalSigns.tr(context: context)
                                                            : LocaleKeys.callForDoctor.tr(context: context),
                                                        iconColor: myAppointmentsVM.patientQueueDetailsList[index].callType == 1 ? AppColors.primaryRedColor : AppColors.successColor,
                                                        textColor: myAppointmentsVM.patientQueueDetailsList[index].callType == 1 ? AppColors.primaryRedColor : AppColors.successColor,
                                                        iconSize: 14.w,
                                                        backgroundColor: myAppointmentsVM.patientQueueDetailsList[index].callType == 1
                                                            ? AppColors.primaryRedColor.withValues(alpha: 0.1)
                                                            : AppColors.successColor.withValues(alpha: 0.1),
                                                        labelPadding: EdgeInsetsDirectional.only(start: 8.h, end: -2.h),
                                                      ),
                                                    ],
                                                  ),
                                                ],
                                              );
                                            },
                                            separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 8.h),
                                          ).toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading),
                                        ],
                                      ),
                                    ),
                                  )
                                : SizedBox.shrink(),
                            SizedBox(height: 16.h),
                            Container(
                              decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                                color: AppColors.whiteColor,
                                borderRadius: 24.4,
                                hasShadow: true,
                              ),
                              child: Padding(
                                padding: EdgeInsets.all(16.h),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      children: [
                                        Utils.buildSvgWithAssets(icon: AppAssets.bulb_icon, width: 24.w, height: 24.h),
                                        SizedBox(width: 8.w),
                                        LocaleKeys.thingsToAskDoctor.tr(context: context).toText16(isBold: true),
                                      ],
                                    ),
                                    SizedBox(height: 8.h),
                                    "•  ${LocaleKeys.improveOverallHealth.tr(context: context)}".toText12(isBold: true, color: AppColors.textColorLight),
                                    SizedBox(height: 4.h),
                                    "•  ${LocaleKeys.routineScreenings.tr(context: context)}".toText12(isBold: true, color: AppColors.textColorLight),
                                    SizedBox(height: 4.h),
                                    "•  ${LocaleKeys.whatIsThisMedicationFor.tr(context: context)}".toText12(isBold: true, color: AppColors.textColorLight),
                                    SizedBox(height: 4.h),
                                    "•  ${LocaleKeys.sideEffectsToKnow.tr(context: context)}".toText12(isBold: true, color: AppColors.textColorLight),
                                    SizedBox(height: 4.h),
                                    "•  ${LocaleKeys.whenFollowUp.tr(context: context)}".toText12(isBold: true, color: AppColors.textColorLight),
                                    SizedBox(height: 16.h),
                                  ],
                                ).toShimmer2(isShow: myAppointmentsVM.isAppointmentQueueDetailsLoading),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
            ),
            Container(
              decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                color: AppColors.whiteColor,
                borderRadius: 24.r,
                hasShadow: true,
              ),
              child: CustomButton(
                text: LocaleKeys.goToHomepage.tr(context: context),
                onPressed: () {
                  Navigator.pushAndRemoveUntil(
                      context,
                      CustomPageRoute(
                        page: LandingNavigation(),
                      ),
                      (r) => false);
                },
                backgroundColor: AppColors.primaryRedColor,
                borderColor: AppColors.primaryRedColor,
                textColor: AppColors.whiteColor,
                fontSize: 16.f,
                fontWeight: FontWeight.w600,
                borderRadius: 12.r,
                padding: EdgeInsets.symmetric(horizontal: 10.w),
                height: 50.h,
                icon: AppAssets.homeBottom,
                iconColor: AppColors.whiteColor,
                iconSize: 18.h,
              ).paddingSymmetrical(24.h, 24.h),
            ),
          ],
        );
      }));
  }
}
