import 'package:dating_touchme_app/components/page_appbar.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:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../../controller/setting/spread_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetX<SpreadController>(
      init: SpreadController(),
      builder: (controller){
        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),
            body: SingleChildScrollView(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(18.w)),
                  color: Colors.white
                ),
                padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 12.w),
                margin: EdgeInsets.symmetric(vertical: 10.w, horizontal: 12.w),
                child: Column(
                  children: [
                    SizedBox(height: 6.w,),
                    Row(
                      children: [
                        Text(
                          "趣恋恋，让婚恋服务更高效",
                          style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 15.w,),
                    SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: [
                          ...controller.roseList.asMap().entries.map((entry){
                            return PayItem(item: entry.value, active: controller.activePay.value, index: entry.key, changeActive: controller.changePayActive);
                          }),
                        ],
                      ),
                    ),
                    SizedBox(height: 24.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: 4.w,),
                        Image.asset(
                          Assets.imagesLimitTime,
                          width: 30.w,
                          height: 16.w,
                        )
                      ],
                    ),
                    SizedBox(height: 16.w,),
                    ...controller.revenue.map((entry){
                      return RevenueItem(item: entry);
                    }),
                  ],
                ),
              ),
            ),
            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,
                    style: TDButtonStyle(
                      textColor: Colors.white,
                      backgroundColor: Color(0xFF7562F9),
                    ),
                    activeStyle: TDButtonStyle(
                      textColor: Colors.white,
                      backgroundColor: Color(0xC37562F9),
                    ),
                    onTap: (){
                      controller.submitOrder();
                    },
                  ),
                )
            ),
          ) : null,
        );
      },
    );
  }
}


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 Stack(
        children: [
          Container(
            width: 124.w,
            height: 160.h,
            margin: const EdgeInsets.only(right: 10),
            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.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: 40.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Container(
                      padding: EdgeInsets.only(bottom: 5),
                      child: Text(
                        "¥",
                        style: TextStyle(
                            fontSize: 16.w,
                            color: Color(0xFF7562F9),
                            fontWeight: FontWeight.bold
                        ),
                      ),
                    ),
                    const SizedBox(width: 2),
                    Text(
                      "${widget.item.unitSellingPrice}",
                      style: TextStyle(
                          fontSize: 26.w,
                          color: Color(0xFF7562F9),
                          fontWeight: FontWeight.bold
                      ),
                    ),
                  ],
                ),
                TDText("￥${widget.item.unitOriginalPrice}", isTextThrough: true, style: TextStyle(color: Color(0xFFCCCCCC)),),
                Spacer(),
                SizedBox(
                  height: 36.h,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      widget.item.validityPeriodDays != null ? Text(
                        "有效期：${widget.item.validityPeriodDays}天",
                        style: TextStyle(
                            fontSize: 14.w,
                            color: Color(0xFF333333),
                            fontWeight: FontWeight.bold
                        ),
                      ) : Text('+${widget.item.liveDurationHours ?? '10'}小时视频相亲',
                        style: TextStyle(
                            fontSize: 12.w,
                            color: Color(0xFF999999),
                            fontWeight: FontWeight.bold
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          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(widget.item.productTitle!.replaceAll('加盟费', ''), style: TextStyle(fontSize: 12, color: Colors.white)),
              ),
            ),
          )
        ],
      ).onTap((){
        widget.changeActive(widget.index);
      });
  }
}


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位置）
  }
}