import 'package:cached_network_image/cached_network_image.dart';
import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/controller/global.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/pages/mine/pay_fail_page.dart';
import 'package:dating_touchme_app/pages/mine/vip_manage_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluwx/fluwx.dart';
import 'package:get/get.dart';
import 'package:url_launcher/url_launcher_string.dart';

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

  @override
  State<VipPage> createState() => _VipPageState();
}

class _VipPageState extends State<VipPage> {


  bool checked = false;

  int vipActive = 0;

  List<Map> vipPrivilege = [
    {"img": Assets.imagesVipSpecial, "label": "特殊标识"},
    {"img": Assets.imagesVipVisitor, "label": "最近访客"},
    {"img": Assets.imagesVipGift, "label": "专属礼物"},
    {"img": Assets.imagesVipVoice, "label": "语音弹幕"},
  ];

  int payActive = 0;

  final Fluwx fluwx = Fluwx();

  final userData = GlobalData().userData.obs;


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          child: Container(
            width: 375.w,
            height: 812.h,
            color: Colors.white,
          ),
        ),
        Positioned(
          left: 0,
          top: -200,
          child: Image.asset(
            Assets.imagesVipBg,
            width: 561.w,
            height: 1120.w,
            fit: BoxFit.cover,
          ),
        ),
        Scaffold(
          appBar: PageAppbar(
            title: "会员中心",
            backgroundColor: Colors.transparent,
            right:  Container(
              margin: EdgeInsets.only(
                right: 18.w
              ),
              child: InkWell(
                onTap: (){
                  Get.to(() => VipManagePage());
                },
                child: Image.asset(
                  Assets.imagesSettingIcon,
                  width: 17.w,
                ),
              ),
            ),),
          backgroundColor: Colors.transparent,
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                    top: 5.w,
                    left: 15.w
                  ),
                  child:
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween ,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              ClipRRect(
                                  borderRadius: BorderRadius.all(Radius.circular(60.w)),
                                  child: (userData.value?.profilePhoto?.isNotEmpty ?? false) ? CachedNetworkImage(
                                    imageUrl: "${userData.value?.profilePhoto ?? ""}?x-oss-process=image/format,webp/resize,w_120",
                                    width: 60.w,
                                    height: 60.w,
                                    imageBuilder: (context, imageProvider) => Container(
                                      decoration: BoxDecoration(
                                        image: DecorationImage(
                                          image: imageProvider,
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                  ) : Image.asset(
                                    Assets.imagesUserAvatar,
                                    width: 60.w,
                                    height: 60.w,
                                  )
                              ),
                              SizedBox(width: 15.w,),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    userData.value?.nickName ?? "",
                                    style: TextStyle(
                                      fontSize: 18.w,
                                      fontWeight: FontWeight.w700
                                    ),
                                  ),
                                  SizedBox(height: 6.w,),
                                  Container(
                                    width: 32.w,
                                    height: 16.w,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(16.w)),
                                      color: const Color.fromRGBO(201, 201, 201, 1)
                                    ),
                                    child: Center(
                                      child: Image.asset(
                                        Assets.imagesVipFont,
                                        width: 20.w,
                                        height: 8.w,
                                      ),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                          SizedBox(height: 22.w,),
                          Text(
                            "开通 趣恋恋vip 畅享尊贵特权~",
                            style: TextStyle(
                              fontSize: 11.w,
                              color: const Color.fromRGBO(144, 144, 144, 1 )
                            ),
                          )
                        ],
                      ),
                      Image.asset(
                        Assets.imagesVipImg,
                        width: 158.w,
                        height: 179.w,
                      )
                    ],
                  ),
                )
              ],
            ),
          ),

        ),

        Positioned(
          top: 250.w,
          left: 0,
          child: Material(
            child: Container(
              width: 375.w,
              height: 821.h - 270.w - 120.w,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.vertical(
                      top: Radius.circular(18.w)
                  ),
                  color: Colors.white
              ),
              child: SingleChildScrollView(
                child: Container(
                  padding: EdgeInsetsGeometry.only(
                      top: 22.w,
                      left: 13.w,
                      right: 13.w
                  ),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          VipItem(active: vipActive, index: 0,).onTap((){
                            vipActive = 0;
                            setState(() {

                            });
                          }),
                          VipItem(active: vipActive, index: 1,).onTap((){
                            vipActive = 1;
                            setState(() {

                            });
                          }),
                          VipItem(active: vipActive, index: 2,).onTap((){
                            vipActive = 2;
                            setState(() {

                            });
                          }),
                        ],
                      ),
                      Row(
                        children: [

                          Checkbox(
                            value: checked,
                            onChanged: (value) {
                              checked = value ?? false;
                              setState(() {

                              });
                            },
                            activeColor: const Color.fromRGBO(117, 98, 249, 1),
                            side: const BorderSide(color: Colors.grey),
                            shape: const CircleBorder(),
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          ),
                          Text(
                            "我已阅读并同意《会员购买协议》",
                            style: TextStyle(
                                fontSize: 11.w,
                                color: const Color.fromRGBO(189, 189, 189, 1)
                            ),
                          )
                        ],
                      ),
                      Row(
                        children: [
                          Text(
                            "会员专属特权",
                            style: TextStyle(
                                fontSize: 17.w,
                                fontWeight: FontWeight.w500,
                                color: const Color.fromRGBO(54, 0, 115, 1)
                            ),
                          )
                        ],
                      ),
                      SizedBox(height: 12.w,),
                      Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 18.w
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            ...vipPrivilege.map((e){
                              return VipPrivilege(img: e["img"], label: e["label"]);
                            })
                          ],
                        ),
                      ),
                      SizedBox(height: 15.w,),
                      Container(
                        height: 60.w,
                        padding: EdgeInsets.symmetric(
                            vertical: 19.w,
                            horizontal: 18.w
                        ),
                        margin: EdgeInsets.only(
                            bottom: 10.w
                        ),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(9.w)),
                            color: const Color.fromRGBO(117, 98, 249, .1)
                        ),
                        child: Row(
                          children: [
                            Image.asset(
                              Assets.imagesVipChat,
                              width: 34.w,
                            ),
                            SizedBox(width: 16.w,),
                            Text(
                              "【聊天券】立即得70张，后续每天领7张，共280张",
                              style: TextStyle(
                                  fontSize: 11.w,
                                  fontWeight: FontWeight.w500
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                        height: 60.w,
                        padding: EdgeInsets.symmetric(
                            vertical: 19.w,
                            horizontal: 18.w
                        ),
                        margin: EdgeInsets.only(
                            bottom: 10.w
                        ),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(9.w)),
                            color: const Color.fromRGBO(117, 98, 249, .1)
                        ),
                        child: Row(
                          children: [
                            Image.asset(
                              Assets.imagesVipMessage,
                              width: 34.w,
                            ),
                            SizedBox(width: 16.w,),
                            Text(
                              "【消息回执】消息已读！看到了~",
                              style: TextStyle(
                                  fontSize: 11.w,
                                  fontWeight: FontWeight.w500
                              ),
                            )
                          ],
                        ),
                      ),


                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          child: Container(
            width: 375.w,
            height: 120.w,
            padding: EdgeInsets.symmetric(
              horizontal: 13.w
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: 86.w,
                      height: 30.w,
                      padding: EdgeInsets.symmetric(
                          horizontal: 9.w
                      ),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(30.w)),
                          border: Border.all(
                              width: 1,
                              color: Color.fromRGBO(117, 98, 249, payActive == 0 ? 1 : 0)),
                          color: payActive == 0 ?
                          const Color.fromRGBO(117, 98, 249, .07) :
                          const Color.fromRGBO(247, 247, 247, 1)
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Image.asset(
                            Assets.imagesWechatPay,
                            width: 17.w,
                          ),
                          Text(
                            "微信支付",
                            style: TextStyle(
                                fontSize: 11.w,
                                fontWeight: FontWeight.w500
                            ),
                          )
                        ],
                      ),
                    ).onTap((){
                      payActive = 0;
                      setState(() {

                      });
                    }),
                    Container(
                      width: 80.w,
                      height: 30.w,
                      padding: EdgeInsets.symmetric(
                          horizontal: 12.w
                      ),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(30.w)),
                          border: Border.all(
                              width: 1,
                              color: Color.fromRGBO(117, 98, 249, payActive == 1 ? 1 : 0)),
                          color: payActive == 1 ?
                          const Color.fromRGBO(117, 98, 249, .07) :
                          const Color.fromRGBO(247, 247, 247, 1)
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Image.asset(
                            Assets.imagesAliPay,
                            width: 17.w,
                          ),
                          Text(
                            "支付宝",
                            style: TextStyle(
                                fontSize: 11.w,
                                fontWeight: FontWeight.w500
                            ),
                          )
                        ],
                      ),
                    ).onTap((){
                      payActive = 1;
                      setState(() {

                      });
                    }),
                  ],
                ),
                SizedBox(height: 10.w,),
                Container(
                  width: 350.w,
                  height: 45.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(45.w)),
                    gradient: LinearGradient(
                      begin: Alignment.centerLeft,  // 90deg: 从左到右
                      end: Alignment.centerRight,
                      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],  // 对应 0%、77.53%、100%
                    ),
                  ),
                  child: Center(
                    child: Text(
                      "立即开通",
                      style: TextStyle(
                          fontSize: 18.w,
                          color: Colors.white,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                ).onTap(() async {
                  if(payActive == 1){
                    var e = await launchUrlString("alipays://platformapi/startapp?appId=20000067&url=https://www.baidu.com");
                  } else {
                    fluwx.open(target: MiniProgram(
                        username: 'gh_9ea8d46add6f',
                        miniProgramType: WXMiniProgramType.preview,
                        path:"pages/index/index"
                    ));
                  }
                })
              ],
            ),
          ),
        )
      ],
    );
  }
}

class VipItem extends StatefulWidget {
  final int index;
  final int active;
  const VipItem({super.key, required this.index, required this.active});

  @override
  State<VipItem> createState() => _VipItemState();
}

class _VipItemState extends State<VipItem> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          width: 112.w,
          height: 120.h,
          padding: EdgeInsets.only(
              top: 16.w,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(18.w)),
            border: widget.active == widget.index ?
            Border.all(
                width: 2,
                color: const Color.fromRGBO(117, 98, 249, 1)) : Border.all(
                width: 1,
                color: 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),  // 左侧淡紫色（20% 透明）
                Color.fromRGBO(194, 195, 255, 0.2),  // 右侧淡蓝紫色（20% 透明）
              ],
              stops: [0.0, 1.0], // 可省略，默认就是 [0.0, 1.0]
            ) : null,
          ),
          child: Column(
            children: [
              Text(
                "3个月",
                style: TextStyle(
                    fontSize: 11.w,
                    fontWeight: FontWeight.w700
                ),
              ),
              SizedBox(height: 2.w,),
              Text(
                "￥29.3/月",
                style: TextStyle(
                    fontSize: 11.w,
                    color: const Color.fromRGBO(144, 144, 144, 1)
                ),
              ),
              SizedBox(height: 23.w,),
              RichText(
                text: TextSpan(
                    style: TextStyle(
                        color: const Color.fromRGBO(248, 85, 66, 1),
                        fontWeight: FontWeight.w700
                    ),
                    children: [
                      TextSpan(
                          text: "￥",
                          style: TextStyle(
                              fontSize: 12.w
                          )
                      ),
                      TextSpan(
                          text: "88",
                          style: TextStyle(
                              fontSize: 23.w
                          )
                      ),
                    ]
                ),
              )
            ],
          ),
        ),
        Positioned(
          left: 0,
          top: -5.w,
          child: Stack(
            children: [
              Image.asset(
                Assets.imagesVipBuyTag,
                width: 60.w,
                height: 18.w,
              ),
              Positioned.fill(
                child: Center(
                  child: Text(
                    "推荐",
                    style: TextStyle(
                        fontSize: 11.w,
                        color: Colors.white,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}

class VipPrivilege extends StatefulWidget {
  final String img;
  final String label;
  const VipPrivilege({super.key, required this.img, required this.label});

  @override
  State<VipPrivilege> createState() => _VipPrivilegeState();
}

class _VipPrivilegeState extends State<VipPrivilege> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 54.w,
          height: 54.w,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(18.w)),
            color: const Color.fromRGBO(245, 245, 245, 1)
          ),
          child: Center(
            child: Image.asset(
                widget.img,
              width: 30.w,
            ),
          ),
        ),
        SizedBox(height: 3.w,),
        Text(
          widget.label,
          style: TextStyle(
            fontSize: 11.w,
            fontWeight: FontWeight.w500
          ),
        )
      ],
    );
  }
}