(function ($) {
  'use strict'

  $(document).ready(function () {
    // Função para abrir o modal
    function openModal($button) {
      // Encontra o modal relacionado ao botão, assumindo que eles compartilham um identificador ou contêiner em comum
      const modal = $button.closest('.lkn-user-profile-container').next('.lkn-bio-modal')
      modal.fadeIn(300)
      modal.css('display', 'flex')
    }

    // Função para fechar o modal
    function closeModal() {
      $('.lkn-bio-modal').fadeOut(300)
    }

    // Função para gerenciar os botões de coração
    function initHeartButtons() {
      $('.lkn-heart-btn').not('.lkn-data').each(function () {
        $(this).on('click', function () {
          const $this = $(this)
          const productId = $this.data('product-id')
          const userId = $this.data('user-id')
          const icon = $this.find('.lkn-heart')

          // Desabilitar todos os botões antes de iniciar a requisição
          $('.lkn-heart-btn').prop('disabled', true).css('cursor', 'not-allowed')

          // Encontra o container que contém os inputs
          const $container = $this.closest('.lkn-heart-container, .lkn-btn-container')
          const heartStatus = $container.find('.lkn-heart-status').val() // Pegando o status (active/inactive)
          const heartColors = $container.find('.lkn-heart-colors').val() // Pegando as cores separadas por vírgula
          const editMode = $container.find('.lkn-edit-mode').val()
          const colors = heartColors.split(',')

          // Verifica se o produto está favoritado (ativo ou inativo)
          let isLoved = heartStatus === 'active'
          const isEditMode = editMode === 'active'

          if (isEditMode) {
            isLoved = !isLoved
            // Aplicar a lógica para todos os outros botões de coração
            $('.lkn-heart-btn').each(function () {
              const $otherContainer = $(this).closest('.lkn-heart-container, .lkn-btn-container')
              const otherIcon = $otherContainer.find('.lkn-heart')
              const heartColors = $otherContainer.find('.lkn-heart-colors').val() // Pegando as cores separadas por vírgula

              // Separando as cores
              const colors = heartColors.split(',')

              // Atualiza os ícones de todos os outros, independentemente do estado atual
              const otherFillColor = isLoved ? colors[0] : colors[3]
              const otherShadowColor1 = isLoved ? colors[1] : colors[3]
              const otherShadowColor2 = isLoved ? colors[2] : colors[3]

              otherIcon.find('.cls-2').css('fill', otherFillColor)
              otherIcon.find('.cls-3').css('fill', otherShadowColor1)
              otherIcon.find('.cls-4').css('fill', otherShadowColor2)

              // Atualiza o valor do status (active/inactive) para todos
              $otherContainer.find('.lkn-heart-status').val(isLoved ? 'active' : 'inactive')
            })

            $container.find('.lkn-heart-status').val(isLoved ? 'active' : 'inactive')

            // Atualiza a contagem de favoritos
            updateFavoriteCount(isLoved ? 1 : -1)

            // Reabilita os botões
            $('.lkn-heart-btn').prop('disabled', false).css('cursor', 'pointer')
          } else {
            // Alterna o estado
            if (isLoved) {
              toggleFavorite(productId, 'remove', userId, colors, icon, $container)
            } else {
              toggleFavorite(productId, 'add', userId, colors, icon, $container)
            }
          }
        })

        // Marca o botão como já processado
        $(this).addClass('lkn-data')
      })
    }

    function toggleFavorite(productId, action, userId, colors, icon, $container) {
      $.ajax({
        url: '/wp-json/lknwpcrowdfunding/v1/favorite-campaign',
        method: 'POST',
        data: {
          product_id: productId,
          action,
          user_id: userId
        },
        success: function (response) {
          if (response.success) {
            // Determina o estado com base na ação (add/remove)
            const isLoved = action === 'add'

            // Atualiza a contagem de favoritos
            updateFavoriteCount(action === 'add' ? 1 : -1)

            // Aplicar a lógica para todos os outros botões de coração
            $('.lkn-heart-btn').each(function () {
              const $otherContainer = $(this).closest('.lkn-heart-container, .lkn-btn-container')
              const otherIcon = $otherContainer.find('.lkn-heart')
              const heartColors = $otherContainer.find('.lkn-heart-colors').val() // Pegando as cores separadas por vírgula

              // Separando as cores
              const colors = heartColors.split(',')

              // Atualiza os ícones de todos os outros, independentemente do estado atual
              const otherFillColor = isLoved ? colors[0] : colors[3]
              const otherShadowColor1 = isLoved ? colors[1] : colors[3]
              const otherShadowColor2 = isLoved ? colors[2] : colors[3]

              otherIcon.find('.cls-2').css('fill', otherFillColor)
              otherIcon.find('.cls-3').css('fill', otherShadowColor1)
              otherIcon.find('.cls-4').css('fill', otherShadowColor2)

              // Atualiza o valor do status (active/inactive) para todos
              $otherContainer.find('.lkn-heart-status').val(isLoved ? 'active' : 'inactive')
            })
          }

          // Reabilitar os botões após a resposta do sucesso
          $('.lkn-heart-btn').prop('disabled', false).css('cursor', 'pointer')
        },
        error: function (error) {
          console.error(lknWpCrowdfundingParams.errorMessage, error)

          // Reabilita os botões em caso de erro
          $('.lkn-heart-btn').prop('disabled', false).css('cursor', 'pointer')
        }
      })
    }

    function updateFavoriteCount(change) {
      // Obter os valores dos inputs
      const userId = $('input[name="lkn-user-id"]:first').val()
      const authorId = $('input[name="lkn-user-product-id"]:first').val()

      // Comparar os valores
      if (userId === authorId) {
        // IDs iguais, aplicar a lógica
        $('.lkn-campaign-count-modal strong, .lkn-campaign-count').each(function () {
          const text = $(this).text()

          // Verifica a parte da string após o "|"
          const match = text.match(/\|?\s*(\d+)\s*(campanha\(s\)?\s*favorita\(s\)?|favorite?)/)

          if (match) {
            let favoriteCount = parseInt(match[1], 10)
            favoriteCount += change
            if (favoriteCount < 0) favoriteCount = 0

            // Define o plural em português ou inglês
            const isPortuguese = /campanha/.test(match[0])
            const favoriteLabel = isPortuguese
              ? `${favoriteCount} campanha(s) favorita(s)`
              : `${favoriteCount} favorite`

            const updatedText = text.replace(/\|?\s*(\d+)\s*(campanha\(s\)?\s*favorita\(s\)?|favorite?)/, `| ${favoriteLabel}`)
            $(this).text(updatedText)
          }
        })
      }
    }

    // Inicializa o zoom
    $('.lkn-zoom').not('.lkn-data').each(function () {
      $(this).elevateZoom({
        zoomType: 'lens',
        cursor: 'pointer',
        lensShape: 'round',
        lensSize: 100,
        scrollZoom: false
      })

      $(this).addClass('lkn-data')
    })

    // Cria o MutationObserver para observar mudanças no DOM
    const observer = new MutationObserver((mutationsList) => {
      mutationsList.forEach(() => {
        // Inicializa os botões de coração
        initHeartButtons()

        // Inicializa o evento para abrir o modal
        $('.lkn-open-bio-modal').not('.lkn-data').each(function () {
          $(this).on('click', function (e) {
            e.preventDefault()
            openModal($(this))
          })

          $('.lkn-close-bio-modal').on('click', function () {
            closeModal()
          })

          $(window).on('click', function (e) {
            if ($(e.target).is('.lkn-bio-modal')) {
              closeModal()
            }
          })

          $(this).addClass('lkn-data')
        })
      })

      // Tabs logic
      $('.lkn-tab-link').not('.lkn-data').each(function () {
        $(this).addClass('lkn-data')

        $(this).on('click', function () {
          const tabId = $(this).data('tab')
          const parentTab = $(this).closest('.lkn-campaign-tabs')

          // Remover classes ativas e animar o fadeOut do conteúdo atual
          parentTab.find('.lkn-tab-link').removeClass('active')
          parentTab.find('.lkn-tab-content').stop(true, true).fadeOut(0).removeClass('active')

          // Adicionar a classe ativa ao tab clicado e exibir o conteúdo com animação fadeIn
          $(this).addClass('active')
          parentTab.find(`#${tabId}`).stop(true, true).fadeIn(150).addClass('active')
        })
      })

      // Button click visual effect
      $('.lkn-tab-link').not('.lkn-data').each(function () {
        $(this).addClass('lkn-data')

        $(this)
          .on('mousedown', function () {
            $(this).css({
              top: '1px'
            })
          })
          .on('mouseup mouseleave', function () {
            $(this).css({
              top: '0'
            })
          })
      })

      // "Go to Reviews" button logic
      $('.lkn-scroll-to-comments').not('.lkn-data').each(function () {
        $(this).addClass('lkn-data')

        $(this).on('click', function (e) {
          e.preventDefault()
          // Encontra o container de comentários (onde o template de comentários é carregado)
          const commentsContainer = $('.lkn-comments')
          const commentsTab = commentsContainer.find('.lkn-tab-link[data-tab="lkn-tab-3"]')
          const commentsContent = commentsContainer.find('#lkn-tab-3')
          const campaingComments = commentsContainer.find('#campaings-comments')

          // Ativa a aba de comentários
          commentsContainer.find('.lkn-tab-link').removeClass('active')
          commentsContainer.find('.lkn-tab-content').stop(true, true).removeClass('active').fadeOut(0)

          commentsTab.addClass('active')
          commentsContent.stop(true, true).fadeIn(150).addClass('active')

          // Faz o scroll suave até a seção de comentários
          $('html, body').animate(
            {
              scrollTop: campaingComments.offset().top - 50 // Ajuste do deslocamento
            },
            300
          )
        })
      })
    })

    // Configurações do MutationObserver
    const config = { childList: true, subtree: true }

    // Inicia a observação no DOM
    observer.observe(document.body, config)
  })
})(jQuery)
