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) {
    return Scaffold(
      backgroundColor: Colors.white,
      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: SafeArea(
        child: Obx(() {
          // Use the allSelectedUsers from controller instead of filtering from current page
          final selectedUsers = socialConnectionController.allSelectedUsers;

          return Column(
            children: [
              Expanded(
                child: ListView(
                  padding: EdgeInsets.fromLTRB(16.w, 16.h, 16.w, 24.h),
                  children: [
                    _buildProfileSection(),
                    SizedBox(height: 20.h),
                    _buildLabeledField(
                      label: 'Description',
                      child: TextField(
                        controller:
                            socialConnectionController
                                .tribeDescriptionController,
                        maxLength: 255,
                        maxLines: 3,
                        style: TextStyle(fontSize: regularSizeText),
                        decoration: _fieldDecoration(
                          hint: 'What is this tribe about?',
                        ),
                      ),
                    ),
                    SizedBox(height: 24.h),
                    _buildMembersHeader(selectedUsers.length),
                    SizedBox(height: 12.h),
                    _buildMembersList(selectedUsers),
                  ],
                ),
              ),
              _buildBottomBar(),
            ],
          );
        }),
      ),
    );
  }

  Widget _buildProfileSection() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        InkWell(
          onTap: () => socialConnectionController.pickTribeImage(),
          borderRadius: BorderRadius.circular(100),
          child: Obx(() {
            final image = socialConnectionController.selectedTribeImage.value;
            return Stack(
              clipBehavior: Clip.none,
              children: [
                CircleAvatar(
                  radius: isTablet ? 32.sp : 36.sp,
                  backgroundColor: lightGreyColor,
                  backgroundImage: image != null ? FileImage(image) : null,
                  child:
                      image == null
                          ? Icon(Icons.person, size: 34.sp, color: Colors.white)
                          : null,
                ),
                Positioned(
                  right: -2,
                  bottom: -2,
                  child: Container(
                    padding: EdgeInsets.all(5),
                    decoration: BoxDecoration(
                      color: Color(primaryColor),
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.white, width: 2),
                    ),
                    child: Icon(
                      Icons.camera_alt,
                      size: 14.sp,
                      color: Colors.black,
                    ),
                  ),
                ),
              ],
            );
          }),
        ),
        SizedBox(width: 16.w),
        Expanded(
          child: TextField(
            controller: socialConnectionController.tribeNameController,
            maxLength: 50,
            maxLines: 1,
            style: TextStyle(
              fontSize: regularSizeText,
              fontWeight: FontWeight.w600,
            ),
            decoration: _fieldDecoration(
              hint: 'Enter a tribe name',
              pill: true,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildLabeledField({required String label, required Widget child}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.only(left: 4, bottom: 8),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 13.sp,
              fontWeight: FontWeight.w600,
              color: greyTextColor1,
              letterSpacing: 0.2,
            ),
          ),
        ),
        child,
      ],
    );
  }

  InputDecoration _fieldDecoration({required String hint, bool pill = false}) {
    return InputDecoration(
      contentPadding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 14.h),
      hintText: hint,
      hintStyle: TextStyle(
        color: greyTextColor1,
        fontWeight: FontWeight.w500,
        fontSize: regularSizeText,
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(pill ? 30 : 16.r),
        borderSide: BorderSide.none,
      ),
      filled: true,
      fillColor: textFieldFillColor,
    );
  }

  Widget _buildMembersHeader(int count) {
    return Row(
      children: [
        Icon(Icons.groups_rounded, size: 18.sp, color: greyTextColor1),
        SizedBox(width: 6.w),
        Text(
          'Members',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.sp),
        ),
        SizedBox(width: 6.w),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 2.h),
          decoration: BoxDecoration(
            color: textFieldFillColor,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text(
            '$count',
            style: TextStyle(
              fontSize: 12.sp,
              fontWeight: FontWeight.w600,
              color: greyTextColor1,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildMembersList(List selectedUsers) {
    if (selectedUsers.isEmpty) {
      return Container(
        height: 90.h,
        width: double.infinity,
        decoration: BoxDecoration(
          color: textFieldFillColor,
          borderRadius: BorderRadius.circular(16.r),
        ),
        alignment: Alignment.center,
        child: Text(
          'No members added yet',
          style: TextStyle(fontSize: 13.sp, color: greyTextColor1),
        ),
      );
    }

    return SizedBox(
      height: 90.h,
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        itemCount: selectedUsers.length,
        separatorBuilder: (context, index) => SizedBox(width: 14.w),
        itemBuilder: (context, index) {
          final user = selectedUsers[index];
          final hasImage =
              user.userProfileImage != null &&
              user.userProfileImage!.isNotEmpty;

          return SizedBox(
            width: 64.w,
            child: Column(
              children: [
                CircleAvatar(
                  backgroundColor: lightGreyColor,
                  radius: isTablet ? 30.r : 26.r,
                  backgroundImage:
                      hasImage
                          ? NetworkImage(user.userProfileImage!)
                          : AssetImage(AssetConstants.dummyUserImage),
                ),
                SizedBox(height: 6.h),
                Text(
                  '${user.firstName}',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 12.sp),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildBottomBar() {
    return Container(
      padding: EdgeInsets.fromLTRB(16.w, 14.h, 16.w, 20.h),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(top: BorderSide(color: textFieldFillColor, width: 1)),
      ),
      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,
                );
              }
            });
          },
        ),
      ),
    );
  }
}