import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:yumi/app_localizations.dart';
import 'package:yumi/shared/data_sources/sources/local/user_manager.dart';
import 'package:yumi/ui_kit/components/text/sc_text.dart';
import 'package:marquee/marquee.dart';
import 'package:provider/provider.dart';
import '../../../../services/general/sc_app_general_manager.dart';
import '../../../../services/audio/rtc_manager.dart';
import '../../../../services/room/rc_room_manager.dart';
import '../../../../ui_kit/components/sc_compontent.dart';
import '../../../../ui_kit/widgets/sc_home_shell_background.dart';
import '../follow/sc_room_follow_page.dart';
import '../history/sc_room_history_page.dart';
import 'sc_home_mine_skeleton.dart';

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

  @override
  State<SCHomeMinePage> createState() => _HomeMinePageState();
}

class _HomeMinePageState extends State<SCHomeMinePage>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  late TabController _tabController;
  final List<Widget> _pages = const [SCRoomHistoryPage(), SCRoomFollowPage()];
  final List<Widget> _tabs = [];

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    Provider.of<SocialChatRoomManager>(
      context,
      listen: false,
    ).fetchMyRoomData();
  }

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

  @override
  Widget build(BuildContext context) {
    super.build(context);
    _tabs.clear();
    _tabs.add(Tab(text: SCAppLocalizations.of(context)!.recent));
    _tabs.add(Tab(text: SCAppLocalizations.of(context)!.joined));
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionLabel(SCAppLocalizations.of(context)!.myRoom),
          Consumer<SocialChatRoomManager>(
            builder: (_, provider, __) {
              if (provider.isMyRoomLoading && provider.myRoom == null) {
                return const SCHomeSkeletonShimmer(
                  builder: _buildMineRoomSkeletonContent,
                );
              }
              return SizedBox(
                width: double.infinity,
                height: 85.w,
                child: _buildMyRoom(provider),
              );
            },
          ),
          SizedBox(height: 10.w),
          Row(
            children: [
              TabBar(
                tabAlignment: TabAlignment.start,
                labelPadding: EdgeInsetsDirectional.only(end: 18.w),
                labelColor: scHomeShellAccentColor,
                isScrollable: true,
                splashFactory: NoSplash.splashFactory,
                overlayColor: WidgetStateProperty.all(Colors.transparent),
                indicator: BoxDecoration(),
                unselectedLabelColor: Colors.white,
                labelStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16.sp,
                ),
                unselectedLabelStyle: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: 14.sp,
                ),
                indicatorColor: Colors.transparent,
                dividerColor: Colors.transparent,
                controller: _tabController,
                tabs: _tabs,
              ),
            ],
          ),
          SizedBox(height: 6.w),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              physics: NeverScrollableScrollPhysics(),
              children: _pages,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionLabel(String title) {
    return Padding(
      padding: EdgeInsetsDirectional.only(start: 8.w, bottom: 10.w),
      child: Text(
        title,
        style: TextStyle(
          color: scHomeShellAccentColor,
          fontSize: 16.sp,
          fontWeight: FontWeight.w800,
          height: 1.4,
        ),
      ),
    );
  }

  static Widget _buildMineRoomSkeletonContent(
    BuildContext context,
    double progress,
  ) {
    return buildHomeMyRoomSkeleton(progress);
  }

  Widget _buildMyRoom(SocialChatRoomManager provider) {
    return provider.myRoom != null
        ? GestureDetector(
          behavior: HitTestBehavior.opaque,
          child: _buildMineRoomShell(
            child: Row(
              children: [
                netImage(
                  url: resolveRoomCoverUrl(
                    provider.myRoom?.id,
                    provider.myRoom?.roomCover,
                  ),
                  defaultImg: kRoomCoverDefaultImg,
                  borderRadius: BorderRadius.all(Radius.circular(12.w)),
                  width: 56.w,
                  height: 56.w,
                ),
                SizedBox(width: 10.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Row(
                        children: [
                          netImage(
                            url:
                                Provider.of<SCAppGeneralManager>(
                                      context,
                                      listen: false,
                                    )
                                    .findCountryByName(
                                      AccountStorage()
                                              .getCurrentUser()
                                              ?.userProfile
                                              ?.countryName ??
                                          "",
                                    )
                                    ?.nationalFlag ??
                                "",
                            borderRadius: BorderRadius.all(
                              Radius.circular(3.w),
                            ),
                            width: 19.w,
                            height: 14.w,
                          ),
                          SizedBox(width: 3.w),
                          Expanded(
                            child: SizedBox(
                              height: 20.w,
                              child:
                                  (provider.myRoom?.roomName?.length ?? 0) > 18
                                      ? Marquee(
                                        text: provider.myRoom?.roomName ?? "",
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          color: Colors.white,
                                          fontWeight: FontWeight.bold,
                                          decoration: TextDecoration.none,
                                        ),
                                        scrollAxis: Axis.horizontal,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        blankSpace: 40.0,
                                        velocity: 40.0,
                                        pauseAfterRound: Duration(seconds: 1),
                                        accelerationDuration: Duration(
                                          seconds: 1,
                                        ),
                                        accelerationCurve: Curves.easeOut,
                                        decelerationDuration: Duration(
                                          milliseconds: 500,
                                        ),
                                        decelerationCurve: Curves.easeOut,
                                      )
                                      : Text(
                                        provider.myRoom?.roomName ?? "",
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          color: Colors.white,
                                          fontWeight: FontWeight.bold,
                                          decoration: TextDecoration.none,
                                        ),
                                      ),
                            ),
                          ),
                        ],
                      ),
                      text(
                        provider.myRoom?.roomDesc ?? "",
                        fontSize: 14.sp,
                        textColor: Colors.white.withValues(alpha: 0.72),
                      ),
                      text(
                        "ID:${provider.myRoom?.roomAccount}",
                        fontSize: 10.sp,
                        textColor: Colors.white.withValues(alpha: 0.64),
                      ),
                    ],
                  ),
                ),
                Icon(
                  Icons.chevron_right,
                  color: Colors.white.withValues(alpha: 0.92),
                  size: 26.w,
                ),
              ],
            ),
          ),
          onTap: () {
            final roomManager = Provider.of<SocialChatRoomManager>(
              context,
              listen: false,
            );
            final myRoom = roomManager.myRoom;
            final roomId = myRoom?.id ?? "";
            Provider.of<RealTimeCommunicationManager>(
              context,
              listen: false,
            ).joinVoiceRoomSession(
              context,
              roomId,
              previewData:
                  myRoom == null
                      ? null
                      : RoomEntryPreviewData.fromMyRoom(
                        myRoom,
                        ownerProfile:
                            AccountStorage().getCurrentUser()?.userProfile,
                      ),
            );
          },
        )
        : GestureDetector(
          child: _buildMineRoomShell(
            child: Row(
              children: [
                Container(
                  width: 56.w,
                  height: 56.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: scHomeShellAccentColor.withValues(alpha: 0.1),
                    borderRadius: BorderRadius.circular(12.w),
                  ),
                  child: Icon(Icons.add, color: Colors.white, size: 28.w),
                ),
                SizedBox(width: 10.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      text(
                        SCAppLocalizations.of(context)!.crateMyRoom,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w800,
                        textColor: Colors.white,
                      ),
                      SizedBox(height: 4.w),
                      text(
                        SCAppLocalizations.of(
                          context,
                        )!.startYourBrandNewJourney,
                        fontSize: 10.sp,
                        textColor: Colors.white,
                      ),
                    ],
                  ),
                ),
                Image.asset(
                  "sc_images/index/sc_icon_my_room_tag2.png",
                  height: 30.w,
                  width: 30.w,
                ),
                SizedBox(width: 8.w),
                Icon(Icons.chevron_right, color: Colors.white, size: 26.w),
              ],
            ),
          ),
          onTap: () {
            provider.createNewRoom(context);
          },
        );
  }

  Widget _buildMineRoomShell({required Widget child}) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(10.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14.w),
        border: Border.all(
          color: scHomeShellAccentColor.withValues(alpha: 0.2),
          width: 1.w,
        ),
        gradient: LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            const Color(0xFF111A1B).withValues(alpha: 0.86),
            const Color(0xFF2C4D42).withValues(alpha: 0.72),
          ],
        ),
      ),
      child: child,
    );
  }
}