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/pages/mine/help_info_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';

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

  @override
  State<UserHelpCenterPage> createState() => _UserHelpCenterPageState();
}

class _UserHelpCenterPageState extends State<UserHelpCenterPage> {

  String search = '';
  final TextEditingController searchController = TextEditingController();

  List<String> navList = [
    "推荐", "投诉举报", "账号问题", "充值提现", "产品功能"
  ];

  int actionNav = 0;

  List<Map> serviceList = [
    {"icon": Assets.imagesRealnameHelp, "label": "实名认证"},
    {"icon": Assets.imagesPhoneHelp, "label": "手机绑定"},
  ];

  List<String> questionList = [
    "充值了会员为什么无法畅聊",
    "私聊/语音/视频聊天收费标准是什么",
    "如何交换联系方式",
    "如何取消VIP自动续费",
    "账号注销问题"
  ];

  changeNav(int i){
    actionNav = i;
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          child: Container(
            width: 375.w,
            height: 821.h,
            color: Colors.white,
          ),
        ),
        Positioned(
          left: -175.w,
          top: -200.w,
          child: Image.asset(
            Assets.imagesHelpBg,
            width: 750.w,
            fit: BoxFit.cover,
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: PageAppbar(title: "用户帮助中心", backgroundColor: Colors.transparent,),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                    left: 11.w,
                    right: 20.w
                  ),
                  margin: EdgeInsets.only(
                    bottom: 10.w
                  ),
                  child: Container(
                    height: 45.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(9.w)),
                      color: Colors.white
                    ),
                    child: TextField(
                      controller: searchController,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                          fontSize: ScreenUtil().setWidth(13),
                          height: 1
                      ),
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.symmetric(
                            vertical: 0,
                            horizontal: 0.w
                        ),

                        prefixIcon: Icon(
                            Icons.search,
                          size: 18.w,
                          color: const Color.fromRGBO(51, 51, 51, 1),
                        ),

                        hintText: "请输入要查询的内容",

                        hintStyle: TextStyle(
                            color: const Color.fromRGBO(191, 191, 191, 1)

                        ),

                        border: const OutlineInputBorder(
                          borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                        ),
                        // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                        focusedBorder: const OutlineInputBorder(
                          borderSide: BorderSide.none,
                          borderRadius: BorderRadius.all(Radius.circular(8.0)),
                        ),
                        enabledBorder: const OutlineInputBorder(
                          borderSide: BorderSide.none,
                          borderRadius: BorderRadius.all(Radius.circular(8.0)),
                        ),
                      ),
                      onChanged: (value){
                        search = value;
                        setState(() {

                        });
                      },
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                      left: 11.w,
                      right: 17.w
                  ),
                  margin: EdgeInsets.only(
                    bottom: 9.w
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ...navList.asMap().entries.map((entry){
                        return NavItem(index: entry.key, action: actionNav, label: entry.value, cb: changeNav);
                      }),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(
                    vertical: 15.w,
                    horizontal: 10.w
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(9.w)
                    )
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text(
                            "自助服务",
                            style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.w500
                            ),
                          )
                        ],
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 15.w
                        ),
                        margin: EdgeInsets.only(
                          top: 17.w,
                          bottom: 30.w
                        ),
                        child: Row(
                          children: [
                            ...serviceList.map((e){
                              return ServiceItem(icon: e["icon"], label: e["label"]);
                            })
                          ],
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "常见问题",
                            style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.w500
                            ),
                          ),
                          Row(
                            children: [
                              Text(
                                "查看更多",
                                style: TextStyle(
                                  fontSize: 11.w,
                                  color: const Color.fromRGBO(144, 144, 144, 1),
                                  fontWeight: FontWeight.w500
                                ),
                              ),
                              SizedBox(width: 10.w,),
                              Icon(
                                Icons.keyboard_arrow_right,
                                size: 20.w,
                                color: const Color.fromRGBO(191, 191, 191, 1),
                              )
                            ],
                          )
                        ],
                      ),
                      SizedBox(
                        height: 16.w,
                      ),
                      Container(
                        padding: EdgeInsets.only(
                          top: 20.w,
                          right: 10.w,
                          left: 17.w
                        ),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(9.w)),
                          color: const Color.fromRGBO(250, 250, 250, 1)
                        ),
                        child: Column(
                          children: [
                            ...questionList.asMap().entries.map((entry){
                              return QuestionItem(index: entry.key, label: entry.value).onTap((){
                                Get.to(() => HelpInfoPage());
                              });
                            }),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          bottomNavigationBar:
          SafeArea(
            child: SizedBox(
              height: 40.h,
              child: Row(
                children: [
                  Expanded(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          Assets.imagesEdit,
                          width: 15.w,
                        ),
                        SizedBox(width: 8.w,),
                        Text(
                          "意见反馈",
                          style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    width: 1,
                    height: 20.w,
                    color: const Color.fromRGBO(230, 230, 230, 1),
                  ),
                  Expanded(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          Assets.imagesCustomer,
                          width: 20.w,
                          height: 20.w,
                        ),
                        SizedBox(width: 4.w,),
                        Text(
                          "联系客服",
                          style: TextStyle(
                              fontSize: 16.w,
                              fontWeight: FontWeight.w500
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}

class NavItem extends StatefulWidget {
  final int index;
  final int action;
  final String label;
  final void Function(int) cb;
  const NavItem({super.key,
    required this.index,
    required this.action,
    required this.label,
    required this.cb,
  });

  @override
  State<NavItem> createState() => _NavItemState();
}

class _NavItemState extends State<NavItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(
        vertical: 2.w,
        horizontal: 10.w
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(4.w)),
        color: widget.index == widget.action ? Colors.white : const Color.fromRGBO(245, 245, 245, 1)
      ),
      child: Center(
        child: Text(
          widget.label,
          style: TextStyle(
            fontSize: 13.w,
            color: widget.index == widget.action ? const Color.fromRGBO(51, 51, 51, 1) : const Color.fromRGBO(144, 144, 144, 1),
            fontWeight: widget.index == widget.action ? FontWeight.w500 : FontWeight.w400
          ),
        ),
      ),
    ).onTap((){
      widget.cb(widget.index);
    });
  }
}

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

  @override
  State<ServiceItem> createState() => _ServiceItemState();
}

class _ServiceItemState extends State<ServiceItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        right: 22.w
      ),
      child: Column(
        children: [
          Container(
            width: 64.w,
            height: 64.w,
            margin: EdgeInsets.only(bottom: 5.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(64.w)),
              color: const Color.fromRGBO(245, 245, 245, 1)
            ),
            child: Center(
              child: Image.asset(
                widget.icon,
                width: 44.w,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Text(
            widget.label,
            style: TextStyle(
              fontSize: 13.w,
              fontWeight: FontWeight.w500
            ),
          )
        ],
      ),
    );
  }
}

class QuestionItem extends StatefulWidget {
  final int index;
  final String label;
  const QuestionItem({super.key, required this.index, required this.label});

  @override
  State<QuestionItem> createState() => _QuestionItemState();
}

class _QuestionItemState extends State<QuestionItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        bottom: 20.w
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          RichText(
            text: TextSpan(
                style: TextStyle(
                    fontSize: 13.w,
                    fontWeight: FontWeight.w500
                ),
                children: [
                  TextSpan(
                      text: "${widget.index + 1}.  ",
                      style: TextStyle(
                          color: const Color.fromRGBO(248, 85, 66, 1)
                      )
                  ),
                  TextSpan(
                      text: "${widget.label}",
                      style: TextStyle(
                          color: const Color.fromRGBO(51, 51, 51, 1)
                      )
                  ),
                ]
            ),
          ),
          Icon(
            Icons.play_arrow,
            size: 15.w,
            color: const Color.fromRGBO(204, 204, 204, 1),
          )
        ],
      ),
    );
  }
}