import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:get/get.dart';
import 'package:keyboard/data/bean/keyboard_info.dart';
import 'package:keyboard/resource/string.gen.dart';
import 'package:keyboard/utils/age_zodiac_sign_util.dart';
import 'package:lottie/lottie.dart';
import '../../../data/bean/character_info.dart';
import '../../../resource/assets.gen.dart';
import '../../../router/app_pages.dart';
import '../../../widget/auto_scroll_list_view.dart';
import '../../../widget/avatar/avatar_image_widget.dart';
import 'new_user_result_controller.dart';

class NewUserResultPage extends BasePage<NewUserResultController> {
  const NewUserResultPage({super.key});

  static start({required KeyboardInfo newUserKeyboardInfo}) {
    Get.toNamed(
      RoutePath.newUserResult,
      arguments: {"newUserKeyboardInfo": newUserKeyboardInfo},
    );
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        Assets.images.bgNewUserResult.image(
          width: double.infinity,
          fit: BoxFit.fill,
        ),
        SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.only(left: 16.w, top: 12.w),
                child: GestureDetector(
                  onTap: () {
                    controller.clickBack();
                  },
                  child: Assets.images.iconCharacterCustomClose.image(
                    width: 24.w,
                    height: 24.w,
                  ),
                ),
              ),
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(height: 30.w),
                      Center(
                        child: Assets.images.iconNewUserResultTitle.image(
                          width: 246.w,
                          height: 41.2.w,
                          fit: BoxFit.contain,
                        ),
                      ),
                      SizedBox(height: 20.w),
                      _buildAvatarCard(),
                      SizedBox(height: 12.w),
                      _buildZodiacDesc(),
                      SizedBox(height: 20.w),
                      buildCharacterList(),
                      SizedBox(height: 70.w),
                      buildOpenNowButton(),

                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildZodiacDesc() {
    return Obx(() {
      if (controller.keyboardMemeExplain.value.meme == null ||
          controller.keyboardMemeExplain.value.explain == null) {
        return SizedBox(width: 278.w);
      }
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            alignment: Alignment.center,
            children: [
              Container(
                alignment: Alignment.center,
                padding: EdgeInsets.only(
                  left: 19.w,
                  right: 19.w,
                  top: 7.w,
                  bottom: 7.w,
                ),
                decoration: ShapeDecoration(
                  color: const Color(0x28B70080),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                ),
                child: SizedBox(
                  width: 278.w,
                  child: Text(
                    "${controller.keyboardMemeExplain.value.meme ?? ""}\n${controller.keyboardMemeExplain.value.explain ?? ""}",
                    style: TextStyle(
                      color: Colors.white.withAlpha(229),
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
              Positioned(
                top: 0.w,
                left: 8.w,
                child: Assets.images.iconNewUserZodiacLeft.image(
                  width: 16.w,
                  height: 16.w,
                  fit: BoxFit.contain,
                ),
              ),
              Positioned(
                right: 8.w,
                bottom: 0.w,
                child: Assets.images.iconNewUserZodiacRight.image(
                  width: 16.w,
                  height: 16.w,
                  fit: BoxFit.contain,
                ),
              ),
            ],
          ),
        ],
      );
    });
  }

  Widget _buildAvatarCard() {
    return Stack(
      alignment: Alignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              children: [
                SizedBox(height: 20.w),
                CircleAvatarWidget(
                  image: Assets.images.iconKeyboardDefaultAvatar.provider(),
                  imageUrl: controller.userInfo?.imageUrl,
                  size: 88.w,
                  borderColor: Colors.white,
                  borderWidth: 2.r,
                  placeholder: (_, __) => const SizedBox.shrink(),
                ),
                SizedBox(height: 14.w),
                Obx(() {
                  final zodiac = controller.zodiacLabelFromUserInfo;
                  if (zodiac != null) {
                    return Row(
                      children: [
                        zodiac.image.image(width: 14.w, height: 14.w),
                        SizedBox(width: 4.w),
                        Text(
                          zodiac.name,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 14.97.sp,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    );
                  } else {
                    return const SizedBox.shrink();
                  }
                }),
              ],
            ),
            Lottie.asset(
              Assets.anim.animNewUserData,
              repeat: true,
              width: 131.w,
              fit: BoxFit.contain,
            ),
            Column(
              children: [
                SizedBox(height: 20.w),
                CircleAvatarWidget(
                  image: Assets.images.iconKeyboardDefaultAvatar.provider(),
                  imageUrl: controller.newUserKeyboardInfo.imageUrl,
                  size: 88.w,
                  borderColor: Colors.white,
                  borderWidth: 2.r,
                  placeholder: (_, __) => const SizedBox.shrink(),
                ),
                SizedBox(height: 14.w),
                Obx(() {
                  final zodiac = controller.zodiacLabelFromNewUserKeyboardInfo;
                  if (zodiac != null) {
                    return Row(
                      children: [
                        zodiac.image.image(width: 14.w, height: 14.w),
                        SizedBox(width: 4.w),
                        Text(
                          zodiac.name,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 14.97.sp,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    );
                  } else {
                    return const SizedBox.shrink();
                  }
                }),
              ],
            ),
          ],
        ),
      ],
    );
  }

  Widget buildCharacterList() {
    return Obx(() {
      if (controller.charactersList.isEmpty) {
        return const SizedBox.shrink();
      }
      return Container(
        padding: EdgeInsets.only(top: 20.w),
        decoration: ShapeDecoration(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(28.r),
          ),
        ),
        margin: EdgeInsets.only(left: 21.w, right: 21.w),

        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Assets.images.iconNewUserResultLoveLeft.image(
                  width: 12.w,
                  height: 12.w,
                  fit: BoxFit.contain,
                ),
                Text(
                  '${StringName.newUserResultIntimacyTitle} ${controller.newUserKeyboardInfo.intimacy ?? "0"}%',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black.withAlpha(204),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                Assets.images.iconNewUserResultLoveRight.image(
                  width: 12.w,
                  height: 12.w,
                  fit: BoxFit.contain,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  StringName.newUserResultIntimacyDesc,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black.withAlpha(128),
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
            SizedBox(height: 26.w),
            SizedBox(
              height: 100.w,
              child: AutoScrollListView(
                itemCount: (controller.charactersList.length / 2).ceil(),
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, columnIndex) {
                  int rowCount = 2;
                  int startIndex = columnIndex * rowCount;
                  final List<CharacterInfo> columnItems =
                      controller.charactersList
                          .skip(startIndex)
                          .take(rowCount)
                          .toList();
                  return Column(
                    children:
                        columnItems.map((item) {
                          final emoji = item.emoji ?? "";
                          final name = item.name ?? "";
                          return Padding(
                            padding: EdgeInsets.symmetric(
                              vertical: 4.w,
                              horizontal: 4.w,
                            ),
                            child: Obx(() {
                              final isSelected = controller.selectCharactersList
                                  .any(
                                    (selected) => selected.name == item.name,
                                  );
                              return SizedBox(
                                height: 36.w,
                                child: ChoiceChip(
                                  label: Text(
                                    "$emoji$name",
                                    style: TextStyle(
                                      color:
                                          isSelected
                                              ? Colors.white
                                              : Colors.black.withAlpha(204),
                                      fontSize: 13.sp,
                                      fontWeight: FontWeight.w400,
                                    ),
                                  ),
                                  showCheckmark: false,
                                  selected: isSelected,
                                  selectedColor: const Color(0xFFB782FF),
                                  backgroundColor: Color(0xFFF6F5FA),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(31.r),
                                  ),
                                  side: BorderSide(
                                    width: 0.w,
                                    color: Colors.transparent
                                  ),
                                  onSelected: (selected) {
                                    if (selected != isSelected) {
                                      controller.onSelected(item);
                                    }
                                  },
                                ),
                              );
                            }),
                          );
                        }).toList(),
                  );
                },
              ),
            ),
            SizedBox(height: 26.w),
          ],
        ),
      );
    });
  }

  Widget buildOpenNowButton() {
    return Column(
      children: [
        Assets.images.iconNewUserResultOpenDesc.image(
          width: 126.w,
          height: 18.w,
          fit: BoxFit.contain,
        ),
        SizedBox(height: 18.w),
        GestureDetector(
          onTap: () {
            controller.clickOpenNow();
          },
          child: Assets.images.iconNewUserOpenNow.image(
            width: 256.w,
            height: 79.w,
            fit: BoxFit.contain,
          ),
        ),
      ],
    );
  }
}