(function($) {
  'use strict';

  async function loadLogsCards() {
    var $logsCardsContainer = $('#logs-cards-container');
    $logsCardsContainer.html(
      '<div class="loading-card d-flex justify-content-center"><span class="spinner is-active"></span><p>Loading logs...</p></div>'
    );

    try {
      var response = await $.get(mindwecoData.ajaxurl, {
        action: 'mindweco_get_history_subscriptions',
        nonce: mindwecoData.nonce
      });

      $logsCardsContainer.empty();

      if (response.success && Array.isArray(response.data) && response.data.length > 0) {
        response.data.forEach(function(log) {
          $logsCardsContainer.append(
            '<div class="log-card">' +
            '<div class="log-card-icon"><i class="bi bi-clock-history"></i></div>' +
            '<div class="log-card-content">' +
            '<div class="log-date">' + window.MindwecoHelpers.formatMyDate(log.createdAt) + '</div>' +
            '<p class="log-message">' + (log.description || 'No description') + '</p>' +
            '</div>' +
            '</div>'
          );
        });
      } else {
        $logsCardsContainer.html(
          '<div class="empty-state-card">' +
          '<i class="bi bi-inbox"></i>' +
          '<h3>No Logs Available</h3>' +
          '<p>Your subscription history will appear here</p>' +
          '</div>'
        );
      }
    } catch (error) {
      MindwecoToast.error('Error loading logs:');
      $logsCardsContainer.html(
        '<div class="error-card"><i class="bi bi-exclamation-triangle"></i><p>Failed to load logs. Please try again later.</p></div>'
      );
    }
  }

  function init() {
    $('#logs-tab').on('click', loadLogsCards);
  }

  window.MindwecoLogs = {
    init: init,
    load: loadLogsCards
  };

})(jQuery);