import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';

class UserInfoPage extends StatefulWidget {
  final int id;
  const UserInfoPage({super.key, required this.id});

  @override
  State<UserInfoPage> createState() => _UserInfoPageState();
}

class _UserInfoPageState extends State<UserInfoPage> {

  List<String> imgList = [
    "https://fastly.picsum.photos/id/64/800/800.jpg?hmac=NBZ4_-vqzD6p25oCeaW0H5vH-ql9zzei-SqJNeUo1QU",
    "https://fastly.picsum.photos/id/985/800/800.jpg?hmac=DfRt99HFbMJ96DlN-poOhruWYRsexESE94ilLC3g1rU",
    "https://fastly.picsum.photos/id/703/800/800.jpg?hmac=-bRTkPxnsiQ5kCo2tfXj6tFrXMD7YnVx7bQ0STno3Tg"
  ];

  int nowSelect = 0;

  List<String> tagList = [
    "北京", "160cm", "想要甜甜的恋爱", "本科", "朋友圈摄影师", "英雄联盟", "流放之路",
    "CF", "DNA", "堡垒之夜", "SCP"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Image.network(
            imgList[nowSelect],
            width: 750.w,
            height: 769.w,
            fit: BoxFit.cover,
          ),
          SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.only(top: 723.w),
              child: Container(
                height: 1334.h - 723.w,
                width: 750.w,
                padding: EdgeInsets.only(
                  top: 62.w,
                  left: 31.w,
                  right: 48.w
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.vertical(
                    top: Radius.circular(46.w)
                  ),
                  color: Colors.white
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Text(
                              "晨晨子",
                              style: TextStyle(
                                fontSize: 38.w,
                                color: const Color.fromRGBO(51, 51, 51, 1),
                                fontWeight: FontWeight.w600
                              ),
                            ),
                            SizedBox(width: 27.w,),
                            Container(
                              width: 66.w,
                              height: 26.w,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                color: const Color.fromRGBO(255, 237, 255, 1)
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset(
                                    "assets/female.png",
                                    width: 17.w,
                                    height: 17.w,
                                  ),
                                  SizedBox(width: 2.w,),
                                  Text(
                                    "19",
                                    style: TextStyle(
                                      fontSize: 18.w,
                                      color: const Color.fromRGBO(255, 66, 236, 1)
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(width: 6.w,),
                            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)
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(width: 8.w,),
                            Container(
                              width: 87.w,
                              height: 26.w,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                  color: const Color.fromRGBO(246, 237, 255, 1)
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset(
                                    "assets/real_name.png",
                                    width: 16.w,
                                    height: 14.w,
                                  ),
                                  SizedBox(width: 5.w,),
                                  Text(
                                    "实名",
                                    style: TextStyle(
                                        fontSize: 18.w,
                                        color: const Color.fromRGBO(160, 92, 255, 1)
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(width: 8.w,),
                            Container(
                              width: 66.w,
                              height: 26.w,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(26.w)),
                                  color: const Color.fromRGBO(237, 245, 255, 1)
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset(
                                    "assets/male.png",
                                    width: 17.w,
                                    height: 17.w,
                                  ),
                                  SizedBox(width: 2.w,),
                                  Text(
                                    "19",
                                    style: TextStyle(
                                        fontSize: 18.w,
                                        color: const Color.fromRGBO(120, 140, 255, 1)
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                        Container(
                          width: 127.w,
                          height: 54.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(54.w)),
                            color: const Color.fromRGBO(117, 98, 249, .1)
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                "assets/player.png",
                                width: 31.w,
                                height: 31.w,
                              ),
                              SizedBox(width: 8.w,),
                              Image.asset(
                                "assets/voice.png",
                                width: 31.w,
                                height: 27.w,
                              ),
                              SizedBox(width: 8.w,),
                              Text(
                                "6'",
                                style: TextStyle(
                                  fontSize: 23.w,
                                  color: const Color.fromRGBO(117, 98, 249, 1)
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 16.w,),
                    Text(
                      "父母催婚找个结婚的",
                      style: TextStyle(
                        fontSize: 23.w,
                        color: const Color.fromRGBO(144, 144, 144, 1)
                      ),
                    ),
                    SizedBox(height: 23.w,),
                    Wrap(
                      spacing: 15.w,
                      runSpacing: 15.w,
                      children: [
                        ...tagList.map((e){
                          return TagItem(label: e);
                        }),
                      ],
                    ),
                    SizedBox(height: 33.w,),
                    Text(
                      "IP属地：广东",
                      style: TextStyle(
                        fontSize: 18.w,
                        color: const Color.fromRGBO(144, 144, 144, 1)
                      ),
                    ),
                    Text(
                      "动我ID：16099665",
                      style: TextStyle(
                          fontSize: 18.w,
                          color: const Color.fromRGBO(144, 144, 144, 1)
                      ),
                    ),
                    Spacer(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: 493.w,
                          height: 76.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(76.w)),
                            color: const Color.fromRGBO(51, 51, 51, 1)
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Image.asset(
                                "assets/chat_btn.png",
                                width: 26.w,
                                height: 24.w,
                              ),
                              SizedBox(width: 8.w,),
                              Text(
                                "发消息",
                                style: TextStyle(
                                  fontSize: 31.w,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          width: 162.w,
                          height: 76.w,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(76.w)),
                              color: const Color.fromRGBO(117, 98, 249, 1)
                          ),
                          child: Center(
                             child: Text(
                               "关注",
                               style: TextStyle(
                                   fontSize: 31.w,
                                   color: Colors.white,
                                   fontWeight: FontWeight.w500
                               ),
                             ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            left: 0,
            top: MediaQuery.of(context).padding.top + 23,

            child: Container(
              width: 750.w,
              padding: EdgeInsets.symmetric(horizontal: 38.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  InkWell(
                    onTap: (){
                      context.pop();
                    },
                    child: Container(
                      width: 62.w,
                      height: 62.w,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(62.w)),
                          color: const Color.fromRGBO(51, 51, 51, .5)
                      ),
                      child: Center(
                        child: Icon(
                          Icons.keyboard_arrow_left,
                          size: 46.w,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                  PopupMenuButton<String>(
                    tooltip: "",
                    padding: EdgeInsets.zero,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
                    color: Colors.white,
                    elevation: 8,
                    offset: Offset(0, 64.w), // 相对按钮下移一点
                    itemBuilder: (context) => [
                      const PopupMenuItem(value: 'report', child: Text('举报')),
                      const PopupMenuItem(value: 'block',  child: Text('拉黑')),
                    ],
                    onSelected: (v) {
                      if (v == 'report') {
                        print("举报");
                      }
                      if (v == 'block')  {
                        print("拉黑");
                      }
                    },
                    child: Container(
                      width: 62.w,
                      height: 62.w,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(62.w)),
                          color: const Color.fromRGBO(51, 51, 51, .5)
                      ),
                      child: Center(
                        child: Icon(
                          Icons.keyboard_control,
                          size: 46.w,
                          color: Colors.white,
                        ),
                      ),
                    ), // 你的小圆按钮
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            left: 31.w,
            top: 627.w,
            child: Row(
              children: [
                ...imgList.asMap().entries.map((entry){
                  return Container(
                    margin: EdgeInsets.only(right: 15.w),
                    child: InkWell(
                      onTap: (){
                        nowSelect = entry.key;
                        setState(() {

                        });
                      },
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(15.w)),
                        child: Container(
                          width: 81.w,
                          height: 81.w,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(15.w)),
                              border: nowSelect == entry.key ? Border.all(width: 2.w, color: Colors.white) : null
                          ),
                          child: Center(
                            child: Image.network(
                              entry.value,
                              width: 77.w,
                              height: 77.w,
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                }),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class TagItem extends StatelessWidget {
  final String label;
  const TagItem({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(
        vertical: 4.w,
        horizontal: 12.w
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(27.w)),
        color: const Color.fromRGBO(245, 247, 255, 1)
      ),
      child: Text(
        label,
        style: TextStyle(
            fontSize: 23.w,
            color: const Color.fromRGBO(51, 51, 51, 1)
        ),
      ),
    );
  }
}