import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:aslan/app_localizations.dart';
import 'package:aslan/chatvibe_ui/components/at_compontent.dart';
import 'package:aslan/chatvibe_features/home/popular/follow/room_follow_page.dart';
import 'package:aslan/chatvibe_features/home/popular/history/room_history_page.dart';
import 'package:aslan/chatvibe_features/home/popular/remmmd/room_recommend_page.dart';
import 'package:provider/provider.dart';
import 'package:aslan/chatvibe_core/constants/at_global_config.dart';
import 'package:aslan/chatvibe_core/routes/at_fluro_navigator.dart';
import 'package:aslan/chatvibe_managers/app_general_manager.dart';
import 'package:aslan/chatvibe_domain/models/res/at_banner_leaderboard_res.dart';
import 'package:aslan/chatvibe_ui/widgets/room/seamless_auto_scroll.dart';
import 'package:aslan/chatvibe_features/index/main_route.dart';

class HomePopularPage extends StatefulWidget {
  @override
  _HomePopularPageState createState() => _HomePopularPageState();
}

class _HomePopularPageState extends State<HomePopularPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<Widget> _pages = [
    RoomRecommendPage(),
    RoomFollowPage(),
    RoomHistoryPage(),
  ];
  final List<Widget> _tabs = [];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _pages.length, vsync: this);
    Provider.of<AppGeneralManager>(context, listen: false).loadMainBanner();
    Provider.of<AppGeneralManager>(context, listen: false).appLeaderboard();
    _tabController.addListener(() {}); // 监听切换
  }

  @override
  void dispose() {
    _tabController.dispose(); // 释放资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _tabs.clear();
    _tabs.add(Tab(text: ATAppLocalizations.of(context)!.recommend));
    _tabs.add(Tab(text: ATAppLocalizations.of(context)!.follow));
    _tabs.add(Tab(text: ATAppLocalizations.of(context)!.history));
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: Column(
        children: [
          Container(
            margin: EdgeInsets.only(left: 15.w, right: 15.w, top: 5.w),
            child: Selector<AppGeneralManager, ATBannerLeaderboardRes?>(
              selector: (_, provider) => provider.appLeaderResult,
              builder: (context, appLeaderResult, child) {
                return _banner(appLeaderResult);
              },
            ),
          ),
          Row(
            children: [
              SizedBox(width: 5.w),
              TabBar(
                tabAlignment: TabAlignment.start,
                labelPadding: EdgeInsets.symmetric(horizontal: 12.w),
                labelColor: Colors.black87,
                isScrollable: true,
                indicator: BoxDecoration(),
                unselectedLabelColor: Colors.black38,
                labelStyle: TextStyle(
                  fontSize: 15.sp,
                  fontWeight: FontWeight.w600,
                ),
                unselectedLabelStyle: TextStyle(
                  fontSize: 13.sp,
                  fontWeight: FontWeight.w500,
                ),
                indicatorColor: Colors.transparent,
                dividerColor: Colors.transparent,
                controller: _tabController,
                tabs: _tabs,
              ),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              physics: NeverScrollableScrollPhysics(),
              children: _pages,
            ),
          ),
        ],
      ),
    );
  }

  _banner(ATBannerLeaderboardRes? appLeaderResult) {
    String avatarAt(List<LeaderboardUser>? users, int index) {
      if (users == null || users.length <= index) return "";
      return users[index].avatar ?? "";
    }

    final roomGiftWeekly = appLeaderResult?.roomGiftsLeaderboard?.weekly;
    final wealthWeekly = appLeaderResult?.giftsSendLeaderboard?.weekly;
    final charmWeekly = appLeaderResult?.giftsReceivedLeaderboard?.weekly;

    final roomGiftOneAvatar = avatarAt(roomGiftWeekly, 0);
    final roomGiftTwoAvatar = avatarAt(roomGiftWeekly, 1);
    final roomGiftThreeAvatar = avatarAt(roomGiftWeekly, 2);
    final wealthOneAvatar = avatarAt(wealthWeekly, 0);
    final wealthTwoAvatar = avatarAt(wealthWeekly, 1);
    final wealthThreeAvatar = avatarAt(wealthWeekly, 2);
    final charmOneAvatar = avatarAt(charmWeekly, 0);
    final charmTwoAvatar = avatarAt(charmWeekly, 1);
    final charmThreeAvatar = avatarAt(charmWeekly, 2);

    return SeamlessAutoScroll(
      items: [
        GestureDetector(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  ATGlobalConfig.businessLogicStrategy
                      .getPopularLeaderboardBackgroundImage('room'),
                ),
                fit: BoxFit.contain,
              ),
            ),
            child: Stack(
              alignment: AlignmentDirectional.topCenter,
              children: [
                Positioned(
                  left: 38.w,
                  top: 25.w,
                  child: head(url: roomGiftTwoAvatar, width: 53.w),
                ),
                Positioned(
                  top: 15.w,
                  child: head(url: roomGiftOneAvatar, width: 55.w),
                ),
                Positioned(
                  right: 38.w,
                  top: 25.w,
                  child: head(url: roomGiftThreeAvatar, width: 53.w),
                ),
              ],
            ),
          ),
          onTap: () {
            ATNavigatorUtils.push(
              context,
              "${MainRoute.webViewPage}?url=${Uri.encodeComponent(ATGlobalConfig.roomRankUrl)}&showTitle=false",
              replace: false,
            );
          },
        ),
        GestureDetector(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  ATGlobalConfig.businessLogicStrategy
                      .getPopularLeaderboardBackgroundImage('wealth'),
                ),
                fit: BoxFit.contain,
              ),
            ),
            child: Stack(
              alignment: AlignmentDirectional.topCenter,
              children: [
                Positioned(
                  left: 38.w,
                  top: 25.w,
                  child: head(url: wealthTwoAvatar, width: 53.w),
                ),
                Positioned(
                  top: 15.w,
                  child: head(url: wealthOneAvatar, width: 55.w),
                ),
                Positioned(
                  right: 38.w,
                  top: 25.w,
                  child: head(url: wealthThreeAvatar, width: 53.w),
                ),
              ],
            ),
          ),
          onTap: () {
            ATNavigatorUtils.push(
              context,
              "${MainRoute.webViewPage}?url=${Uri.encodeComponent(ATGlobalConfig.wealthRankUrl)}&showTitle=false",
              replace: false,
            );
          },
        ),
        GestureDetector(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  ATGlobalConfig.businessLogicStrategy
                      .getPopularLeaderboardBackgroundImage('charm'),
                ),
                fit: BoxFit.contain,
              ),
            ),
            child: Stack(
              alignment: AlignmentDirectional.topCenter,
              children: [
                Positioned(
                  left: 38.w,
                  top: 25.w,
                  child: head(url: charmTwoAvatar, width: 53.w),
                ),
                Positioned(
                  top: 15.w,
                  child: head(url: charmOneAvatar, width: 55.w),
                ),
                Positioned(
                  right: 38.w,
                  top: 25.w,
                  child: head(url: charmThreeAvatar, width: 53.w),
                ),
              ],
            ),
          ),
          onTap: () {
            ATNavigatorUtils.push(
              context,
              "${MainRoute.webViewPage}?url=${Uri.encodeComponent(ATGlobalConfig.charmRankUrl)}&showTitle=false",
              replace: false,
            );
          },
        ),
      ],
      itemHeight: 110.w,
    );
  }
}