import 'package:flutter/cupertino.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:keyboard/module/new_user/new_user_controller.dart';
import 'package:flutter/material.dart';
import 'package:keyboard/resource/string.gen.dart';
import 'package:get/get.dart';

import '../../../../resource/assets.gen.dart';
import '../../../../resource/colors.gen.dart';
import '../../../../utils/age_zodiac_sign_util.dart';
import '../../../../utils/styles.dart';
import '../../../../widget/avatar/avatar_image_widget.dart';

class StepPartnerView extends BaseView<NewUserController> {
  const StepPartnerView({super.key});

  @override
  Color backgroundColor() {
    return Colors.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildStepTitle(),
          SizedBox(height: 24.w),
          Center(child: _buildAvatar()),
          SizedBox(height: 12.w),
          Expanded(child: SingleChildScrollView(child: _buildContent())),
        ],
      ),
    );
  }

  Widget _buildStepTitle() {
    return Container(
      margin: EdgeInsets.only(left: 30.w, right: 30.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            StringName.newUserPartnerTitle,
            style: TextStyle(
              color: Colors.black.withAlpha(204),
              fontSize: 22.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
          SizedBox(height: 7.h),
          Text(
            StringName.newUserPartnerDesc,
            style: TextStyle(
              color: Colors.black.withAlpha(153),
              fontSize: 14.sp,
              fontWeight: FontWeight.w400,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAvatar() {
    return GestureDetector(
      onTap: controller.nextAvatar,
      child: Obx(() {
        return Container(
          height: 90.w,
          child: Stack(
            children: [
              Container(
                width: 84.w,
                height: 84.w,
                child:
                    controller.partnerAvatarUrl.isNotEmpty
                        ? CircleAvatarWidget(
                          image:
                              Assets.images.iconKeyboardDefaultAvatar
                                  .provider(),
                          imageUrl: controller.partnerAvatarUrl,
                          size: 84.w,
                          borderColor: Colors.white,
                          borderWidth: 2.r,
                          placeholder: (_, __) {
                            return const CupertinoActivityIndicator();
                          },
                        )
                        : SizedBox(),
              ),
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: _buildAvatarSwitch(),
              ),
            ],
          ),
        );
      }),
    );
  }

  Widget _buildAvatarSwitch() {
    return GestureDetector(
      onTap: controller.nextAvatar,
      child: SizedBox(
        width: 22.r,
        height: 22.r,
        child: Assets.images.iconCharacterCustomDetailSwitch.image(
          width: 22.r,
          height: 22.r,
        ),
      ),
    );
  }

  Widget _buildContent() {
    return Container(
      margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 200.w),
      padding: EdgeInsets.only(top: 21.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(18),
        color: Colors.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 20.w),
            child: Text(
              StringName.newUserPartnerIs,
              style: Styles.getTextStyleBlack204W500(14.sp),
            ),
          ),
          SizedBox(height: 12.w),
          buildPartnerNameFiled(),
          SizedBox(height: 30.w),
          Padding(
            padding: EdgeInsets.only(left: 20.w),
            child: Text(
              StringName.gender,
              style: Styles.getTextStyleBlack204W500(14.sp),
            ),
          ),
          SizedBox(height: 9.w),
          Obx(
            () => Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  // 女生按钮
                  Expanded(
                    child: buildGenderSwitchButton(
                      isSelected: controller.partnerGender == 2,
                      text: StringName.newUserPartnerIsFemale,
                      genderIcon: Assets.images.iconFamateBlack,
                      onTap: () => controller.onPartnerGenderChanged(2),
                    ),
                  ),
                  SizedBox(width: 16.w),
                  // 男生按钮
                  Expanded(
                    child: buildGenderSwitchButton(
                      genderIcon: Assets.images.iconMaleWhite,
                      isSelected: controller.partnerGender == 1,
                      text: StringName.newUserPartnerIsMale,
                      onTap: () => controller.onPartnerGenderChanged(1),
                    ),
                  ),
                ],
              ),
            ),
          ),

          SizedBox(height: 30.w),
          Padding(
            padding: EdgeInsets.only(left: 20.w),
            child: Text(
              StringName.newUserBirthdayTitle,
              style: Styles.getTextStyleBlack204W500(14.sp),
            ),
          ),
          SizedBox(height: 12.w),

          _buildPartnerBirthday(),
          SizedBox(height: 32.w),
        ],
      ),
    );
  }

  Widget buildPartnerNameFiled() {
    return Container(
      height: 42.w,
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      decoration: BoxDecoration(
        color: Color(0XFFF6F5FA),
        borderRadius: BorderRadius.circular(28.w),
      ),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              cursorHeight: 20.w,
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.black.withAlpha(204),
                fontWeight: FontWeight.w500,
              ),
              controller: controller.partnerNameController,
              maxLines: 1,
              textAlignVertical: TextAlignVertical.center,
              decoration: InputDecoration(
                isDense: true,
                hintText: StringName.newUserNicknameTitle,
                counterText: "",
                hintStyle: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black.withAlpha(77),
                  fontWeight: FontWeight.w500,
                ),
                labelStyle: TextStyle(
                  fontSize: 14.sp,
                  color: ColorName.primaryTextColor,
                ),
                contentPadding: const EdgeInsets.all(0),
                border: const OutlineInputBorder(borderSide: BorderSide.none),
                enabled: true,
              ),
              onChanged: controller.onNicknameChange,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildSwitchPartnerGender() {
    return Container(
      width: 296,
      height: 42,
      decoration: ShapeDecoration(
        color: const Color(0xFFF5F4F9),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
      ),
    );
  }

  Widget buildGenderSwitchButton({
    required String text,
    required bool isSelected,
    required VoidCallback onTap,
    required AssetGenImage genderIcon,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 42.w,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(28.r),
          color: isSelected ? null : const Color(0xFFF5F4F9),
          gradient:
              isSelected
                  ? LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    transform: GradientRotation(0.5),
                    colors: [const Color(0xFF7D46FC), const Color(0xFFBC87FF)],
                  )
                  : null,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            genderIcon.image(width: 24.w,height: 24.w,color: isSelected ? Colors.white : Colors.black),
            Text(
              text,
              style:
                  isSelected
                      ? Styles.getTextStyleWhiteW500(14.sp)
                      : Styles.getTextStyleBlack204W500(14.sp),
            ),
          ],
        ),
      ),
    );
  }

  _buildPartnerBirthday() {
    return GestureDetector(
      onTap: controller.changePartnerBirthday,
      child: Obx(() {
        return Container(
          height: 42.w,
          margin: EdgeInsets.symmetric(horizontal: 16.w),
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          decoration: BoxDecoration(
            color: Color(0XFFF6F5FA),
            borderRadius: BorderRadius.circular(28.w),
          ),
          child: Row(
            children: [
              controller.currentPartnerBirthday == null
                  ? Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          StringName.newUserPartnerBirthday,
                          style: TextStyle(
                            color: Colors.black.withAlpha(77),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Assets.images.iconArrowRight.image(
                          width: 24.w,
                          height: 24.w,
                          fit: BoxFit.contain,
                        ),
                      ],
                    ),
                  )
                  : Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        _buildBirthdayNotEmptyText(),
                        Assets.images.iconArrowRight.image(
                          width: 24.w,
                          height: 24.w,
                          fit: BoxFit.contain,
                        ),
                      ],
                    ),
                  ),
            ],
          ),
        );
      }),
    );
  }

  _buildBirthdayNotEmptyText() {
    return Row(
      children: [
        Text(
          controller.dateComponents.yearPart,
          style: Styles.getTextStyleBlack204W500(14.sp),
        ),
        SizedBox(width: 4.w),
        Text(
          StringName.year,
          style: TextStyle(
            color: Colors.black.withAlpha(102),
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(width: 4.w),
        Text(
          controller.dateComponents.monthPart,
          style: Styles.getTextStyleBlack204W500(14.sp),
        ),
        SizedBox(width: 4.w),
        Text(
          StringName.month,
          style: TextStyle(
            color: Colors.black.withAlpha(102),
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(width: 4.w),
        Text(
          controller.dateComponents.dayPart,
          style: Styles.getTextStyleBlack204W500(14.sp),
        ),
        Text(
          StringName.day,
          style: TextStyle(
            color: Colors.black.withAlpha(102),
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(width: 16.w),
        Text(
          AgeZodiacSignUtil.getZodiacSign(
            controller.currentPartnerBirthday!,
          ).name,
          style: Styles.getTextStyleBlack204W500(14.sp),
        ),
      ],
    );
  }
}