import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/controller/mine/rose_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/model/mine/rose_data.dart';
import 'package:dating_touchme_app/pages/mine/rose_history_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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


  @override
  Widget build(BuildContext context) {
    return GetX<RoseController>(
      init: RoseController(),
      builder: (controller){
        return Scaffold(
          appBar: PageAppbar(title: "玫瑰充值", right: Container(
            margin: EdgeInsets.only(right: 14.w),
            child: InkWell(
              onTap: (){
                // context.pushNamed(RouteNames.payHistory);
                Get.to(() => RoseHistoryPage());
              },
              child: Text(
                "交易记录",
                style: TextStyle(
                  fontSize: 13.w,
                  color: const Color.fromRGBO(144, 144, 144, 1),
                ),
              ),
            ),
          ),),
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.symmetric(
                  vertical: 10.w,
                  horizontal: 12.w
              ),
              child: Column(
                children: [
                  Image.asset(
                    Assets.imagesRoseBanner,
                    width: 350.w,
                    height: 161.w,
                  ),
                  SizedBox(height: 22.w,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        "余额：",
                        style: TextStyle(
                            fontSize: 11.w,
                            color: const Color.fromRGBO(144, 144, 144, 1),
                            fontWeight: FontWeight.w500
                        ),
                      ),
                      Text(
                        "${controller.roseNum.value}",
                        style: TextStyle(
                            fontSize: 16.w,
                            color: const Color.fromRGBO(117, 98, 249, 1),
                            fontWeight: FontWeight.w700
                        ),
                      ),
                      SizedBox(width: 5.w,),
                      Image.asset(
                        Assets.imagesRoseGift,
                        width: 13.w,
                        height: 13.w,
                      )
                    ],
                  ),


                  Wrap(
                    spacing: 4.w,
                    runSpacing: 7.w,
                    children: [
                      ...controller.roseList.asMap().entries.map((entry){
                        return PayItem(item: entry.value, active: controller.activePay.value, index: entry.key, changeActive: controller.changePayActive);
                      }),
                    ],
                  ),
                  Container(
                    height: 1,
                    margin: EdgeInsets.only(
                        top: 10.w,
                        bottom: 15.w
                    ),
                    color: const Color.fromRGBO(219, 219, 219, 1),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Image.asset(
                            Assets.imagesAliPay,
                            width: 17.w,
                            height: 17.w,
                          ),
                          SizedBox(width: 6.w,),
                          Text(
                            "支付宝支付",
                            style: TextStyle(
                                fontSize: 11.w,
                                color: const Color.fromRGBO(51, 51, 51, 1),
                                fontWeight: FontWeight.w500
                            ),
                          )
                        ],
                      ),
                      Checkbox(
                        value: controller.payChecked.value,
                        onChanged: (value) {
                          controller.payChecked.value = true;
                        },
                        activeColor: const Color.fromRGBO(117, 98, 249, 1),
                        side: const BorderSide(color: Colors.grey),
                        shape: const CircleBorder(),
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                    ],
                  ),
                  SizedBox(height: 10.w,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Image.asset(
                            Assets.imagesWechatPay,
                            width: 17.w,
                            height: 17.w,
                          ),
                          SizedBox(width: 6.w,),
                          Text(
                            "微信支付",
                            style: TextStyle(
                                fontSize: 11.w,
                                color: const Color.fromRGBO(51, 51, 51, 1),
                                fontWeight: FontWeight.w500
                            ),
                          )
                        ],
                      ),
                      Checkbox(
                        value: !controller.payChecked.value,
                        onChanged: (value) {
                          controller.payChecked.value = false;
                        },
                        activeColor: const Color.fromRGBO(117, 98, 249, 1),
                        side: const BorderSide(color: Colors.grey),
                        shape: const CircleBorder(),
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                    ],
                  ),
                  SizedBox(height: 8.w,),
                  Row(
                    children: [
                      RichText(
                        text: TextSpan(
                            style: TextStyle(
                                fontSize: 11.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: 50.w,),
                  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
                        ),
                      ),
                    ),
                  ).onTap((){
                    controller.submitOrder();
                  })
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}


class PayItem extends StatefulWidget {
  final RoseData 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: 113.w,
            height: 55.w,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(9.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.purchaseTimeValue}",
                          style: TextStyle(
                              fontSize: 17.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w700
                          ),
                        ),
                        TextSpan(
                          text: "玫瑰",
                          style: TextStyle(
                              fontSize: 11.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ]
                  ),
                ),
                Text(
                  "${widget.item.unitSellingPrice}元",
                  style: TextStyle(
                      fontSize: 11.w,
                      color: const Color.fromRGBO(144, 144, 144, 144),
                      fontWeight: FontWeight.w500
                  ),
                )
              ],
            ),
          ),
          if(widget.item.detailDesc != null) Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: 53.w,
              height: 11.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(9.w),
                  bottomRight: Radius.circular(9.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(
                  widget.item.detailDesc ?? "",
                  style: TextStyle(
                      fontSize: 6.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: 17.w,
              height: 13.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(9.w),
                    bottomRight: Radius.circular(9.w),
                  ),
                  color: const Color.fromRGBO(239, 19, 46, 1)
              ),
              child: Center(
                child: Image.asset(
                  Assets.imagesCheck,
                  width: 6.w,
                  height: 4.w,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}