import 'package:dating_touchme_app/components/home_appbar.dart';
import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/config/app_config.dart';
import 'package:dating_touchme_app/http/api.dart';
import 'package:dating_touchme_app/model/user_data.dart';
import 'package:dating_touchme_app/provide/user_info.dart';
import 'package:dating_touchme_app/router/route_paths.dart';
import 'package:dating_touchme_app/utils/global_modal.dart';
import 'package:dating_touchme_app/utils/storage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

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

  @override
  State<IndexPage> createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {


  UserData? user;

  final TextEditingController _numController = TextEditingController();

  int num = 0;

  List<Map> userList = [
    {"isOnline": true, "isLive": false, "hasPic": false},
    {"isOnline": true, "isLive": false, "hasPic": true},
    {"isOnline": false, "isLive": false, "hasPic": false},
    {"isOnline": true, "isLive": true, "hasPic": false},
    {"isOnline": true, "isLive": false, "hasPic": true},
    {"isOnline": true, "isLive": false, "hasPic": false},
    {"isOnline": true, "isLive": false, "hasPic": false},
    {"isOnline": true, "isLive": false, "hasPic": false},
    {"isOnline": true, "isLive": false, "hasPic": false},
  ];

  List<String> topNav = ["推荐", "同城"];

  @override
  void initState() {
    super.initState();


    const env = String.fromEnvironment('ENV', defaultValue: 'dev');
    final config = AppConfig.fromEnv(env);

    print(config.baseUrl);
  }


  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }


  void changeNav(int active) {
    print("当前项: $active");
  }

  @override
  Widget build(BuildContext context) {
    final userInfo = Provider.of<UserInfo>(context);
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25.w),
      constraints: BoxConstraints(minHeight: ScreenUtil().setHeight(1220)),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Color.fromRGBO(248, 242, 255, 1.0), // rgba(248, 242, 255, 1)
            Color.fromRGBO(247, 247, 247, 1.0), // rgba(247, 247, 247, 1)
          ],
          stops: [0.0, 1.0],
        ),
      ),
      child: Column(
        children: [
          HomeAppbar(topNav: topNav, changeNav: changeNav,),
          ...userList.map((e){
            return UserItem(item: e);
          }),
        ],
      ),
    );
  }
}


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

  @override
  State<UserItem> createState() => _UserItemState();
}

class _UserItemState extends State<UserItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 34.w, horizontal: 22.w),
      margin: EdgeInsets.only(bottom: 20.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(18.w)),
        color: Colors.white
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Container(
                width: 116.w,
                height: 116.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(116.w)),
                  border: Border.all(width: 1, color: widget.item["isOnline"] && widget.item["isLive"] ? const Color.fromRGBO(192, 86, 233, 1) : Colors.transparent)
                ),
                child: Image.asset(
                  "assets/user_avatar.png",
                  width: 116.w,
                ),
              ),
              if(widget.item["isOnline"] && !widget.item["isLive"]) Positioned(
                right: 0,
                bottom: 0,
                child: Container(
                  width: 22.w,
                  height: 22.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(22.w)),
                    color: const Color.fromRGBO(43, 255, 132, 1)
                  ),
                ),
              ),
              if(widget.item["isOnline"] && widget.item["isLive"]) Positioned(
                bottom: 0,
                left: 23.w,
                child: Container(
                  width: 70.w,
                  height: 28.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(28.w)),
                    gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        Color.fromRGBO(197, 85, 232, 1.0), // rgba(197, 85, 232, 1)
                        Color.fromRGBO(142, 99, 250, 1.0), // rgba(142, 99, 250, 1)
                      ],
                      stops: [0.0, 1.0],
                    ),
                  ),
                  child: Center(
                    child: Text(
                      "直播中",
                      style: TextStyle(
                          fontSize: 16.w,
                          color: Colors.white
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
          SizedBox(width: 27.w,),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(
                width: 508.w,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Text(
                          "林园园",
                          style: TextStyle(
                              fontSize: 30.w,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w500
                          ),
                        ),
                        SizedBox(width: 17.w,),
                        if(widget.item["isOnline"] && !widget.item["isLive"]) Container(
                          width: 66.w,
                          height: 26.w,
                          margin: EdgeInsets.only(right: 5.w),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(26.w)),
                              color: const Color.fromRGBO(234, 255, 219, 1)
                          ),
                          child: Center(
                            child: Text(
                              "在线",
                              style: TextStyle(
                                  fontSize: 18.w,
                                  color: const Color.fromRGBO(38, 199, 124, 1)
                              ),
                            ),
                          ),
                        ),
                        Container(
                          width: 87.w,
                          height: 26.w,
                          margin: EdgeInsets.only(right: 11.w),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(26.w)),
                              color: const Color.fromRGBO(246, 237, 255, 1)
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Image.asset(
                                "assets/real_name.png",
                                width: 16.w,
                              ),
                              SizedBox(width: 5.w,),
                              Text(
                                "实名",
                                style: TextStyle(
                                    fontSize: 18.w,
                                    color: const Color.fromRGBO(160, 92, 255, 1)
                                ),
                              )
                            ],
                          ),
                        ),
                        if(widget.item["isOnline"] && widget.item["isLive"]) Container(
                          width: 120.w,
                          height: 26.w,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(26.w)),
                              color: const Color.fromRGBO(234, 255, 219, 1)
                          ),
                          child: Center(
                            child: Text(
                              "视频相亲中",
                              style: TextStyle(
                                  fontSize: 18.w,
                                  color: const Color.fromRGBO(38, 199, 124, 1)
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                    if(widget.item["isOnline"] && !widget.item["isLive"]) Container(
                      width: 81.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(8.w)),
                        gradient: LinearGradient(
                          begin: Alignment.centerLeft,   // 对应 90deg，从左到右
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(61, 138, 224, 1.0),  // rgba(61, 138, 224, 1)
                            Color.fromRGBO(131, 89, 254, 1.0),  // rgba(131, 89, 254, 1)
                          ],
                          stops: [0.0, 1.0],
                        ),
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(
                            "assets/H.png",
                            height: 22.w,
                          ),
                          SizedBox(width: 4.w,),
                          Image.asset(
                            "assets/i.png",
                            height: 22.w,
                          )
                        ],
                      ),
                    ),
                    if(!widget.item["isOnline"]) Container(
                      width: 81.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(8.w)),
                        gradient: LinearGradient(
                          begin: Alignment.centerLeft,   // 对应 90deg，从左到右
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(61, 138, 224, 1.0),  // rgba(61, 138, 224, 1)
                            Color.fromRGBO(131, 89, 254, 1.0),  // rgba(131, 89, 254, 1)
                          ],
                          stops: [0.0, 1.0],
                        ),
                      ),
                      child: Center(
                        child: Text(
                          "发消息",
                          style: TextStyle(
                            fontSize: 20.w,
                            color: Colors.white
                          ),
                        ),
                      ),
                    ),
                    if(widget.item["isOnline"] && widget.item["isLive"])Container(
                      width: 119.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(8.w)),
                        gradient: LinearGradient(
                          begin: Alignment.centerLeft,   // 对应 90deg，从左到右
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(61, 138, 224, 1.0),  // rgba(61, 138, 224, 1)
                            Color.fromRGBO(131, 89, 254, 1.0),  // rgba(131, 89, 254, 1)
                          ],
                          stops: [0.0, 1.0],
                        ),
                      ),
                      child: Center(
                        child: Text(
                          "进入直播间",
                          style: TextStyle(
                            fontSize: 20.w,
                            color: Colors.white
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 5.w,),
              Text(
                "23岁 · 白云区",
                style: TextStyle(
                  color: const Color.fromRGBO(51, 51, 51, 1),
                  fontSize: 25.w
                ),
              ),
              SizedBox(height: 5.w,),
              SizedBox(
                width: 508.w,
                child: Text(
                  "我想找一个有缘的异性，快来联系我吧快来我想找一个有缘的异性，快来联系我吧快来..........",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: const Color.fromRGBO(51, 51, 51, .6),
                      fontSize: 25.w
                  ),
                ),
              ),
              SizedBox(height: 5.w,),
              if(widget.item["hasPic"]) SizedBox(
                width: 508.w,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.asset(
                      "assets/pic1.png",
                      width: 165.w,
                      height: 165.w,
                    ),
                    Image.asset(
                      "assets/pic2.png",
                      width: 165.w,
                      height: 165.w,
                    ),
                    Image.asset(
                      "assets/pic3.png",
                      width: 165.w,
                      height: 165.w,
                    ),
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}