import 'package:dating_touchme_app/controller/discover/discover_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/pages/discover/live_item_widget.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../../controller/discover/room_controller.dart';
import '../../generated/assets.dart';

/// 相亲页面
class DatingPage extends StatefulWidget {
  const DatingPage({super.key});

  @override
  State<DatingPage> createState() => _DatingPageState();
}

class _DatingPageState extends State<DatingPage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  late final DiscoverController discoverController;
  late final TabController _tabController;
  late final RoomController roomController;
  late final EasyRefreshController _refreshController;

  @override
  void initState() {
    super.initState();
    if (Get.isRegistered<DiscoverController>()) {
      discoverController = Get.find<DiscoverController>();
    } else {
      discoverController = Get.put(DiscoverController());
    }
    if (Get.isRegistered<RoomController>()) {
      roomController = Get.find<RoomController>();
    } else {
      roomController = Get.put(RoomController());
    }
    _tabController = TabController(length: 4, vsync: this);
    _refreshController = EasyRefreshController(
      controlFinishRefresh: true,
      controlFinishLoad: true,
    );
    discoverController.loadRtcChannelPage();
  }

  @override
  void dispose() {
    _tabController.dispose();
    _refreshController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        // TDTabBar(
        //   tabs: [
        //     TDTab(
        //       child: Padding(
        //         padding: EdgeInsets.only(right: 16, left: 16),
        //         child: Text('全部'),
        //       ),
        //     ),
        //     TDTab(
        //       child: Padding(
        //         padding: EdgeInsets.only(right: 16, left: 16),
        //         child: Text('同城'),
        //       ),
        //     ),
        //     TDTab(
        //       child: Padding(
        //         padding: EdgeInsets.only(right: 12, left: 12),
        //         child: Text('相亲视频'),
        //       ),
        //     ),
        //     TDTab(
        //       child: Padding(
        //         padding: EdgeInsets.only(right: 12, left: 12),
        //         child: Text('相亲语音'),
        //       ),
        //     ),
        //   ],
        //   backgroundColor: Colors.transparent,
        //   labelPadding: const EdgeInsets.only(right: 4, top: 10, bottom: 10, left: 4),
        //   selectedBgColor: const Color.fromRGBO(108, 105, 244, 1),
        //   unSelectedBgColor: Colors.transparent,
        //   labelColor: Colors.white,
        //   dividerHeight: 0,
        //   tabAlignment: TabAlignment.start,
        //   outlineType: TDTabBarOutlineType.capsule,
        //   controller: _tabController,
        //   showIndicator: false,
        //   isScrollable: true,
        //   onTap: (index) {
        //     print('相亲页面 Tab: $index');
        //   },
        // ),
        Expanded(
          child: Obx(() {
            print('DatingPage Obx 触发，列表长度: ${discoverController.rtcChannelList.length}');
            print('isLoading: ${discoverController.isLoading.value}');
            if (discoverController.isLoading.value &&
                discoverController.rtcChannelList.isEmpty) {
              return Center(
                child: CircularProgressIndicator(
                  color: const Color.fromRGBO(108, 105, 244, 1),
                ),
              );
            }
            if (discoverController.rtcChannelList.isEmpty) {
              return Center(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(Assets.imagesRtcEmpty, width: 332.w, height: 222.w),
                    const SizedBox(height: 24),
                    Text('暂无直播频道，点击刷新', style: TextStyle(fontSize: 14.w, color: Colors.black38)),
                    const SizedBox(height: 64),
                  ],
                ),
              ).onTap((){
                discoverController.loadRtcChannelPage();
              });
            }
            return EasyRefresh(
              controller: _refreshController,
              header: const ClassicHeader(
                dragText: '下拉刷新',
                armedText: '释放刷新',
                readyText: '刷新中...',
                processingText: '刷新中...',
                processedText: '刷新完成',
                failedText: '刷新失败',
                noMoreText: '没有更多数据',
                showMessage: false,
              ),
              onRefresh: () async {
                print('相亲页面下拉刷新被触发');
                try {
                  await discoverController.refreshRtcChannelPage();
                  _refreshController.finishRefresh(IndicatorResult.success);
                  print('相亲页面刷新完成');
                } catch (e) {
                  print('相亲页面刷新失败: $e');
                  _refreshController.finishRefresh(IndicatorResult.fail);
                }
              },
              child: GridView.builder(
                padding: EdgeInsets.symmetric(vertical: 5.w, horizontal: 0),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, // 每行2个
                  crossAxisSpacing: 7.w, // 左右间距
                  mainAxisSpacing: 7.w, // 上下间距
                  childAspectRatio: 1, // 宽高比
                ),
                itemCount: discoverController.rtcChannelList.length,
                itemBuilder: (context, index) {
                  final channel = discoverController.rtcChannelList[index];
                  print('渲染频道: ${channel.channelId}, ${channel.channelName}');
                  return LiveItemWidget(
                    channel: channel,
                    channelId: channel.channelId,
                  ).onTap(() async {
                    await roomController.joinChannel(channel.channelId);
                  });
                },
              ),
            );
          }),
        ),
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}