import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  State<RoseHistoryPage> createState() => _RoseHistoryPageState();
}

class _RoseHistoryPageState extends State<RoseHistoryPage> {



  List<String> friendNavList = ["赠送记录", "收支详情", "聊天券记录"];

  int friendNavActive = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "交易记录"),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(
            vertical: 6.w,
            horizontal: 15.w
          ),
          child: Column(
            children: [
              Row(
                children: [
                  ...friendNavList.asMap().entries.map((entry){
                    return Container(
                      margin: EdgeInsets.only(right: 25.w),
                      child: InkWell(
                        onTap: (){
                          friendNavActive = entry.key;
                          setState(() {

                          });
                        },
                        child: Container(
                          padding: entry.key == friendNavActive ? EdgeInsets.symmetric(vertical: 2.w, horizontal: 26.w) : EdgeInsets.zero,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(21.w)),
                              color: entry.key == friendNavActive ? const Color.fromRGBO(117, 98, 249, 1) : Colors.transparent
                          ),
                          child: Text(
                            entry.value,
                            style: TextStyle(
                                fontSize: 12.w,
                                color: entry.key == friendNavActive ? Colors.white : const Color.fromRGBO(51, 51, 51, .7),
                                fontWeight: entry.key == friendNavActive ? FontWeight.w700 : FontWeight.w500
                            ),
                          ),
                        ),
                      ),
                    );
                  }),

                ],
              ),
              SizedBox(height: 4.w,),
              if(friendNavActive != 2) ...[
                SendItem(),
                SendItem(),
                SendItem(),
                SendItem(),
                SendItem(),
              ],
              if(friendNavActive == 2) ...[
                ChatCouponItem(),
                ChatCouponItem(),
                ChatCouponItem(),
                ChatCouponItem(),
                ChatCouponItem(),
              ],
              SizedBox(height: 6.w,),
              Text(
                "没有更多了",
                style: TextStyle(
                  fontSize: 11.w,
                  color: const Color.fromRGBO(144, 144, 144, 1),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<SendItem> createState() => _SendItemState();
}

class _SendItemState extends State<SendItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 70.w,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 1,
            color: const Color.fromRGBO(219, 219, 219, 1)
          )
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Container(
                width: 40.w,
                height: 40.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(40.w)),
                  color: const Color.fromRGBO(237, 237, 237, 1)
                ),
                child: Center(
                  child: Image.asset(
                    Assets.imagesRoseGift,
                    width: 27.w,
                    height: 27.w,
                  ),
                ),
              ),
              SizedBox(width: 22.w,),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "视频详情直播间送礼物",
                    style: TextStyle(
                      fontSize: 13.w,
                      color: const Color.fromRGBO(51, 51, 51, 1),
                      fontWeight: FontWeight.w500
                    ),
                  ),
                  Text(
                    "2025-11-03  17:55:55",
                    style: TextStyle(
                      fontSize: 11.w,
                      color: const Color.fromRGBO(144, 144, 144, 1),
                    ),
                  )
                ],
              )
            ],
          ),
          Text(
            "-1支",
            style: TextStyle(
              fontSize: 13.w,
              color: const Color.fromRGBO(227, 84, 84, 1)
            ),
          )
        ],
      ),
    );
  }
}

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

  @override
  State<ChatCouponItem> createState() => _ChatCouponItemState();
}

class _ChatCouponItemState extends State<ChatCouponItem> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 70.w,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(40.w)),
                child: Image.asset(
                  Assets.imagesUserAvatar,
                  width: 40.w,
                  height: 40.w ,
                ),
              ),
              SizedBox(width: 12.w ,),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "视频详情直播间送礼物",
                    style: TextStyle(
                      fontSize: 13.w,
                      fontWeight: FontWeight.w500
                    ),
                  ),
                  Text(
                    "2025-11-03  17:55:55",
                    style: TextStyle(
                        fontSize: 11.w,
                      color: const Color.fromRGBO(144, 144, 144, 1)
                    ),
                  ),
                ],
              )
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "主动发消息",
                style: TextStyle(
                  fontSize: 13.w,
                  color: const Color.fromRGBO(144, 144, 144, 1)
                ),
              ),
              Text(
                "-1张",
                style: TextStyle(
                    fontSize: 13.w,
                    color: const Color.fromRGBO(227, 84, 84, 1)
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}