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:keyboard/base/base_view.dart';
import 'package:get/get.dart';
import 'package:keyboard/resource/string.gen.dart';
import '../../resource/assets.gen.dart';
import '../../utils/styles.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(
                  child: Column(
                    children: [
                      _buildAvatarCard(),
                      _buildLoveIndexCard(),
                      _buildPopularFeatures(),
                      _buildKeyboardSettings(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 顶部标题栏
  Widget _buildTitle() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
      color: Colors.transparent,
      child: Row(
        children: [
          Assets.images.iconKeyboardTitle.image(
            width: 110.w,
            height: 26.h,
            fit: BoxFit.cover,
          ),
          const Spacer(),
          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),
                controller.hasPartner.value
                    ? _buildUserAvatar(false)
                    : _buildAddPartnerButton(),
              ],
            ),
            SizedBox(height: 10.h),
          ],
        ),
      );
    });
  }

  // 爱情指数卡片
  Widget _buildLoveIndexCard() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 11.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        children: [
          Assets.images.iconKeyboardLoveIndex.image(width: 72.w, height: 23.h),
          Container(
            height: 42.w,
            width: 215.h,
            decoration: BoxDecoration(
              color: Color(0xFFFAFAFC),
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: ProgressBar(
                        title: "爱情",
                        value: controller.appearancePercentage,
                        color: Colors.pink.shade100,
                      ),
                    ),
                    Expanded(
                      child: ProgressBar(
                        title: "爱情",
                        value: controller.appearancePercentage,
                        color: Colors.pink.shade100,
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      child: ProgressBar(
                        title: "爱情",
                        value: controller.appearancePercentage,
                        color: Colors.pink.shade100,
                      ),
                    ),
                    Expanded(
                      child: ProgressBar(
                        title: "爱情",
                        value: controller.appearancePercentage,
                        color: Colors.pink.shade100,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 用户头像
  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.userInfo.value?.imageUrl ?? ""
                            : controller.currentChooseKeyboard.value.avatar ??
                                "",
                    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: Text(
                isUser
                    ? controller.userInfo.value?.name ?? ""
                    : controller.currentChooseKeyboard.value.name ?? "",
                style: Styles.getTextStyleBlack204W400(14.sp),
              ),
            ),
          ],
        ),
        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(
                    '追爱ing',
                    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.hasPartner.value &&
                                            controller
                                                    .currentChooseKeyboard
                                                    .value
                                                    .intimacy !=
                                                null
                                        ? controller
                                            .currentChooseKeyboard
                                            .value
                                            .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 _buildAddPartnerButton() {
    return Column(
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey.shade200,
          ),
          child: const Icon(Icons.mail_outline, color: Colors.grey),
        ),
        const SizedBox(height: 4),
        const Text('添加', style: TextStyle(fontSize: 12)),
      ],
    );
  }

  // 爱情指数项目
  Widget _buildLoveIndexItems() {
    return Obx(() {
      return Row(
        children: [
          _buildIndexItem(
            '心情',
            controller.moodPercentage.value,
            Colors.pink.shade100,
          ),
          _buildIndexItem(
            '颜值',
            controller.appearancePercentage.value,
            Colors.purple.shade100,
          ),
          _buildIndexItem(
            '财富',
            controller.wealthPercentage.value,
            Colors.amber.shade100,
          ),
          _buildIndexItem(
            '洁净',
            controller.cleanlinessPercentage.value,
            Colors.blue.shade100,
          ),
        ],
      );
    });
  }

  // 单个指数项
  Widget _buildIndexItem(String title, int percentage, Color color) {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: const TextStyle(fontSize: 12)),
          const SizedBox(height: 4),
          Stack(
            children: [
              Container(
                height: 6,
                decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.circular(3),
                ),
              ),
              FractionallySizedBox(
                widthFactor: percentage / 100,
                child: Container(
                  height: 6,
                  decoration: BoxDecoration(
                    color: color,
                    borderRadius: BorderRadius.circular(3),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 2),
          Text(
            '$percentage%',
            style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
          ),
        ],
      ),
    );
  }

  // 爆款玩法区域
  Widget _buildPopularFeatures() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.purple.shade200,
                ),
              ),
              const SizedBox(width: 8),
              const Text(
                '爆款玩法',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Row(
            children: [
              _buildFeatureCard(
                '追爱小键盘',
                '轻松回复TA',
                Colors.purple.shade50,
                Icons.keyboard,
                Colors.purple.shade200,
              ),
              const SizedBox(width: 12),
              _buildFeatureCard(
                '亲密度分析',
                '探索人格密码',
                Colors.orange.shade50,
                Icons.favorite_border,
                Colors.orange.shade200,
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              _buildFeatureCard(
                '截图回复',
                '上下文义分析',
                Colors.blue.shade50,
                Icons.screenshot_monitor,
                Colors.blue.shade200,
              ),
              const SizedBox(width: 12),
              _buildFeatureCard(
                '截图回复',
                '上下文义分析',
                Colors.green.shade50,
                Icons.message,
                Colors.green.shade200,
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 功能卡片
  Widget _buildFeatureCard(
    String title,
    String subtitle,
    Color bgColor,
    IconData icon,
    Color iconColor,
  ) {
    return Expanded(
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: bgColor,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: TextStyle(fontSize: 12, color: Colors.grey.shade700),
                  ),
                ],
              ),
            ),
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Icon(icon, color: iconColor),
            ),
          ],
        ),
      ),
    );
  }

  // 键盘设置区域
  Widget _buildKeyboardSettings() {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '当前键盘人设',
                style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
              ),
              Row(
                children: [
                  const Text(
                    '去管理',
                    style: TextStyle(fontSize: 12, color: Colors.grey),
                  ),
                  Icon(
                    Icons.chevron_right,
                    size: 16,
                    color: Colors.grey.shade400,
                  ),
                ],
              ),
            ],
          ),
          const SizedBox(height: 16),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: [
              _buildPersonaTag('高冷'),
              _buildPersonaTag('幽默搞笑'),
              _buildPersonaTag('粘心暖男'),
              _buildPersonaTag('温柔体贴'),
              _buildPersonaTag('阳光大男孩'),
              _buildPersonaTag('都市精英'),
            ],
          ),
        ],
      ),
    );
  }

  // 人设标签
  Widget _buildPersonaTag(String text) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: Colors.grey.shade100,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Icon(Icons.emoji_emotions, size: 16, color: Colors.amber),
          const SizedBox(width: 4),
          Text(text, style: const TextStyle(fontSize: 12)),
        ],
      ),
    );
  }

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

class ProgressBar extends StatelessWidget {
  final String title;
  final RxInt value; // 例如传入 50，代表 50%
  final Color color;

  const ProgressBar({
    super.key,
    required this.title,
    required this.value,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final double progress = (value.value / 100).clamp(0.0, 1.0); // 保证 0~1 范围
      return Container(
        child: Row(
          children: [
            SizedBox(width: 40, child: Text(title)),
            const SizedBox(width: 8),
            Expanded(
              child: Stack(
                children: [
                  Container(
                    height: 20,
                    decoration: BoxDecoration(
                      color: color.withOpacity(0.15), // 修正：用 withOpacity
                      borderRadius: BorderRadius.circular(20.r),
                    ),
                  ),
                  FractionallySizedBox(
                    widthFactor: progress,
                    child: Container(
                      height: 20.h,
                      decoration: BoxDecoration(
                        color: color,
                        borderRadius: BorderRadius.circular(20.r),
                      ),
                    ),
                  ),
                  Positioned.fill(
                    child: Center(
                      child: Text(
                        "${value.value}%",
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    });
  }
}