// 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/authentication/authentication_view_model.dart';
// import 'package:hmg_patient_app_new/features/blood_donation/blood_donation_view_model.dart';
// import 'package:hmg_patient_app_new/features/blood_donation/models/blood_group_hospitals_model.dart';
// import 'package:hmg_patient_app_new/features/blood_donation/widgets/hospital_selection.dart';
// import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
// import 'package:hmg_patient_app_new/presentation/blood_donation/widgets/select_blood_group_widget.dart';
// import 'package:hmg_patient_app_new/presentation/blood_donation/widgets/select_city_widget.dart';
// import 'package:hmg_patient_app_new/presentation/blood_donation/widgets/select_gender_widget.dart';
// import 'package:hmg_patient_app_new/presentation/book_appointment/select_clinic_page.dart';
// import 'package:hmg_patient_app_new/presentation/home/navigation_screen.dart';
// import 'package:hmg_patient_app_new/services/dialog_service.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/common_bottom_sheet.dart';
// import 'package:hmg_patient_app_new/widgets/loader/bottomsheet_loader.dart';
// import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
// import 'package:lottie/lottie.dart';
// import 'package:provider/provider.dart';
// import 'package:hmg_patient_app_new/presentation/appointments/widgets/hospital_bottom_sheet/hospital_bottom_sheet_body.dart';
//
// class MyChildVaccinePage extends StatefulWidget {
//   MyChildVaccinePage({super.key});
//
//   @override
//   State<MyChildVaccinePage> createState() => _MyChildVaccinePageState();
// }
//
// class _MyChildVaccinePageState extends State<MyChildVaccinePage> {
//   late AppState appState;
//
//   @override
//   void initState() {
//     super.initState();
//     Future.microtask(() => getIt.get<BloodDonationViewModel>().fetchAllData());
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     appState = getIt<AppState>();
//     return Scaffold(
//       backgroundColor: AppColors.bgScaffoldColor,
//       body: Consumer<BloodDonationViewModel>(builder: (context, bloodDonationVM, child) {
//         return Column(
//           children: [
//             Expanded(
//               child: CollapsingListView(
//                 title: "Child Vaccines".needTranslation,
//                 trailing: CustomButton(
//                     icon: AppAssets.add_icon,
//                     text: "Add Child",
//                     onPressed: () {},
//                     backgroundColor: AppColors.bgRedLightColor,
//                     borderColor: AppColors.bgRedLightColor,
//                     textColor: AppColors.primaryRedColor,
//                     iconColor: AppColors.primaryRedColor,
//                     padding: EdgeInsetsGeometry.symmetric(vertical: 0.h, horizontal: 10.h)),
//                 child: Padding(
//                   padding: EdgeInsets.all(24.w),
//                   child: SingleChildScrollView(
//                     child: Container(
//                       decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.r, hasShadow: false),
//                       child: Padding(
//                         padding: EdgeInsets.all(16.h),
//                         child: Column(
//                           crossAxisAlignment: CrossAxisAlignment.start,
//                           children: [
//                             Row(
//                               mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                               children: [
//                                 Row(
//                                   children: [
//                                     Utils.buildSvgWithAssets(icon: AppAssets.select_city_icon, width: 40.h, height: 40.h),
//                                     SizedBox(width: 12.w),
//                                     Column(
//                                       crossAxisAlignment: CrossAxisAlignment.start,
//                                       children: [
//                                         LocaleKeys.city.tr().toText16(color: AppColors.textColor, isBold: true),
//                                         (appState.isArabic()
//                                                 ? (bloodDonationVM.selectedCity?.descriptionN ?? LocaleKeys.select.tr())
//                                                 : bloodDonationVM.selectedCity?.description ?? LocaleKeys.select.tr(context: context))
//                                             .toText14(color: AppColors.greyTextColor, isBold: true),
//                                       ],
//                                     ),
//                                   ],
//                                 ),
//                                 Utils.buildSvgWithAssets(icon: AppAssets.arrow_down, width: 25.h, height: 25.h),
//                               ],
//                             ).onPress(() async {
//                               showCommonBottomSheetWithoutHeight(context,
//                                   title: LocaleKeys.selectCity.tr(context: context), isDismissible: true, child: SelectCityWidget(bloodDonationViewModel: bloodDonationVM), callBackFunc: () {});
//                             }),
//                             SizedBox(height: 16.h),
//                             Divider(color: AppColors.borderOnlyColor.withValues(alpha: 0.1), height: 1.h),
//                             SizedBox(height: 16.h),
//                             Row(
//                               mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                               children: [
//                                 Row(
//                                   children: [
//                                     Utils.buildSvgWithAssets(icon: AppAssets.genderInputIcon, width: 40.h, height: 40.h),
//                                     SizedBox(width: 12.w),
//                                     Column(
//                                       crossAxisAlignment: CrossAxisAlignment.start,
//                                       children: [
//                                         LocaleKeys.gender.tr().toText16(color: AppColors.textColor, isBold: true),
//                                         (appState.isArabic()
//                                                 ? (bloodDonationVM.selectedGender?.typeAr ?? LocaleKeys.select.tr())
//                                                 : bloodDonationVM.selectedGender?.type ?? LocaleKeys.select.tr(context: context))
//                                             .toText14(color: AppColors.greyTextColor, isBold: true),
//                                       ],
//                                     ),
//                                   ],
//                                 ),
//                                 Utils.buildSvgWithAssets(icon: AppAssets.arrow_down, width: 25.h, height: 25.h),
//                               ],
//                             ).onPress(() {
//                               showCommonBottomSheetWithoutHeight(context,
//                                   title: LocaleKeys.selectGender.tr(context: context),
//                                   isDismissible: true,
//                                   child: SelectGenderWidget(isArabic: appState.isArabic(), bloodDonationViewModel: bloodDonationVM),
//                                   callBackFunc: () {});
//                             }),
//                             SizedBox(height: 16.h),
//                             Divider(color: AppColors.borderOnlyColor.withValues(alpha: 0.1), height: 1.h),
//                             SizedBox(height: 16.h),
//                             Row(
//                               mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                               children: [
//                                 Row(
//                                   children: [
//                                     Utils.buildSvgWithAssets(icon: AppAssets.bloodType, width: 40.h, height: 40.h),
//                                     SizedBox(width: 12.w),
//                                     Column(
//                                       crossAxisAlignment: CrossAxisAlignment.start,
//                                       children: [
//                                         LocaleKeys.bloodType.tr().toText16(color: AppColors.textColor, isBold: true),
//                                         // bloodDonationVM.selectedBloodType?.toText14(color: AppColors.greyTextColor, isBold: true),
//                                         (appState.isArabic()
//                                                 ? (bloodDonationVM.selectedBloodType ?? LocaleKeys.select.tr())
//                                                 : bloodDonationVM.selectedBloodType ?? LocaleKeys.select.tr(context: context))
//                                             .toText14(color: AppColors.greyTextColor, isBold: true)
//                                       ],
//                                     ),
//                                   ],
//                                 ),
//                                 Utils.buildSvgWithAssets(icon: AppAssets.arrow_down, width: 25.h, height: 25.h),
//                               ],
//                             ).onPress(() {
//                               showCommonBottomSheetWithoutHeight(context,
//                                   title: LocaleKeys.select.tr(context: context),
//                                   isDismissible: true,
//                                   child: SelectBloodGroupWidget(isArabic: appState.isArabic(), bloodDonationViewModel: bloodDonationVM),
//                                   callBackFunc: () {});
//                             }),
//                           ],
//                         ),
//                       ),
//                     ),
//                   ),
//                 ),
//               ),
//             ),
//             Container(
//               decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.r, hasShadow: true),
//               child: SizedBox(
//                 child: Column(
//                   crossAxisAlignment: CrossAxisAlignment.start,
//                   children: [
//                   ],
//                 ),
//               ),
//             ),
//           ],
//         );
//       }),
//     );
//   }
// }


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/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';

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

  @override
  State<MyChildVaccinePage> createState() => _MyChildVaccinePageState();
}

class _MyChildVaccinePageState extends State<MyChildVaccinePage> {
  int selectedChildIndex = 0;

  final List<Map<String, dynamic>> children = [
    {"name": "Faris", "gender": "Son", "image": AppAssets.babyBoyImg},
    {"name": "Zaina", "gender": "Daughter", "image": AppAssets.babyGirlImg},
    {"name": "Ahmed", "gender": "Son", "image": AppAssets.babyBoyImg},
  ];

  final List<Map<String, dynamic>> vaccinesData = [
    {
      "age": "4 months",
      "dueDate": "19 Aug, 2025",
      "vaccines": ["IPV", "DTap", "Hepatitis B", "HIB", "Pneumococcal Conjugate (PCV)", "Rota"]
    },
    {
      "age": "2 months",
      "dueDate": "19 June, 2025",
      "vaccines": ["IPV", "DTap", "Hepatitis B", "HIB", "Pneumococcal Conjugate (PCV)", "Rota"]
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: Column(
        children: [
          Expanded(
            child: CollapsingListView(
              title: "Child Vaccines".needTranslation,
              trailing: CustomButton(
                icon: AppAssets.add_icon,
                text: "Add Child",
                onPressed: () {},
                backgroundColor: AppColors.bgRedLightColor,
                borderColor: AppColors.bgRedLightColor,
                textColor: AppColors.primaryRedColor,
                iconColor: AppColors.primaryRedColor,
                padding: EdgeInsets.symmetric(vertical: 0.h, horizontal: 10.w),
              ),
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 16.h),
                    _buildChildSelector(),
                    SizedBox(height: 24.h),
                    ListView.separated(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      padding: EdgeInsets.symmetric(horizontal: 24.w),
                      itemCount: vaccinesData.length,
                      separatorBuilder: (context, index) => SizedBox(height: 16.h),
                      itemBuilder: (context, index) {
                        return _buildVaccineCard(vaccinesData[index]);
                      },
                    ),
                    SizedBox(height: 24.h),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildChildSelector() {
    return SizedBox(
      height: 50.h,
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        itemCount: children.length,
        separatorBuilder: (context, index) => SizedBox(width: 12.w),
        itemBuilder: (context, index) {
          bool isSelected = selectedChildIndex == index;
          return GestureDetector(
            onTap: () => setState(() => selectedChildIndex = index),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
              decoration: BoxDecoration(
                color: isSelected ? AppColors.bgRedLightColor : AppColors.whiteColor,
                borderRadius: BorderRadius.circular(12.r),
                border: Border.all(
                  color: isSelected ? AppColors.primaryRedColor : AppColors.borderOnlyColor.withValues(alpha: 0.1),
                  width: 1,
                ),
              ),
              child: Row(
                children: [
                  Utils.buildImgWithAssets(icon: children[index]['image'], width: 24.h, height: 24.h),
                  SizedBox(width: 8.w),
                  Text(
                    "${children[index]['name']} (${children[index]['gender']})",
                    style: TextStyle(
                      color: isSelected ? AppColors.primaryRedColor : AppColors.textColor,
                      fontWeight: isSelected ? FontWeight.w600 : FontWeight.w600,
                      fontSize: 14.f,
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildVaccineCard(Map<String, dynamic> data) {
    return Container(
      padding: EdgeInsets.all(20.h),
      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
        color: AppColors.whiteColor,
        borderRadius: 24.r,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          data['age'].toString().toText18(weight: FontWeight.bold, color: AppColors.textColor),
          SizedBox(height: 12.h),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
            decoration: BoxDecoration(
              color: AppColors.bgScaffoldColor,
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Utils.buildSvgWithAssets(icon: AppAssets.calendar, width: 16.h, height: 16.h, iconColor: AppColors.textColor),
                SizedBox(width: 8.w),
                "Due Date : ${data['dueDate']}".toText12(isBold: true, color: AppColors.textColor),
              ],
            ),
          ),
          SizedBox(height: 16.h),
          ... (data['vaccines'] as List).map((vaccine) => Padding(
            padding: EdgeInsets.only(bottom: 12.h),
            child: Row(
              children: [
                Utils.buildSvgWithAssets(icon: AppAssets.tickIcon, width: 20.h, height: 20.h, iconColor: Colors.green),
                SizedBox(width: 12.w),
                vaccine.toString().toText14(isBold: true, color: AppColors.textColor),
              ],
            ),
          )),
          SizedBox(height: 8.h),
          CustomButton(
            text: "Send via email",
            onPressed: () {},
            backgroundColor: AppColors.bgRedLightColor,
            borderColor: Colors.transparent,
            textColor: AppColors.primaryRedColor,
            icon: AppAssets.email,
            iconColor: AppColors.primaryRedColor,
            width: double.infinity,
          ),
        ],
      ),
    );
  }
}