AiKeyboard2025/lib/module/profile/edit/profile_edit_page.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/profile/edit/profile_edit_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:keyboard/utils/age_zodiac_sign_util.dart';

import '../../../data/bean/character_info.dart';
import '../../../data/bean/keyboard_info.dart';
import '../../../resource/assets.gen.dart';
import '../../../resource/string.gen.dart';
import '../../../router/app_pages.dart';
import '../../../utils/intimacy_util.dart';
import '../../../utils/styles.dart';
import '../../../widget/avatar/avatar_image_widget.dart';
import '../../../widget/gradient_rect_slider_track_shape.dart';

class ProfileEditPage extends BasePage<ProfileEditController> {
  const ProfileEditPage({super.key});

  static Future start({KeyboardInfo? keyboardInfo}) async {
    return Get.toNamed(
      RoutePath.profileEdit,
      arguments: {"keyboardInfo": keyboardInfo},
    );
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  backgroundColor() {
    return Color(0xFFF6F5FA);
  }

  @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: Column(
                          children: [
                            _buildNameCard(),
                            SizedBox(height: 20.h),
                            Expanded(
                              child: SingleChildScrollView(
                                child: Column(
                                  children: [
                                    _buildIntimacySlider(),
                                    SizedBox(height: 10.h),
                                    _buildGenderCard(),
                                    SizedBox(height: 10.h),
                                    _buildBirthdayCard(),
                                    SizedBox(height: 10.h),
                                    controller.isEditMode
                                        ? _buildRelationshipCard()
                                        : SizedBox(),
                                    SizedBox(height: 10.h),
                                    controller.isEditMode
                                        ? _buildCharacterList()
                                        : SizedBox(),
                                    SizedBox(height: 20.h),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),

                    Container(
                      color: Color(0xFFF6F5FA),
                      child: _buildSaveButton(),
                    ),
                  ],
                ),
                Positioned(left: 16.w, top: 60.h, child: _buildAvatar()),
                Positioned(left: 68.w, top: 112.h, child: _buildAvatarSwitch()),
              ],
            ),
          ),
        ),
      ],
    );
  }

  _buildTitle() {
    return Container(
      margin: EdgeInsets.only(top: 12.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: controller.clickBack,
            child: Padding(
              padding: EdgeInsets.only(left: 16.w, right: 16.w),
              child: Assets.images.iconMineBackArrow.image(
                width: 24.w,
                height: 24.w,
              ),
            ),
          ),
          // 删除
          Obx(() {
            // 编辑模式，才有删除按钮
            var isEditMode = controller.isEditMode;
            if (!isEditMode) {
              return SizedBox.shrink();
            }
            return GestureDetector(
              onTap: controller.clickDelete,
              child: Padding(
                padding: EdgeInsets.only(left: 16.w, right: 16.w),
                child: Assets.images.iconProfileDelete.image(
                  width: 24.w,
                  height: 24.w,
                ),
              ),
            );
          }),
        ],
      ),
    );
  }

  _buildNameCard() {
    return GestureDetector(
      onTap: () {
        controller.clickNickname();
      },
      child: Container(
        padding: EdgeInsets.only(left: 104.w, top: 14.h),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Obx(() {
              return Text(
                controller.currentNickname ?? "请输入昵称",
                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: Obx(() {
        return Container(
          width: 72.r,
          height: 72.r,
          child:
              controller.avatarUrl.isNotEmpty
                  ? CircleAvatarWidget(
                    image: Assets.images.iconKeyboardDefaultAvatar.provider(),
                    imageUrl: controller.avatarUrl,
                    size: 72.w,
                    borderColor: Colors.white,
                    borderWidth: 2.r,
                    placeholder: (_, __) {
                      return const CupertinoActivityIndicator();
                    },
                  )
                  : SizedBox(),
        );
      }),
    );
  }

  _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(
      onBottomTap: () {
        controller.clickGender();
      },
      firstWidget: Text('性别', style: Styles.getTextStyleBlack204W400(14.sp)),
      bottomWidget: Obx(() {
        return Row(
          children: [
            controller.genderImage != null
                ? controller.genderImage!.image(width: 24.w, height: 24.w)
                : const SizedBox(),
            SizedBox(width: 6.w),
            Text(
              controller.genderText,
              style: Styles.getTextStyleBlack204W400(14.sp),
            ),
            Spacer(),
            Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
          ],
        );
      }),
    );
  }

  Widget _buildBirthdayCard() {
    return _buildListItem(
      onBottomTap: () {
        controller.clickBirthday();
      },
      firstWidget: Text('出生日期', style: Styles.getTextStyleBlack204W400(14.sp)),
      bottomWidget: Obx(() {
        return Row(
          children: [
            Text(
              controller.currentBirthday ?? "请选择",
              style: Styles.getTextStyleBlack204W400(14.sp),
            ),
            SizedBox(width: 12.w),
            Text(
              controller.currentBirthday != null
                  ? '${AgeZodiacSignUtil.calculateAgeFromString(controller.currentBirthday!).toString()}岁'
                  : "",
              style: Styles.getTextStyleBlack204W400(14.sp),
            ),
            Spacer(),
            Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
          ],
        );
      }),
    );
  }

  Widget _buildCharacterList() {
    return _buildListItem(
      onFirstTap: () {
        controller.clickGoKeyboardManage();
      },
      firstWidget: Row(
        children: [
          Text('键盘人设', style: Styles.getTextStyleBlack204W400(14.sp)),
          Spacer(),
          Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
        ],
      ),
      bottomWidget: Column(
        children: [
          SizedBox(height: 7.h),
          Obx(() {
            final list = controller.currentCustomKeyboardCharacterList;
            if (list.isEmpty) {
              return const Center(child: CircularProgressIndicator());
            }
            final showList = list.take(9).toList();

            return SizedBox(
              height: 32.h * 3 + 8.h * 2,
              child: GridView.builder(
                padding: EdgeInsets.zero,
                physics: const NeverScrollableScrollPhysics(),

                itemCount: showList.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, // 每行3个
                  mainAxisSpacing: 8.h,
                  crossAxisSpacing: 8.w,
                  childAspectRatio: 96.w / 32.h, // 控制宽高比
                ),
                itemBuilder: (context, index) {
                  return _buildCharacterItem(showList[index]);
                },
              ),
            );
          }),
          // Spacer(),
          // Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
        ],
      ),
    );
  }

  Widget _buildCharacterItem(CharacterInfo character) {
    return Container(
      alignment: Alignment.center,
      decoration: ShapeDecoration(
        color: const Color(0xFFF5F4F9),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(31.r),
        ),
      ),
      child: Text(
        '${character.emoji}${character.name}',
        style: Styles.getTextStyleBlack204W400(12.sp),
        maxLines: 1,
        overflow: TextOverflow.fade,
      ),
    );
  }

  Widget _buildRelationshipCard() {
    return _buildListItem(
      onBottomTap: () {
        controller.clickRelationship();
      },
      firstWidget: Text('关系', style: Styles.getTextStyleBlack204W400(14.sp)),
      bottomWidget: Row(
        children: [
          Obx(() {
            return Text(
              IntimacyUtil.getIntimacyName(controller.currentCustomIntimacy),
              style: Styles.getTextStyleBlack204W400(14.sp),
            );
          }),
          // Spacer(),
          // Assets.images.iconArrowRight.image(width: 24.w, height: 24.w),
        ],
      ),
    );
  }

  Widget _buildSaveButton() {
    return GestureDetector(
      onTap: () {
        controller.clickSaveButton();
      },
      child: Container(
        width: double.infinity,
        margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 16.h),
        height: 48.h,
        alignment: Alignment.center,
        decoration: Styles.getActivateButtonDecoration(50.r),
        child: Text(
          StringName.profileEditSave,
          textAlign: TextAlign.center,
          style: Styles.getTextStyleWhiteW500(16.sp),
        ),
      ),
    );
  }

  // 列表项
  Widget _buildListItem({
    required Widget firstWidget,
    required Widget bottomWidget,
    VoidCallback? onBottomTap,
    VoidCallback? onFirstTap,
  }) {
    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: [
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: onFirstTap,
            child: firstWidget,
          ),
          _buildDivider(),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: onBottomTap,
            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: 0.5.r,
            strokeAlign: BorderSide.strokeAlignCenter,
            color: const Color(0xFFF5F4F9),
          ),
        ),
      ),
    );
  }

  Widget _buildIntimacySlider() {
    return // 亲密度模块
    Container(
      margin: EdgeInsets.only(left: 16.w, top: 24.h, right: 16.w),
      padding: EdgeInsets.only(
        left: 16.w,
        top: 23.h,
        right: 16.w,
        bottom: 26.h,
      ),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: Assets.images.bgProfileEditIntimacy.provider(),
          fit: BoxFit.fill,
        ),
        borderRadius: BorderRadius.circular(10.r),
      ),
      child: Column(
        children: [
          // 亲密度
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Assets.images.iconKeyboardManageFavorite.image(
                width: 20.w,
                height: 20.w,
              ),
              Assets.images.iconKeyboardManageIntimacyText.image(
                width: 48.w,
                height: 19.h,
              ),
              const Spacer(),
              Container(
                alignment: Alignment.center,
                width: 81.w,
                height: 28.h,
                decoration: ShapeDecoration(
                  color: const Color(0xFFE1E0E7),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                ),
                child: Obx(() {
                  return Text(
                    '${StringName.intimacy}${controller.currentCustomIntimacy}%',
                    textAlign: TextAlign.right,
                    style: TextStyle(
                      color: Colors.black.withAlpha(204),
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w400,
                    ),
                  );
                }),
              ),
            ],
          ),
          SizedBox(height: 19.h),
          Builder(
            builder: (context) {
              return SliderTheme(
                data: SliderTheme.of(context).copyWith(
                  trackShape: const GradientRectSliderTrackShape(),
                  trackHeight: 8.h,
                  thumbColor: Colors.white,
                  thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7.r),
                  overlayShape: const RoundSliderOverlayShape(
                    overlayRadius: 16,
                  ),
                ),
                child: Obx(() {
                  return Slider(
                    value: controller.currentCustomIntimacy.toDouble(),

                    divisions: 100,
                    min: 0,
                    max: 100,
                    onChanged: (value) {
                      controller.updateIntimacy(value.toInt());
                    },
                  );
                }),
              );
            },
          ),
        ],
      ),
    );
  }
}