import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/router/route_paths.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:roundcheckbox/roundcheckbox.dart';

class RosePage extends StatefulWidget {
  const RosePage({super.key});

  @override
  State<RosePage> createState() => _RosePageState();
}

class _RosePageState extends State<RosePage> {




  bool payChecked = true;

  int activePay = 0;
  List<Map> payList = [
    {"num": 10, "price": 10, "hasTag": true},
    {"num": 60, "price": 60, "hasTag": true},
    {"num": 300, "price": 60, "hasTag": true},
    {"num": 1080, "price": 1080, "hasTag": false},
    {"num": 2880, "price": 2880, "hasTag": false},
    {"num": 5000, "price": 5000, "hasTag": false},
    {"num": 10000, "price": 10000, "hasTag": false},
    {"num": 20000, "price": 20000, "hasTag": false},
    {"num": 50000, "price": 50000, "hasTag": false},
  ];



  changePayActive(int index){
    activePay = index;
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "玫瑰充值", right: Container(
        margin: EdgeInsets.only(right: 28.w),
        child: InkWell(
          onTap: (){
            context.pushNamed(RouteNames.payHistory);
          },
          child: Text(
            "交易记录",
            style: TextStyle(
              fontSize: 26.w,
              color: const Color.fromRGBO(144, 144, 144, 1),
            ),
          ),
        ),
      ),),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(
            vertical: 20.w,
            horizontal: 25.w
          ),
          child: Column(
            children: [
              Image.asset(
                "assets/rose_banner.png",
                width: 700.w,
                height: 322.w,
              ),
              SizedBox(height: 45.w,),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    "余额：",
                    style: TextStyle(
                      fontSize: 22.w,
                      color: const Color.fromRGBO(144, 144, 144, 1),
                      fontWeight: FontWeight.w500
                    ),
                  ),
                  Text(
                    "15",
                    style: TextStyle(
                      fontSize: 32.w,
                      color: const Color.fromRGBO(117, 98, 249, 1),
                      fontWeight: FontWeight.w700
                    ),
                  ),
                  SizedBox(width: 11.w,),
                  Image.asset(
                    "assets/rose_gift.png",
                    width: 26.w,
                    height: 26.w,
                  )
                ],
              ),


              Wrap(
                spacing: 9.w,
                runSpacing: 14.w,
                children: [
                  ...payList.asMap().entries.map((entry){
                    return PayItem(item: entry.value, active: activePay, index: entry.key, changeActive: changePayActive);
                  }),
                ],
              ),
              Container(
                height: 1,
                margin: EdgeInsets.only(
                    top: 20.w,
                    bottom: 30.w
                ),
                color: const Color.fromRGBO(219, 219, 219, 1),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Image.asset(
                        "assets/ali_pay.png",
                        width: 35.w,
                        height: 35.w,
                      ),
                      SizedBox(width: 12.w,),
                      Text(
                        "支付宝支付",
                        style: TextStyle(
                            fontSize: 22.w,
                            color: const Color.fromRGBO(51, 51, 51, 1),
                            fontWeight: FontWeight.w500
                        ),
                      )
                    ],
                  ),
                  RoundCheckBox(
                    onTap: (bool? value) {
                      setState(() {
                        payChecked = true;
                      });
                    },
                    isChecked: payChecked,
                    size: ScreenUtil().setWidth(30),
                    checkedColor: const Color.fromRGBO(117, 98, 249, 1),
                    checkedWidget: Icon(
                      Icons.check,
                      color: const Color.fromRGBO(255, 255, 255, 1),
                      size: ScreenUtil().setWidth(14),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 20.w,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Image.asset(
                        "assets/wechat_pay.png",
                        width: 35.w,
                        height: 35.w,
                      ),
                      SizedBox(width: 12.w,),
                      Text(
                        "支付宝支付",
                        style: TextStyle(
                            fontSize: 22.w,
                            color: const Color.fromRGBO(51, 51, 51, 1),
                            fontWeight: FontWeight.w500
                        ),
                      )
                    ],
                  ),
                  RoundCheckBox(
                    onTap: (bool? value) {
                      setState(() {
                        payChecked = false;
                      });
                    },
                    isChecked: !payChecked,
                    size: ScreenUtil().setWidth(30),
                    checkedColor: const Color.fromRGBO(117, 98, 249, 1),
                    checkedWidget: Icon(
                      Icons.check,
                      color: const Color.fromRGBO(255, 255, 255, 1),
                      size: ScreenUtil().setWidth(14),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 17.w,),
              Row(
                children: [
                  RichText(
                    text: TextSpan(
                        style: TextStyle(
                            fontSize: 22.w,
                            fontWeight: FontWeight.w500
                        ),
                        children: const [
                          TextSpan(
                              text: "充值既代表同意",
                              style: TextStyle(
                                  color: Color.fromRGBO(189, 189, 189, 1)
                              )
                          ),
                          TextSpan(
                              text: "《动我充值协议》",
                              style: TextStyle(
                                  color: Color.fromRGBO(71, 123, 255, 1)
                              )
                          ),
                          TextSpan(
                              text: "和隐私政策",
                              style: TextStyle(
                                  color: Color.fromRGBO(189, 189, 189, 1)
                              )
                          ),
                        ]
                    ),
                  )
                ],
              ),
              SizedBox(height: 100.w,),
              Container(
                width: 650.w,
                height: 90.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(90.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: 36.w,
                        color: Colors.white,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}



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

  @override
  State<PayItem> createState() => _PayItemState();
}

class _PayItemState extends State<PayItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        widget.changeActive(widget.index);
      },
      child: Stack(
        children: [
          Container(
            width: 227.w,
            height: 110.w,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(18.w)),
                color: widget.active == widget.index ? const Color.fromRGBO(239, 19, 46, .05) : const Color.fromRGBO(247, 247, 247, 1),
                border: widget.active == widget.index ? Border.all(width: 1, color: const Color.fromRGBO(239, 19, 46, 1)) : null
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RichText(
                  text: TextSpan(
                      children: [
                        TextSpan(
                          text: "${widget.item["num"]}",
                          style: TextStyle(
                              fontSize: 35.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w700
                          ),
                        ),
                        TextSpan(
                          text: "玫瑰",
                          style: TextStyle(
                              fontSize: 22.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ]
                  ),
                ),
                Text(
                  "${widget.item["price"]}元",
                  style: TextStyle(
                      fontSize: 22.w,
                      color: const Color.fromRGBO(144, 144, 144, 144),
                      fontWeight: FontWeight.w500
                  ),
                )
              ],
            ),
          ),
          if(widget.item["hasTag"]) Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: 107.w,
              height: 23.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(18.w),
                  bottomRight: Radius.circular(18.w),
                ),
                color: widget.active == widget.index ? null :const Color.fromRGBO(238, 24, 50, .1),
                gradient: widget.active == widget.index ? LinearGradient(
                  begin: Alignment.centerLeft,   // 对应 0%
                  end: Alignment.centerRight,    // 对应 100%
                  colors: [
                    Color.fromRGBO(238, 24, 50, 1),   // #EE1832 深红
                    Color.fromRGBO(250, 101, 64, 1),  // #FA6540 橙红
                    Color.fromRGBO(255, 131, 69, 1),  // #FF8345 浅橙
                  ],
                  stops: [0.0, 0.7216, 1.0], // 对应 CSS 中的百分比位置
                ) : null,
              ),
              child: Center(
                child: Text(
                  "送新人大礼包",
                  style: TextStyle(
                      fontSize: 12.w,
                      color: widget.active == widget.index ? Colors.white : const Color.fromRGBO(237, 23, 50, 1),
                      fontWeight: FontWeight.w500
                  ),
                ),
              ),
            ),
          ),
          if(widget.active == widget.index) Positioned(
            right: 0,
            bottom: 0,
            child: Container(
              width: 35.w,
              height: 26.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(18.w),
                    bottomRight: Radius.circular(18.w),
                  ),
                  color: const Color.fromRGBO(239, 19, 46, 1)
              ),
              child: Center(
                child: Image.asset(
                  "assets/check.png",
                  width: 13.w,
                  height: 9.w,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}