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_export.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/utils.dart';
import 'package:hmg_patient_app_new/extensions/route_extensions.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/symptoms_checker/symptoms_checker_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.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:provider/provider.dart';

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

  @override
  State<RiskFactorsScreen> createState() => _RiskFactorsScreenState();
}

class _RiskFactorsScreenState extends State<RiskFactorsScreen> {
  late DialogService dialogService;
  late AppState _appState;

  @override
  void initState() {
    super.initState();
    dialogService = getIt<DialogService>();
    _appState = getIt<AppState>();
    // Fetch risk factors based on selected symptoms
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final viewModel = context.read<SymptomsCheckerViewModel>();
      viewModel.fetchRiskFactors();
    });
  }

  void _onRiskFactorSelected(SymptomsCheckerViewModel viewModel, String riskFactorId) {
    viewModel.toggleRiskFactorSelection(riskFactorId);
  }

  void _onNextPressed(SymptomsCheckerViewModel viewModel) {
    if (viewModel.hasSelectedRiskFactors) {
      context.navigateWithName(AppRoutes.suggestionsPage);
    } else {
      dialogService.showErrorBottomSheet(
        message: LocaleKeys.pleaseSelectAtLeastOneRiskBeforeProceeding.tr(context: context),
      );
    }
  }

  void _onPreviousPressed() {
    context.pop();
  }

  Widget _buildRiskFactorItem(SymptomsCheckerViewModel viewModel, String riskFactorId, String optionText) {
    final bool selected = viewModel.isRiskFactorSelected(riskFactorId);

    return GestureDetector(
      onTap: () => _onRiskFactorSelected(viewModel, riskFactorId),
      child: Container(
        margin: EdgeInsets.only(bottom: 16.h),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              width: 24.w,
              height: 24.w,
              decoration: BoxDecoration(
                color: selected ? AppColors.primaryRedColor : Colors.transparent,
                borderRadius: BorderRadius.circular(5.r),
                border: Border.all(color: selected ? AppColors.primaryRedColor : AppColors.checkBoxBorderColor, width: 1.w),
              ),
              child: selected ? Icon(Icons.check, size: 16.f, color: AppColors.whiteColor) : null,
            ),
            SizedBox(width: 12.w),
            Expanded(
                child: optionText.toText14(
              color: riskFactorId == "not_applicable" ? AppColors.errorColor : AppColors.textColor,
              weight: FontWeight.w600,
            )),
          ],
        ),
      ),
    );
  }

  Widget _buildRiskFactorsList(SymptomsCheckerViewModel viewModel) {
    final isArabic = _appState.isArabic();

    return Container(
      key: ValueKey<int>(viewModel.riskFactorsList.length),
      width: double.infinity,
      margin: EdgeInsets.symmetric(horizontal: 24.w),
      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.r),
      padding: EdgeInsets.only(top: 24.h, left: 16.w, right: 16.w, bottom: 8.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ...viewModel.riskFactorsList.map((factor) {
            return _buildRiskFactorItem(viewModel, factor.id ?? '', factor.getDisplayName(isArabic: isArabic));
          }),
          SizedBox(height: 12.w),
          Row(
            children: [
              Utils.buildSvgWithAssets(
                icon: AppAssets.alertSquare,
                height: 24.h,
                width: 24.h,
                iconColor: AppColors.textColor,
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: RichText(
                  text: TextSpan(
                    style: TextStyle(
                        height: 1.3,
                        fontSize: 13.f,
                        fontWeight: FontWeight.w600,
                        color: AppColors.greyInfoTextColor,
                        fontFamily: isArabic ? 'CairoArabic' : 'Poppins'),
                    children: [
                      TextSpan(
                        text: LocaleKeys.aboveYouSeeCommonRiskFactors.tr(context: context),
                      ),
                      // TextSpan(
                      //   text: LocaleKeys.readMore.tr(context: context),
                      //   style: TextStyle(
                      //     color: AppColors.primaryRedColor,
                      //     fontWeight: FontWeight.w600,
                      //   ),
                      //   recognizer: TapGestureRecognizer()
                      //     ..onTap = () {
                      //       // // handle tap - navigate or show bottom sheet
                      //       // debugPrint('Read more tapped');
                      //       //  Navigator.push(context, MaterialPageRoute(builder: (_) => RiskFactorsDetailScreen()));
                      //     },
                      // ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildLoadingShimmer() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 16.h),
        // Create 2-3 shimmer cards
        ...List.generate(3, (index) {
          return Padding(
            padding: EdgeInsets.only(bottom: 16.h),
            child: _buildShimmerCard(),
          );
        }),
      ],
    );
  }

  Widget _buildShimmerCard() {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.symmetric(horizontal: 24.w),
      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.r),
      padding: EdgeInsets.symmetric(vertical: 24.h, horizontal: 16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Shimmer title
          Container(
            height: 40.h,
            decoration: BoxDecoration(
              color: AppColors.whiteColor,
              borderRadius: BorderRadius.circular(24.r),
            ),
          ).toShimmer2(isShow: true, radius: 24.r),
          SizedBox(height: 16.h),
          // Shimmer chips
          Wrap(
            runSpacing: 12.h,
            spacing: 8.w,
            children: List.generate(4, (index) {
              return Container(
                padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
                decoration: BoxDecoration(
                  color: AppColors.whiteColor,
                  borderRadius: BorderRadius.circular(24.r),
                  border: Border.all(color: AppColors.bottomNAVBorder, width: 1),
                ),
                child: Text(
                  'Not Applicable Risk Factor'.needTranslation,
                  style: TextStyle(fontSize: 14.f, color: AppColors.textColor),
                ),
              ).toShimmer2(isShow: true, radius: 24.r);
            }),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: Consumer<SymptomsCheckerViewModel>(
        builder: (context, viewModel, _) {
          return Column(
            children: [
              Expanded(
                child: CollapsingListView(
                  title: LocaleKeys.doAnyOfTheseApply.tr(context: context),
                  leadingCallback: () => context.pop(),
                  child: viewModel.isRiskFactorsLoading
                      ? _buildLoadingShimmer()
                      : viewModel.riskFactorsList.isEmpty
                          ? _buildEmptyState()
                          : Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(height: 16.h),
                                _buildRiskFactorsList(viewModel),
                              ],
                            ),
                ),
              ),
              _buildStickyBottomCard(context, viewModel),
            ],
          );
        },
      ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(24.h),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.info_outline, size: 64.h, color: AppColors.greyTextColor),
            SizedBox(height: 16.h),
            Text(
              LocaleKeys.noRiskFactorsFound.tr(context: context),
              style: TextStyle(
                fontSize: 18.f,
                fontWeight: FontWeight.w600,
                color: AppColors.textColor,
              ),
            ),
            SizedBox(height: 8.h),
            Text(
              LocaleKeys.basedOnYourSelectedSymptomsNoRiskFactors.tr(context: context),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 14.f,
                color: AppColors.greyTextColor,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStickyBottomCard(BuildContext context, SymptomsCheckerViewModel viewModel) {
    return Container(
      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.r),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: 16.h),
          Row(
            children: [
              Expanded(
                child: CustomButton(
                  text: LocaleKeys.previous.tr(context: context),
                  onPressed: _onPreviousPressed,
                  backgroundColor: AppColors.primaryRedColor.withValues(alpha: 0.11),
                  borderColor: Colors.transparent,
                  textColor: AppColors.primaryRedColor,
                  fontSize: 16.f,
                ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: CustomButton(
                  text: LocaleKeys.next.tr(context: context),
                  onPressed: () => _onNextPressed(viewModel),
                  backgroundColor: AppColors.primaryRedColor,
                  borderColor: AppColors.primaryRedColor,
                  textColor: AppColors.whiteColor,
                  fontSize: 16.f,
                ),
              ),
            ],
          ),
          SizedBox(height: 24.h),
        ],
      ).paddingSymmetrical(24.w, 0),
    );
  }
}
