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/controller/setting/task_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/matchmaker_requirement_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetX<TaskController>(
      init: TaskController(),
      builder: (controller){
        controller.userData.value = GlobalData().userData;
        return Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,  // 0%：左边开始
              end: Alignment.bottomCenter,   // 100%：右边结束
              colors: [
                Color.fromRGBO(172, 89, 255, 1),  // 紫色
                Color.fromRGBO(117, 98, 249, 1),  // 中间淡蓝
                Color.fromRGBO(255, 255, 255, 1),
                Color.fromRGBO(255, 255, 255, 1),// 右侧深蓝
              ],
              stops: [0.0, 0.32, 0.66, 1.0], // 对应 CSS 百分比：0%、77.53%、100%
            ),
          ),
          child: controller.roseList.isNotEmpty ? Scaffold(
            backgroundColor: Colors.transparent,
            appBar: PageAppbar(title: "入驻加盟", backgroundColor: Colors.transparent, color: Colors.white, iconColor: Colors.white),
            body: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 12.w),
                    child: Row(
                      children: [
                        ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(80.w)),
                            child: (controller.userData.value?.profilePhoto?.isNotEmpty ?? false) ? CachedNetworkImage(
                              imageUrl: "${controller.userData.value?.profilePhoto ?? ""}?x-oss-process=image/format,webp/resize,w_120",
                              width: 80.w,
                              height: 80.w,
                              imageBuilder: (context, imageProvider) => Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: imageProvider,
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ) : Image.asset(
                              Assets.imagesUserAvatar,
                              width: 80.w,
                              height: 80.w,
                            )
                        ),
                        SizedBox(width: 16.w,),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            ConstrainedBox(
                              constraints: BoxConstraints( maxWidth: 120.w),
                              child: Text(
                                "${controller.userData.value?.nickName ?? ""}",
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                    fontSize: 24.w,
                                    color: Colors.white,
                                    fontWeight: FontWeight.w700
                                ),
                              ),
                            ),
                            Text(
                              "ID：${controller.userId.value ?? ""}",
                              style: TextStyle(
                                  fontSize: 16.w,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  SizedBox(width: 12.w,),
                  Container(
                    padding: EdgeInsets.only(top: 8.w, bottom: 10.w, left: 24.w, right: 24.w),
                    child: Row(
                      children: [
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Row(
                                children: [
                                  Image.asset(Assets.imagesRoseWhite, width: 8.w, height: 15.w),
                                  const SizedBox(width: 4),
                                  Text('已消费玫瑰', style: TextStyle(fontSize: 14.w, color: Colors.white)),
                                ],
                              ),
                              SizedBox(height: 4,),
                              Row(
                                children: [
                                  SizedBox(width: 12,),
                                  Text(
                                    "${controller.consumption.value.liveConsumptionAmount}",
                                    style: TextStyle(
                                        fontSize: 30.w,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Row(
                                children: [
                                  Image.asset('assets/images/timer.png', width: 15.w, height: 15.w),
                                  const SizedBox(width: 4),
                                  Text('已连麦时间（分钟）', style: TextStyle(fontSize: 14.w, color: Colors.white)),
                                ],
                              ),
                              SizedBox(height: 4,),
                              Row(
                                children: [
                                  SizedBox(width: 12,),
                                  Text(
                                    "${controller.consumption.value.liveDurationMins}",
                                    style: TextStyle(
                                        fontSize: 30.w,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(18.w)),
                        color: Colors.white
                    ),
                    padding: EdgeInsets.symmetric(vertical: 12.w, horizontal: 16.w),
                    margin: EdgeInsets.symmetric(vertical: 10.w, horizontal: 12.w),
                    child: Column(
                      children: [
                        SizedBox(height: 12.w,),
                        ...controller.roseList.asMap().entries.map((entry){
                          return PayItem(item: entry.value, active: controller.activePay.value, index: entry.key, changeActive: controller.changePayActive);
                        }),
                        Row(
                          children: [
                            SizedBox(width: 4.w),
                            Container(
                              width: 6,
                              height: 6,
                              decoration: BoxDecoration(
                                color: Color(0xFF999999), // 圆点颜色
                                shape: BoxShape.circle, // 圆形
                              ),
                            ),
                            SizedBox(width: 4.w),
                            Text('仅限直播间相亲消费和连麦', style: TextStyle(fontSize: 12.w, color: Color(0xFF999999))),
                          ],
                        ),
                        SizedBox(height: 12.w),
                      ],
                    ),
                  )
                ],
              )
            ),
            bottomNavigationBar: SafeArea(
                child: Container(
                  height: 60,
                  padding: EdgeInsets.symmetric(vertical: 5.w, horizontal: 20.w),
                  child: TDButton(
                    text: controller.button.value,
                    width: MediaQuery.of(context).size.width - 40,
                    size: TDButtonSize.large,
                    type: TDButtonType.fill,
                    shape: TDButtonShape.round,
                    disabled: !controller.canApply.value,
                    style: TDButtonStyle(
                      textColor: Colors.white,
                      backgroundColor: Color(0xFF7562F9),
                    ),
                    activeStyle: TDButtonStyle(
                      textColor: Colors.white,
                      backgroundColor: Color(0xC37562F9),
                    ),
                    disableStyle: TDButtonStyle(
                      textColor: Colors.white,
                      backgroundColor: Color(0xFFAAAAAA),
                    ),
                    onTap: (){
                      controller.submitOrder();
                    },
                  ),
                )
            ),
          ) : null,
        );
      },
    );
  }
}


class PayItem extends StatefulWidget {
  final MatchmakerRequirement 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 Stack(
        children: [
          Container(
            // width: 124.w,
            height: 108.h,
            margin: EdgeInsets.only(bottom: 12.w),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(18.w)),
                color: Colors.white,
                border: widget.active == widget.index ? Border.all(width: 1, color: const Color(0xFF7562F9)) : Border.all(width: 1, color: const Color(0xFFEEEEEE))
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: 20.h),
                TDText(widget.item.liveConsumptionAmount! > 0 ? '累计消费' : '累计连麦相亲', style: TextStyle(color: Color(0xFF999999))),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      widget.item.liveConsumptionAmount! > 0 ? "${widget.item.liveConsumptionAmount}" : "${widget.item.liveDurationHours}",
                      style: TextStyle(
                          fontSize: 30.w,
                          color: Color.fromRGBO(251, 78, 35, 1),
                          fontWeight: FontWeight.bold
                      ),
                    ),
                    const SizedBox(width: 2),
                    Container(
                      padding: EdgeInsets.only(bottom: 8.h),
                      child: Text(
                        widget.item.liveConsumptionAmount! > 0 ? '朵玫瑰' : '小时',
                        style: TextStyle(
                            fontSize: 16.w,
                            color: Color.fromRGBO(251, 78, 35, 1),
                            fontWeight: FontWeight.bold
                        ),
                      ),
                    ),
                  ],
                ),
                // TDText("￥${widget.item.unitOriginalPrice}", isTextThrough: true, style: TextStyle(color: Color(0xFFCCCCCC)),),
                Spacer()
              ],
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 4.w, horizontal: 12.w),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(18.w),
                    bottomRight: Radius.circular(18.w),
                  ),
                  color: widget.active == widget.index ? const Color(0xFF7562F9) : Color(0xFFCCCCCC)
              ),
              child: Center(
                child: Text(_getNameByType(widget.item.type!), style: TextStyle(fontSize: 12, color: Colors.white)),
              ),
            ),
          )
        ],
      ).onTap((){
        widget.changeActive(widget.index);
      });
  }

  String _getNameByType(int type) {
    if(type == 1){
      return '实习红娘';
    }
    if(type == 2){
      return '线上红娘';
    }
    if(type == 3){
      return '签约红娘';
    }
    return '实习红娘'; // 直播显示直播间按钮（放在HI位置）
  }

}


class RevenueItem extends StatefulWidget {
  final dynamic item;
  const RevenueItem({super.key, required this.item});

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

class _RevenueItemState extends State<RevenueItem> {

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(17.w),
      margin: EdgeInsets.only(bottom: 8.w),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(16.w)),
          color: const Color.fromRGBO(117, 98, 249, .1)
      ),
      child: Row(
        children: [
          Image.asset(
            _getButtonImage(widget.item['icon']),
            width: 26.w,
            height: 26.w,
          ),
          SizedBox(width: 14.w,),
          Expanded(
            child: Text(
              widget.item['desc'],
              style: TextStyle(
                  fontSize: 12.w,
                  color: Color(0xFF999999)
              ),
            ),
          )
        ],
      ),
    );
  }

  String _getButtonImage(String icon) {
    if(icon == '1'){
      return Assets.imagesMatchmakerIcon1;
    }
    if(icon == '2'){
      return Assets.imagesMatchmakerIcon2;
    }
    if(icon == '3'){
      return Assets.imagesMatchmakerIcon3;
    }
    return Assets.imagesMatchmakerIcon4; // 直播显示直播间按钮（放在HI位置）
  }
}