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:nhance_app_pwa/pages/service/SessionManager.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;

import '../../customAppBar/customFooter.dart';
import '../../customAppBar/responsive.dart';
import '../../customAppBar/tabs.dart';
import '../../customAppBar/toastHelper.dart';
import '../service/TokenService.dart';
import '../service/popup_helper.dart';

import 'package:nhance_app_pwa/logger.dart';

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

  @override
  State<raisedTicketHistory> createState() => _raisedTicketHistoryState();
}

class _raisedTicketHistoryState extends State<raisedTicketHistory> {
  bool isLoading = false;
  late ApiService apiService;
  int _currentIndex = 0;
  dynamic _token;
  dynamic decodedToken;
  dynamic empCodeString;
  dynamic empPrimaryId;
  dynamic client_id;
  dynamic empName;
  dynamic policyList;
  dynamic policyDataIsEmpty = 1;
  dynamic trackClaimsIsEmpty = 1;
  dynamic policyHeading;
  dynamic policyName;
  dynamic EmployeePolicy;
  List<Map<String, String>> employeeDetails = [];
  dynamic argumentsData;
  dynamic empMobileNo;
  List<dynamic> reversedClaimsList = [];
  List<dynamic> trackClaimsList = [];
  int trackClaimsActive = 1;
  int yourPlanActive = 0;
  int? serviceId;
  dynamic client_branch_id;
  dynamic mobileNo;
  List<dynamic> reversedTicketList = [];

  List<dynamic> ticketList = [];

  final session = SessionManager();

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


  @override
  void initState() {
    super.initState();
    apiService = ApiService(context);
    _loadToken();
  }

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

  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;
      client_branch_id = session.empClientBranchId;
      empCodeString = session.empCodeString;
      empName = session.gpaEmpName;
      logDebug(empCodeString); // Check if emp_code is correct
      empPrimaryId = session.empPrimaryId;
      client_id = session.client_id;
      logDebug(client_id);
      logDebug(client_id);
      getTicketList();
    }
  }

  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;
        });
      }
    }
  }

  String formatDate(String timestamp) {
    // Convert the timestamp string to milliseconds
    int milliseconds = int.parse(timestamp) * 1000;

    // Create a DateTime object from milliseconds
    DateTime date = DateTime.fromMillisecondsSinceEpoch(milliseconds);

    // Format the DateTime object
    String formattedDate = DateFormat('d MMM, y').format(date);

    return formattedDate;
  }

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

  @override
  Widget build(BuildContext context) {
    return PopScope(
        canPop: false,
        onPopInvokedWithResult: (didPop, result) {
          if (didPop) return;
          context.go('/help');
        },
        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: Colors.white,
              child: Column(children: [
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Expanded(
                            flex: 12,
                            child: InkWell(
                              onTap: () {
                                context.go('/help');
                              },
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Icon(
                                    Icons
                                        .chevron_left, // Replace with your desired icon
                                    color: Color(0xFF000000),
                                    size: 30,
                                  ),
                                  SizedBox(
                                      width:
                                      5), // Adjust space between icon and text
                                  Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        'Track Queries',
                                        textAlign: TextAlign.start,
                                        style: GoogleFonts.poppins(
                                          fontSize: 16,
                                          fontWeight: FontWeight.w600,
                                          color: Color(0xFF000000),
                                        ),
                                      ),
                                      Text(
                                        'Manage your Queries',
                                        textAlign: TextAlign.start,
                                        style: GoogleFonts.poppins(
                                          fontSize:
                                          12, // Adjust the font size as needed
                                          fontWeight: FontWeight.w400,
                                          color: Color(0xFF000000),
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                      // Add more rows as needed
                    ],
                  ),
                ),
                SizedBox(height: 15),
                SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: generateClaimsTicketList(
                        ticketList), // Replace 'yourDataList' with your actual data list
                  ),
                ),
                SizedBox(height: Responsive.isDesktop(context) ? 40 : 70),
              ]),
            )),
        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: 0, // Initial index of the bottom navigation bar
      ),
    )
    );
  }

  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/${item['thz_id']}');
              // context.go('/tickettracklist', extra: 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;
  }
}