import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';
import 'package:jwt_decode/jwt_decode.dart';
import 'package:nhance_app_pwa/customAppBar/customAppBar.dart';
import 'package:nhance_app_pwa/pages/postEnrollment/service/api_service.dart';
import 'package:nhance_app_pwa/pages/postEnrollment/service/svg_service.dart';
import 'package:nhance_app_pwa/pages/postEnrollment/tickettracklist.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'package:url_launcher/url_launcher.dart';
import '../../customAppBar/customFooter.dart';
import '../../customAppBar/responsive.dart';
import '../../customAppBar/tabs.dart';
import '../../customAppBar/toastHelper.dart';
import '../service/SessionManager.dart';
import '../service/TokenService.dart';
import '../service/data_manager.dart';
import '../service/popup_helper.dart';
import 'package:nhance_app_pwa/logger.dart';

class help extends StatefulWidget {
  const help({Key? key}) : super(key: key);

  @override
  State<help> createState() => _helpState();
}

class _helpState extends State<help> {
  bool isLoading = false;
  late ApiService apiService;
  int _currentIndex = 0;
  bool isActive = true;
  int tickets = 1;
  int closedTrackActive = 1;
  int allClaimsActive = 0;
  bool _isArgsHandled = false;
  int ticketsActive = 1;
  dynamic _token;
  dynamic empCodeString;
  dynamic empPrimaryId;
  dynamic empEmailID;
  dynamic client_id;
  dynamic policyList;
  dynamic policyDataIsEmpty = 1;
  dynamic policyHeading;
  dynamic policyName;
  dynamic EmployeePolicy;
  List<Map<String, String>> employeeDetails = [];
  dynamic argumentsData;
  dynamic accountManagerDetails;
  dynamic accountManagerMobileNo;
  dynamic accountManagerEmail;
  dynamic client_branch_id;
  dynamic empMobileNo;
  List<dynamic> reversedClaimsList = [];
  List<dynamic> trackClaimsList = [];
  List<dynamic> ticketList = [];
  List<dynamic> reversedTicketList = [];
  List<dynamic> reversedClaimsClosedList = [];
  List<dynamic> trackClaimsClosedList = [];

  final Map<String, Color> statusColors = {
    'Open': Colors.green,
    'In Progress': Colors.blue,
    // 'Awaiting Reply': Colors.orange,
    'Resolved': Colors.yellow,
    'Closed': Colors.red,
  };
  final session = SessionManager();
  final dataManager = DataManager();

  void _onTabChanged(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  void initState() {
    super.initState();
    apiService = ApiService(context); // Initialize ApiService here
    _loadToken();
    logDebug('initState');
    // getTicketList();
  }

  Color getStatusColor(String? policyStatus) {
    if (policyStatus != null && statusColors.containsKey(policyStatus)) {
      return statusColors[policyStatus]!;
    } else {
      return Color(0xFF000000); // Default color for policyStatus text
    }
  }

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

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    logDebug('didChangeDependencies');

    // if (!_isArgsHandled) {
    final args =
        ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>?;
    logDebug('args - $args');
    if (args != null && args.containsKey('ticketTabSelected')) {
      logDebug('args1');
      setState(() {
        tickets = args['ticketTabSelected']; // e.g. 0 from TicketForm

        logDebug('args2- $tickets');
        closedTrackActive = 1;
        allClaimsActive = 1;
        tickets = 0;
        ticketsActive = 0;
        isActive = false;
        // if (tickets == 0) getTicketList();
      });
    }

    //   _isArgsHandled = true; // ✅ only apply once
    // }
  }

  Future<void> _loadToken() async {
    logDebug('_loadToken');
    final String? token = await TokenService.getPostToken();
    if (token != null && token.isNotEmpty) {
      // Decode the JWT token received from the API response
      Map<String, dynamic>? decodedToken = Jwt.parseJwt(token);
      logDebug(decodedToken);
      empMobileNo = session.mobileNo ?? '';
      empEmailID = session.empEmailCorporate ?? '';
      client_branch_id = session.empClientBranchId;
      empCodeString = session.empCodeString;
      logDebug(empCodeString); // Check if emp_code is correct
      empPrimaryId = session.empPrimaryId;
      client_id = session.client_id;
      logDebug(client_id);
      getSelfEmployeeProfile();
    }
  }

  Future<void> getSelfEmployeeProfile() async {
    // logDebug(getSelfEmployeeProfile);
    // if (client_id == null || empCodeString == null) {
    //   return;
    // }
    // setState(() {
    //   isLoading = true;
    // });
    // logDebug('check 1');
    // final response = await apiService.getSelfEmployeeProfileDetails(
    //     client_id!, empCodeString!, client_branch_id!);
    // logDebug('check 1');
    // if (response['status'] == 'success') {
    //   logDebug(response);
    setState(() {
      // accountManagerDetails = response['AccountManagerDetails'];
      final accountManager = dataManager.accountManagerDetails;
      accountManagerDetails = accountManager;
      logDebug('accountManagerDetails');
      logDebug(accountManagerDetails);
      accountManagerEmail = accountManagerDetails['email'];
      logDebug(accountManagerEmail);
      accountManagerMobileNo = accountManagerDetails['mobile'];
      logDebug(accountManagerMobileNo);
    });
    // setState(() {
    //   isLoading = false;
    // });
    // } else {
    //   setState(() {
    //     isLoading = false;
    //   });
    //   logDebug('API request failed with status: ${response['status']}');
    // }
  }

  Future<void> getTrackClaimsList() async {
    if (client_id == null || empCodeString == null) {
      return;
    }
    setState(() {
      isLoading = true;
    });
    logDebug('check 1');
    final response = await apiService.getTrackClaimsList(
        empPrimaryId!, empMobileNo, empEmailID);
    logDebug('check 2');
    setState(() {
      isLoading = false;
    });

    // if (response['success'] == true && response['data'] is List) {
    setState(() {
      trackClaimsList = response['ticket_data']
          .where((item) => item['status_value'] != 'Closed')
          .toList();
      reversedClaimsList = List<Map<String, dynamic>>.from(trackClaimsList);
      trackClaimsList = reversedClaimsList.reversed.toList();

      trackClaimsClosedList = response['ticket_data']
          .where((item) => item['status_value'] == 'Closed')
          .toList();
      reversedClaimsClosedList =
          List<Map<String, dynamic>>.from(trackClaimsClosedList);
      trackClaimsClosedList = reversedClaimsClosedList.reversed.toList();
    });
    // } else if (response['success'] == true &&
    //     response['data'] == "User Not Found") {
    //   setState(() {
    //     trackClaimsList = [];
    //     trackClaimsClosedList = [];
    //   });
    // } else {
    //   ToastHelper.showErrorToast(context, 'Unable to process. Please try again later');
    //   logDebug('API request failed with status: ${response['status']}');
    // }
  }

  Future<void> getTicketList() async {
    if (client_id == null || empCodeString == null) {
      return;
    }
    setState(() {
      isLoading = true;
    });

    try {
      logDebug('check  getTicketList 1');
      final response = await apiService.getTicketListByMobile(empMobileNo!);
      logDebug('check getTicketList 2');
      setState(() {
        isLoading = false;
      });
      // if (response['success'] == true && response['data'] is List) {
      setState(() {
        ticketList = response['data'].toList();
        logDebug("TC1 - $ticketList");
        reversedTicketList = List<Map<String, dynamic>>.from(ticketList);
        reversedTicketList = List<Map<String, dynamic>>.from(ticketList);
        logDebug("TC2 - $ticketList");
        // ticketList = reversedTicketList.reversed.toList();
        ticketList = reversedTicketList.toList();
        logDebug("TC3 - $ticketList");
      });
      // }
      // else if (response['status'] == "error" &&
      //     response['message'] == "No tickets found") {
      //   setState(() {
      //     ticketList = [];
      //     trackClaimsList = [];
      //     trackClaimsClosedList = [];
      //   });
      //   ToastHelper.showErrorToast(context, 'No tickets found');
      // } else {
      //   setState(() {
      //     isLoading = false;
      //   });
      //   ToastHelper.showErrorToast(context, 'Unable to process. Please try again later');
      //   logDebug('API request failed with status: ${response['status']}');
      // }
    } catch (e) {
      // ToastHelper.showErrorToast(context, 'Failed to load data');
      logDebug('Error in getTicketList: $e');
    } finally {
      if (mounted) {
        setState(() {
          isLoading = false;
        });
      }
    }
  }

  void _openDialPad(String phoneNumber) async {
    final url = 'tel:$phoneNumber';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not open dial pad for $phoneNumber';
    }
  }

  void _openEmail(String email) async {
    final Uri params = Uri(
      scheme: 'mailto',
      path: email,
      query:
          'subject=Your Subject&body=Hello', // Add default subject and body here
    );
    var url = params.toString();
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not open email client for $email';
    }
  }

  TextStyle _helpTitleStyle(BuildContext context) {
    return GoogleFonts.poppins(
      fontSize: Responsive.isDesktop(context) ? 22 : 18,
      fontWeight: FontWeight.w600,
      color: const Color(0xFF000000),
    );
  }

  TextStyle _helpSubtitleStyle(BuildContext context) {
    return GoogleFonts.poppins(
      fontSize: Responsive.isDesktop(context) ? 14 : 12,
      fontWeight: FontWeight.w400,
      color: const Color(0xFF777777),
    );
  }

  TextStyle _helpCardHeaderStyle(BuildContext context) {
    return GoogleFonts.poppins(
      fontSize: Responsive.isDesktop(context) ? 16 : 14,
      fontWeight: FontWeight.w600,
      color: const Color(0xFF000000),
    );
  }

  TextStyle _helpContactValueStyle(BuildContext context) {
    return GoogleFonts.poppins(
      fontSize: Responsive.isDesktop(context) ? 15 : 13,
      fontWeight: FontWeight.w500,
      color: const Color(0xFF000000),
    );
  }

  Widget _buildHelpHeroSection(BuildContext context) {
    final isDesktop = Responsive.isDesktop(context);
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(
        horizontal: isDesktop ? 24 : 16,
        vertical: isDesktop ? 28 : 20,
      ),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFFFFFCE5),
            Color(0xFFECF2FF),
          ],
        ),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: const Color(0xFFD9D9D9)),
      ),
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white.withValues(alpha: 0.7),
              shape: BoxShape.circle,
            ),
            child: SvgPicture.string(
              SvgService.getSvg('help'),
              width: isDesktop ? 140 : 120,
              height: isDesktop ? 140 : 120,
            ),
          ),
          const SizedBox(height: 16),
          Text(
            'We are here to help',
            textAlign: TextAlign.center,
            style: _helpTitleStyle(context),
          ),
          const SizedBox(height: 6),
          Text(
            'Reach your dedicated account manager or browse FAQs',
            textAlign: TextAlign.center,
            style: _helpSubtitleStyle(context),
          ),
        ],
      ),
    );
  }

  Widget _buildHelpContactRow({
    required BuildContext context,
    required String svgKey,
    required String value,
    required VoidCallback onTap,
    required Color iconBgColor,
  }) {
    if (value.trim().isEmpty) return const SizedBox.shrink();

    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(10),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 4),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: iconBgColor,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Center(
                  child: SvgPicture.string(
                    SvgService.getSvg(svgKey),
                    width: 20,
                    height: 20,
                  ),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Text(
                  value,
                  style: _helpContactValueStyle(context),
                ),
              ),
              const Icon(
                Icons.chevron_right,
                color: Color(0xFFE26728),
                size: 22,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildAccountManagerCard(BuildContext context) {
    final isDesktop = Responsive.isDesktop(context);
    final email = accountManagerEmail?.toString() ?? '';
    final mobile = accountManagerMobileNo?.toString() ?? '';

    return Container(
      width: double.infinity,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFFD9D9D9)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.04),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            padding: EdgeInsets.symmetric(
              horizontal: isDesktop ? 20 : 16,
              vertical: isDesktop ? 14 : 12,
            ),
            decoration: const BoxDecoration(
              color: Color(0xFFECF2FF),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(11),
                topRight: Radius.circular(11),
              ),
            ),
            child: Text(
              'Nhance Account Manager Contact',
              style: _helpCardHeaderStyle(context),
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(
              isDesktop ? 20 : 16,
              8,
              isDesktop ? 16 : 12,
              isDesktop ? 16 : 12,
            ),
            child: Column(
              children: [
                _buildHelpContactRow(
                  context: context,
                  svgKey: 'email',
                  value: email,
                  onTap: () => _openEmail(email),
                  iconBgColor: const Color(0xFFFFF3E8),
                ),
                if (email.isNotEmpty && mobile.isNotEmpty)
                  const Divider(height: 1, color: Color(0xFFE8E8E8)),
                _buildHelpContactRow(
                  context: context,
                  svgKey: 'smartphone',
                  value: mobile,
                  onTap: () => _openDialPad(mobile),
                  iconBgColor: const Color(0xFFE8F5E9),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFaqsCard(BuildContext context) {
    final isDesktop = Responsive.isDesktop(context);

    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () => context.push('/faqs'),
        borderRadius: BorderRadius.circular(12),
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.all(isDesktop ? 18 : 16),
          decoration: BoxDecoration(
            color: const Color(0xFFFFF8BF),
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: const Color(0xFFFFE08A)),
          ),
          child: Row(
            children: [
              Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: Colors.white.withValues(alpha: 0.8),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Icon(
                  Icons.question_answer_outlined,
                  color: Color(0xFFE26728),
                  size: 24,
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Frequently Asked Questions',
                      style: GoogleFonts.poppins(
                        fontSize: isDesktop ? 16 : 14,
                        fontWeight: FontWeight.w600,
                        color: const Color(0xFF000000),
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      'Find answers to commonly asked questions',
                      style: GoogleFonts.poppins(
                        fontSize: isDesktop ? 13 : 11,
                        fontWeight: FontWeight.w400,
                        color: const Color(0xFF777777),
                      ),
                    ),
                  ],
                ),
              ),
              const Icon(
                Icons.chevron_right,
                color: Color(0xFFE26728),
                size: 24,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHelpContent(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        _buildHelpHeroSection(context),
        const SizedBox(height: 20),
        if (accountManagerDetails != null) ...[
          _buildAccountManagerCard(context),
          const SizedBox(height: 16),
        ],
        _buildFaqsCard(context),
        SizedBox(height: Responsive.isDesktop(context) ? 40 : 80),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PopScope(
        canPop: false,
        onPopInvokedWithResult: (didPop, result) {
          if (didPop) return;
          context.pop();
        },
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: CustomAppBar(),
          body: Stack(children: [
            SingleChildScrollView(
                child: Container(
              padding: Responsive.isDesktop(context)
                  ? EdgeInsets.symmetric(
                      horizontal: MediaQuery.of(context).size.width *
                          0.2, // 30% of screen width as horizontal padding
                      vertical: MediaQuery.of(context).size.height *
                          0.03, // 5% of screen height as vertical padding
                    )
                  : EdgeInsets.all(10),
              color: Responsive.isDesktop(context)
                  ? Colors.white
                  : const Color(0xFFFFFCE5),
              child: _buildHelpContent(context),
            )),
            if (isLoading)
              Container(
                color: Color(0x98FFFCE5), // Semi-transparent background
                child: Center(
                  child: // Your GIF loader widget
                      Image.asset(
                          height: 60,
                          width: 60,
                          'assets/nhance-loader.gif'), // Adjust path to your GIF loader
                ),
              ),
            if (Responsive.isDesktop(context))
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  width: double.infinity, // Make the footer full width
                  child: CustomFooter(),
                ),
              ),
          ]),
          // floatingActionButton: Responsive.isDesktop(context)
          //     ? null
          //     : FloatingActionButton(
          //         onPressed: () {
          //           Navigator.pushNamed(context, 'chatbot');
          //         },
          //         child: Icon(Icons.chat),
          //       ),
          floatingActionButtonLocation: Responsive.isDesktop(context)
              ? null
              : FloatingActionButtonLocation.miniEndFloat,
          bottomNavigationBar: Responsive.isDesktop(context)
              ? null
              : CustomBottomNavigationBar(
                  onTabChanged: (index) {
                    // Add your navigation logic here
                    // repositionBotman();
                    if (index == 0) {
                      context.push('/home');
                    } else if (index == 1) {
                      context.push('/claims');
                    } else if (index == 2) {
                      context.push('/faqs');
                    } else if (index == 3) {
                      context.push('/profile');
                    } else if (index == 4) {
                      context.push('/help');
                    }
                    // else if (index == 4) {
                    //   // context.push('/wellness');
                    //   // Wellness tab clicked → show popup
                    //   if(!isRetailLoggedIn)
                    //   PopupHelper.showRedirectPopup(
                    //     context: context,
                    //     apiService: apiService,
                    //     empPrimaryId: session.empPrimaryId,
                    //   );
                    // }
                  },
                  icons: [
                    Icons.home_outlined,
                    Icons.sticky_note_2_outlined,
                    Icons.question_answer_outlined,
                    Icons.person_outline_outlined,
                    Icons.headset_mic_outlined,
                  ],
                  labels: ["Home", "Claims", "FAQs", "Profile", "Help"],
                  initialIndex: 4, // Initial index of the bottom navigation bar
                ),
        ));
  }

  List<Widget> generateClaimsList(List<dynamic> data) {
    return [
      ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: data.length,
        itemBuilder: (BuildContext context, int index) {
          var item = data[index];

          // String claimsName = item['user_name'];
          String claimsSubject = item['subject'] ?? '';
          String claimsDate = item['created_at'] ?? '';
          String claimStatus = item['claim_status'] ?? '';
          String claimsDepartmentName = item['ticket_policy_type'] ?? '';
          // String claimsReplies = item['replies'];
          // List<dynamic> messageList = item['message_list'];

          logDebug('generateTrackList');
          logDebug(claimsSubject);
          logDebug(claimsDate);
          logDebug(claimStatus);
          logDebug(claimsDepartmentName);

          final Map<String, Color> statusColors = {
            'Received': Colors.amber,
            'Rejected': Colors.red,
            'Cancelled': Colors.red,
            'Returned': Colors.deepOrange,
            'Closed': Colors.grey,
            'Approved': Colors.green,
            'Settled': Colors.lightBlueAccent,
            'Under Process': Colors.brown,
          };

          // Determine the color based on the claimStatus
          Color statusColor;
          if (claimStatus != null) {
            statusColor = statusColors[claimStatus!] ?? Color(0xFF979797);
          } else {
            statusColor = Color(0xFF979797); // Default color if status is null
          }

          return GestureDetector(
            onTap: () {
              // Navigator.pushNamed(context, 'claimtracklist', arguments: item);
            },
            child: MouseRegion(
              cursor: SystemMouseCursors.click,
              child: Card(
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(
                      color: Color(0xFFD9D9D9), // Set the border color here
                      width: 1.0, // Set the border width here
                    ),
                    borderRadius: BorderRadius.circular(
                        8.0), // Set the border radius here
                  ),
                  child: Column(children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors
                            .white, // Set background color for the container
                      ),
                      padding: EdgeInsets.only(
                          top: 10, bottom: 10, left: 10, right: 10),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Expanded(
                            flex: 7,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SvgPicture.string(
                                  SvgService.getSvg('claims'),
                                  width: 40,
                                  height: 40,
                                ),
                                SizedBox(
                                    width:
                                        10), // Adjust space between icon and text
                                Container(
                                    alignment: Alignment.centerLeft,
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          claimsDepartmentName ?? '',
                                          textAlign: TextAlign.left,
                                          style: GoogleFonts.poppins(
                                            fontSize:
                                                Responsive.isDesktop(context)
                                                    ? 18
                                                    : 16,
                                            fontWeight: FontWeight.w600,
                                            color: Color(0xFF000000),
                                          ),
                                        ),
                                        SizedBox(height: 5),
                                        Container(
                                            alignment: Alignment
                                                .centerLeft, // Set a fixed width or adjust based on your layout
                                            child: Tooltip(
                                              message: claimsSubject,
                                              child: Text(
                                                claimsSubject.length > 30
                                                    ? '${claimsSubject.substring(0, 30)}...'
                                                    : claimsSubject,
                                                textAlign: TextAlign.left,
                                                style: GoogleFonts.poppins(
                                                  fontSize:
                                                      Responsive.isDesktop(
                                                              context)
                                                          ? 14
                                                          : 12,
                                                  fontWeight: FontWeight.w400,
                                                  color: Color(0xFF777777),
                                                ),
                                              ),
                                            ))
                                      ],
                                    ))
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 5,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                // Adjust space between icon and text
                                Container(
                                    alignment: Alignment.centerRight,
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.end,
                                      children: [
                                        Container(
                                          width: 100,
                                          decoration: BoxDecoration(
                                            color: statusColor,
                                            borderRadius: BorderRadius.circular(
                                                50), // Border radius set to 50
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.all(5.0),
                                            child: Text(
                                              claimStatus,
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.poppins(
                                                fontSize: Responsive.isDesktop(
                                                        context)
                                                    ? 12
                                                    : 10,
                                                fontWeight: FontWeight.w400,
                                                color: Colors
                                                    .white, // Text color against the background
                                              ),
                                            ),
                                          ),
                                        ),
                                        SizedBox(height: 5),
                                        Text(
                                          formatDateWithTime(claimsDate),
                                          textAlign: TextAlign.right,
                                          style: GoogleFonts.poppins(
                                            fontSize:
                                                Responsive.isDesktop(context)
                                                    ? 14
                                                    : 12,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xFF777777),
                                          ), // Ensure text automatically wraps
                                        ),
                                      ],
                                    ))
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ])),
            ),
          );
        },
      ),
    ];
  }

  /// Reusable tab button widget
  Widget _buildTabButton({
    required BuildContext context,
    required String title,
    required bool isActive,
    required VoidCallback onTap,
  }) {
    return Container(
      width:
          Responsive.isDesktop(context) ? null : 120, // fixed width on mobile
      child: isActive
          ? Material(
              elevation: 5,
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
              child: TextButton(
                onPressed: onTap,
                style: TextButton.styleFrom(
                  padding: EdgeInsets.symmetric(
                    vertical: Responsive.isDesktop(context) ? 15 : 10,
                  ),
                ),
                child: Text(
                  title,
                  textAlign: TextAlign.center,
                  style: GoogleFonts.poppins(
                    fontSize: Responsive.isDesktop(context) ? 18 : 14,
                    fontWeight: FontWeight.w500,
                    color: Colors.black,
                  ),
                ),
              ),
            )
          : GestureDetector(
              onTap: onTap,
              child: Center(
                child: Text(
                  title,
                  textAlign: TextAlign.center,
                  style: GoogleFonts.poppins(
                    fontSize: Responsive.isDesktop(context) ? 18 : 14,
                    fontWeight: FontWeight.w400,
                    color: Color(0xFF636363),
                  ),
                ),
              ),
            ),
    );
  }

  List<Widget> generateClaimsClosedList(List<dynamic> data) {
    return [
      ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: data.length,
        itemBuilder: (BuildContext context, int index) {
          var item = data[index];
          // String claimsName = item['user_name'];
          String claimsSubject = item['subject'] ?? '';
          String claimsDate = item['created_at'] ?? '';
          String claimStatus = item['claim_status'] ?? '';
          String claimsDepartmentName = item['ticket_policy_type'] ?? '';
          // String claimsReplies = item['replies'];
          // List<dynamic> messageList = item['message_list'];

          final Map<String, Color> statusColors = {
            'Received': Colors.amber,
            'Rejected': Colors.red,
            'Cancelled': Colors.red,
            'Returned': Colors.deepOrange,
            'Closed': Colors.grey,
            'Approved': Colors.green,
            'Settled': Colors.lightBlueAccent,
            'Under Process': Colors.brown,
          };

          // Determine the color based on the claimStatus
          Color statusColor;
          if (claimStatus != null) {
            statusColor = statusColors[claimStatus!] ?? Color(0xFF979797);
          } else {
            statusColor = Color(0xFF979797); // Default color if status is null
          }

          return GestureDetector(
            onTap: () {
              // context.go('/tickettracklist', extra: item);
              Navigator.pushNamed(context, 'tickettracklist', arguments: item);
            },
            child: MouseRegion(
              cursor: SystemMouseCursors.click,
              child: Card(
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(
                      color: Color(0xFFD9D9D9), // Set the border color here
                      width: 1.0, // Set the border width here
                    ),
                    borderRadius: BorderRadius.circular(
                        8.0), // Set the border radius here
                  ),
                  child: Column(children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors
                            .white, // Set background color for the container
                      ),
                      padding: EdgeInsets.only(
                          top: 10, bottom: 10, left: 10, right: 10),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Expanded(
                            flex: 7,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SvgPicture.string(
                                  SvgService.getSvg('tickets'),
                                  width: 40,
                                  height: 40,
                                ),
                                SizedBox(
                                    width:
                                        10), // Adjust space between icon and text
                                Container(
                                    alignment: Alignment.centerLeft,
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          claimsDepartmentName ?? '',
                                          textAlign: TextAlign.left,
                                          style: GoogleFonts.poppins(
                                            fontSize:
                                                Responsive.isDesktop(context)
                                                    ? 18
                                                    : 16,
                                            fontWeight: FontWeight.w600,
                                            color: Color(0xFF000000),
                                          ),
                                        ),
                                        SizedBox(height: 5),
                                        Tooltip(
                                          message: claimsSubject,
                                          child: Text(
                                            claimsSubject.length > 30
                                                ? '${claimsSubject.substring(0, 30)}...'
                                                : claimsSubject,
                                            textAlign: TextAlign.left,
                                            style: GoogleFonts.poppins(
                                              fontSize:
                                                  Responsive.isDesktop(context)
                                                      ? 14
                                                      : 12,
                                              fontWeight: FontWeight.w400,
                                              color: Color(0xFF777777),
                                            ),
                                          ),
                                        )
                                      ],
                                    ))
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 5,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Container(
                                    alignment: Alignment.centerRight,
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.end,
                                      children: [
                                        Container(
                                          width: 100,
                                          decoration: BoxDecoration(
                                            color: statusColor,
                                            borderRadius: BorderRadius.circular(
                                                50), // Border radius set to 50
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.all(5.0),
                                            child: Text(
                                              claimStatus,
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.poppins(
                                                fontSize: Responsive.isDesktop(
                                                        context)
                                                    ? 12
                                                    : 10,
                                                fontWeight: FontWeight.w400,
                                                color: Colors
                                                    .white, // Text color against the background
                                              ),
                                            ),
                                          ),
                                        ),
                                        SizedBox(height: 5),
                                        Text(
                                          formatDateWithTime(claimsDate),
                                          textAlign: TextAlign.right,
                                          style: GoogleFonts.poppins(
                                            fontSize:
                                                Responsive.isDesktop(context)
                                                    ? 14
                                                    : 12,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xFF777777),
                                          ), // Ensure text automatically wraps
                                        ),
                                      ],
                                    ))
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ])),
            ),
          );
        },
      ),
    ];
  }

  List<Widget> generateClaimsTicketList(List<dynamic> data) {
    return [
      ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: data.length,
        itemBuilder: (BuildContext context, int index) {
          var item = data[index];

          // String claimsName = item['user_name'];
          String claimsticket = item['thz_id'] ?? '';
          String claimsSubject = item['subject'] ?? '';
          String claimsDate = item['created_at'] ?? '';
          String claimStatus = item['status'] ?? '';
          String claimsDepartmentName = item['ticket_type'] ?? '';
          // String claimsReplies = item['replies'];
          // List<dynamic> messageList = item['message_list'];
          logDebug("item - $item");
          logDebug('generateTrackList');
          logDebug(claimsSubject);
          logDebug(claimsDate);
          logDebug(claimStatus);
          logDebug(claimsDepartmentName);

          final Map<String, Color> statusColors = {
            'Received': Colors.amber,
            'Rejected': Colors.red,
            'Cancelled': Colors.red,
            'Returned': Colors.deepOrange,
            'Closed': Colors.grey,
            'Approved': Colors.green,
            'Settled': Colors.lightBlueAccent,
            'Under Process': Colors.brown,
          };

          // Determine the color based on the claimStatus
          Color statusColor;
          if (claimStatus != null) {
            statusColor = statusColors[claimStatus!] ?? Color(0xFF979797);
          } else {
            statusColor = Color(0xFF979797); // Default color if status is null
          }

          final truncatedSubject = Responsive.isDesktop(context)
              ? (claimsSubject.length > 30
                  ? '${claimsSubject.substring(0, 30)}...'
                  : claimsSubject)
              : (claimsSubject.length > 15
                  ? '${claimsSubject.substring(0, 10)}...'
                  : claimsSubject);

          return GestureDetector(
            onTap: () {
              logDebug("Navigating with thz_id: ${item['thz_id']}");

              context.go('/tickettracklist', extra: item['thz_id']);

              // Navigator.pushNamed(
              //   context,
              //   'claimtracklist',
              //   arguments: item['thz_id'],
              // );
            },
            child: MouseRegion(
              cursor: SystemMouseCursors.click,
              child: Card(
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(
                      color: Color(0xFFD9D9D9), // Set the border color here
                      width: 1.0, // Set the border width here
                    ),
                    borderRadius: BorderRadius.circular(
                        8.0), // Set the border radius here
                  ),
                  child: Column(children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors
                            .white, // Set background color for the container
                      ),
                      padding: EdgeInsets.only(
                          top: 10, bottom: 10, left: 10, right: 10),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Expanded(
                            flex: 7,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SvgPicture.string(
                                  SvgService.getSvg('tickets'),
                                  width: 40,
                                  height: 40,
                                ),
                                SizedBox(
                                    width:
                                        10), // Adjust space between icon and text
                                Container(
                                    alignment: Alignment.centerLeft,
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Row(
                                          children: [
                                            Text(
                                              '$claimsDepartmentName' ?? '',
                                              textAlign: TextAlign.left,
                                              style: GoogleFonts.poppins(
                                                fontSize: Responsive.isDesktop(
                                                        context)
                                                    ? 16
                                                    : 14,
                                                fontWeight: FontWeight.w600,
                                                color: Color(0xFF000000),
                                              ),
                                            ),
                                            Text(
                                              Responsive.isDesktop(context)
                                                  ? ' (Ticket Id #$claimsticket)'
                                                  : ' (Tkt #$claimsticket)' ??
                                                      '',
                                              textAlign: TextAlign.left,
                                              style: GoogleFonts.poppins(
                                                fontSize: Responsive.isDesktop(
                                                        context)
                                                    ? 14
                                                    : 10,
                                                fontWeight: FontWeight.w500,
                                                color: Colors.black87,
                                              ),
                                            ),
                                          ],
                                        ),
                                        SizedBox(height: 5),
                                        Container(
                                            alignment: Alignment
                                                .centerLeft, // Set a fixed width or adjust based on your layout
                                            child: Tooltip(
                                              message: claimsSubject,
                                              child: Text(
                                                truncatedSubject,
                                                textAlign: TextAlign.left,
                                                style: GoogleFonts.poppins(
                                                  fontSize:
                                                      Responsive.isDesktop(
                                                              context)
                                                          ? 14
                                                          : 12,
                                                  fontWeight: FontWeight.w400,
                                                  color: Color(0xFF777777),
                                                ),
                                              ),
                                            ))
                                      ],
                                    ))
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 5,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                // Adjust space between icon and text
                                Container(
                                    alignment: Alignment.centerRight,
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.end,
                                      children: [
                                        Container(
                                          width: 100,
                                          decoration: BoxDecoration(
                                            // color: statusColor,
                                            color: getStatusColor(claimStatus),
                                            borderRadius: BorderRadius.circular(
                                                50), // Border radius set to 50
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.all(5.0),
                                            child: Text(
                                              claimStatus,
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.poppins(
                                                fontSize: Responsive.isDesktop(
                                                        context)
                                                    ? 12
                                                    : 10,
                                                fontWeight: FontWeight.w400,

                                                color: Colors
                                                    .white, // Text color against the background
                                              ),
                                            ),
                                          ),
                                        ),
                                        SizedBox(height: 5),
                                        Text(
                                          formatDateWithTime(claimsDate),
                                          textAlign: TextAlign.right,
                                          style: GoogleFonts.poppins(
                                            fontSize:
                                                Responsive.isDesktop(context)
                                                    ? 14
                                                    : 12,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xFF777777),
                                          ), // Ensure text automatically wraps
                                        ),
                                      ],
                                    ))
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ])),
            ),
          );
        },
      ),
    ];
  }

  String formatDateWithTime(String timestamp) {
    // Parse the timestamp string to DateTime
    DateTime date = DateTime.parse(timestamp);

    // Format the DateTime object with date and time
    String formattedDate = DateFormat('d MMM, y HH:mm a').format(date);

    return formattedDate;
  }
}