import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:onufitness/constants/color_constant.dart';
import 'package:onufitness/constants/text_constant.dart';
import 'package:onufitness/screens/echoboard/controllers/echoboard_controller.dart';
import 'package:onufitness/screens/echoboard/widget/exclusive_connection_tile.dart';
import 'package:onufitness/widgets/appbars/custom_appbar.dart';

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

  @override
  State<ExclusiveConnectionSelectionScreen> createState() =>
      _ExclusiveConnectionSelectionScreenState();
}

class _ExclusiveConnectionSelectionScreenState
    extends State<ExclusiveConnectionSelectionScreen> {
  final EchoBoardController controller = Get.find<EchoBoardController>();
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      controller.fetchExclusiveConnections(refresh: true);
    });
  }

  void _onScroll() {
    if (_scrollController.position.pixels >=
        _scrollController.position.maxScrollExtent - 300) {
      if (controller.hasMoreDataConnection.value &&
          !controller.isConnectionPaginationLoading.value) {
        controller.fetchExclusiveConnections();
      }
    }
  }

  Future<void> _onRefresh() async {
    // Call the fetch method with refresh parameter set to true
    await controller.fetchExclusiveConnections(refresh: true);
    // Return a completed future when the refresh is done
    return Future.value();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        title: 'Connections',
        textColor: appbarTextColor,
        titleFontSize: appBarHeardingText,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () {
            Get.back();
          },
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'Only people on your connections list can see this post.',
                  style: TextStyle(
                    fontSize: verySmallSizeText,
                    color: greyTextColor1,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 12),

                Padding(
                  padding: EdgeInsets.all(10.sp),
                  child: TextField(
                    controller: controller.connectionSearchController,
                    decoration: InputDecoration(
                      hintText: 'Search for members',
                      hintStyle: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: greyBorderColor,
                      ),
                      prefixIcon: const Padding(
                        padding: EdgeInsets.only(left: 20),
                        child: Icon(Icons.search),
                      ),
                      suffixIcon: IconButton(
                        icon: const Padding(
                          padding: EdgeInsets.only(right: 10),
                          child: Icon(Icons.close),
                        ),
                        onPressed: () => controller.clearSearch(),
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30),
                        borderSide: BorderSide.none,
                      ),
                      filled: true,
                      fillColor: textFieldFillColor,
                    ),
                    onChanged: (newValue) {
                      controller.connectionSearchValue.value = newValue;
                    },
                    onSubmitted: (_) {
                      controller.fetchExclusiveConnections(refresh: true);
                    },
                  ),
                ),

                const SizedBox(height: 12),
              ],
            ),
          ),
          Expanded(
            child: Obx(
              () =>
                  controller.isConnectionsFetchLoading.value &&
                          controller.exclusiveConnections.data?.items == null
                      ? const Center(
                        child: CircularProgressIndicator(color: Colors.black),
                      )
                      : controller.exclusiveConnections.data?.items == null ||
                          controller.exclusiveConnections.data!.items!.isEmpty
                      ? Center(
                        child: RefreshIndicator(
                          onRefresh: _onRefresh,
                          child: ListView(
                            physics: const AlwaysScrollableScrollPhysics(),
                            children: [
                              SizedBox(height: 150.h),
                              Center(child: Text('No connections found')),
                            ],
                          ),
                        ),
                      )
                      : RefreshIndicator(
                        backgroundColor: Colors.white,
                        color: Colors.black,
                        onRefresh: _onRefresh,
                        child: ListView.builder(
                          physics: const AlwaysScrollableScrollPhysics(),
                          controller: _scrollController,
                          padding: EdgeInsets.symmetric(horizontal: 16.w),
                          itemCount:
                              controller
                                  .exclusiveConnections
                                  .data!
                                  .items!
                                  .length +
                              (controller.isConnectionPaginationLoading.value
                                  ? 1
                                  : 0),
                          itemBuilder: (_, i) {
                            if (i ==
                                controller
                                    .exclusiveConnections
                                    .data!
                                    .items!
                                    .length) {
                              return const Padding(
                                padding: EdgeInsets.symmetric(vertical: 16.0),
                                child: Center(
                                  child: CircularProgressIndicator(
                                    backgroundColor: Colors.white,
                                    color: Colors.black,
                                  ),
                                ),
                              );
                            }

                            final connection =
                                controller.exclusiveConnections.data!.items![i];

                            final String itemId =
                                connection.tribeId != null
                                    ? 'tribe_${connection.tribeId}'
                                    : 'user_${connection.connectedUserId}';

                            return Obx(() {
                              final bool isSelected = controller.selectedIds
                                  .contains(itemId);

                              return ExclusiveConnectionTile(
                                name:
                                    connection.tribeId != null
                                        ? connection.tribeName ??
                                            'Unknown Tribe'
                                        : connection.fullName ?? 'Unknown User',
                                type:
                                    connection.tribeId != null
                                        ? 'group'
                                        : 'user',
                                members: connection.totalMemberCount,
                                imageUrl:
                                    connection.tribeId != null
                                        ? connection.tribeImage ??
                                            connection.adminProfilePicture!
                                        : connection.profilePicture ?? '',
                                isSelected: isSelected,
                                onTap: () {
                                  controller.exclusiveConnectionToggleSelection(
                                    tribeId: connection.tribeId,
                                    connectedUserId: connection.connectedUserId,
                                  );
                                },
                              );
                            });
                          },
                        ),
                      ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.w),
            child: SizedBox(
              width: double.infinity,
              height: 50.h,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFFDBF403),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.r),
                  ),
                ),
                onPressed: () {
                  // Return formatted selection
                  Get.back(result: controller.selectedConnections);
                },
                child: Text(
                  'Done',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: mediumSizeText,
                  ),
                ),
              ),
            ),
          ),

          SizedBox(height: 10.h),

          Container(
            color: Colors.white,
            padding: EdgeInsetsDirectional.only(
              bottom: MediaQuery.of(context).viewPadding.bottom,
            ),
          ),
        ],
      ),
    );
  }
}