import 'package:flutter/material.dart';
  import 'package:flutter_svg/flutter_svg.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/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/medical_file/models/family_file_response_model.dart';
  import 'package:hmg_patient_app_new/theme/colors.dart';
  import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';

  class ProfileSelector extends StatelessWidget {
    final List<FamilyFileResponseModelLists> profiles;
    final Function(FamilyFileResponseModelLists) onSelect;


    const ProfileSelector({
      Key? key,
      required this.profiles,
      required this.onSelect,
    }) : super(key: key);


    @override
    Widget build(BuildContext context) {
      final double screenHeight = MediaQuery.of(context).size.height;
      int? activeProfileId = Utils.appState.getAuthenticatedUser()?.patientId;
      return SizedBox(
        height: screenHeight * 0.6,
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // const Text(
              //   "Please select a profile",
              //   style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              // ),
              // const SizedBox(height: 6),
              // const Text(
              //   "Switch from the below list of medical file",
              //   style: TextStyle(fontSize: 14, color: Colors.grey),
              //   textAlign: TextAlign.center,
              // ),
              const SizedBox(height: 20),

              // ✅ GridView inside scroll
              GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: profiles.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  childAspectRatio: 0.75,
                ),
                itemBuilder: (context, index) {
                  final profile = profiles[index];
                  final isActive =
                  (profile.responseId == activeProfileId);
                  return Container(
                    padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
                    decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                      color: isActive ? Colors.grey.shade100 : AppColors.whiteColor, // Lighter background for active
                      borderRadius: 24,
                    ),
                    child: Opacity(
                      opacity: isActive ? 0.5 : 1.0, // Fade all content if active
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const SizedBox(height: 5),
                          Container(
                            height: 80,
                            width: 78,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              image: DecorationImage(
                                image: AssetImage(
                                  profile.gender == 1
                                      ? AppAssets.male_img
                                      : AppAssets.femaleImg,
                                ),
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          const SizedBox(height: 8),
                          (profile.patientName ?? "Unknown").toText14(
                            isBold: true,
                            maxlines: 1,
                            isCenter: true,
                          ),
                          const SizedBox(height: 4),
                          Text(
                            "Relation: ${profile.relationship ?? "N/A"}",
                            style: const TextStyle(
                              fontSize: 12,
                              color: Colors.grey,
                            ),
                            textAlign: TextAlign.center,
                          ),
                          const SizedBox(height: 5),
                          if (isActive)
                            CustomButton(
                              height: 36,
                              onPressed: (){}, // Disabled
                              text: 'Active',
                              backgroundColor: Colors.grey.shade200,
                              borderColor: Colors.grey.shade200,
                              textColor: AppColors.greyTextColor,
                              fontSize: 13,

                            ).paddingOnly(top: 8, bottom: 4)
                          else
                            CustomButton(
                              height: 36,
                              onPressed: () => onSelect(profile),
                              text: 'Select',
                              backgroundColor: const Color(0xffFEE9EA),
                              borderColor: const Color(0xffFEE9EA),
                              textColor: const Color(0xffED1C2B),
                              fontSize: 13,
                            ).paddingOnly(top: 8, bottom: 4),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      );
    }

  }