@php
    $meetingAttachmentScriptConfig = [
        'blockedExtensions' => array_map('strtolower', $meetingBlockedExtensions ?? []),
        'categoryOptions' => $meetingAttachmentCategories ?? [],
    ];
@endphp
<script>
  (function ($) {
    'use strict';

    const config = @json($meetingAttachmentScriptConfig);
    const categoryOptions = config.categoryOptions || {};
    const blockedExtensions = (config.blockedExtensions || []).map(function (ext) {
      return (ext || '').toString().toLowerCase();
    });
    const maxFileSizeBytes = 10 * 1024 * 1024; // 10 MB

    let attachmentIndex = Number($('#meeting-new-attachments-table').data('next-index')) || 0;

    const previewModal = $('#meetingAttachmentPreviewModal');
    const imageWrapper = previewModal.find('.meeting-preview-image');
    const pdfWrapper = previewModal.find('.meeting-preview-pdf');
    const fallbackWrapper = previewModal.find('.meeting-preview-fallback');
    const pdfObject = pdfWrapper.find('object');
    const modalImage = imageWrapper.find('img');
    const fallbackDownloadBtn = fallbackWrapper.find('.meeting-preview-download-direct');

    function showAlert(message, icon) {
      if (typeof Swal !== 'undefined') {
        Swal.fire({
          icon: icon || 'error',
          title: icon === 'success' ? 'Berhasil' : 'Perhatian',
          text: message,
        });
      } else {
        alert(message);
      }
    }

    function renderCategoryOptions(selectedValue) {
      let optionsHtml = '<option value="" disabled' + (selectedValue ? '' : ' selected') + '>Pilih kategori</option>';
      Object.keys(categoryOptions).forEach(function (value) {
        const label = categoryOptions[value];
        const selected = value === selectedValue ? ' selected' : '';
        optionsHtml += '<option value="' + value + '"' + selected + '>' + label + '</option>';
      });
      return optionsHtml;
    }

    function ensureEmptyRowState($tbody) {
      if ($tbody.find('.meeting-attachment-row').length === 0) {
        const columnCount = $tbody.closest('table').find('thead th').length || 4;
        $tbody.html(
          '<tr class="meeting-empty-row">' +
            '<td colspan="' + columnCount + '" class="text-center text-muted">Belum ada lampiran.</td>' +
          '</tr>'
        );
      }
    }

    function resetInlinePreview($row) {
      const $previewBox = $row.find('.meeting-attachment-inline-preview');
      if ($previewBox.length) {
        $previewBox
          .removeClass('bg-light')
          .html('<i class="fas fa-file-upload text-muted"></i>');
      }
    }

    function setInlinePreview($row, type, source) {
      const $previewBox = $row.find('.meeting-attachment-inline-preview');
      if (!$previewBox.length) {
        return;
      }

      resetInlinePreview($row);

      if (type === 'image' && source) {
        $previewBox
          .addClass('bg-light')
          .html('<img src="' + source + '" class="img-thumbnail" style="width: 100%; height: 100%; object-fit: cover;" alt="Pratinjau lampiran">');
        return;
      }

      if (type === 'pdf') {
        $previewBox
          .addClass('bg-light')
          .html('<i class="fas fa-file-pdf text-danger fa-lg"></i>');
        return;
      }

      if (type && source) {
        $previewBox
          .addClass('bg-light')
          .html('<i class="fas fa-file text-secondary fa-lg"></i>');
      }
    }

    function cleanupPreviewButton($button) {
      const objectUrl = $button.data('objectUrl');
      if (objectUrl) {
        URL.revokeObjectURL(objectUrl);
      }
      $button
        .data('previewType', null)
        .data('previewSource', null)
        .data('downloadUrl', null)
        .data('objectUrl', null)
        .data('filename', null);
      resetInlinePreview($button.closest('tr'));
    }

    function resetAttachmentRow($row) {
      const $previewButton = $row.find('.meeting-preview-trigger');
      cleanupPreviewButton($previewButton);
      $previewButton.addClass('d-none');
      $row.find('.meeting-selected-filename').text('');
      const $fileInput = $row.find('.meeting-new-attachment-file');
      $fileInput.val('');
      resetInlinePreview($row);
    }

    function getFileExtension(filename) {
      const parts = filename.split('.');
      return parts.length > 1 ? parts.pop().toLowerCase() : '';
    }

    function getPreviewType(extension) {
      if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].indexOf(extension) !== -1) {
        return 'image';
      }

      if (extension === 'pdf') {
        return 'pdf';
      }

      return 'other';
    }

    function validateFile(file) {
      if (!file) {
        return { valid: false, message: 'File tidak ditemukan.' };
      }

      if (file.size > maxFileSizeBytes) {
        return { valid: false, message: 'Ukuran file melebihi 10 MB.' };
      }

      const extension = getFileExtension(file.name);
      if (blockedExtensions.indexOf(extension) !== -1) {
        return { valid: false, message: 'Tipe file tidak diperbolehkan.' };
      }

      return { valid: true, message: '' };
    }

    function downloadFile(url, filename) {
      if (!url) {
        showAlert('File tidak tersedia untuk diunduh.');
        return;
      }

      const link = document.createElement('a');
      link.href = url;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      if (filename) {
        link.download = filename;
      }
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    function showPreviewModal() {
      if (!previewModal.length) {
        return false;
      }

      if (typeof previewModal.modal === 'function') {
        previewModal.modal('show');
        return true;
      }

      if (window.bootstrap && typeof window.bootstrap.Modal === 'function') {
        let modalInstance = null;

        if (typeof window.bootstrap.Modal.getOrCreateInstance === 'function') {
          modalInstance = window.bootstrap.Modal.getOrCreateInstance(previewModal[0]);
        } else {
          modalInstance = new window.bootstrap.Modal(previewModal[0]);
        }

        if (modalInstance && typeof modalInstance.show === 'function') {
          modalInstance.show();
          return true;
        }
      }

      return false;
    }

    function openPreviewModal(config) {
      const filename = config.filename || 'Lampiran';
      modalImage.attr('src', '');
      pdfObject.attr('data', '');
      fallbackDownloadBtn.data('downloadUrl', null).data('filename', filename);

      imageWrapper.addClass('d-none');
      pdfWrapper.addClass('d-none');
      fallbackWrapper.addClass('d-none');

      if (config.type === 'image' && config.source) {
        modalImage.attr('src', config.source);
        imageWrapper.removeClass('d-none');
      } else if (config.type === 'pdf' && config.source) {
        pdfObject.attr('data', config.source);
        pdfWrapper.removeClass('d-none');
      } else {
        fallbackDownloadBtn.data('downloadUrl', config.downloadUrl || null);
        fallbackWrapper.removeClass('d-none');
      }

      $('#meetingAttachmentPreviewModalLabel').text(filename);
      const isModalShown = showPreviewModal();

      if (!isModalShown) {
        if (config.downloadUrl) {
          downloadFile(config.downloadUrl, filename);
        } else {
          showAlert('Preview tidak tersedia tanpa dukungan Bootstrap modal.');
        }
      }
    }

    fallbackDownloadBtn.on('click', function () {
      const url = $(this).data('downloadUrl');
      const filename = $(this).data('filename');
      downloadFile(url, filename);
    });

    window.addAttachmentRow = function () {
      const $table = $('#meeting-new-attachments-table');
      if (!$table.length) {
        return;
      }

      const $tbody = $table.find('tbody');
      if ($tbody.find('.meeting-empty-row').length) {
        $tbody.empty();
      }

      const index = attachmentIndex++;
      const optionsHtml = renderCategoryOptions(null);

      const rowHtml =
        '<tr class="meeting-attachment-row" data-index="' + index + '">' +
          '<td>' +
            '<select class="form-control" name="attachments[' + index + '][file_category]">' +
              optionsHtml +
            '</select>' +
          '</td>' +
          '<td>' +
            '<div class="d-flex align-items-center" style="gap: 0.75rem;">' +
              '<div class="meeting-attachment-inline-preview border rounded d-flex align-items-center justify-content-center bg-white" style="width: 56px; height: 56px;">' +
                '<i class="fas fa-file-upload text-muted"></i>' +
              '</div>' +
              '<div class="flex-grow-1">' +
                '<input type="file" class="form-control meeting-new-attachment-file" name="attachments[' + index + '][file_path]">' +
                '<small class="form-text text-muted meeting-selected-filename"></small>' +
              '</div>' +
            '</div>' +
          '</td>' +
          '<td class="text-center">' +
            '<button type="button" class="btn btn-sm btn-outline-secondary meeting-preview-trigger d-none">' +
              'Pratinjau' +
            '</button>' +
          '</td>' +
          '<td class="text-center">' +
            '<button type="button" class="btn btn-sm btn-outline-danger meeting-remove-attachment-row">' +
              '<i class="fas fa-trash"></i>' +
            '</button>' +
          '</td>' +
        '</tr>';

      $tbody.append(rowHtml);
    };

    window.removeAttachmentRow = function (trigger) {
      const $row = $(trigger).closest('tr');
      const $tbody = $row.closest('tbody');
      resetAttachmentRow($row);
      $row.remove();
      ensureEmptyRowState($tbody);
    };

    window.previewAttachment = function (trigger) {
      const $button = $(trigger);
      const type = $button.data('previewType');
      const source = $button.data('previewSource');
      const downloadUrl = $button.data('downloadUrl');
      const filename = $button.data('filename');

      if (type === 'image' && source) {
        openPreviewModal({ type: 'image', source: source, filename: filename });
        return;
      }

      if (type === 'pdf' && source) {
        openPreviewModal({ type: 'pdf', source: source, filename: filename });
        return;
      }

      if (downloadUrl) {
        downloadFile(downloadUrl, filename);
        return;
      }

      showAlert('Preview tidak tersedia untuk lampiran ini.');
    };

    $(document).on('change', '.meeting-new-attachment-file', function () {
      const file = this.files && this.files[0];
      const $row = $(this).closest('tr');
      const $previewButton = $row.find('.meeting-preview-trigger');

      cleanupPreviewButton($previewButton);
      $previewButton.addClass('d-none');
      $row.find('.meeting-selected-filename').text('');

      if (!file) {
        return;
      }

      const validation = validateFile(file);
      if (!validation.valid) {
        showAlert(validation.message);
        $(this).val('');
        return;
      }

      const filename = file.name;
      $row.find('.meeting-selected-filename').text(filename);

      const extension = getFileExtension(filename);
      const previewType = getPreviewType(extension);
      $previewButton.data('previewType', previewType);
      $previewButton.data('filename', filename);

      if (previewType === 'image') {
        const reader = new FileReader();
        reader.onload = function (event) {
          const result = event.target.result;
          $previewButton.data('previewSource', result);
          setInlinePreview($row, 'image', result);
        };
        reader.readAsDataURL(file);
      } else if (previewType === 'pdf') {
        const objectUrl = URL.createObjectURL(file);
        $previewButton.data('previewSource', objectUrl);
        $previewButton.data('downloadUrl', objectUrl);
        $previewButton.data('objectUrl', objectUrl);
        setInlinePreview($row, 'pdf', objectUrl);
      } else {
        const objectUrl = URL.createObjectURL(file);
        $previewButton.data('downloadUrl', objectUrl);
        $previewButton.data('objectUrl', objectUrl);
        setInlinePreview($row, previewType, objectUrl);
      }

      $previewButton.removeClass('d-none');
    });

    $(document).on('click', '.meeting-preview-trigger', function () {
      previewAttachment(this);
    });

    $(document).on('click', '#meeting-add-attachment-row', function () {
      addAttachmentRow();
    });

    $(document).on('click', '.meeting-remove-attachment-row', function () {
      removeAttachmentRow(this);
    });

    $(document).on('click', '.meeting-delete-existing-attachment', function () {
      const $button = $(this);
      const deleteUrl = $button.data('deleteUrl');
      const $row = $button.closest('tr');

      if (!deleteUrl) {
        return;
      }

      const proceed = function () {
        $.ajax({
          url: deleteUrl,
          method: 'DELETE',
          data: {
            _token: $('meta[name="csrf-token"]').attr('content')
          },
          success: function (response) {
            showAlert(response.message || 'Lampiran berhasil dihapus.', 'success');
            $row.remove();
            ensureEmptyRowState($('#meeting-existing-attachments-table tbody'));
          },
          error: function (xhr) {
            const message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal menghapus lampiran.';
            showAlert(message);
          }
        });
      };

      if (typeof Swal !== 'undefined') {
        Swal.fire({
          title: 'Hapus lampiran?',
          text: 'Lampiran akan dihapus secara permanen.',
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Ya, hapus',
          cancelButtonText: 'Batal',
        }).then(function (result) {
          if (result.isConfirmed) {
            proceed();
          }
        });
      } else {
        if (confirm('Hapus lampiran ini?')) {
          proceed();
        }
      }
    });

    $(function () {
      const $newAttachmentsTable = $('#meeting-new-attachments-table');
      if ($newAttachmentsTable.length) {
        const $tbody = $newAttachmentsTable.find('tbody');
        if (!$tbody.find('.meeting-attachment-row').length) {
          addAttachmentRow();
        }
      }

      ensureEmptyRowState($('#meeting-existing-attachments-table tbody'));
    });
  })(jQuery);
</script>