import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:onufitness/constants/asset_constants.dart';
import 'package:onufitness/constants/color_constant.dart';
import 'package:onufitness/constants/text_constant.dart';
import 'package:onufitness/routes/route_constant.dart';
import 'package:onufitness/screens/echoboard/controllers/connection_and_tribe_controller.dart';
import 'package:onufitness/utils/custom_sneakbar.dart';
import 'package:onufitness/utils/helper_function.dart';
import 'package:onufitness/widgets/appbars/custom_appbar.dart';
import 'package:onufitness/widgets/Buttons/custom_submit_button.dart';

class CreateTribeScreen extends StatefulWidget {
  final List<String> selectedUserIds;
  final SocialConnectionController socialConnectionController;

  const CreateTribeScreen({
    super.key,
    required this.selectedUserIds,
    required this.socialConnectionController,
  });

  @override
  State<CreateTribeScreen> createState() => _CreateTribeScreenState();
}

class _CreateTribeScreenState extends State<CreateTribeScreen> {
  final socialConnectionController = Get.find<SocialConnectionController>();

  @override
  Widget build(BuildContext context) {
    // Use the allSelectedUsers from controller instead of filtering from current page
    final selectedUsers = socialConnectionController.allSelectedUsers;

    return Scaffold(
      appBar: CustomAppBar(
        title: 'Create Tribe',
        backgroundColor: Colors.white,
        textColor: appbarTextColor,
        titleFontSize: appBarHeardingText,
        leading: IconButton(
          onPressed: () {
            Get.back();
          },
          icon: Icon(Icons.arrow_back_ios, size: 20),
        ),
      ),
      body: Obx(
        () => SafeArea(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 16,
                ),
                child: Row(
                  children: [
                    InkWell(
                      onTap: () {
                        socialConnectionController.pickTribeImage();
                      },
                      child: CircleAvatar(
                        
                        radius: isTablet ? 30.sp : 35.sp,
                        backgroundColor: lightGreyColor,
                        backgroundImage:
                            socialConnectionController
                                        .selectedTribeImage
                                        .value !=
                                    null
                                ? FileImage(
                                  socialConnectionController
                                      .selectedTribeImage
                                      .value!,
                                )
                                : null,
                        child:
                            socialConnectionController
                                        .selectedTribeImage
                                        .value ==
                                    null
                                ? Icon(
                                  Icons.camera_alt,
                                  size: 30.sp,
                                  color: Colors.white,
                                )
                                : null,
                      ),
                    ),
                    SizedBox(width: 15.w),
                    Expanded(
                      child: TextField(
                        controller:
                            socialConnectionController.tribeNameController,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(
                            left: 30.w,
                            top: 15.h,
                            bottom: 15.h,
                          ),
                          hintText: 'Enter a tribe name',
                          hintStyle: TextStyle(
                            color: greyTextColor1,
                            fontWeight: FontWeight.w600,
                            fontSize: regularSizeText,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30),
                            borderSide: BorderSide.none,
                          ),
                          filled: true,
                          fillColor: textFieldFillColor,
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 16),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'Members : ${selectedUsers.length}',
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              const SizedBox(height: 8),
              Container(
                height: 85,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: selectedUsers.length,
                  itemBuilder: (context, index) {
                    final user = selectedUsers[index];
                    return Padding(
                      padding: const EdgeInsets.only(right: 15),
                      child: Column(
                        children: [
                          CircleAvatar(
                            backgroundColor: lightGreyColor,
                            radius: isTablet ? 30.r : 25.r,
                            backgroundImage:
                                (user.userProfileImage != null &&
                                        user.userProfileImage!.isNotEmpty)
                                    ? NetworkImage(user.userProfileImage!)
                                        as ImageProvider
                                    : AssetImage(AssetConstants.dummyUserImage),
                          ),

                          const SizedBox(height: 5),
                          Text(
                            '${user.firstName}',
                            style: const TextStyle(fontSize: 12),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
              const Spacer(),
              Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 15.sp,
                  vertical: 30.sp,
                ),
                color: Colors.white,
                child: Obx(
                  () => CustomSubmitButton(
                    isLoading: socialConnectionController.isLoading.value,
                    fontSize: regularSizeText,
                    fontWeight: FontWeight.w600,
                    textColor: Colors.black,
                    backgroundColor: Color(primaryColor),
                    text: "Create",
                    onPressed: () async {
                      await socialConnectionController.createTribe().then((
                        value,
                      ) {
                        if (value) {
                          Get.back();
                          Get.back();
                          Get.toNamed(RouteConstant.viewTribeScreen);
                          customSnackbar(
                            title: "Success",
                            message: "Tribe created successfully",
                            duration: 1,
                          );
                        }
                        {}
                      });
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}