import 'package:collection/collection.dart';
import 'package:expansion_widget/expansion_widget.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:responsive_framework/responsive_framework.dart';
import 'package:restart_app/restart_app.dart';
import 'package:salespro_admin/Route/sidebar_item_model.dart';
import 'package:salespro_admin/Route/sidebar_provider.dart';
import 'package:salespro_admin/Route/static_string.dart';
import 'package:salespro_admin/const.dart';
import 'package:salespro_admin/global_language.dart';

import '../Provider/general_setting_provider.dart';
import '../Provider/subacription_plan_provider.dart';
import '../Screen/Widgets/Constant Data/constant.dart';
import '../Screen/currency/global_currency.dart';
import '../model/subscription_model.dart';

class GlobalSideBar extends ConsumerStatefulWidget {
  const GlobalSideBar({
    super.key,
    required this.rootScaffoldKey,
    this.iconOnly = false,
  });

  final GlobalKey<ScaffoldState> rootScaffoldKey;
  final bool iconOnly;

  @override
  ConsumerState<GlobalSideBar> createState() => _GlobalSideBarState();
}

class _GlobalSideBarState extends ConsumerState<GlobalSideBar> {
  SubscriptionModel subscriptionModel = SubscriptionModel(
    subscriptionName: '',
    subscriptionDate: DateTime.now().toString(),
    saleNumber: 0,
    purchaseNumber: 0,
    partiesNumber: 0,
    dueNumber: 0,
    duration: 0,
    products: 0,
  );

  void checkSubscriptionData() async {
    final newModel = await currentSubscriptionPlanRepo.getCurrentSubscriptionPlans();
    setState(() {
      subscriptionModel = newModel; // ✅ Actually assign!
    });
  }

  @override
  void initState() {
    super.initState();

    // ✅ Use ref directly — no ProviderScope needed in ConsumerState
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ref.read(sidebarDisplayModeProvider.notifier).state = widget.iconOnly;
    });

    final User? user = FirebaseAuth.instance.currentUser;
    if (user?.uid == null) {
      Restart.restartApp();
    }
    checkSubscriptionData();
  }

  @override
  void didUpdateWidget(covariant GlobalSideBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.iconOnly != oldWidget.iconOnly) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        ref.read(sidebarDisplayModeProvider.notifier).state = widget.iconOnly;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, _) {
        final iconOnly = ref.watch(sidebarDisplayModeProvider);
        final screenWidth = MediaQuery.of(context).size.width;
        return Drawer(
          backgroundColor: Colors.black,
          clipBehavior: Clip.none,
          width: iconOnly
              ? 80
              : ResponsiveValue<double?>(
                  context,
                  conditionalValues: [
                    Condition.largerThan(
                      name: BreakpointName.SM.name,
                      value: 300,
                    ),
                  ],
                ).value,
          shape: const BeveledRectangleBorder(),
          child: SafeArea(
            child: ResponsiveRowColumn(
              layout: ResponsiveRowColumnType.COLUMN,
              columnCrossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Drawer Header
                ResponsiveRowColumnItem(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 16),
                    child: _buildHeader(context, iconOnly: iconOnly),
                  ),
                ),
                ResponsiveRowColumnItem(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        iconOnly
                            ? const SizedBox.shrink()
                            : Row(
                                children: [
                                  screenWidth > 1260 ? const SizedBox.shrink() : const GlobalLanguage(isDrawer: true),
                                  screenWidth > 1430 ? const SizedBox.shrink() : const SizedBox(width: 10.0),
                                  screenWidth > 1430 ? const SizedBox.shrink() : const GlobalCurrency(isDrawer: true),
                                ],
                              ),
                        iconOnly
                            ? const SizedBox.shrink()
                            : screenWidth > 1260 && screenWidth > 1430
                                ? const SizedBox.shrink()
                                : const SizedBox(height: 16),
                        iconOnly
                            ? const SizedBox.shrink()
                            : Row(
                                children: [
                                  screenWidth > 590
                                      ? const SizedBox.shrink()
                                      : SizedBox(
                                          height: 40,
                                          child: ElevatedButton(
                                            style: ElevatedButton.styleFrom(
                                              padding: const EdgeInsets.fromLTRB(15, 8, 15, 8),
                                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
                                              backgroundColor: kMainColor.withValues(alpha: 0.05),
                                              side: const BorderSide(color: kMainColor, width: 1),
                                              textStyle: kTextStyle.copyWith(color: const Color(0xFFFF2525)),
                                              surfaceTintColor: kWhite,
                                              shadowColor: kMainColor.withValues(alpha: 0.1),
                                              foregroundColor: kMainColor.withValues(alpha: 0.1),
                                            ),
                                            onPressed: () => context.go('/product'),
                                            child: Row(
                                              children: [
                                                const Icon(Icons.add_rounded, color: kMainColor),
                                                Text(
                                                  'Product',
                                                  style: Theme.of(context).textTheme.titleMedium?.copyWith(color: kMainColor, fontWeight: FontWeight.w600),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                  screenWidth > 1260 ? const SizedBox.shrink() : const SizedBox(width: 10.0),
                                  screenWidth > 800
                                      ? const SizedBox.shrink()
                                      : SizedBox(
                                          height: 40,
                                          child: ElevatedButton(
                                            style: ElevatedButton.styleFrom(
                                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
                                              padding: const EdgeInsets.fromLTRB(15, 8, 15, 8),
                                              backgroundColor: const Color(0xFF15CD75).withValues(alpha: 0.05),
                                              side: const BorderSide(color: Color(0xFF15CD75), width: 1),
                                              textStyle: kTextStyle.copyWith(color: const Color(0xFF15CD75)),
                                              surfaceTintColor: kWhite,
                                              shadowColor: const Color(0xFF15CD75).withOpacity(0.1),
                                              foregroundColor: const Color(0xFF15CD75).withOpacity(0.1),
                                            ),
                                            onPressed: () => context.go('/purchase-list'),
                                            child: Row(
                                              children: [
                                                const Icon(Icons.add_rounded, color: Color(0xFF15CD75)),
                                                Text(
                                                  'Purchase',
                                                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                                                        color: const Color(0xFF15CD75),
                                                        fontWeight: FontWeight.bold,
                                                      ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                ],
                              ),
                        iconOnly
                            ? const SizedBox.shrink()
                            : screenWidth > 590 && screenWidth > 1260
                                ? const SizedBox.shrink()
                                : const SizedBox(height: 16),
                        iconOnly
                            ? const SizedBox.shrink()
                            : Row(
                                children: [
                                  screenWidth > 670
                                      ? const SizedBox.shrink()
                                      : SizedBox(
                                          height: 40,
                                          child: ElevatedButton(
                                            style: ElevatedButton.styleFrom(
                                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
                                              padding: const EdgeInsets.fromLTRB(15, 8, 15, 8),
                                              backgroundColor: const Color(0xFF8424FF),
                                              textStyle: kTextStyle.copyWith(color: kWhite),
                                              surfaceTintColor: const Color(0xFF8424FF).withOpacity(0.5),
                                              shadowColor: const Color(0xFF8424FF).withOpacity(0.1),
                                            ),
                                            onPressed: () => context.go('/sales/pos-sales'),
                                            child: Row(
                                              children: [
                                                const Icon(Icons.add_rounded, color: kWhite),
                                                Text(
                                                  'Pos',
                                                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                                                        fontWeight: FontWeight.w600,
                                                        color: Colors.white,
                                                      ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                  screenWidth > 670 ? const SizedBox.shrink() : const SizedBox(width: 16.0),
                                  screenWidth > 590
                                      ? const SizedBox.shrink()
                                      : SizedBox(
                                          height: 40,
                                          child: ElevatedButton(
                                            style: ElevatedButton.styleFrom(
                                              padding: const EdgeInsets.fromLTRB(15, 8, 15, 8),
                                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
                                              backgroundColor: kMainColor.withValues(alpha: 0.1),
                                              side: const BorderSide(color: kMainColor, width: 1),
                                              textStyle: kTextStyle.copyWith(color: kWhite),
                                              surfaceTintColor: lightGreyColor,
                                              shadowColor: lightGreyColor.withOpacity(0.1),
                                            ),
                                            onPressed: () => context.go('/inventory-sales'),
                                            child: Row(
                                              children: [
                                                const Icon(Icons.add_rounded, color: kMainColor),
                                                Text(
                                                  'Inventory',
                                                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
                                                        fontWeight: FontWeight.w600,
                                                        color: kMainColor,
                                                      ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                ],
                              ),
                        iconOnly
                            ? const SizedBox.shrink()
                            : screenWidth > 670 && screenWidth > 590
                                ? const SizedBox.shrink()
                                : const SizedBox(height: 16),
                      ],
                    ),
                  ),
                ),
                ResponsiveRowColumnItem(
                  columnFit: FlexFit.tight,
                  child: SingleChildScrollView(
                    child: ResponsiveRowColumn(
                      layout: ResponsiveRowColumnType.COLUMN,
                      columnCrossAxisAlignment: CrossAxisAlignment.start,
                      columnPadding: const EdgeInsets.symmetric(horizontal: 16),
                      children: [
                        // Top Menus
                        ...topMenus.map((menu) {
                          final _selectedInfo = _isSelected(context, menu);
                          return ResponsiveRowColumnItem(
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 2),
                              child: SidebarMenuItem(
                                iconOnly: iconOnly,
                                menuTile: menu,
                                groupName: menu.name,
                                isSelected: _selectedInfo.isSelectedMenu,
                                selectedSubmenu: _selectedInfo.selectedSubmenu,
                                onTap: () => _handleNavigation(context, menu),
                                onSubmenuTap: (value) => _handleNavigation(context, menu, submenu: value),
                              ),
                            ),
                          );
                        }),
                        ResponsiveRowColumnItem(
                          child: Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Column(
                              children: [
                                if (iconOnly)
                                  GestureDetector(
                                    onTap: () => context.go('/subscription'),
                                    child: SvgPicture.asset(
                                      'images/dashboard_icon/crown.svg',
                                      height: 28,
                                      width: 28,
                                    ),
                                  ),
                                if (!iconOnly)
                                  Container(
                                    width: MediaQuery.of(context).size.width * .50,
                                    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(8.0),
                                      color: kMainColor,
                                    ),
                                    child: Row(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        SvgPicture.asset(
                                          'images/dashboard_icon/crown.svg',
                                          height: 32.2,
                                          width: 41.11,
                                        ),
                                        const SizedBox(width: 4),
                                        Expanded(
                                          child: Column(
                                            crossAxisAlignment: CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                subscriptionModel.subscriptionName,
                                                style: Theme.of(context).textTheme.titleLarge?.copyWith(
                                                      color: kWhite,
                                                      fontWeight: FontWeight.w600,
                                                    ),
                                                maxLines: 3,
                                              ),
                                              if (subscriptionModel.subscriptionName != 'Lifetime')
                                                Padding(
                                                  padding: const EdgeInsets.only(top: 4),
                                                  child: Text(
                                                    'Expires in: ${(DateTime.parse(subscriptionModel.subscriptionDate).difference(DateTime.now()).inDays.abs() - subscriptionModel.duration).abs()} Days',
                                                    style: Theme.of(context).textTheme.titleSmall?.copyWith(
                                                          color: kWhite,
                                                          fontWeight: FontWeight.w500,
                                                        ),
                                                    maxLines: 3,
                                                  ),
                                                ),
                                              const SizedBox(height: 10),
                                              ElevatedButton(
                                                style: ElevatedButton.styleFrom(
                                                  shape: RoundedRectangleBorder(
                                                    borderRadius: BorderRadius.circular(9),
                                                  ),
                                                  side: BorderSide(color: Colors.white.withValues(alpha: 0.3)),
                                                  backgroundColor: Colors.white.withValues(alpha: 0.2),
                                                ),
                                                onPressed: () => context.go('/subscription'),
                                                child: const Text('Upgrade Plan'),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildHeader(BuildContext context, {bool iconOnly = false}) {
    return Consumer(
      builder: (_, ref, __) {
        final settingProvider = ref.watch(generalSettingProvider);
        return settingProvider.when(
          data: (setting) {
            final logo = setting.mainLogo.isNotEmpty ? setting.mainLogo : appLogo;
            final nameLogo = setting.commonHeaderLogo.isNotEmpty ? setting.sidebarLogo : 'images/sideLogo.png';
            return Container(
              padding: const EdgeInsets.all(16),
              height: ResponsiveValue<double?>(
                context,
                conditionalValues: [
                  Condition.largerThan(name: BreakpointName.SM.name, value: 70),
                ],
              ).value,
              decoration: const BoxDecoration(
                border: Border(
                  bottom: BorderSide(width: 1, color: kNeutral300),
                ),
              ),
              alignment: Alignment.center,
              child: Row(
                mainAxisAlignment: iconOnly ? MainAxisAlignment.center : MainAxisAlignment.start,
                children: [
                  if (iconOnly) Image.network(logo, height: 38, width: 33),
                  if (!iconOnly) Image.network(nameLogo, height: 38, width: 150),
                ],
              ),
            );
          },
          error: (e, stack) => Text(e.toString()),
          loading: () => const Center(child: CircularProgressIndicator()),
        );
      },
    );
  }

  _SelectionInfo _isSelected(BuildContext context, SidebarItemModel menu) {
    // ✅ FIXED: Use state.location — clean, reliable path
    final currentRoute = GoRouter.of(context).state.uri.toString().toLowerCase().trim();

    if (menu.sidebarItemType == SidebarItemType.tile) {
      final menuPath = menu.navigationPath?.toLowerCase().trim();
      return _SelectionInfo(menuPath != null && currentRoute == menuPath, null);
    }

    if (menu.sidebarItemType == SidebarItemType.submenu) {
      final mainPath = menu.navigationPath?.toLowerCase().trim();
      if (mainPath == null || !currentRoute.startsWith(mainPath)) {
        return _SelectionInfo(false, null);
      }

      // ✅ Match submenu by exact full path
      final selectedSubMenu = menu.submenus?.firstWhereOrNull(
        (submenu) {
          final subPath = submenu.navigationPath?.toLowerCase().trim();
          return subPath != null && currentRoute == '$mainPath$subPath';
        },
      );

      return _SelectionInfo(true, selectedSubMenu);
    }

    return _SelectionInfo(false, null);
  }

  void _handleNavigation(
    BuildContext ctx,
    SidebarItemModel menu, {
    SidebarSubmenuModel? submenu,
  }) async {
    String? _route;

    if (menu.sidebarItemType == SidebarItemType.tile) {
      _route = menu.navigationPath;
    } else if (menu.sidebarItemType == SidebarItemType.submenu) {
      final _mainRoute = menu.navigationPath;
      final _submenuRoute = submenu?.navigationPath;
      if (_mainRoute != null && _submenuRoute != null) {
        // ✅ FIXED: Ensure proper path joining
        _route = '$_mainRoute/$_submenuRoute'.replaceAll('//', '/');
      }
    }

    if (_route == null || _route.isEmpty) {
      ScaffoldMessenger.of(widget.rootScaffoldKey.currentContext!).showSnackBar(
        const SnackBar(content: Text('Unknown Route')),
      );
      return;
    }

    // Permission check (keep as is)
    final permissionMap = {
      "/sales/pos-sales": "pos-sale-create",
      "/sales/inventory-sales": "inventory-sale-create",
      "/sales/sale-list": "sale-list-read",
      "/sales/sales-return-list": "sale-return-read",
      "/sales/quotation-list": "quotation-read",
      "/purchase/pos-purchase": "purchase-create",
      "/purchase/purchase-list": "purchase-read",
      "/purchase/purchase-return": "purchase-return-read",
      "/category-list": "categories-read",
      "/product": "product-read",
      "/product-expired": "expired-read",
      "/product-brand": "brand-read",
      "/product-unit": "unit-read",
      "/warehouse-list": "ware-house-read",
      "/supplier-list": "supplier-list-read",
      "/customer-list": "customer-list-read",
      "/due-list": "due-list-read",
      "/ledger": "ledger-read",
      "/loss-profit": "loss-profit-read",
      "/payment-types": "payment-type-read",
      "/expense": "expense-read",
      "/income": "income-read",
      "/transaction": "transaction-read",
      "/reports": "all-reports-read",
      "/stock-list": "stock-list-read",
      "/low-stock": "low-stock-read",
      "/whatsapp-marketing": "whatsapp-marketing-read",
      "/subscription": "subscription-read",
      "/user-role": "user-role-read",
      "/tax-rates": "tax-rate-read",
      "/hrm": "hrm-read"
    };

    if (isSubUser) {
      for (final entry in permissionMap.entries) {
        if (_route.contains(entry.key)) {
          final hasPermission = await checkUserRolePermission(type: entry.value);
          if (!hasPermission) {
            EasyLoading.showError('You don\'t have permission to access this page');
            return;
          }
          break;
        }
      }
    }

    // ✅ Navigate FIRST
    context.go(_route);

    // ✅ Update state AFTER navigation
    Future.microtask(() {
      final isWatchRoute = _watchRoutes.any((w) => _route!.startsWith(w));
      ref.read(sidebarDisplayModeProvider.notifier).state = isWatchRoute;
    });

    // ✅ Close drawer safely
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (widget.rootScaffoldKey.currentState?.isDrawerOpen == true) {
        widget.rootScaffoldKey.currentState?.closeDrawer();
      }
    });
  }

  final _watchRoutes = [
    "/sales/pos-sales",
    "/purchase/pos-purchase",
    "/edit-pos-sale",
    "/edit-purchase",
  ];
}

class _SelectionInfo {
  final bool isSelectedMenu;
  final SidebarSubmenuModel? selectedSubmenu;

  _SelectionInfo(this.isSelectedMenu, this.selectedSubmenu);
}

class SidebarMenuItem extends StatelessWidget {
  const SidebarMenuItem({
    super.key,
    this.iconOnly = false,
    required this.menuTile,
    this.isSelected = false,
    this.selectedSubmenu,
    this.onSubmenuTap,
    this.onTap,
    this.groupName,
  });

  final bool iconOnly;
  final SidebarItemModel menuTile;
  final bool isSelected;
  final SidebarSubmenuModel? selectedSubmenu;
  final void Function(SidebarSubmenuModel? value)? onSubmenuTap;
  final void Function()? onTap;
  final String? groupName;

  @override
  Widget build(BuildContext context) {
    final _theme = Theme.of(context);

    if (menuTile.sidebarItemType == SidebarItemType.submenu) {
      if (iconOnly) {
        return Material(
          color: Colors.transparent,
          borderRadius: BorderRadius.circular(8),
          clipBehavior: Clip.antiAlias,
          child: PopupMenuButton<SidebarSubmenuModel?>(
            offset: const Offset(80 - 16, 0),
            shape: const BeveledRectangleBorder(),
            clipBehavior: Clip.antiAlias,
            tooltip: menuTile.name,
            color: _theme.colorScheme.primaryContainer,
            itemBuilder: (context) => [
              // Group Name
              if (groupName != null)
                _CustomIconOnlySubmenu(
                  enabled: false,
                  child: Container(
                    margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          groupName!,
                          style: _theme.textTheme.bodyLarge?.copyWith(
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Icon(MdiIcons.chevronDown),
                      ],
                    ),
                  ),
                ),
              // Submenus
              ...?menuTile.submenus?.map(
                (submenu) {
                  return _CustomIconOnlySubmenu<SidebarSubmenuModel>(
                    value: submenu,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 12),
                      child: _buildSubmenu(
                        context,
                        submenu,
                        onChanged: (value) {
                          Navigator.pop(context, value);
                          onSubmenuTap?.call(value);
                        },
                      ),
                    ),
                  );
                },
              ),
            ],
            child: _buildMenu(context, onTap: null),
          ),
        );
      }
      return ExpansionWidget(
        titleBuilder: (aV, eIV, iE, tF) => _buildMenu(
          context,
          onTap: () => tF(animated: true),
          isExpanded: iE,
        ),
        initiallyExpanded: isSelected,
        content: Padding(
          padding: const EdgeInsets.only(top: 8, left: 36),
          child: Column(
            children: [
              ...?menuTile.submenus?.map(
                (submenu) => _buildSubmenu(
                  context,
                  submenu,
                  onChanged: onSubmenuTap,
                ),
              )
            ],
          ),
        ),
      );
    }

    if (iconOnly) {
      return Tooltip(
        message: menuTile.name,
        child: _buildMenu(context, onTap: onTap),
      );
    }
    return _buildMenu(context, onTap: onTap);
  }

  Widget _buildMenu(
    BuildContext context, {
    required void Function()? onTap,
    bool isExpanded = false,
  }) {
    final _theme = Theme.of(context);

    const _selectedPrimaryColor = Colors.white;

    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(8),
      child: Container(
        constraints: BoxConstraints.tight(const Size.fromHeight(48)),
        alignment: Alignment.center,
        decoration: ShapeDecoration(
          color: isSelected ? kMainColor : null,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        padding: EdgeInsets.only(left: iconOnly ? 8 : 16, right: 8),
        child: Row(
          mainAxisAlignment: iconOnly ? MainAxisAlignment.center : MainAxisAlignment.start,
          children: [
            // Icon
            SvgPicture.asset(
              menuTile.iconPath,
              height: 23,
              width: 23,
              colorFilter: ColorFilter.mode(
                isSelected ? _selectedPrimaryColor : Colors.white,
                BlendMode.srcIn,
              ),
            ),
            // Icon(
            //   menuTile.icon,
            //   color: isSelected ? _selectedPrimaryColor : Colors.white,
            // ),

            if (!iconOnly)
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // Menu title
                      Text(
                        menuTile.name,
                        style: _theme.textTheme.titleMedium?.copyWith(
                          color: isSelected ? _selectedPrimaryColor : Colors.white,
                          fontWeight: FontWeight.w500,
                        ),
                      ),

                      // Trailing Icon
                      Icon(
                        isExpanded ? MdiIcons.chevronDown : Icons.chevron_right,
                        color: isSelected ? _selectedPrimaryColor : null,
                      ),
                    ],
                  ),
                ),
              )
          ],
        ),
      ),
    );
  }

  Widget _buildSubmenu(
    BuildContext context,
    SidebarSubmenuModel submenu, {
    void Function(SidebarSubmenuModel? value)? onChanged,
  }) {
    final _theme = Theme.of(context);
    final _isSelectedSubmenu = selectedSubmenu == submenu;

    final _selectedPrimaryColor = _theme.primaryColor;
    return Material(
      color: Colors.transparent,
      child: ListTile(
        onTap: () => onChanged?.call(submenu),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        tileColor: _isSelectedSubmenu ? _selectedPrimaryColor.withValues(alpha: 0.20) : null,
        title: Text(submenu.name),
        leading: Radio<SidebarSubmenuModel?>(
            value: submenu,
            groupValue: selectedSubmenu,
            onChanged: onChanged,
            fillColor: WidgetStateProperty.resolveWith((states) {
              return _isSelectedSubmenu
                  ? _selectedPrimaryColor
                  : iconOnly
                      ? kGreyTextColor
                      : Colors.white;
            })),
        titleTextStyle: _theme.textTheme.bodyLarge?.copyWith(
          color: _isSelectedSubmenu
              ? _selectedPrimaryColor
              : iconOnly
                  ? kGreyTextColor
                  : Colors.white,
          fontWeight: FontWeight.w500,
        ),
        contentPadding: EdgeInsets.only(left: iconOnly ? 8 : 8, right: 8),
        trailing: const Icon(Icons.chevron_right),
        iconColor: _isSelectedSubmenu
            ? _selectedPrimaryColor
            : iconOnly
                ? kGreyTextColor
                : Colors.white,
      ),
    );
  }
}

class _CustomIconOnlySubmenu<T> extends StatefulWidget implements PopupMenuEntry<T> {
  const _CustomIconOnlySubmenu({
    super.key,
    this.enabled = true,
    this.value,
    required this.child,
  });

  final bool enabled;
  final T? value;
  final Widget child;

  @override
  State<_CustomIconOnlySubmenu> createState() => _CustomIconOnlySubmenuState();

  @override
  double get height => 0;

  @override
  bool represents(value) => value == this.value;
}

class _CustomIconOnlySubmenuState<T> extends State<_CustomIconOnlySubmenu> {
  @protected
  void handleTap() {
    Navigator.pop<T>(context, widget.value);
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      hoverColor: Colors.transparent,
      onTap: widget.enabled ? handleTap : null,
      child: widget.child,
    );
  }
}
