import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/controller/mine/matchmaker_update_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class MatchmakerUpdatePage extends StatelessWidget {
  const MatchmakerUpdatePage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetX<MatchmakerUpdateController>(
      init: MatchmakerUpdateController(),
      builder: (controller){
        return Stack(
          children: [
            Positioned(
              child: Container(
                width: 375.w,
                height: 812.h,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Color.fromRGBO(172, 89, 255, 1),    // 100%
                      Color.fromRGBO(117, 98, 249, 1),    // 64.87%
                      Color.fromRGBO(117, 98, 249, 1),    // 43.03%
                      Color.fromRGBO(255, 255, 255, 1),   // 0%
                    ],
                    stops: [
                      0.0,
                      0.2303,
                      0.4487,
                      0.6,
                    ],
                  ),
                ),
              ),
            ),
            Scaffold(
              backgroundColor: Colors.transparent,
              appBar: PageAppbar(title: "升级红娘", backgroundColor: Colors.transparent, color: Colors.white,),
              body: SingleChildScrollView(
                child: Container(
                  padding: EdgeInsets.symmetric(
                      vertical: 20.w,
                      horizontal: 12.w
                  ),
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 20.w,
                            horizontal: 12.w
                        ),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(18.w)),
                        ),
                        child: Column(
                          children: [
                            Row(
                              children: [
                                Text(
                                  "趣恋恋，让婚恋服务更高效",
                                  style: TextStyle(
                                      fontSize: 16.w,
                                      fontWeight: FontWeight.w500
                                  ),
                                )
                              ],
                            ),
                            SizedBox(height: 15.w,),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                ...controller.deal.asMap().entries.map((entry){
                                  return SelectItem(
                                    item: entry.value,
                                    index: entry.key,
                                    active: controller.select.value,
                                    changeActive: controller.changeActive,
                                  );
                                }),
                              ],
                            ),
                            SizedBox(height: 30.w,),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "新红娘入驻权益",
                                  style: TextStyle(
                                    fontSize: 22.w,
                                    color: const Color.fromRGBO(48, 48, 48, 1),
                                    fontWeight: FontWeight.w500
                                  ),
                                ),
                                SizedBox(width: 10.w,),
                                Image.asset(
                                  Assets.imagesLimitTime,
                                  width: 30.w,
                                  height: 16.w,
                                )
                              ],
                            ),
                            SizedBox(height: 15.w,),
                            ...(controller.deal[controller.select.value]["revenue"] as List).asMap().entries.map((entry){
                              return RevenueItem(
                                index: controller.select.value == 2 && entry.key >= 1 ? entry.key + 1 : entry.key,
                                title: entry.value,
                              );
                            })
                          ],
                        ),
                      ),
                      Container(
                        width: 325.w,
                        height: 45.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(45.w)),
                          gradient: LinearGradient(
                            begin: Alignment.centerLeft,  // 0%：左边开始
                            end: Alignment.centerRight,   // 100%：右边结束
                            colors: [
                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                              Color.fromRGBO(77, 127, 231, 1),  // 中间淡蓝
                              Color.fromRGBO(61, 138, 224, 1),  // 右侧深蓝
                            ],
                            stops: [0.0, 0.7753, 1.0], // 对应 CSS 百分比：0%、77.53%、100%
                          ),
                        ),
                        child: Center(
                          child: Text(
                            "确认",
                            style: TextStyle(
                                fontSize: 18.w,
                                color: Colors.white,
                                fontWeight: FontWeight.w500
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            )
          ],
        );
      },
    );
  }
}

class SelectItem extends StatefulWidget {
  final Map item;
  final int index;
  final int active;
  final Function(int) changeActive;
  const SelectItem({super.key, required this.item, required this.index, required this.active, required this.changeActive});

  @override
  State<SelectItem> createState() => _SelectItemState();
}

class _SelectItemState extends State<SelectItem> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 103.w,
          height: 109.w,
          padding: EdgeInsets.only(
            top: 32.w,
            bottom: 9.w
          ),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(17.w)),
              border: Border.all(width: 1, color: widget.active == widget.index ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(222, 222, 222, 1)),
            gradient: widget.active == widget.index ? LinearGradient(
              begin: Alignment.centerLeft,    // 90deg 从左到右
              end: Alignment.centerRight,
              colors: [
                Color.fromRGBO(232, 199, 255, 0.2), // 0%
                Color.fromRGBO(194, 195, 255, 0.2), // 100%
              ],
              stops: [
                0.0,
                1.0,
              ],
            ) : null,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "年费",
                style: TextStyle(
                  fontSize: 11.w,
                  fontWeight: FontWeight.w700
                ),
              ),
              RichText(
                text: TextSpan(
                  style: TextStyle(
                    color: const Color.fromRGBO(248, 85, 66, 1),
                    fontWeight: FontWeight.w700
                  ),
                  children: [
                    TextSpan(
                      text: "￥",
                      style: TextStyle(
                        fontSize: 11.w
                      )
                    ),
                    TextSpan(
                      text: "${widget.item["price"]}",
                      style: TextStyle(
                        fontSize: 21.w
                      )
                    )
                  ]
                ),
              ),
              Text(
                "+10小时视频相亲",
                style: TextStyle(
                  color: Color.fromRGBO(144, 144, 144, widget.index == 0 ? 1 : 0),
                  fontSize: 9.w
                ),
              )
            ],
          ),
        ),
        Positioned(
          top: 0,
          left: 0,
          child: Container(
            width: 63.w,
            height: 16.w,
            decoration: BoxDecoration(
              color: widget.active == widget.index ? const Color.fromRGBO(117, 98, 249, 1) : const Color.fromRGBO(191, 191, 191, 1),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.w),
                bottomRight: Radius.circular(16.w),
              )
            ),
            child: Center(
              child: Text(
                "${widget.item["title"]}",
                style: TextStyle(
                  fontSize: 9.w,
                  color: Colors.white,
                  fontWeight: FontWeight.w500
                ),
              ),
            ),
          ),
        )
      ],
    ).onTap((){
      widget.changeActive(widget.index);
    });
  }
}

class RevenueItem extends StatefulWidget {
  final int index;
  final String title;
  const RevenueItem({super.key, required this.index, required this.title});

  @override
  State<RevenueItem> createState() => _RevenueItemState();
}

class _RevenueItemState extends State<RevenueItem> {

  final matchmakerIcons = {
    0: Assets.imagesMatchmakerIcon1,
    1: Assets.imagesMatchmakerIcon2,
    2: Assets.imagesMatchmakerIcon3,
    3: Assets.imagesMatchmakerIcon4,
  };

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(17.w),
      margin: EdgeInsets.only(bottom: 4.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(18.w)),
        color: const Color.fromRGBO(117, 98, 249, .1)
      ),
      child: Row(
        children: [
          Image.asset(
            matchmakerIcons[widget.index]!,
            width: 26.w,
            height: 26.w,
          ),
          SizedBox(width: 14.w,),
          Expanded(
            child: Text(
              widget.title,
              style: TextStyle(
                  fontSize: 11.w,
                  fontWeight: FontWeight.w500
              ),
            ),
          )
        ],
      ),
    );
  }
}