(function($) {
  $(document).ready(function() {
    // Funktion zum Hinzufügen des Buttons unter das Beschriftungsfeld
    const positionButton = () => {
      const captionFields = [
        $('#attachment-details-two-column-caption'),
        $('#attachment-details-caption'),
        $('#attachment_caption')
      ];

      captionFields.forEach(field => {
        if (field.length && !field.next('#openModal').length) {
          const buttonHtml = '<div id="openModal" class="bg-blue-500 text-white px-4 py-2 rounded-md">Bildrechte</div>';
          field.after(buttonHtml);
        }
      });
    };

    $('#attachment_caption').ready(positionButton);

    // Event-Listener für das Öffnen der Mediathek
    $(document).on('click change focus keydown mousedown resize', '.media-modal .attachment, .upload-files-button, .attachment-info, .media-button, .edit-attachment', function() {
      setTimeout(positionButton, 1); // Warte, bis die Mediathek geladen ist
    });

    // Event-Listener für das Öffnen des Modals
    $(document).on('click', '#openModal', function() {
      $('#modal').removeClass('hidden');

      // Auslesen der bestehenden Beschriftung
      const captionFields = [
        $('#attachment-details-two-column-caption'),
        $('#attachment-details-caption'),
        $('#attachment_caption')
      ];

      let currentCaption = '';
      for (const field of captionFields) {
        if (field.length && field.val()) {
          currentCaption = field.val();
          break;
        }
      }

      // Extrahieren der Werte aus der bestehenden Beschriftung und ins Formular einfügen
      const imageTitle = currentCaption.match(/<a href="[^"]*" target="_blank" rel="noreferrer noopener">([^<]*)<\/a>/);
      const imageSourceUrl = currentCaption.match(/<a href="([^"]*)" target="_blank" rel="noreferrer noopener">[^<]*<\/a>/);
      const imageAuthor = currentCaption.match(/von: <a href="[^"]*" target="_blank" rel="noreferrer noopener">([^<]*)<\/a>/);
      const authorImageUrl = currentCaption.match(/von: <a href="([^"]*)" target="_blank" rel="noreferrer noopener">[^<]*<\/a>/);
      const imageLicense = currentCaption.match(/Lizenz\/Rechte: <a href="[^"]*" target="_blank" rel="noreferrer noopener">([^<]*)<\/a>/);
      const licenseUrl = currentCaption.match(/Lizenz\/Rechte: <a href="([^"]*)" target="_blank" rel="noreferrer noopener">[^<]*<\/a>/);

      // Füllen der Formularfelder mit den extrahierten Werten
      $('#imageTitle').val(imageTitle ? imageTitle[1] : '');
      $('#imageSourceUrl').val(imageSourceUrl ? imageSourceUrl[1] : '');
      $('#imageAuthor').val(imageAuthor ? imageAuthor[1] : '');
      $('#authorImageUrl').val(authorImageUrl ? authorImageUrl[1] : '');
      $('#imageLicense').val(imageLicense ? imageLicense[1] : '');
      $('#licenseUrl').val(licenseUrl ? licenseUrl[1] : '');
    });

    // Event-Listener für das Schließen des Modals
    $(document).on('click', '#closeModal', function() {
      $('#modal').addClass('hidden');
    });

    // Event-Listener für das Speichern der Daten und das Einfügen in das Beschriftungsfeld
    $('#metaDataForm').on('submit', function(event) {
      event.preventDefault();

      // Sammeln der Werte aus den Formularfeldern
      const imageTitle = $('#imageTitle').val();
      const imageSourceUrl = $('#imageSourceUrl').val();
      const imageAuthor = $('#imageAuthor').val();
      const authorImageUrl = $('#authorImageUrl').val();
      const imageLicense = $('#imageLicense').val();
      const licenseUrl = $('#licenseUrl').val();

      // Erstellen des neuen HTML-Snippets für die Bildbeschriftung
      let newCaption = `<a href="${imageSourceUrl}" target="_blank" rel="noreferrer noopener">${imageTitle}</a> |`;

      if (imageAuthor) {
        newCaption += ` von: <a href="${authorImageUrl}" target="_blank" rel="noreferrer noopener">${imageAuthor}</a> |`;
      }

      newCaption += ` Lizenz/Rechte: <a href="${licenseUrl}" target="_blank" rel="noreferrer noopener">${imageLicense}</a>`;

      // Einfügen des neuen HTML-Snippets in das passende Beschriftungsfeld
      const captionFields = [
        $('#attachment-details-two-column-caption'),
        $('#attachment-details-caption'),
        $('#attachment_caption')
      ];

      for (const field of captionFields) {
        if (field.length) {
          field.val(newCaption);
          break;
        }
      }

      // Schließen des Modals
      $('#modal').addClass('hidden');
    });
  });
})(jQuery);