$(function () {
  'use strict';

  // CSRF setup
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

  let dt_warnings_table = $('.datatables-warnings');

  // Initialize DataTable
  if (dt_warnings_table.length) {
    let dt_warnings = dt_warnings_table.DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: pageData.urls.datatable,
        data: function (d) {
          d.status = $('#filter-status').val();
          d.warning_type = $('#filter-warning-type').val();
          d.employee = $('#filter-employee').val();
        }
      },
      columns: [
        { data: 'employee_info', name: 'employee_info', searchable: true },
        { data: 'warning_info', name: 'warning_info', searchable: true },
        { data: 'dates', name: 'dates', searchable: false },
        { data: 'status_info', name: 'status_info', searchable: false },
        { data: 'issued_by', name: 'issued_by', searchable: true },
        { data: 'actions', name: 'actions', orderable: false, searchable: false }
      ],
      order: [[2, 'desc']],
      dom: '<"row mx-2"<"col-md-2"<"me-3"l>><"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
      displayLength: 10,
      lengthMenu: [10, 25, 50, 75, 100],
      buttons: [],
      responsive: {
        details: {
          display: $.fn.dataTable.Responsive.display.modal({
            header: function (row) {
              var data = row.data();
              return 'Details of ' + data['warning'];
            }
          }),
          type: 'column',
          renderer: function (api, rowIdx, columns) {
            var data = $.map(columns, function (col, i) {
              return col.columnIndex !== 5
                ? '<tr data-dt-row="' +
                    col.rowIdx +
                    '" data-dt-column="' +
                    col.columnIndex +
                    '">' +
                    '<td>' +
                    col.title +
                    ':' +
                    '</td> ' +
                    '<td>' +
                    col.data +
                    '</td>' +
                    '</tr>'
                : '';
            }).join('');

            return data ? $('<table class="table"/><tbody />').append(data) : false;
          }
        }
      },
      language: {
        sLengthMenu: '_MENU_',
        search: '',
        searchPlaceholder: pageData.labels.searchPlaceholder || 'Search warnings, employees, subjects...',
        info: pageData.labels.dtInfo || 'Showing _START_ to _END_ of _TOTAL_ entries',
        infoEmpty: pageData.labels.dtInfoEmpty || 'Showing 0 to 0 of 0 entries',
        infoFiltered: pageData.labels.dtInfoFiltered || '(filtered from _MAX_ total entries)',
        zeroRecords: pageData.labels.dtZeroRecords || 'No matching records found',
        emptyTable: pageData.labels.dtEmptyTable || 'No data available in table',
        processing: pageData.labels.dtProcessing || 'Processing...',
        loadingRecords: pageData.labels.dtLoadingRecords || 'Loading...',
        paginate: {
          first: pageData.labels.dtFirst || 'First',
          last: pageData.labels.dtLast || 'Last',
          next: pageData.labels.dtNext || 'Next',
          previous: pageData.labels.dtPrevious || 'Previous'
        }
      }
    });
  }

  // Initialize Select2
  $('.select2').select2({
    placeholder: function() {
      return $(this).data('placeholder') || pageData.labels.select || 'Select...';
    },
    allowClear: true
  });

  // Load warning types and employees for filters
  loadWarningTypes();
  loadEmployees();
  loadWarningStats();

  // Set up periodic refresh of statistics (every 5 minutes)
  setInterval(function() {
    loadWarningStats();
  }, 5 * 60 * 1000); // 5 minutes in milliseconds

  // Refresh stats when user returns to the tab
  $(window).on('focus', function() {
    loadWarningStats();
  });

  // Filter functionality
  $('#filter-status, #filter-warning-type, #filter-employee').on('change', function () {
    if (dt_warnings_table.length) {
      dt_warnings_table.DataTable().ajax.reload();
      loadWarningStats();
    }
  });

  // Reset filters
  $('#reset-filters').on('click', function () {
    $('#filter-status').val('').trigger('change');
    $('#filter-warning-type').val('').trigger('change');
    $('#filter-employee').val('').trigger('change');
    if (dt_warnings_table.length) {
      dt_warnings_table.DataTable().ajax.reload();
      loadWarningStats();
    }
  });

  // Actions
  $(document).on('click', '.view-warning', function (e) {
    e.preventDefault();
    const warningId = $(this).data('id');
    window.location.href = pageData.urls.show.replace(':id', warningId);
  });

  $(document).on('click', '.edit-warning', function (e) {
    e.preventDefault();
    const warningId = $(this).data('id');
    window.location.href = pageData.urls.edit.replace(':id', warningId);
  });

  $(document).on('click', '.issue-warning', function (e) {
    e.preventDefault();
    const warningId = $(this).data('id');

    Swal.fire({
      title: pageData.labels.issueWarning || 'Issue Warning',
      text: pageData.labels.issueWarningConfirm || 'Are you sure you want to issue this warning?',
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: pageData.labels.yesIssue || 'Yes, Issue',
      cancelButtonText: pageData.labels.cancel || 'Cancel',
      customClass: {
        confirmButton: 'btn btn-primary me-3',
        cancelButton: 'btn btn-label-secondary'
      },
      buttonsStyling: false
    }).then((result) => {
      if (result.isConfirmed) {
        issueWarning(warningId);
      }
    });
  });

  $(document).on('click', '.delete-warning', function (e) {
    e.preventDefault();
    const warningId = $(this).data('id');

    Swal.fire({
      title: pageData.labels.confirmDelete || 'Are you sure?',
      text: pageData.labels.confirmDeleteText || 'This action cannot be undone!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: pageData.labels.yesDelete || 'Yes, delete it!',
      cancelButtonText: pageData.labels.cancel || 'Cancel',
      customClass: {
        confirmButton: 'btn btn-danger me-3',
        cancelButton: 'btn btn-label-secondary'
      },
      buttonsStyling: false
    }).then((result) => {
      if (result.isConfirmed) {
        deleteWarning(warningId);
      }
    });
  });

  // Appeal warning - Open offcanvas
  $(document).on('click', '.appeal-warning', function (e) {
    e.preventDefault();
    const warningId = $(this).data('id');
    openAppealOffcanvas(warningId);
  });

  // Handle appeal form submission
  $('#appealForm').on('submit', function (e) {
    e.preventDefault();
    submitAppeal();
  });

  // Load warning types for filter
  function loadWarningTypes() {
    $.ajax({
      url: pageData.urls.getActiveTypes || '/disciplinary-actions/warning-types/active-types',
      method: 'GET',
      success: function (response) {
        if (response.status === 'success') {
          const $select = $('#filter-warning-type');
          const allTypesLabel = pageData.labels.allTypes || 'All Types';
          $select.empty().append(`<option value="">${allTypesLabel}</option>`);

          response.data.forEach(function (type) {
            $select.append(`<option value="${type.id}">${type.name}</option>`);
          });
        }
      }
    });
  }

  // Load employees for filter
  function loadEmployees() {
    $.ajax({
      url: pageData.urls.getEmployees || '/employees/getReportingToUsersAjax', // Use the same route as create
      method: 'GET',
      success: function (response) {
        if (response.data) {
          const $select = $('#filter-employee');
          const allEmployeesLabel = pageData.labels.allEmployees || 'All Employees';
          $select.empty().append(`<option value="">${allEmployeesLabel}</option>`);

          response.data.forEach(function (employee) {
            // Use first_name and last_name if name is not available
            const employeeName = employee.name || `${employee.first_name ?? ''} ${employee.last_name ?? ''}`.trim();
            $select.append(`<option value="${employee.id}">${employeeName}</option>`);
          });
        }
      }
    });
  }

  // Load warning statistics
  function loadWarningStats() {
    const filters = {
      status: $('#filter-status').val(),
      warning_type: $('#filter-warning-type').val(),
      employee: $('#filter-employee').val()
    };

    $.ajax({
      url: pageData.urls.stats,
      method: 'GET',
      data: filters,
      success: function (response) {
        if (response.status === 'success') {
          const stats = response.data;
          $('#active-warnings').text(stats.active_warnings || 0);
          $('#draft-warnings').text(stats.draft_warnings || 0);
          $('#under-appeal').text(stats.under_appeal || 0);
          $('#overdue-acknowledgments').text(stats.overdue_acknowledgments || 0);
        }
      },
      error: function (xhr) {
        console.error('Failed to load warning statistics:', xhr);
        // Fallback to zeros on error
        $('#active-warnings').text('0');
        $('#draft-warnings').text('0');
        $('#under-appeal').text('0');
        $('#overdue-acknowledgments').text('0');
      }
    });
  }

  // Issue warning function
  function issueWarning(warningId) {
    $.ajax({
      url: pageData.urls.issue.replace(':id', warningId),
      method: 'POST',
      success: function (response) {
        if (response.status === 'success') {
          Swal.fire({
            icon: 'success',
            title: pageData.labels.success || 'Success!',
            text: response.data.message,
            timer: 2000,
            showConfirmButton: false,
            customClass: {
              confirmButton: 'btn btn-success'
            },
            buttonsStyling: false
          });
          if (dt_warnings_table.length) {
            dt_warnings_table.DataTable().ajax.reload();
          }
          loadWarningStats();
        } else {
          Swal.fire({
            icon: 'error',
            title: pageData.labels.error || 'Error!',
            text: response.data,
            customClass: {
              confirmButton: 'btn btn-danger'
            },
            buttonsStyling: false
          });
        }
      },
      error: function (xhr) {
        let errorMessage = pageData.labels.errorOccurred || 'An error occurred. Please try again.';

        if (xhr.responseJSON && xhr.responseJSON.data) {
          errorMessage = xhr.responseJSON.data;
        }

        Swal.fire({
          icon: 'error',
          title: pageData.labels.error || 'Error!',
          text: errorMessage,
          customClass: {
            confirmButton: 'btn btn-danger'
          },
          buttonsStyling: false
        });
      }
    });
  }

  // Delete warning function
  function deleteWarning(warningId) {
    $.ajax({
      url: pageData.urls.destroy.replace(':id', warningId),
      method: 'DELETE',
      success: function (response) {
        if (response.status === 'success') {
          Swal.fire({
            icon: 'success',
            title: pageData.labels.deleted || 'Deleted!',
            text: response.data.message,
            timer: 2000,
            showConfirmButton: false,
            customClass: {
              confirmButton: 'btn btn-success'
            },
            buttonsStyling: false
          });
          if (dt_warnings_table.length) {
            dt_warnings_table.DataTable().ajax.reload();
          }
          loadWarningStats();
        } else {
          Swal.fire({
            icon: 'error',
            title: pageData.labels.error || 'Error!',
            text: response.data,
            customClass: {
              confirmButton: 'btn btn-danger'
            },
            buttonsStyling: false
          });
        }
      },
      error: function (xhr) {
        let errorMessage = pageData.labels.errorOccurred || 'An error occurred. Please try again.';

        if (xhr.responseJSON && xhr.responseJSON.data) {
          errorMessage = xhr.responseJSON.data;
        }

        Swal.fire({
          icon: 'error',
          title: pageData.labels.error || 'Error!',
          text: errorMessage,
          customClass: {
            confirmButton: 'btn btn-danger'
          },
          buttonsStyling: false
        });
      }
    });
  }

  // Open appeal offcanvas
  function openAppealOffcanvas(warningId) {
    // Reset form
    $('#appealForm')[0].reset();
    $('#appeal_warning_id').val(warningId);

    // Show offcanvas
    const offcanvas = new bootstrap.Offcanvas(document.getElementById('appealOffcanvas'));
    offcanvas.show();
  }

  // Submit appeal
  function submitAppeal() {
    const warningId = $('#appeal_warning_id').val();
    const appealReason = $('#appeal_reason').val();
    const employeeStatement = $('#employee_statement').val();

    // Validate
    if (!appealReason.trim()) {
      Swal.fire({
        icon: 'error',
        title: pageData.labels.error || 'Error!',
        text: pageData.labels.pleaseProvideReason || 'Please provide a reason for the appeal',
        customClass: {
          confirmButton: 'btn btn-primary'
        },
        buttonsStyling: false
      });
      return;
    }

    // Disable submit button
    const $submitBtn = $('#submitAppealBtn');
    const originalText = $submitBtn.html();
    $submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>' + (pageData.labels.submitting || 'Submitting...'));

    $.ajax({
      url: pageData.urls.appealStore,
      method: 'POST',
      data: {
        warning_id: warningId,
        appeal_reason: appealReason,
        employee_statement: employeeStatement
      },
      success: function (response) {
        if (response.status === 'success') {
          // Hide offcanvas
          const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('appealOffcanvas'));
          if (offcanvas) {
            offcanvas.hide();
          }

          // Show success message
          Swal.fire({
            icon: 'success',
            title: pageData.labels.appealSuccess,
            text: pageData.labels.appealSuccessMessage,
            customClass: {
              confirmButton: 'btn btn-success'
            },
            buttonsStyling: false
          });

          // Reload DataTable
          if (dt_warnings_table.length) {
            dt_warnings_table.DataTable().ajax.reload();
          }
          loadWarningStats();
        } else {
          Swal.fire({
            icon: 'error',
            title: pageData.labels.error,
            text: response.data || pageData.labels.errorOccurred,
            customClass: {
              confirmButton: 'btn btn-primary'
            },
            buttonsStyling: false
          });
        }
      },
      error: function (xhr) {
        let errorMessage = pageData.labels.errorOccurred;
        if (xhr.responseJSON && xhr.responseJSON.data) {
          errorMessage = xhr.responseJSON.data;
        }

        Swal.fire({
          icon: 'error',
          title: pageData.labels.error,
          text: errorMessage,
          customClass: {
            confirmButton: 'btn btn-primary'
          },
          buttonsStyling: false
        });
      },
      complete: function () {
        // Re-enable submit button
        $submitBtn.prop('disabled', false).html(originalText);
      }
    });
  }
});
