import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/dashboard_latest/dashboard_provider.dart';
import 'package:test_sa/dashboard_latest/widgets/request_category_list.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/enum_extensions.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/enums/user_types.dart';
import 'package:test_sa/models/new_models/dashboard_detail.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/tab_button.dart';
import 'package:test_sa/views/widgets/loaders/no_data_found.dart';

/// Separate component for HouseKeeper role
/// HouseKeeper has simpler requirements:
/// - Single-select only (no multi-select)
/// - Uses getRequestDetail API only
/// - Default shows first category (In Progress)
class RequestCategoryFragmentHouseKeeper extends StatefulWidget {
  const RequestCategoryFragmentHouseKeeper({Key? key}) : super(key: key);

  @override
  State<RequestCategoryFragmentHouseKeeper> createState() => _RequestCategoryFragmentHouseKeeperState();
}

class _RequestCategoryFragmentHouseKeeperState extends State<RequestCategoryFragmentHouseKeeper> with SingleTickerProviderStateMixin {
  bool isAscending = false;
  late AnimationController _animationController;
  late Animation<double> _headerFadeAnimation;
  late Animation<Offset> _headerSlideAnimation;
  final ScrollController _scrollController = ScrollController();

  // int _selectedIndex = 0; // Default first tab

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );

    // Header animation (appears first, faster)
    _headerFadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: const Interval(0.0, 0.4, curve: Curves.easeOut),
      ),
    );

    _headerSlideAnimation = Tween<Offset>(
      begin: const Offset(0.0, -0.3),
      end: Offset.zero,
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: const Interval(0.0, 0.5, curve: Curves.easeOutCubic),
      ),
    );

    _animationController.forward();

    // Load first category data on init
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _loadCategoryData(0);
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  void _loadCategoryData(int index) {
    final dashboardProvider = Provider.of<DashBoardProvider>(context, listen: false);
    List<CategoryTabs> tabs = CategoryTabs.getTabs(userType: UsersTypes.houseKeeper, context: context);

    if (index >= 0 && index < tabs.length) {
      dashboardProvider.resetRequestDataList();
      dashboardProvider.getRequestDetail(
        usersType: UsersTypes.houseKeeper,
        showLoader: true,
        status: tabs[index].tag,
        tabId: tabs[index].id,
        isAscending: isAscending,
      );
    }
  }

  void _toggleSort(DashBoardProvider dashboardProvider) {
    setState(() {
      isAscending = !isAscending;
    });

    // Reload current category with new sort order
    _loadCategoryData(dashboardProvider.currentListIndex!);
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<DashBoardProvider>(builder: (context, dashboardProvider, child) {
      List<CategoryTabs> tabs = CategoryTabs.getTabs(userType: UsersTypes.houseKeeper, context: context);

      return Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // Tabs
          _buildTabs(tabs, dashboardProvider),

          // Header with sort
          FadeTransition(
            opacity: _headerFadeAnimation,
            child: SlideTransition(
              position: _headerSlideAnimation,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  'All Tasks'.addTranslation.heading4(context),
                  'add_icon'.toSvgAsset(width: 24, height: 24).onPress(() {
                    Navigator.of(context).pushNamed('/cleaner_search');
                  }),
                  // Transform.flip(
                  //   flipY: isAscending,
                  //   child: 'dashboard/sort_descending'.toSvgAsset(
                  //     width: 24,
                  //     height: 24,
                  //     color: AppColor.headingTextColor(context),
                  //   ).onPress(()=>_toggleSort(dashboardProvider)),
                  // )
                ],
              ).paddingOnly(start: 16, end: 16),
            ),
          ),

          // Data list
          dashboardProvider.isDetailLoading
              ? Column(
                  mainAxisSize: MainAxisSize.max,
                  children: List.generate(3, (index) {
                    return Padding(
                      padding: EdgeInsets.symmetric(vertical: 10.toScreenHeight, horizontal: 0),
                      child: const SizedBox().toRequestShimmer(context, dashboardProvider.isDetailLoading),
                    );
                  }),
                ).paddingOnly(start: 16, end: 16, top: 16)
              : (dashboardProvider.requestDetailList == null || dashboardProvider.requestDetailList?.data?.isEmpty == true)
                  ? const NoDataFound().paddingOnly(top: 80).center
                  : RequestCategoryList(
                      dashboardProvider.requestDetailList?.data ?? <Data>[],
                      dashboardProvider.isDetailLoading,
                      dashboardProvider.requestDetailList?.totalRows ?? 0,
                    ),
        ],
      );
    });
  }

  Widget _buildTabs(List<CategoryTabs> tabs, DashBoardProvider dashboardProvider) {
    // Calculate item width
    final screenWidth = MediaQuery.of(context).size.width;
    final isTablet = context.isTablet();
    final visibleItemsWithPeek = isTablet ? 4.5 : 3.5;
    const spacing = 4.0;
    const horizontalPadding = 16.0;

    final availableWidth = screenWidth - (horizontalPadding * 2);
    final fullItems = visibleItemsWithPeek.floor();
    final totalSpacing = (fullItems - 1) * spacing + (spacing * 0.5);
    final itemWidth = (availableWidth - totalSpacing) / visibleItemsWithPeek;

    return SizedBox(
      height: itemWidth + 16,
      child: ListView.separated(
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        separatorBuilder: (cxt, index) => const SizedBox(width: 4),
        padding: const EdgeInsets.only(bottom: 16, left: horizontalPadding, right: horizontalPadding),
        itemBuilder: (cxt, index) {
          // Animation
          final delay = index * 0.08;
          final animation = Tween<double>(begin: 0.0, end: 1.0).animate(
            CurvedAnimation(
              parent: _animationController,
              curve: Interval(
                delay.clamp(0.0, 0.8),
                (delay + 0.3).clamp(0.0, 1.0),
                curve: Curves.easeOut,
              ),
            ),
          );

          final slideAnimation = Tween<Offset>(
            begin: const Offset(-0.3, 0.0),
            end: Offset.zero,
          ).animate(
            CurvedAnimation(
              parent: _animationController,
              curve: Interval(
                delay.clamp(0.0, 0.8),
                (delay + 0.3).clamp(0.0, 1.0),
                curve: Curves.easeOutCubic,
              ),
            ),
          );

          return FadeTransition(
            opacity: animation,
            child: SlideTransition(
              position: slideAnimation,
              child: SizedBox(
                width: itemWidth,
                child: RequestTypeButton(
                  label: tabs[index].label,
                  loading: dashboardProvider.isDetailLoading && dashboardProvider.currentListIndex == index,
                  isSelected: dashboardProvider.currentListIndex == index,
                  count: dashboardProvider.getStatusCount(tabs[index].requestType),
                  onPressed: () {
                    setState(() {
                      isAscending = false;
                      // _selectedIndex = index;
                    });
                    dashboardProvider.currentListIndex = index;
                    _loadCategoryData(index);
                  },
                  icon: tabs[index].icon,
                  iconColor: tabs[index].iconColor,
                ),
              ),
            ),
          );
        },
        itemCount: tabs.length,
      ),
    );
  }
}
