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: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';

/// 相亲页面
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;
  @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);
    discoverController.loadRtcChannelPage();
  }

  @override
  void dispose() {
    _tabController.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: Text(
                  '暂无直播频道',
                  style: TextStyle(
                    fontSize: 14.w,
                    color: Colors.white.withOpacity(0.7),
                  ),
                ),
              );
            }
            return SingleChildScrollView(
              padding: EdgeInsets.symmetric(vertical: 5.w),
              child: Wrap(
                spacing: 7.w,
                runSpacing: 7.w,
                children: discoverController.rtcChannelList.map((channel) {
                  print('渲染频道: ${channel.channelId}, ${channel.channelName}');
                  return LiveItemWidget(
                    channel: channel,
                    channelId: channel.channelId,
                  ).onTap(() async{
                    await roomController.joinChannel(channel.channelId);
                  });
                }).toList(),
              ),
            );
          }),
        ),
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}