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/date_util.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/ask_doctor/models/ask_doctor_appointments_list.dart';
import 'package:hmg_patient_app_new/features/my_appointments/models/resp_models/patient_appointment_history_response_model.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/appointments/widgets/ask_doctor_request_type_select.dart';
import 'package:hmg_patient_app_new/theme/colors.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/common_bottom_sheet.dart';
import 'package:hmg_patient_app_new/widgets/loader/bottomsheet_loader.dart';

class AskDoctorAppointmentCard extends StatelessWidget {
  final AskDoctorAppointmentHistoryList askDoctorAppointmentHistoryList;
  final MyAppointmentsViewModel myAppointmentsViewModel;

  const AskDoctorAppointmentCard({super.key, required this.askDoctorAppointmentHistoryList, required this.myAppointmentsViewModel});

  @override
  Widget build(BuildContext context) {
    final appState = getIt.get<AppState>();
    return Padding(
      padding: EdgeInsets.all(14.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildHeader(context, appState),
          SizedBox(height: 16.h),
          _buildDoctorRow(context),
          SizedBox(height: 16.h),
          _buildActionArea(context, appState),
        ],
      ),
    );
  }

  Widget _buildHeader(BuildContext context, AppState appState) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(child: _buildChips(context, appState)),
      ],
    );
  }

  Widget _buildChips(BuildContext context, AppState appState) {
    return Wrap(
      alignment: WrapAlignment.start,
      direction: Axis.horizontal,
      spacing: 6.w,
      runSpacing: 6.h,
      children: [
        AppCustomChipWidget(
          icon: AppAssets.walkin_appointment_icon,
          iconColor: AppColors.textColor,
          labelText: LocaleKeys.walkin.tr(context: context),
          backgroundColor: AppColors.greyColor,
          textColor: AppColors.textColor,
        ),
        AppCustomChipWidget(
          labelText: LocaleKeys.outPatient.tr(context: context),
          backgroundColor: AppColors.primaryRedColor.withValues(alpha: 0.1),
          textColor: AppColors.primaryRedColor,
        ),
        AppCustomChipWidget(
          labelText: LocaleKeys.booked.tr(context: context),
          backgroundColor: AppColors.successColor.withValues(alpha: 0.1),
          textColor: AppColors.successColor,
        ),
      ],
    );
  }

  Widget _buildDoctorRow(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Utils.buildImgWithNetwork(
              url: askDoctorAppointmentHistoryList.doctorImageURL!,
              iconColor: AppColors.blackBgColor,
              width: 63.h,
              height: 63.h,
              fit: BoxFit.cover,
            ).circle(100.r),
            Transform.translate(
              offset: Offset(0.0, -20.h),
              child: Container(
                width: 40.w,
                height: 40.h,
                decoration: BoxDecoration(
                  color: AppColors.whiteColor,
                  shape: BoxShape.circle, // Makes the container circular
                  border: Border.all(
                    color: AppColors.scaffoldBgColor, // Color of the border
                    width: 1.5.w, // Width of the border
                  ),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Utils.buildSvgWithAssets(icon: AppAssets.rating_icon, width: 15.w, height: 15.h, applyThemeColor: false),
                    SizedBox(height: 2.h),
                    "${askDoctorAppointmentHistoryList.decimalDoctorRate}".toText11(isBold: true, color: AppColors.textColor),
                  ],
                ),
              ).circle(100),
            ),
          ],
        ),
        SizedBox(width: 16.h),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ("${askDoctorAppointmentHistoryList.doctorTitle} ${askDoctorAppointmentHistoryList.doctorName!}").toText16(isBold: true, maxlines: 1),
              SizedBox(height: 8.h),
              Wrap(
                direction: Axis.horizontal,
                spacing: 3.h,
                runSpacing: 4.h,
                children: [
                  AppCustomChipWidget(
                    labelText:
                        askDoctorAppointmentHistoryList.clinicName!.length > 15 ? '${askDoctorAppointmentHistoryList.clinicName!.substring(0, 12)}...' : askDoctorAppointmentHistoryList.clinicName!,
                  ),
                  AppCustomChipWidget(
                      labelText: askDoctorAppointmentHistoryList.projectName!.length > 15
                          ? '${askDoctorAppointmentHistoryList.projectName!.substring(0, 12)}...'
                          : askDoctorAppointmentHistoryList.projectName!),
                  AppCustomChipWidget(
                    labelPadding: EdgeInsetsDirectional.only(start: -4.w, end: 6.w),
                    icon: AppAssets.appointment_calendar_icon,
                    labelText: DateUtil.formatDateToDate(DateUtil.convertStringToDate(askDoctorAppointmentHistoryList.appointmentDate), false),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildActionArea(BuildContext context, AppState appState) {
    return CustomButton(
      text: LocaleKeys.askDoctor.tr(context: context),
      onPressed: () async {
        LoaderBottomSheet.showLoader(loadingText: LocaleKeys.checkingDoctorAvailability.tr(context: context));
        await myAppointmentsViewModel.isDoctorAvailable(
          projectID: askDoctorAppointmentHistoryList.projectID!,
          doctorId: askDoctorAppointmentHistoryList.doctorID!,
          clinicId: askDoctorAppointmentHistoryList.clinicID!,
          onSuccess: (value) async {
            if (value) {
              await myAppointmentsViewModel.getAskDoctorRequestTypes(onSuccess: (val) {
                LoaderBottomSheet.hideLoader();
                showCommonBottomSheetWithoutHeight(
                  context,
                  title: LocaleKeys.askDoctor.tr(context: context),
                  child: AskDoctorRequestTypeSelect(
                    askDoctorRequestTypeList: myAppointmentsViewModel.askDoctorRequestTypeList,
                    myAppointmentsViewModel: myAppointmentsViewModel,
                    patientAppointmentHistoryResponseModel: PatientAppointmentHistoryResponseModel(
                      appointmentNo: askDoctorAppointmentHistoryList.appointmentNo,
                      doctorID: askDoctorAppointmentHistoryList.doctorID!,
                      doctorName: askDoctorAppointmentHistoryList.doctorName!,
                      doctorTitle: askDoctorAppointmentHistoryList.doctorTitle!,
                      doctorImageURL: askDoctorAppointmentHistoryList.doctorImageURL!,
                      clinicID: askDoctorAppointmentHistoryList.clinicID!,
                      clinicName: askDoctorAppointmentHistoryList.clinicName!,
                      projectID: askDoctorAppointmentHistoryList.projectID!,
                      projectName: askDoctorAppointmentHistoryList.projectName!,
                      appointmentDate: askDoctorAppointmentHistoryList.appointmentDate!,
                    ),
                    // myAppointmentsVM.patientAppointmentsHistoryList[index],
                  ),
                  callBackFunc: () {},
                  isFullScreen: false,
                  isCloseButtonVisible: true,
                );
              });
            } else {
              LoaderBottomSheet.hideLoader();
            }
          },
          onError: (_) {
            LoaderBottomSheet.hideLoader();
          },
        );
      },
      backgroundColor: AppColors.secondaryLightRedColor,
      borderColor: AppColors.secondaryLightRedColor,
      textColor: AppColors.primaryRedColor,
      fontSize: 14.f,
      fontWeight: FontWeight.w600,
      borderRadius: 12.r,
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      // height: isTablet || isFoldable ? 46.h : 40.h,
      height: 40.h,
      icon: AppAssets.ask_doctor_icon,
      iconColor: AppColors.primaryRedColor,
      iconSize: 16.h,
    );
  }
}
