import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_export.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/presentation/symptoms_checker/user_info_selection/widgets/height_scale.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:provider/provider.dart';

/// Height selection page content
class HeightSelectionPage extends StatelessWidget {
  const HeightSelectionPage({super.key});

  Widget _unitSelector(SymptomsCheckerViewModel viewModel) {
    return Container(
      height: 54.h,
      padding: EdgeInsets.all(4.h),
      decoration: BoxDecoration(
        color: AppColors.whiteColor,
        borderRadius: BorderRadius.circular(10.r),
      ),
      child: LayoutBuilder(
        builder: (context, constraints) {
          final tabWidth = (constraints.maxWidth - 8.w) / 2;
          return Stack(
            children: [
              AnimatedContainer(
                duration: const Duration(milliseconds: 250),
                curve: Curves.easeInOut,
                width: tabWidth,
                height: constraints.maxHeight,
                margin: EdgeInsets.only(left: viewModel.isHeightCm ? 0 : tabWidth + 8.w),
                decoration: BoxDecoration(
                  color: AppColors.bottomNAVBorder,
                  borderRadius: BorderRadius.circular(7.r),
                ),
              ),
              // Tab buttons
              Row(
                children: [
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        if (!viewModel.isHeightCm) {
                          final convertedHeight = viewModel.selectedHeight! * 30.48;
                          viewModel.setHeight(convertedHeight, true);
                        }
                      },
                      child: Container(
                        alignment: Alignment.center,
                        color: Colors.white,
                        child: Text(
                          'CM',
                          style: TextStyle(
                              fontWeight: FontWeight.w700,
                              fontSize: 14.f,
                              color: viewModel.isHeightCm ? AppColors.primaryRedColor : AppColors.textColor.withValues(alpha: 0.6),
                              fontFamily: "Poppins"),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        if (viewModel.isHeightCm) {
                          final convertedHeight = viewModel.selectedHeight! / 30.48;
                          viewModel.setHeight(convertedHeight, false);
                        }
                      },
                      child: Container(
                        alignment: Alignment.center,
                        color: Colors.white,
                        child: Text(
                          'FT',
                          style: TextStyle(
                              fontWeight: FontWeight.w700,
                              fontSize: 14.f,
                              color: !viewModel.isHeightCm ? AppColors.primaryRedColor : AppColors.textColor.withValues(alpha: 0.6),
                              fontFamily: "Poppins"),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<SymptomsCheckerViewModel>(
      builder: (context, viewModel, child) {
        // Define min/max values based on unit
        final minValue = viewModel.isHeightCm ? 50.0 : 1.6; // 50cm or 1.6ft (approx. 1'7")
        final maxValue = viewModel.isHeightCm ? 280.0 : 9.2; // 280cm or 9.2ft (approx. 9'2")

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 24.h),
            Center(
              child: Text(
                LocaleKeys.heightSymptoms.tr(context: context),
                style: TextStyle(fontSize: 18.f, fontWeight: FontWeight.w600, color: AppColors.textColor),
              ),
            ),
            SizedBox(height: 24.h),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 24.w),
              child: _unitSelector(viewModel),
            ),
            SizedBox(height: 20.h),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Spacer(flex: 1),
                Expanded(
                  flex: 3,
                  child: Consumer<SymptomsCheckerViewModel>(
                    builder: (context, viewModel, child) {
                      return Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text:
                                  viewModel.isHeightCm ? viewModel.selectedHeight?.round().toString() : viewModel.selectedHeight?.toStringAsFixed(1),
                              style: TextStyle(fontSize: 90.f, color: AppColors.textColor, height: 1, fontFamily: "Poppins"),
                            ),
                            TextSpan(
                              text: viewModel.isHeightCm ? 'cm' : 'ft',
                              style: TextStyle(
                                fontWeight: FontWeight.w700,
                                fontSize: 24.f,
                              ),
                            ),
                          ],
                        ),
                      ).paddingOnly(bottom: 100.h, left: isFoldable ? 40.w : 20.w);
                    },
                  ),
                ),
                Expanded(
                  child: HeightScale(
                    key: ValueKey(viewModel.isHeightCm),
                    enableHaptic: true,
                    enableSound: true,
                    minValue: minValue,
                    maxValue: maxValue,
                    initialHeight: (viewModel.selectedHeight ?? 100).toDouble(),
                    isCm: viewModel.isHeightCm,
                    onHeightChanged: (newHeight) {
                      viewModel.setHeight(newHeight, viewModel.isHeightCm);
                    },
                  ),
                ),
              ],
            ),
          ],
        );
      },
    );
  }
}
