import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:nhance_partner/core/routing/routes.dart';
import 'package:nhance_partner/core/services/api_service.dart';
import 'package:nhance_partner/data/services/auth_service.dart';
import '../providers/manager_provider.dart';
import '../providers/userRoleProvider.dart';
import '../screens/UserManagement/Profile/profile_web.dart';
import '../widgets/custom_action_popup.dart';
import '../widgets/topbar.dart';
import '../widgets/footer.dart';
import '../widgets/drawer_menu.dart';
import '../widgets/mobile_tabs.dart';
import 'appheader.dart';
import 'responsive_layout.dart';
import 'package:http/http.dart' as http;
// import 'package:http/http.dart' as ref;

// class MainLayout extends StatelessWidget {
//   final Widget body;
//   final String title;
//
//    MainLayout({super.key, required this.body, required this.title});

class MainLayout extends ConsumerStatefulWidget {
  final Widget body;
  final String title;
  MainLayout({super.key, required this.body, required this.title});
  @override
  ConsumerState<MainLayout> createState() => MainLayoutState();
}

class MainLayoutState extends ConsumerState<MainLayout> {
  dynamic role;
  ApiService apiService = ApiService();
  bool isDrawerOpen = true;
  @override
  void initState() {
    super.initState();
    Future.microtask(() {
      role = ref.watch(userRoleProvider);
    });
  }

  @override
  Widget build(BuildContext context) {
    final role = ref.watch(userRoleProvider);

    return ResponsiveLayout(
      // Mobile Layout
      mobile: Scaffold(
        backgroundColor: Colors.white,
        appBar: TopBar(
          title: widget.title,
          isMobile: true,
          // onBack: () {
          //   // Navigator.pop(context);
          // },
          onNotifications: () {
            debugPrint("Notifications tapped");
          },

          onLogout: () async {
            debugPrint("Logout tapped");
            AuthService.clearToken();

            if (role != 'handler') {
              await apiService.logoutUsingAPI(context);
            }

            context.go(AppRoutes.login);
          },
        ),
        drawer: const DrawerMenu(),
        body: widget.body,
        bottomNavigationBar: MobileBottomMenu(
          // onTabChanged: (index) {
          //   debugPrint("Mobile tab changed to $index");
          //   if (index == 0) {
          //     context.go(AppRoutes.dashboard);
          //   } else if (index == 1) {
          //     context.go(AppRoutes.profile);
          //   } else if (index == 2) {
          //     // ref.read(enquiryIdProvider.notifier).state = null;
          //     context.go(AppRoutes.enquiryLst);
          //   }
          // },
        ),
      ),

      // Web Layout
      web: Scaffold(
        // appBar: TopBar(
        //   title: widget.title,
        //   onMenuPressed: () {
        //     // Scaffold.of(context).openDrawer();
        //     // Scaffold.of(context).openDrawer();
        //
        //     setState(() {
        //       isDrawerOpen = !isDrawerOpen;
        //     });
        //   },
        //   onLogout: () async {
        //     debugPrint("Logout tapped");
        //     AuthService.clearToken();
        //     if (role != 'handler') {
        //       await apiService.logoutUsingAPI(context);
        //     }
        //     context.go(AppRoutes.login);
        //   },
        //
        //   onProfile: (TapDownDetails details) {
        //     final RenderBox overlay =
        //         Overlay.of(context).context.findRenderObject() as RenderBox;
        //
        //     showMenu(
        //       context: context,
        //
        //       color: Colors.white,
        //       position: RelativeRect.fromRect(
        //         details.globalPosition & const Size(40, 40),
        //         Offset.zero & overlay.size,
        //       ),
        //       items: [
        //         PopupMenuItem(
        //           enabled: false,
        //           child: SizedBox(width: 480, child: ProfilePopUp()),
        //         ),
        //       ],
        //     );
        //   },
        //
        //   onNotifications: () {
        //     debugPrint("Notifications tapped");
        //   },
        // ),
        // appBar: AppHeader(),
        appBar: PreferredSize(
          preferredSize: AppHeader().preferredSize,
          child: ExcludeFocus(child: AppHeader()),
        ),

        body: Row(
          children: [
            // AnimatedContainer(
            //   duration: const Duration(milliseconds: 250),
            //   width: isDrawerOpen ? 100 : 0, // 👈 adjust width
            //   child: isDrawerOpen
            //       ? const DrawerMenu()
            //       : const SizedBox.shrink(), // hides drawer
            // ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(16.0),
                // color: Color(0xFFFCFDFD),
                // color: Color(0xffF8FAFB),
                color: Color(0xfff8fafc),
                // color: Colors.white,
                child: Column(children: [Expanded(child: widget.body)]),
              ),
            ),
          ],
        ),
      ),
      // body: Row(
      //   children: [
      //     const SizedBox(
      //       width: 100, // fixed width for drawer
      //       child: DrawerMenu(),
      //     ),
      //     Expanded(
      //       child: Container(
      //         padding: EdgeInsets.all(2.0),
      //         color: Colors.white,
      //         child: Column(children: [Expanded(child: widget.body)]),
      //       ),
      //     ),
      //   ],
      // ),
      // ),
    );
  }
}