// Funcion para centrar la pagina en el chat
document.addEventListener("DOMContentLoaded", function () {
  const centerButton = document.querySelector(".center-btn");
  const forumSection = document.querySelector(".forum-section");

  centerButton.addEventListener("click", () => {
    const sectionRect = forumSection.getBoundingClientRect();
    const offsetTop = sectionRect.top + window.scrollY;
    const sectionHeight = forumSection.offsetHeight;
    const windowHeight = window.innerHeight;

    const scrollTo = offsetTop - (windowHeight / 2) + (sectionHeight / 2);

    window.scrollTo({
      top: scrollTo,
      behavior: "smooth"
    });
  });
});


// Funcion para hacer scroll hasta abajo del todo del chat
const forumMessages = document.querySelector('.forum-messages');
const scrollBtn = document.getElementById('scrollToBottomBtn');

forumMessages.addEventListener('scroll', () => {
  const nearBottom =
    forumMessages.scrollHeight - forumMessages.scrollTop <=
    forumMessages.clientHeight + 80;

  scrollBtn.style.display = nearBottom ? 'none' : 'flex';
});

scrollBtn.addEventListener('click', () => {
  forumMessages.scrollTop = forumMessages.scrollHeight;
});

function setupCenterButton() {
  const centerButton = document.querySelector(".center-btn");
  const forumSection = document.querySelector(".forum-section");
  if (!centerButton || !forumSection) return;

  centerButton.addEventListener("click", () => {
    const sectionRect = forumSection.getBoundingClientRect();
    const offsetTop = sectionRect.top + window.scrollY;
    const sectionHeight = forumSection.offsetHeight;
    const windowHeight = window.innerHeight;
    const scrollTo = offsetTop - (windowHeight / 2) + (sectionHeight / 2);

    window.scrollTo({
      top: scrollTo,
      behavior: "smooth"
    });
  });
}

function setupScrollButton() {
  const forumMessages = document.querySelector('.forum-messages');
  const scrollBtn = document.getElementById('scrollToBottomBtn');
  if (!forumMessages || !scrollBtn) return;

  forumMessages.addEventListener('scroll', () => {
    const nearBottom =
      forumMessages.scrollHeight - forumMessages.scrollTop <=
      forumMessages.clientHeight + 80;
    scrollBtn.style.display = nearBottom ? 'none' : 'flex';
  });

  scrollBtn.addEventListener('click', () => {
    forumMessages.scrollTop = forumMessages.scrollHeight;
  });
}

// Función para recuperar el ID del foro
function getForumId() {
  // Recoger la variable desde laravel
  if (!window.forumId) {
    console.error("Forum ID not found in window.forum.");
    return null;
  }

  // Retornar el ID del foro
  return window.forumId.forumId;
}

// Función para cargar los mensajes del foro
function loadForumMessages() {
  // Recoger el contenedor de mensajes del foro
  const forumMessagesContainer = document.getElementById('forum-messages');

  // Recuperar el ID del foro
  const forumId = getForumId();

  if (!forumMessagesContainer) {
    console.error("Forum messages container not found.");
    return;
  }

  // console.log("Loading messages for forum ID:", forumId);

  fetch(`/api/getMessages?forum_id=${forumId}`, {
    method: "GET",
  })
    .then(response => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .then(data => {
      // Función para renderizar los mensajes del foro
      renderMessages(data, forumMessagesContainer);
    })
    .catch(error => {
      console.log("An error occurred. Please try again. " + error);
    });
}

// Función para obtener el ID del usuario actual
function getUser() {
  // Recuperar el ID del usuario desde la variable global
  if (!window.currentUserId) {
    console.error("Current user ID not found in window.");
    return null;
  }
  return window.currentUserId.currentUserId;
}

function createMessageCard(message, currentUserId) {
  // Determinar la clase según el rol y el usuario
  let whoClass = "forum-message--other";
  let username = message.user?.username || "Usuario";
  let showUsername = true;
  let alignStyle = "";

  if (message.user?.id == currentUserId) {
    whoClass = "forum-message--user";
    showUsername = false;
    alignStyle = "text-align: right;";
  } else if (
    message.user?.role?.name &&
    ["Admin", "Teacher", "Owner"].includes(message.user.role.name)
  ) {
    whoClass = "forum-message--teacher";
    username += " (Owner)";
    alignStyle = "";
  }

  // Construir el HTML del mensaje
  const messageDiv = document.createElement("div");
  messageDiv.className = `forum-message ${whoClass}`;
  messageDiv.style = alignStyle;
  messageDiv.innerHTML = `
    ${showUsername ? `<div class="forum-message__username">${username}</div>` : ""}
    <div class="forum-message__content">${message.content}</div>
    <div class="forum-message__timestamp">${timeAgo(message.created_at)}</div>
  `;
  return messageDiv;
}

function renderMessages(messages, container) {
  const currentUserId = getUser();
  container.innerHTML = "";

  if (messages.length === 0) {
    container.innerHTML = `<div class="forum-message forum-message--empty">No hay mensajes en este foro.</div>`;
    return;
  }

  messages.forEach(message => {
    const messageDiv = createMessageCard(message, currentUserId);
    container.appendChild(messageDiv);
  });

  // Baja el scroll al fondo después de renderizar
  container.scrollTop = container.scrollHeight;
}

// Utilidad para mostrar "hace X minutos"
function timeAgo(dateString) {
  const date = new Date(dateString);
  const now = new Date();
  const diff = Math.floor((now - date) / 1000);
  if (diff < 60) return "just now";
  if (diff < 3600) return Math.floor(diff / 60) + " min ago";
  if (diff < 86400) return Math.floor(diff / 3600) + " h ago";
  return date.toLocaleDateString();
}

// Función para obtener la configuración de Pusher
function getPusherConfig() {
  if (window.PUSHER_CONFIG) {
    return window.PUSHER_CONFIG;
  }
  // Fallback por si no está definida
  return {
    key: '',
    cluster: '',
    forceTLS: true
  };
}

function initializeChatWithPusher() {
  const forumId = getForumId();
  if (!forumId) {
    console.error("Forum ID is not available.");
    return;
  }

  const config = getPusherConfig();
  const pusher = new Pusher(config.key, {
    cluster: config.cluster,
    forceTLS: config.forceTLS
  });

  const channel = pusher.subscribe(`forum.${forumId}`);
  channel.bind('new-message', function (message) {
    const forumMessagesContainer = document.getElementById('forum-messages');
    const messageDiv = createMessageCard(message.message, getUser());
    forumMessagesContainer.appendChild(messageDiv);
    // Baja el scroll al fondo al agregar un nuevo mensaje
    forumMessagesContainer.scrollTop = forumMessagesContainer.scrollHeight;
  });
}

// Función para enviar mensajes al servidor
function sendMessage({ forumId, content }) {
  return fetch('/api/sendMessage', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    body: JSON.stringify({
      forum_id: forumId,
      content: content
    })
  })
    .then(response => response.json());
}

// Modifica setupChatInput para usar sendMessage
function setupChatInput() {
  const sendButton = document.getElementById('sendButton');
  if (!sendButton) {
    console.error("Chat input or send button not found.");
    return;
  }

  const chatInput = document.getElementById('chatInput');
  if (!chatInput) {
    console.error("Chat input not found.");
    return;
  }


  // Limpiar el input al enviar el mensaje
  chatInput.addEventListener('keydown', function (event) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault(); // Evitar el salto de línea
      sendButton.click(); // Simular clic en el botón de enviar
      chatInput.value = ''; // Limpiar el input después de enviar
    }
  });

  sendButton.addEventListener('click', function (event) {
    event.preventDefault();

    // Recuperar el contenido del input de mensaje
    const messageInput = document.getElementById('chatInput');
    const messageContent = messageInput.value.trim();

    if (!messageContent) {
      console.error("Message content is empty.");
      return;
    }

    const forumId = getForumId();
    if (!forumId) {
      console.error("Forum ID is not available.");
      return;
    }

    sendMessage({ forumId, content: messageContent })
      .then(data => {
        if (data) {
          chatInput.value = ''; // Limpiar el input después de enviar
        } else {
          console.error("Error sending message:", data.message);
        }
      })
      .catch(error => {
        console.error("Error sending message:", error);
      });
  });
}


// Función principal
function initForumChat() {
  setupCenterButton();
  setupScrollButton();

  // Configurar el input de mensajes
  setupChatInput();

  // Función para cargar los mensajes del foro
  loadForumMessages();

  // Función para inicializar la configuración del chat con Pusher
  initializeChatWithPusher();
}

// Inicialización principal
document.addEventListener("DOMContentLoaded", initForumChat);
