import 'dart:js_interop';

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';

class InsuranceListWidget extends StatelessWidget {
  final List<Map<String, dynamic>> insuranceList;
  final Function(bool, Map<String, dynamic>, String) onOpen;
  final Function(Map<String, dynamic>) onDeleteInsurance;
  final Map<String, dynamic>? apiData;

  final Function(String, bool) onAddNew;
  final bool isViewMode;

  const InsuranceListWidget(
      {super.key,
      required this.insuranceList,
      required this.onOpen,
      required this.apiData,
      required this.onDeleteInsurance,
      required this.onAddNew,
      required this.isViewMode});

  @override
  Widget build(BuildContext context) {
    final isDesktop = MediaQuery.of(context).size.width > 1024;

    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        margin: const EdgeInsets.only(top: 16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Header with title and button
            // Row(
            //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
            //   children: [
            //     if ((!isDesktop) && insuranceList.isNotEmpty)
            //       Text(
            //         " ",
            //         style: const TextStyle(
            //           fontSize: 18,
            //           fontWeight: FontWeight.bold,
            //         ),
            //       ),
            //     MouseRegion(
            //       cursor: isViewMode
            //           ? SystemMouseCursors.forbidden
            //           : SystemMouseCursors.click,
            //       child: GestureDetector(
            //         onTap: isViewMode
            //             ? null
            //             : () {
            //                 print("New data");
            //                 onAddNew("Insurance", true);
            //               },
            //         child: Row(
            //           mainAxisSize:
            //               MainAxisSize.min, // Ensures content fits nicely
            //           children: [
            //             // Text(
            //             //   "Add New",
            //             //   style: TextStyle(fontSize: 13),
            //             // ),
            //             // SizedBox(width: 8), // spacing between icon and text
            //             // Icon(
            //             //   Icons.add_circle_sharp,
            //             //   size: 30,
            //             //   color: Color(0xFF114D8B),
            //             // )
            //           ],
            //         ),
            //       ),
            //       // child: ElevatedButton(
            //       //   style: ElevatedButton.styleFrom(
            //       //     backgroundColor: Color(0xFF114D8B),
            //       //     foregroundColor: Colors.white,
            //       //     disabledBackgroundColor: Color(0xFF114D8B),
            //       //     disabledForegroundColor: Colors.white,
            //       //     shape: RoundedRectangleBorder(
            //       //       borderRadius: BorderRadius.circular(8),
            //       //       side: BorderSide(color: Color(0xFF114D8B), width: 2),
            //       //     ),
            //       //     padding:
            //       //         EdgeInsets.symmetric(horizontal: 20, vertical: 12),
            //       //   ),
            //       //   onPressed: isViewMode
            //       //       ? null
            //       //       : () {
            //       //           print("New data");
            //       //           onAddNew("Insurance", true);
            //       //         },
            //       //   child: Row(
            //       //     mainAxisSize:
            //       //         MainAxisSize.min, // Ensures content fits nicely
            //       //     children: [
            //       //       Icon(
            //       //         Icons.add_circle_sharp,
            //       //         size: 30,
            //       //         color: Color(0xFF114D8B),
            //       //       )
            //       //     ],
            //       //   ),
            //       // ),
            //     ),
            //   ],
            // ),
            const SizedBox(height: 16),
            // Scroll behavior based on device

            _buildData(context, isDesktop)
          ],
        ),
      ),
    );
  }

  Widget _buildData(BuildContext context, bool isDesktop) {
    List<Map<String, dynamic>> filteredList =
        insuranceList.where((item) => item["is_active"] == "1").toList();
    print("filteredList- $filteredList");

    List<dynamic> insurancetypeList =
        apiData?['insurance_type_of_insurance'] ?? [];

    String getRequestForInsuranceType(String? specialRequestKey) {
      if (specialRequestKey == null) return "N/A";

      return insurancetypeList
          .firstWhere(
            (element) =>
                element["dropdown_key"].toString() == specialRequestKey,
            orElse: () => {"dropdown_value": "N/A"},
          )["dropdown_value"]
          .toString();
    }

    return ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: filteredList.length,
      itemBuilder: (context, index) {
        final item = filteredList[index];

        String getRequestValue(String? specialRequestKey) {
          if (specialRequestKey == null) return "N/A";
          return (apiData?['miscellaneous_special_request'] ?? [])
              .firstWhere(
                (element) =>
                    element["dropdown_key"].toString() == specialRequestKey,
                orElse: () => {"dropdown_value": "N/A"},
              )["dropdown_value"]
              .toString();
        }

        // String formatDate(String dateString) {
        //   try {
        //     DateTime date = DateTime.parse(dateString);
        //     return DateFormat('dd MMMM yy').format(date); // Example: 4 Apr 25
        //   } catch (e) {
        //     return "Invalid Date";
        //   }
        // }
        String formatDate(String dateString) {
          try {
            DateTime date = DateFormat("dd-MM-yyyy").parse(dateString);
            return DateFormat('dd MMM yy').format(date); // Example: 23 May 25
          } catch (e) {
            return "Invalid Date";
          }
        }

        return Container(
          margin: EdgeInsets.symmetric(horizontal: 8, vertical: 6),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            // color: Colors.orange.shade50,
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 3,
                offset: Offset(0, 1),
              ),
            ],
            border: Border(
              top: BorderSide(
                color: Colors.white70, // Change color to match your theme
                width: 2,
              ),
            ),
          ),
          child: Padding(
            padding: EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text(
                      getRequestForInsuranceType(item["type_of_insurance"]!.toString()),
                      style: GoogleFonts.poppins(
                        fontSize: 14,
                        fontWeight: FontWeight.w800,
                          color: !isDesktop ? Color(0xFF114D8B) : Color(0xFF575A74)
                      ),
                    ),
                    Spacer(),
                    GestureDetector(
                      onTap: () => onOpen(true, item, "Insurance"),
                      child: Tooltip(
                        message: 'Edit Insurance Details',
                        child: Image.asset(
                          'assets/images/IconsImg/edit.png',
                          width: 20,
                          height: 15,
                          color: Color(0xFF114D8B),
                        ),
                      ),
                    ),
                    // SizedBox(width: 10),
                    // GestureDetector(
                    //   onTap: () => onDeleteInsurance(item),
                    //   child: Tooltip(
                    //     message: 'Delete Insurance Details',
                    //     child: Image.asset(
                    //       'assets/images/IconsImg/delete.png',
                    //       width: 20,
                    //       height: 15,
                    //       color: Colors.red,
                    //     ),
                    //   ),
                    // ),
                  ],
                ),
                SizedBox(height: 4),
                Divider(
                  color: Colors.blueGrey.shade50,
                ),
                SizedBox(height: 4),
                isDesktop
                    ? Row(
                        children: [
                          Expanded(
                              flex: 2,
                              child: Text(
                                " InsuranceType",
                                style: GoogleFonts.poppins(
                                  fontSize: 11,
                                ),
                              )),
                          Expanded(
                              flex: 2,
                              child: Text(
                                " Time Period ",
                                style: GoogleFonts.poppins(
                                  fontSize: 11,
                                ),
                              )),
                          Expanded(
                              flex: 2,
                              child: Text(
                                " Comments",
                                style: GoogleFonts.poppins(
                                  fontSize: 11,
                                ),
                              )),
                        ],
                      )
                    : SizedBox.shrink(),
                isDesktop
                    ? Row(
                        children: [
                          Expanded(
                            flex: 2,
                            child: Text(
                              getRequestForInsuranceType(
                                  item["type_of_insurance"]!.toString()),
                              style: GoogleFonts.poppins(
                                fontSize: 12,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 2,
                            child: Text(
                              "${formatDate(item["start_date"]!)} - ${formatDate(item["end_date"]!)}",
                              style: GoogleFonts.poppins(
                                fontSize: 12,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 2,
                            child: _buildComments(
                                "Comments:", item["comments"] ?? "N/A"),
                          ),
                        ],
                      )
                    :
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Top Row (Country, Currency, Total)
                    // Row(
                    //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    Wrap(
                      spacing: 20, // horizontal space between items
                      runSpacing: 10, // vertical space between rows
                      children: [
                        _infoBlock("Insurance Type", getRequestForInsuranceType(item["type_of_insurance"]!.toString()) ?? "N/A"),
                        _infoBlock("Start Date", formatDate(item["start_date"]!) ?? "N/A"),
                        _infoBlock("End Date", formatDate(item["end_date"]) ?? "N/A"),
                      ],
                    ),
                    const SizedBox(height: 16),

                    // Comment label
                    Text(
                      "Comment",
                      style: GoogleFonts.poppins(
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const SizedBox(height: 8),
                    if (item["comments"] != null && item["comments"].toString().trim().isNotEmpty)
                      Container(
                        width: double.infinity,
                        padding: const EdgeInsets.all(12),
                        decoration: BoxDecoration(
                          border: Border.all(color: const Color(0xFF7098DD), width: 1),
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Text(
                          item["comments"] ?? "N/A",
                          style: GoogleFonts.poppins(fontSize: 12, color: Colors.black87),
                        ),
                      )
                    else
                      const Text( "N/A", style: TextStyle(fontSize: 12), ),
                  ],
                ),
                // Column(
                //         children: [
                //           _buildRow(
                //               "InsuranceType:",
                //               getRequestForInsuranceType(
                //                   item["type_of_insurance"]!.toString())),
                //           SizedBox(width: 10),
                //           _buildRow(
                //               "StartDate:", formatDate(item["start_date"]!)),
                //           SizedBox(width: 10),
                //           _buildRow("EndDate:", formatDate(item["end_date"])),
                //           SizedBox(width: 10),
                //           _buildRow("Comments:", item["comments"] ?? "N/A"),
                //         ],
                //       ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildComments(String title, String value) {
    // Define character limits based on title
    Map<String, int> limits = {
      // "Special Request:": 30,
      "Comments:": 20,
      // Add more keys and limits if needed
    };

    int limit = limits[title] ?? 50; // Default limit if title not found
    bool exceedsLimit = value.length > limit;

    String wrapText(String text, int maxLineLength) {
      final pattern = RegExp('.{1,$maxLineLength}(\\s+|\$)');
      return pattern.allMatches(text).map((m) => m.group(0)!).join('\n');
    }

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: exceedsLimit
              ? Tooltip(
                  message: wrapText(value, 50),
                  decoration: BoxDecoration(
                    color: Colors.grey.shade200, // Black background
                    borderRadius: BorderRadius.circular(6),
                  ),
                  textStyle:
                      TextStyle(color: Colors.black), // Tooltip text color
                  padding: EdgeInsets.all(8),
                  preferBelow: false,
                  child: Text(value.substring(0, limit) + "...",
                      style: GoogleFonts.poppins(
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis),
                )
              : Text(
                  value,
                  style: GoogleFonts.poppins(
                    fontSize: 12,
                    fontWeight: FontWeight.w600,
                  ),
                ),
        ),
      ],
    );
  }

  Widget _infoBlock(String label, String value) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.only(right: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              label,
              style: GoogleFonts.poppins(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
              ),
            ),
            const SizedBox(height: 4),
            Text(
              value,
              style: GoogleFonts.poppins(
                fontSize: 12,
                color: Colors.black87,
              ),
            ),
          ],
        ),
      ),
    );
  }
  Widget _buildRow(String title, String value) {
    // Define character limits based on title
    Map<String, int> limits = {
      "Special Request:": 30,
      "Comments:": 70,
      // Add more keys and limits if needed
    };

    int limit = limits[title] ?? 50; // Default limit if title not found
    bool exceedsLimit = value.length > limit;

    String wrapText(String text, int maxLineLength) {
      final pattern = RegExp('.{1,$maxLineLength}(\\s+|\$)');
      return pattern.allMatches(text).map((m) => m.group(0)!).join('\n');
    }

    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: GoogleFonts.poppins(
            fontSize: 12,
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(width: 8),
        Expanded(
          child: exceedsLimit
              ? Tooltip(
                  message: wrapText(value, 50),
                  decoration: BoxDecoration(
                    color: Colors.grey.shade200, // Black background
                    borderRadius: BorderRadius.circular(6),
                  ),
                  textStyle: TextStyle(
                      color: Colors.black, fontSize: 12), // Tooltip text color
                  padding: EdgeInsets.all(8),
                  preferBelow: false,
                  child: Text(
                    value.substring(0, limit) + "...",
                    style: GoogleFonts.poppins(
                      fontSize: 12,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                )
              : Text(
                  value,
                  style: GoogleFonts.poppins(
                    fontSize: 12,
                  ),
                ),
        ),
      ],
    );
  }

  List<DataRow> _buildDataRows() {
    List<Map<String, dynamic>> filteredList =
        insuranceList.where((item) => item["is_active"] == "1").toList();
    print("filteredList- $filteredList");

    List<dynamic> insurancetypeList =
        apiData?['insurance_type_of_insurance'] ?? [];

    String getRequestForInsuranceType(String? specialRequestKey) {
      if (specialRequestKey == null) return "N/A";

      return insurancetypeList
          .firstWhere(
            (element) =>
                element["dropdown_key"].toString() == specialRequestKey,
            orElse: () => {"dropdown_value": "N/A"},
          )["dropdown_value"]
          .toString();
    }

    return filteredList.asMap().entries.map((entry) {
      Map<String, dynamic> item = entry.value;
      return DataRow(cells: [
        // DataCell(Text(item["indx"]?.toString() ??  "N/A")), // Index column
        // DataCell(Text(item["type_of_insurance"]!)),
        DataCell(Text(
            getRequestForInsuranceType(item["type_of_insurance"]!.toString()))),
        DataCell(Text(item["start_date"]!)),
        DataCell(Text(item["end_date"]!)),
        DataCell(Row(
          children: [
            GestureDetector(
              onTap: () => onOpen(true, item, "Insurance"),
              child: Tooltip(
                message: 'Edit Insurance Details',
                child: Image.asset(
                  'assets/images/IconsImg/edit.png',
                  width: 20,
                  height: 15,
                ),
              ),
            ),
            SizedBox(width: 10),
            GestureDetector(
              onTap: () => onDeleteInsurance(item),
              child: Tooltip(
                message: 'Delete Insurance Details',
                child: Image.asset(
                  'assets/images/IconsImg/delete.png',
                  width: 20,
                  height: 15,
                ),
              ),
            ),
            IconButton(
              icon: Icon(Icons.keyboard_arrow_down_outlined,
                  size: 28, color: Color(0xFF475569)),
              onPressed: () {
                // Expand logic
              },
            ),
          ],
        )

            //     Row(
            //   children: [
            //     IconButton(
            //       icon: Icon(Icons.remove_red_eye, color: Colors.blue),
            //       onPressed: () {
            //         // View action
            //       },
            //     ),
            //     IconButton(
            //       icon: Icon(Icons.edit, color: Colors.green),
            //       onPressed: () {
            //         onOpen(true, item, "Insurance");
            //       },
            //     ),
            //     IconButton(
            //       icon: Icon(Icons.delete, color: Colors.red),
            //       onPressed: () {
            //         onDeleteInsurance(item);
            //       },
            //     ),
            //   ],
            // )

            ),
      ]);
    }).toList();
  }
}