import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:aslan/app_localizations.dart';
import 'package:aslan/chatvibe_ui/components/at_compontent.dart';
import 'package:aslan/chatvibe_ui/components/text/at_text.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:aslan/chatvibe_core/constants/at_screen.dart';
import 'package:aslan/chatvibe_data/sources/repositories/room_repository_imp.dart';
import 'package:aslan/chatvibe_domain/models/res/room_res.dart';
import 'package:aslan/main.dart';
import 'package:aslan/chatvibe_managers/app_general_manager.dart';
import 'package:aslan/chatvibe_managers/room_manager.dart';
import 'package:aslan/chatvibe_managers/rtc_manager.dart';
import 'package:aslan/chatvibe_ui/widgets/country/at_country_flag_image.dart';
import 'package:aslan/chatvibe_ui/widgets/room/recommend_banner_view.dart';

import '../../../../chatvibe_data/models/enum/at_vip_type.dart';

///推荐房间
class RoomRecommendPage extends StatefulWidget {
  @override
  _RoomRecommendPageState createState() => _RoomRecommendPageState();
}

class _RoomRecommendPageState extends State<RoomRecommendPage> with RouteAware {
  final RefreshController _refreshController = RefreshController(
    initialRefresh: false,
  );
  ChatVibeRoomManager? roomProvider;

  // Timer? timer;
  List<ChatVibeRoomRes> _items = [];
  bool _isLoading = true; // 添加加载状态
  @override
  void initState() {
    super.initState();
    roomProvider = Provider.of<ChatVibeRoomManager>(context, listen: false);
    loadData();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 注册路由观察
    final route = ModalRoute.of(context);
    if (route is PageRoute) {
      routeObserver.subscribe(this, route);
    }
  }

  @override
  void didPush() {
    // 路由被推入时调用
    _updateVisibility(true);
  }

  @override
  void didPopNext() {
    // 当从下一个页面返回时调用
    _updateVisibility(true);
  }

  @override
  void didPushNext() {
    // 当推入下一个页面时调用
    _updateVisibility(false);
  }

  @override
  void didPop() {
    // 路由弹出时调用
    _updateVisibility(false);
  }

  void _updateVisibility(bool isVisible) {
    // if (isVisible) {
    //   ///在可见状态需要定时刷新请求数据
    //   timer?.cancel();
    //   timer = Timer.periodic(Duration(seconds: 5), (ti) {
    //     loadData();
    //   });
    // } else {
    //   timer?.cancel();
    // }
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    // timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 8.w),
        child: SmartRefresher(
          enablePullDown: true,
          enablePullUp: false,
          controller: _refreshController,
          onRefresh: () {
            loadData();
          },
          onLoading: () {},
          child: _buildContent(),
        ),
      ),
    );
  }

  Widget _buildContent() {
    // 如果正在加载，显示骨架屏
    if (_isLoading) {
      return _buildCustomSkeleton();
    }

    // 加载完成但没有数据，显示空状态
    if (_items.isEmpty) {
      return empty();
    }

    // 有数据时显示正常内容
    return StaggeredGrid.count(
      crossAxisCount: 2,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      children: _buidChildren(),
    );
  }

  // 自定义骨架屏
  Widget _buildCustomSkeleton() {
    // 创建模拟数据用于骨架屏
    final mockItems = List.generate(
      6,
      (index) => ChatVibeRoomRes(id: "skeleton_$index"),
    );

    return StaggeredGrid.count(
      crossAxisCount: 2,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      children:
          mockItems.map((item) {
            return StaggeredGridTile.count(
              crossAxisCellCount: 1,
              mainAxisCellCount: 1,
              child: _buildCustomSkeletonItem(item),
            );
          }).toList(),
    );
  }

  // 完全自定义骨架屏项目
  Widget _buildCustomSkeletonItem(ChatVibeRoomRes roomRes) {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12.w),
        color: Colors.transparent,
      ),
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          // 自定义加载图标
          Container(
            width: 200.w,
            height: 200.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12.w),
            ),
            child: Image.asset(
              "atu_images/general/at_icon_loading.webp",
              width: 200.w,
              height: 200.w,
              fit: BoxFit.cover,
            ),
          ),

          // 底部信息骨架
          Container(
            padding: EdgeInsets.symmetric(vertical: 5.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(12.w),
                bottomRight: Radius.circular(12.w),
              ),
              color: Colors.black38,
            ),
            child: Row(
              children: [
                SizedBox(width: 10.w),
                // 国旗骨架
                Container(
                  width: 20.w,
                  height: 13.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2.w),
                    color: Colors.grey[400],
                  ),
                ),
                SizedBox(width: 5.w),
                Expanded(
                  child: Container(
                    height: 21.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4.w),
                      color: Colors.grey[400],
                    ),
                    margin: EdgeInsets.symmetric(vertical: 2.w),
                  ),
                ),
                SizedBox(width: 5.w),
                // 在线用户图标骨架
                Container(
                  width: 14.w,
                  height: 14.w,
                  decoration: BoxDecoration(
                    color: Colors.grey[400],
                    shape: BoxShape.circle,
                  ),
                ),
                SizedBox(width: 3.w),
                // 在线人数骨架
                Container(
                  width: 20.w,
                  height: 12.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2.w),
                    color: Colors.grey[400],
                  ),
                ),
                SizedBox(width: 10.w),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 原有的 buildItem 方法保持不变
  Widget buildItem(ChatVibeRoomRes roomRes) {
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.w),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12.w),
          color: Colors.transparent,
        ),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            netImage(
              url: roomRes.roomCover ?? "",
              borderRadius: BorderRadius.circular(12.w),
              width: 200.w,
              height: 200.w,
            ),
            if (roomRes.extValues?.rocketLevel != null)
              PositionedDirectional(
                end: 5.w,
                bottom: 35.w,
                child: Image.asset(
                  "atu_images/room/at_icon_room_rocket_lv${roomRes.extValues?.rocketLevel}.png",
                  width: 20.w,
                ),
              ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(12.w),
                  bottomRight: Radius.circular(12.w),
                ),
                color: Colors.black38,
              ),
              child: Row(
                children: [
                  SizedBox(width: 10.w),
                  ATCountryFlagImage(
                    countryName: roomRes.countryName,
                    width: 20.w,
                    height: 13.w,
                    borderRadius: BorderRadius.circular(2.w),
                  ),
                  SizedBox(width: 5.w),
                  Expanded(
                    child: SizedBox(
                      height: 21.w,
                      child: text(
                        roomRes.roomName ?? "",
                        fontSize: 15.sp,
                        textColor: Color(0xffffffff),
                        fontWeight: FontWeight.w400,
                      ),
                      // (roomRes.roomName?.length ?? 0) > 10
                      //     ? Marquee(
                      //       text: roomRes.roomName ?? "",
                      //       style: TextStyle(
                      //         fontSize: 15.sp,
                      //         color: Color(0xffffffff),
                      //         fontWeight: FontWeight.w400,
                      //         decoration: TextDecoration.none,
                      //       ),
                      //       scrollAxis: Axis.horizontal,
                      //       crossAxisAlignment: CrossAxisAlignment.start,
                      //       blankSpace: 20.0,
                      //       velocity: 40.0,
                      //       pauseAfterRound: Duration(seconds: 1),
                      //       accelerationDuration: Duration(seconds: 1),
                      //       accelerationCurve: Curves.easeOut,
                      //       decelerationDuration: Duration(
                      //         milliseconds: 500,
                      //       ),
                      //       decelerationCurve: Curves.easeOut,
                      //     )
                      //     : Text(
                      //       roomRes.roomName ?? "",
                      //       maxLines: 1,
                      //       overflow: TextOverflow.ellipsis,
                      //       style: TextStyle(
                      //         fontSize: 15.sp,
                      //         color: Color(0xffffffff),
                      //         fontWeight: FontWeight.w400,
                      //         decoration: TextDecoration.none,
                      //       ),
                      //     ),
                    ),
                  ),
                  SizedBox(width: 5.w),
                  (roomRes.extValues?.roomSetting?.password?.isEmpty ?? false)
                      ? Image.asset(
                        "atu_images/general/at_icon_online_user.gif",
                        width: 14.w,
                        height: 14.w,
                      )
                      : Image.asset(
                        "atu_images/index/at_icon_room_suo.png",
                        width: 20.w,
                        height: 20.w,
                      ),
                  (roomRes.extValues?.roomSetting?.password?.isEmpty ?? false)
                      ? SizedBox(width: 3.w)
                      : Container(height: 10.w),
                  (roomRes.extValues?.roomSetting?.password?.isEmpty ?? false)
                      ? text(
                        roomRes.extValues?.memberQuantity ?? "0",
                        fontSize: 12.sp,
                      )
                      : Container(height: 10.w),
                  SizedBox(width: 10.w),
                ],
              ),
            ),
            getRoomCoverHeaddress(roomRes).isNotEmpty
                ? Transform.translate(
                  offset: Offset(0, -5.w),
                  child: Transform.scale(
                    scaleX: 1.1,
                    scaleY: 1.12,
                    child: Image.asset(getRoomCoverHeaddress(roomRes)),
                  ),
                )
                : Container(),
            (roomRes.roomGameIcon?.isNotEmpty ?? false)
                ? PositionedDirectional(
                  child: netImage(
                    url: roomRes.roomGameIcon ?? "",
                    width: 25.w,
                    height: 25.w,
                    borderRadius: BorderRadius.circular(4.w),
                  ),
                  top: 8.w,
                  end: 8.w,
                )
                : Container(),
          ],
        ),
      ),
      onTap: () {
        Provider.of<RtcProvider>(
          context,
          listen: false,
        ).joinRoom(context, roomRes.id ?? "");
      },
    );
  }

  empty() {
    List<Widget> list = [];
    list.add(SizedBox(height: height(30)));
    list.add(Image.asset('atu_images/general/at_icon_loading.png'));
    list.add(SizedBox(height: height(15)));
    list.add(
      Text(
        ATAppLocalizations.of(context)!.noData,
        style: TextStyle(
          fontSize: sp(14),
          color: Color(0xff999999),
          fontWeight: FontWeight.w400,
          decoration: TextDecoration.none,
          height: 1,
        ),
      ),
    );
    return Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: list,
    );
  }

  String getRoomCoverHeaddress(ChatVibeRoomRes roomRes) {
    var vip = roomRes.userProfile?.getVIP();
    if (vip?.name == ATVIPType.DUKE.name) {
      return "atu_images/vip/at_icon_vip4_room_cover_headdress.png";
    } else if (vip?.name == ATVIPType.KING.name) {
      return "atu_images/vip/at_icon_vip5_room_cover_headdress.png";
    } else if (vip?.name == ATVIPType.EMPEROR.name) {
      return "atu_images/vip/at_icon_vip6_room_cover_headdress.png";
    }
    return "";
  }

  ///加载数据
  loadData() async {
    Provider.of<AppGeneralManager>(context, listen: false).loadMainBanner();
    Provider.of<AppGeneralManager>(context, listen: false).appLeaderboard();
    try {
      _items = await ChatRoomRepository().discovery();
      if (_items.length < 4) {
        _items.add(ChatVibeRoomRes(id: "-10089"));
      } else {
        _items.insert(4, ChatVibeRoomRes(id: "-10089"));
      }
      _refreshController.refreshCompleted();
      _refreshController.loadComplete();
    } catch (e) {
      _refreshController.loadNoData();
      _refreshController.refreshCompleted();
    } finally {
      // 无论成功失败，都隐藏骨架屏
      setState(() {
        _isLoading = false;
      });
    }
  }

  List<Widget> _buidChildren() {
    List<Widget> ws = [];
    for (var item in _items) {
      if (item.id == "-10089") {
        Provider.of<AppGeneralManager>(
              context,
              listen: false,
            ).roomBanners.isNotEmpty
            ? ws.add(
              StaggeredGridTile.count(
                crossAxisCellCount: 2,
                mainAxisCellCount: 0.75,
                child: RecommendBannerView(),
              ),
            )
            : Container();
      } else {
        ws.add(
          StaggeredGridTile.count(
            crossAxisCellCount: 1,
            mainAxisCellCount: 1,
            child: buildItem(item),
          ),
        );
      }
    }
    return ws;
  }
}