import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:flutter/material.dart';
import '../../../data/bean/custom_config_info.dart';
import '../../../resource/assets.gen.dart';
import '../../../resource/string.gen.dart';
import '../../../router/app_pages.dart';
import '../../../utils/styles.dart';
import 'character_custom_detail_controller.dart';
import 'package:get/get.dart';

class CharacterCustomDetailPage
    extends BasePage<CharacterCustomDetailController> {
  const CharacterCustomDetailPage({super.key});

  static void start({
    List<Hobbies>? hobbiesSelectLabels,
    List<CharactersList>? characterSelectLabels,
    String? characterCustomName,
  }) {
    Get.toNamed(
      RoutePath.characterCustomDetail,
      arguments: {
        'hobbiesSelectLabels': hobbiesSelectLabels,
        'characterSelectLabels': characterSelectLabels,
        'characterCustomName': characterCustomName,
      },
    );
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        Container(
          child: Assets.images.bgCharacterCustomDetail.image(
            width: double.infinity,
            fit: BoxFit.fill,
          ),
        ),
        SafeArea(
          child: Container(
            color: Colors.transparent,
            alignment: Alignment.topCenter,
            child: Stack(
              children: [
                Column(
                  children: [
                    _buildTitle(),
                    SizedBox(height: 42.h),
                    Expanded(
                      child: Container(
                        decoration: ShapeDecoration(
                          color: Color(0xFFF6F5FA),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.r),
                              topRight: Radius.circular(20.r),
                            ),
                          ),
                        ),
                        child: SingleChildScrollView(
                          child: Column(
                            children: [
                              _buildNameCard(),
                              SizedBox(height: 34.h),
                              _buildGenderCard(),
                              SizedBox(height: 10.h),
                              _buildBirthdayCard(),
                              SizedBox(height: 10.h),
                              _hobbiesCard(),
                              SizedBox(height: 18.h),
                              _characterCard(),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      color: Color(0xFFF6F5FA),
                      child: _buildUnlockButton(),
                    ),
                  ],
                ),
                Positioned(left: 16.w, top: 60.h, child: _buildAvatar()),
                Positioned(left: 68.w, top: 112.h, child: _buildAvatarSwitch()),
              ],
            ),
          ),
        ),
      ],
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w),
      child: GestureDetector(
        onTap: controller.clickBack,
        child: Assets.images.iconMineBackArrow.image(width: 24.w, height: 24.w),
      ),
    );
  }

  _buildNameCard() {
    return Container(
      padding: EdgeInsets.only(left: 104.w, top: 14.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(
            controller.characterCustomName,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.black.withAlpha(204),
              fontSize: 18.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
          Container(
            child: Assets.images.iconCharacterCustomDetailEdit.image(
              width: 20.r,
              height: 20.r,
            ),
          ),
        ],
      ),
    );
  }

  _buildAvatar() {
    return GestureDetector(
        onTap: controller.nextAvatar,
        child: Container(
      width: 72.r,
      height: 72.r,
      decoration: ShapeDecoration(
        shape: OvalBorder(side: BorderSide(width: 2, color: Colors.white)),
      ),
      child:CachedNetworkImage(imageUrl: controller.avatarUrl,width: 72.r,height: 72.r,),
    ));
  }

  _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 _buildGenderCard() {
    return _buildListItem(
      onTap: () {
        debugPrint('点击了性别');
      },
      firstWidget: Text('性别', style: Styles.getTextStyleBlack204W400(14.sp)),
      bottomWidget: Row(
        children: [
          Assets.images.iconCharacterCustomDetailMale.image(
            width: 24.w,
            height: 24.w,
          ),
          SizedBox(width: 6.w),
          Text('男', style: Styles.getTextStyleBlack204W400(14.sp)),
          Spacer(),
          Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
        ],
      ),
    );
  }

  Widget _buildBirthdayCard() {
    return _buildListItem(
      onTap: () {
        debugPrint('点击了生日');
      },
      firstWidget: Text('出生日期', style: Styles.getTextStyleBlack204W400(14.sp)),
      bottomWidget: Row(
        children: [
          Text('1998-12-16', style: Styles.getTextStyleBlack204W400(14.sp)),
          SizedBox(width: 12.w),
          Text('22岁', style: Styles.getTextStyleBlack204W400(14.sp)),
          Spacer(),
          Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
        ],
      ),
    );
  }

  Widget _hobbiesCard() {

    return _buildTagCard(
      title: '兴趣爱好',
      labels: controller.hobbiesSelectLabels,
      isShowEmoji: true,
      onTap:  () {
        debugPrint('点击了兴趣爱好');
      },
    );
  }

  Widget _characterCard() {

    return _buildTagCard(
      title: '性格',
      labels: controller.characterSelectLabels,
      isShowEmoji: false,
      onTap:  () {
        debugPrint('点击了性格');
      },
    );
  }

  Widget _buildUnlockButton() {
    return GestureDetector(
      onTap: () {
        controller.clickUnlockButton();
      },
      child: Container(
        width: double.infinity,
        margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 16.h),
        height: 48.h,
        alignment: Alignment.center,
        decoration: ShapeDecoration(
          color: const Color(0xFF7D46FC),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.r),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Assets.images.iconCharacterCustomDetailLock.image(
              width: 22.w,
              height: 22.w,
            ),
            Text(
              StringName.unlockExclusiveCharacter,
              textAlign: TextAlign.center,
              style: Styles.getTextStyleWhiteW500(16.sp),
            ),
          ],
        ),
      ),
    );
  }

  // 列表项
  Widget _buildListItem({
    required Widget firstWidget,
    required Widget bottomWidget,
    VoidCallback? onTap,
  }) {
    return Container(
      padding: EdgeInsets.only(
        left: 12.w,
        right: 12.w,
        top: 14.h,
        bottom: 14.h,
      ),
      margin: EdgeInsets.only(left: 16.w, right: 16.w),
      width: double.infinity,
      decoration: ShapeDecoration(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.r),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          firstWidget,
          _buildDivider(),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: onTap,
            child: bottomWidget,
          ),
        ],
      ),
    );
  }

  // 下划线
  Widget _buildDivider() {
    return Container(
      margin: EdgeInsets.only(top: 8.h, bottom: 8.h),
      width: 304.w,
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            width: 1.r,
            strokeAlign: BorderSide.strokeAlignCenter,
            color: const Color(0xFFF5F4F9),
          ),
        ),
      ),
    );
  }


  Widget _buildTagCard({
    required String title,
    required List<dynamic> labels,
    required bool isShowEmoji,
     VoidCallback? onTap,
  }) {
    return _buildListItem(
      onTap: onTap,
      firstWidget: Text(title, style: Styles.getTextStyleBlack204W400(14.sp)),
      bottomWidget: Row(
        children: [
          Expanded(
            child: Wrap(
              spacing: 8.w,
              runSpacing: 8.h,
              children: labels.asMap().entries.map((entry) {
                int index = entry.key;
                var label = entry.value;

                // 根据索引设置不同的颜色
                Color color;
                switch (index) {
                  case 0:
                    color = Color(0xFFFEECE0);
                    break;
                  case 1:
                    color = Color(0xFFE8E4FC);
                    break;
                  case 2:
                    color = Color(0xFFE8F8E0);
                    break;
                  default:
                    color = Color(0xFFFEECE0);
                }
                return _buildColorTag(
                  color: color,
                  name: label.name,
                  emoji: label.emoji,
                  isShowEmoji: isShowEmoji,
                );
              }).toList(),
            ),
          ),
          SizedBox(width: 8.w),
          Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
        ],
      ),
    );
  }

  Widget _buildColorTag({
    required Color color,
    String? name,
    String? emoji,
    bool isShowEmoji = true,
  }) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 3.h),
      decoration: ShapeDecoration(
        color: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(23.r),
        ),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          if (emoji != null&&isShowEmoji)
            Text(emoji, style: Styles.getTextStyleBlack204W400(14.sp)),
          if (emoji != null && name != null) SizedBox(width: 4.w),
          if (name != null)
            Text(name, style: Styles.getTextStyleBlack204W400(14.sp)),
        ],
      ),
    );
  }
}