AiKeyboard2025/lib/module/keyboard/keyboard_view.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:keyboard/data/bean/character_info.dart';
import 'package:keyboard/resource/string.gen.dart';

import '../../resource/assets.gen.dart';
import '../../utils/styles.dart';
import '../../widget/pargress_bar.dart';
import 'keyboard_controller.dart';

class KeyBoardView extends BaseView<KeyBoardController> {
  const KeyBoardView({super.key});

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        IgnorePointer(child: Assets.images.bgKeyboard.image(width: 360.w)),
        SafeArea(
          child: Column(
            children: [
              _buildTitle(),
              Expanded(
                child: SingleChildScrollView(
                  physics: NeverScrollableScrollPhysics(),
                  child: Column(
                    children: [
                      _buildAvatarCard(),
                      SizedBox(height: 10.h),
                      _buildLoveIndexCard(),
                      SizedBox(height: 10.h),
                      Container(
                        padding: EdgeInsets.only(top: 16.h),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(16.r),
                            topRight: Radius.circular(16.r),
                          ),
                        ),
                        child: Column(
                          children: [
                            _buildHitCard(),
                            SizedBox(height: 10.h),
                            _buildKeyboardSettings(),
                            _buildBanner(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 顶部标题栏
  Widget _buildTitle() {
    return Container(
      padding: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 12.h),
      color: Colors.transparent,
      child: Row(
        children: [
          Assets.images.iconKeyboardTitle.image(
            width: 110.w,
            height: 26.h,
            fit: BoxFit.cover,
          ),
          const Spacer(),
          GestureDetector(
            onTap: controller.clickVip,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 6.w),
              decoration: ShapeDecoration(
                color: Colors.white.withAlpha(204),
                shape: RoundedRectangleBorder(
                  side: BorderSide(width: 1, color: Colors.white),
                  borderRadius: BorderRadius.circular(13.r),
                ),
              ),
              child: Row(
                children: [
                  Assets.images.iconKeyboardVipLogo.image(
                    width: 12.w,
                    height: 12.w,
                  ),
                  const SizedBox(width: 2),
                  Text(
                    StringName.keyboardMemberOpen,
                    style: TextStyle(
                      color: Color(0xFFA85600),
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Icon(
                    Icons.chevron_right,
                    color: Color(0xFFA85600),
                    size: 11.r,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 用户头像卡片
  Widget _buildAvatarCard() {
    return Obx(() {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 22.w),
        decoration: BoxDecoration(color: Colors.transparent),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _buildUserAvatar(true),
                const SizedBox(width: 16),
                _buildLovePercentage(),
                const SizedBox(width: 16),
                _buildUserAvatar(false),
              ],
            ),
          ],
        ),
      );
    });
  }

  // 爱情指数卡片
  Widget _buildLoveIndexCard() {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Positioned(
          left: 0,
          right: 0,
          top: -12.h,
          child: Assets.images.iconKeyboardTriangle.image(
            color: Colors.white,
            width: 20.w,
            height: 16.h,
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 22.w),
          padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 5.w),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Row(
            children: [
              Assets.images.iconKeyboardLoveIndex.image(
                width: 72.w,
                height: 23.h,
              ),
              SizedBox(width: 10.w),
              Expanded(
                child: Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 10.w,
                    vertical: 8.h,
                  ),
                  decoration: BoxDecoration(
                    color: Color(0xFFFAFAFC),
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          children: [
                            ProgressBar(
                              title: "激情",
                              value: controller.appearancePercentage,
                              color: Color(0xFFFF637D),
                            ),
                            SizedBox(height: 6.h),
                            ProgressBar(
                              title: "默契",
                              value: controller.appearancePercentage,
                              color: Color(0xFFF5E8FC),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 21.w),
                      Expanded(
                        child: Column(
                          children: [
                            ProgressBar(
                              title: "羁绊",
                              value: controller.appearancePercentage,
                              color: Color(0xFFFFC954),
                            ),
                            SizedBox(height: 6.h),
                            ProgressBar(
                              title: "承诺",
                              value: controller.appearancePercentage,
                              color: Color(0xFF6382FF),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 用户头像
  Widget _buildUserAvatar(bool isUser) {
    return Column(
      children: [
        Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Column(
              children: [
                Container(
                  width: 98.r,
                  height: 98.r,
                  decoration: ShapeDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50.r),
                    ),
                  ),
                  child: CachedNetworkImage(
                    imageUrl:
                        isUser
                            ? controller.homeInfo?.imageUrl ?? ""
                            : controller.homeInfo?.targetImageUrl ?? "",
                    placeholder: (_, __) => const CupertinoActivityIndicator(),
                    errorWidget:
                        (context, url, error) => CircleAvatar(
                          backgroundImage:
                              Assets.images.iconKeyboardDefaultAvatar
                                  .provider(),
                        ),
                    imageBuilder:
                        (context, imageProvider) => Container(
                          decoration: ShapeDecoration(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(width: 2.r, color: Colors.white),
                              borderRadius: BorderRadius.circular(50.r),
                            ),
                          ),
                          child: CircleAvatar(backgroundImage: imageProvider),
                        ),
                  ),
                ),
                SizedBox(height: 10.h),
              ],
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 4.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(22.r),
              ),
              child:
                  isUser
                      ? Text(
                        controller.homeInfo?.name ?? StringName.keyboardNoLogin,
                        style: Styles.getTextStyleBlack204W400(14.sp),
                      )
                      : Text(
                        controller.homeInfo?.targetName ??
                            StringName.keyboardAdd,
                        style:
                            controller.homeInfo?.targetName != null
                                ? Styles.getTextStyleBlack204W400(14.sp)
                                : TextStyle(
                                  color: const Color(0xFF8651FF),
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                      ),
            ),
          ],
        ),
        const SizedBox(height: 4),
        // Text(name, style: const TextStyle(fontSize: 12)),
      ],
    );
  }

  // 爱情百分比
  Widget _buildLovePercentage() {
    return Container(
      decoration: BoxDecoration(shape: BoxShape.circle),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
              decoration: ShapeDecoration(
                color: Colors.white.withValues(alpha: 153),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(17.r),
                ),
              ),
              child: Row(
                children: [
                  Assets.images.iconKeyboardLoveLogo.image(
                    width: 18.w,
                    height: 18.w,
                  ),
                  Text(
                    controller.homeInfo?.intimacyName ?? "",
                    textAlign: TextAlign.center,
                    style: Styles.getTextStyleBlack153W400(14.sp),
                  ),
                ],
              ),
            ),
            SizedBox(height: 7.h),
            SizedBox(
              width: 88.w,
              height: 72.h,
              child: Stack(
                children: [
                  Assets.images.bgKeyboardLove.image(width: 88.w, height: 72.h),
                  Positioned.fill(
                    child: Center(
                      child: Obx(
                        () => Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text:
                                    controller.homeInfo?.intimacy != null
                                        ? controller.homeInfo?.intimacy
                                            .toString()
                                        : "?",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 33.sp,
                                  fontWeight: FontWeight.w700,
                                  shadows: [
                                    Shadow(
                                      offset: Offset(0, 1),
                                      blurRadius: 4.r,
                                      color: const Color(
                                        0xFFFF6BD3,
                                      ).withValues(alpha: 0.63),
                                    ),
                                  ],
                                ),
                              ),
                              TextSpan(
                                text: '%',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.w700,
                                  shadows: [
                                    Shadow(
                                      offset: Offset(0, 1),
                                      blurRadius: 4.r,
                                      color: const Color(
                                        0xFFFF6BD3,
                                      ).withValues(alpha: 0.63),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 爆款玩法区域
  Widget _buildHitCard() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.r),
          child: Assets.images.iconKeyboardHitPlay.image(
            width: 83.w,
            height: 22.h,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(height: 5),
        Padding(
          padding: EdgeInsets.only(left: 12.w, right: 12.w),
          child: Row(
            children: [
              GestureDetector(
                onTap: controller.clickEasyReply,
                child: Container(
                  width: 166.w,
                  height: 155.h,
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withValues(alpha: 0.10),
                        offset: Offset(0, 6),
                        blurRadius: 20,
                        spreadRadius: 0,
                      ),
                    ],
                  ),
                  child: Assets.images.bgKeyboardEasyReply.image(
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SizedBox(width: 11.w),
              Column(
                children: [
                  _buildFeatureCard(
                    bg: Assets.images.bgKeyboardIntimacyAnalyze.image(),
                    title: Assets.images.iconKeyboardInitmacyTitle.image(
                      width: 80.w,
                      height: 19.h,
                    ),
                    subtitle: StringName.keyboardIntimacySubtitle,
                    logo: Assets.images.iconKeyboardIntimacyLogo.image(
                      width: 69.w,
                      height: 68.w,
                      fit: BoxFit.cover,
                    ),
                    onTap: controller.clickIntimacyAnalyze,
                  ),
                  SizedBox(height: 10.h),
                  _buildFeatureCard(
                    bg: Assets.images.bgKeyboardScreenshotReply.image(),
                    title: Assets.images.iconKeyboardScreenshotTitle.image(
                      width: 72.w,
                      height: 22.h,
                    ),
                    subtitle: StringName.keyboardScreenshotSubtitle,
                    logo: Assets.images.iconKeyboardScreenshotLogo.image(
                      width: 67.w,
                      height: 59.w,
                      fit: BoxFit.cover,
                    ),
                    onTap: controller.clickScreenshotReply,
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 功能卡片
  Widget _buildFeatureCard({
    required Widget bg,
    required Widget title,
    required String subtitle,
    required Widget logo,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: SizedBox(
        height: 73.h,
        width: 159.w,
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Positioned(
              child: Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withValues(alpha: 0.10),
                      offset: Offset(0, 6),
                      blurRadius: 20,
                      spreadRadius: 0,
                    ),
                  ],
                ),
                child: bg,
              ),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.only(top: 12.h, left: 8.w),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      title,
                      Padding(
                        padding: EdgeInsets.only(left: 2.w),
                        child: Text(
                          subtitle,
                          style: TextStyle(
                            color: Colors.black.withAlpha(128),
                            fontSize: 10.sp,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Positioned(top: -5.h, right: 5.w, child: logo),
          ],
        ),
      ),
    );
  }

  // 当前键盘人设信息
  Widget _buildKeyboardSettings() {
    return GestureDetector(
      onTap: controller.clickGoKeyboardManage,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 16.w),
        padding: EdgeInsets.only(
          left: 11.w,
          right: 11.w,
          top: 15.h,
          bottom: 15.h,
        ),
        decoration: ShapeDecoration(
          color: Colors.white,
          shape: RoundedRectangleBorder(
            side: BorderSide(width: 2, color: const Color(0xFFF5F4F9)),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(16.r),
              topRight: Radius.circular(16.r),
              bottomLeft: Radius.circular(16.r),
              bottomRight: Radius.circular(16.r),
            ),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Assets.images.iconKeyboardCurrentCharacterTitle.image(
                  width: 90.w,
                  height: 20.h,
                  fit: BoxFit.cover,
                ),
                Row(
                  children: [
                    Text(
                      StringName.keyboardGoToManage,
                      style: TextStyle(
                        color: Colors.black.withAlpha(102),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Assets.images.iconKeyboardCurrentGo.image(
                      width: 7.w,
                      height: 7.w,
                    ),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 16),
            Obx(() {
              final list = controller.homeInfo?.characterInfos;
              if (list == null) {
                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]);
                  },
                ),
              );
            }),
          ],
        ),
      ),
    );
  }

  // 人设标签
  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,
      ),
    );
  }

  // 活动banner
  Widget _buildBanner() {
    return Container(
      width: 328.w,
      height: 64.h,
      child: Stack(
        children: [
          Assets.images.iconKeyboardBanner.image(width: 328.w, height: 64.h),

          Positioned(
            right: 53.w,
            bottom: 18.h,
            child: Obx(
              () => Text(
                controller.formattedTime,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 12.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Color backgroundColor() {
    return const Color(0xFFF5F5F5);
  }
}