// assets/script/tutorial.js
document.addEventListener('DOMContentLoaded', function() {
    // Array de passos com seletor e mensagem para cada etapa do tutorial
    const steps = [
      { selector: '#inicio', message: 'Esta é a barra de navegação, onde você encontra as principais seções.' },
      { selector: '#aulas', message: 'Em aulas, temos uma lista de aulas mostrando pelo mais recente ate o mais antigo.' },
      { selector: '#cursos', message: 'Em cursos temos os cursos, que não é nada mais que uma junção de aulas sobre um determinado assunto.' },
      { selector: '#software', message: 'Caso queira procurar cursos de um determinado programa, você pode procurar ele por aqui.' },
      { selector: '#Dashboard', message: 'Aqui é onde você manda as aulas, precisa ter um cadastro como um Autor.' },
      { selector: '#lasted', message: 'Aqui mostraremos as 6 ultimas aulas enviadas.' },

      // Adicione os demais passos (total de 10, ou quantos precisar)
    ];
  
    
    // Função para remover qualquer destaque anterior e destacar o elemento atual
    function highlightElement(element) {
      document.querySelectorAll('.tutorial-highlight').forEach(function(el) {
        el.classList.remove('tutorial-highlight');
      });
      if (element) {
        element.classList.add('tutorial-highlight');
      }
    }
  
    // Função que exibe e posiciona o passo do tutorial
    function showStep(stepIndex) {
      const step = steps[stepIndex]; // pega o objeto do passo atual
      const element = document.querySelector(step.selector);
      const tutorialBox = document.getElementById('tutorial-box');
      const tutorialText = document.getElementById('tutorial-text');
  
      // Atualiza o texto do tutorial com a mensagem correta
      tutorialText.textContent = step.message;
  
      // Destaque o elemento alvo, se existir
      highlightElement(element);
  
      if (element) {
        // Obtém a posição do elemento alvo
        const rect = element.getBoundingClientRect();
        
        // Posiciona o tutorialBox logo abaixo do elemento (ajuste os valores conforme sua necessidade)
        tutorialBox.style.position = 'absolute';
        tutorialBox.style.top = (rect.bottom + 10 + window.scrollY) + 'px'; // 10px abaixo do elemento
        tutorialBox.style.left = (rect.left + window.scrollX) + 'px';
        tutorialBox.style.transform = 'none';
      } else {
        // Fallback: se o elemento não for encontrado, centraliza a caixa do tutorial
        tutorialBox.style.position = 'fixed';
        tutorialBox.style.top = '50%';
        tutorialBox.style.left = '50%';
        tutorialBox.style.transform = 'translate(-50%, -50%)';
      }
    }
  
    // Captura os elementos do DOM que vamos usar
    const overlay = document.getElementById('tutorial-overlay');
    const nextStepButton = document.getElementById('next-step');
    const startTutorialButton = document.getElementById('start-tutorial');
  
    let currentStep = 0;
  
    // Inicia o tutorial somente quando o botão de início for clicado
    if (startTutorialButton) {
      startTutorialButton.addEventListener('click', function() {
        overlay.classList.remove('hidden'); // Mostra o overlay
        currentStep = 0;
        showStep(currentStep);
      });
    }
  
    // Avança os passos ao clicar no botão "Próximo"
    if (nextStepButton) {
      nextStepButton.addEventListener('click', function() {
        currentStep++;
        if (currentStep < steps.length) {
          showStep(currentStep);
        } else {
          // Quando terminar todos os passos, oculta o tutorial
          overlay.classList.add('hidden');
          currentStep = 0;
        }
      });
    }
  });