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/routes/route_constant.dart';
import 'package:onufitness/screens/echoboard/controllers/poll_controller.dart';
import 'package:onufitness/screens/echoboard/controllers/echoboard_controller.dart';
import 'package:onufitness/widgets/appbars/custom_appbar.dart';
import 'package:onufitness/widgets/Buttons/custom_submit_button.dart';

class PollCreationView extends StatelessWidget {
  int tribeID;
  PollCreationView({super.key, this.tribeID = 0});

  @override
  Widget build(BuildContext context) {
    final controller = Get.find<PollController>();
    final echoBoardController = Get.find<EchoBoardController>();

    return Scaffold(
      appBar: CustomAppBar(
        title: tribeID != 0 ? "Create Tribe Poll" : "Create Poll",
        leading: IconButton(
          onPressed: () {
            Get.back();
          },
          icon: Icon(Icons.arrow_back_ios),
        ),
        textColor: appbarTextColor,
        titleFontSize: appBarHeardingText,
        backgroundColor: Colors.white,
      ),
      body: Obx(() {
        return SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 15.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Question input
              questionSection(controller),
              SizedBox(height: 15.h),

              // Poll options
              optionsSection(controller),
              SizedBox(height: 15.h),

              // Visibility selector
              tribeID == 0 ? visibilitySection(controller) : SizedBox.shrink(),
              SizedBox(height: 20.h),

              // Create Poll Button
              CustomSubmitButton(
                backgroundColor: Color(primaryColor),
                textColor: Colors.black,
                isLoading: controller.isLoading.value,
                fontWeight: FontWeight.bold,
                fontSize: mediumSizeText,
                text: "Create and Post",
                onPressed: () async {
                  await controller
                      .createPoll(tribeIdForTribeEchoboard: tribeID)
                      .then((value) async {
                        if (value) {
                          //................
                          if (tribeID != 0) {
                            // For tribe echoboard
                            echoBoardController.fetchPosts(
                              tribeId: tribeID,
                              refresh: true,
                            );
                            await Future.delayed(const Duration(seconds: 1));
                            Get.back();
                            Get.back();
                          }
                          if (tribeID == 0) {
                            echoBoardController.refreshPosts();
                            await Future.delayed(const Duration(seconds: 1));
                            Get.back();
                            Get.back();
                          }
                        }
                      });
                },
              ),
              SizedBox(height: 10.h),

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

  Widget questionSection(PollController controller) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Ask a question',
          style: TextStyle(
            fontSize: mediumSizeText,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 8.h),
        TextFormField(
          controller: controller.questionController,
          style: TextStyle(fontSize: regularSizeText),
          maxLines: 3,
          minLines: 1,
          decoration: InputDecoration(
            hintText: 'Ask something...',
            hintStyle: TextStyle(fontSize: regularSizeText, color: Colors.grey),
            filled: true,
            fillColor: Colors.grey.shade100,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            contentPadding: EdgeInsets.all(16.r),
          ),
        ),
      ],
    );
  }

  Widget optionsSection(PollController controller) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'Poll Options',
              style: TextStyle(
                fontSize: mediumSizeText,
                fontWeight: FontWeight.bold,
              ),
            ),
            Obx(
              () =>
                  controller.optionControllers.length < 5
                      ? TextButton.icon(
                        onPressed: controller.addOptionField,
                        icon: Icon(Icons.add_circle_outline, size: 18.r),
                        label: Text(
                          'Add Option',
                          style: TextStyle(fontSize: smallSizeText),
                        ),
                      )
                      : const SizedBox.shrink(),
            ),
          ],
        ),
        SizedBox(height: 12.h),
        // Option fields
        Obx(
          () => ListView.separated(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: controller.optionControllers.length,
            separatorBuilder: (context, index) => SizedBox(height: 12.h),
            itemBuilder: (context, index) {
              return PollOptionField(
                controller: controller.optionControllers[index],
                index: index,
                canRemove: controller.optionControllers.length > 2,
                onRemove: () => controller.removeOptionField(index),
              );
            },
          ),
        ),
      ],
    );
  }

  Widget visibilitySection(PollController controller) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Who can see your poll?',
          style: TextStyle(
            fontSize: mediumSizeText,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 12.h),

        Container(
          decoration: BoxDecoration(color: Colors.white),
          child: Column(
            children:
                controller.visibilityOptions.map((option) {
                  final bool isSelected =
                      controller.postVisibilityID.value == option['id'];
                  return InkWell(
                    onTap: () {
                      controller.setVisibility(option['id']);

                      if (controller.postVisibilityID.value == 3) {
                        Get.toNamed(
                          RouteConstant.exclusiveConnectionSelectionScreen,
                        );
                      }
                    },
                    child: Container(
                      color:
                          isSelected
                              ? Colors.grey.shade200
                              : Colors.transparent,
                      padding: const EdgeInsets.symmetric(vertical: 12.0),
                      child: Row(
                        children: [
                          const SizedBox(width: 16),
                          CircleAvatar(
                            backgroundColor: textFieldFillColor,
                            radius: 28,
                            child: Icon(
                              option['icon'],
                              color: Colors.black,
                              size: 24,
                            ),
                          ),
                          const SizedBox(width: 16),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  option['name'],
                                  style: const TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.black,
                                  ),
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  option['description'],
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: greyTextColor1,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(right: 16),
                            child:
                                option['id'] == 3
                                    ? const Icon(
                                      Icons.chevron_right,
                                      color: greyTextColor1,
                                    )
                                    : Icon(
                                      isSelected
                                          ? Icons.radio_button_checked
                                          : Icons.radio_button_unchecked,
                                      color: Colors.grey.shade700,
                                    ),
                          ),
                        ],
                      ),
                    ),
                  );
                }).toList(),
          ),
        ),
      ],
    );
  }
}

class PollOptionField extends StatelessWidget {
  final TextEditingController controller;
  final int index;
  final bool canRemove;
  final VoidCallback onRemove;

  const PollOptionField({
    super.key,
    required this.controller,
    required this.index,
    required this.canRemove,
    required this.onRemove,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 36.r,
          height: 36.r,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: _getOptionColor(index),
            shape: BoxShape.circle,
          ),
          child: Text(
            String.fromCharCode(65 + index), // A, B, C, etc.
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: mediumSizeText,
            ),
          ),
        ),
        SizedBox(width: 12.w),
        Expanded(
          child: TextFormField(
            controller: controller,
            style: TextStyle(fontSize: regularSizeText),
            decoration: InputDecoration(
              hintText: 'Option ${index + 1}',
              hintStyle: TextStyle(
                fontSize: regularSizeText,
                color: Colors.grey,
              ),
              filled: true,
              fillColor: Colors.grey.shade100,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12.r),
                borderSide: BorderSide.none,
              ),
              contentPadding: EdgeInsets.symmetric(
                horizontal: 16.w,
                vertical: 12.h,
              ),
            ),
          ),
        ),
        if (canRemove) ...[
          SizedBox(width: 8.w),
          IconButton(
            onPressed: onRemove,
            icon: Icon(Icons.close, color: Colors.grey, size: 20.r),
            padding: EdgeInsets.zero,
            constraints: BoxConstraints(minWidth: 32.r, minHeight: 32.r),
          ),
        ],
      ],
    );
  }

  // Color _getOptionColor(int index) {
  //   final List<Color> colors = [
  //     Get.theme.primaryColor,
  //     Color.fromRGBO(186, 211, 0, 1),
  //     Color.fromRGBO(175, 182, 165, 1),
  //     Color.fromRGBO(152, 152, 152, 1),
  //     Color.fromRGBO(110, 108, 127, 1),
  //   ];
  //   return colors[index % colors.length];
  // }

  Color _getOptionColor(int index) {
    final List<Color> colors = [
      Get.theme.primaryColor,
      Colors.orange,
      Colors.green,
      Colors.purple,
      Colors.teal,
    ];
    return colors[index % colors.length];
  }
}