/**
 * @fileoverview Utility module for tourSteps.js
 * 
 * @module pages.Atividades.config.tourSteps
 */

// Helper para detectar mobile e ajustar posicionamento
const isMobile = () => window.innerWidth < 768;

const getAttachPosition = (
  desktopPosition = "right",
  mobilePosition = "bottom",
) => {
  return isMobile() ? mobilePosition : desktopPosition;
};

export const tourSteps = [
  {
    id: "welcome",
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>
          </svg>
        </div>
        <h3>Bem-vindo à Área de Atividades!</h3>
      </div>
      <p>Aqui você encontra todos os jogos educativos disponíveis para aprender programação de forma divertida.</p>
      <p>Vamos fazer um tour rápido para conhecer os recursos!</p>
    `,
    buttons: [
      {
        text: "Pular Tour",
        classes: "shepherd-button-secondary",
        action() {
          this.complete();
        },
      },
      {
        text: "Iniciar Tour",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "search-bar",
    attachTo: {
      element: () =>
        document.querySelector('input[placeholder*="Digite o nome"]'),
      on: getAttachPosition("bottom", "bottom"),
    },
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
        </div>
        <h3>Busca Inteligente</h3>
      </div>
      <p>Use a barra de busca para encontrar atividades rapidamente!</p>
      <p>Você pode buscar por:</p>
      <ul>
        <li><strong>Nome do jogo:</strong> "Semáforo", "Motoca", etc.</li>
        <li><strong>Conceitos:</strong> "loops", "condicionais", "funções"</li>
        <li><strong>Descrição:</strong> palavras-chave do conteúdo</li>
      </ul>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "filters-category",
    attachTo: {
      element: () => document.querySelector("select[value]"),
      on: getAttachPosition("bottom", "bottom"),
    },
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
          </svg>
        </div>
        <h3>Filtros Avançados</h3>
      </div>
      <p>Refine sua busca usando os filtros disponíveis:</p>
      <ul>
        <li><strong>Categoria:</strong> Jogos, Desafios, Projetos</li>
        <li><strong>Tipo:</strong> Guiado ou Livre</li>
        <li><strong>Dificuldade:</strong> Iniciante, Intermediário, Avançado</li>
      </ul>
      <p>Combine múltiplos filtros para encontrar exatamente o que precisa!</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "items-per-page",
    attachTo: {
      element: () => {
        const selects = Array.from(document.querySelectorAll("select"));
        return selects.find(
          (select) =>
            select.querySelector('option[value="8"]') &&
            select.textContent.includes("atividades"),
        );
      },
      on: getAttachPosition("bottom", "bottom"),
    },
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <rect width="7" height="7" x="3" y="3" rx="1"/>
            <rect width="7" height="7" x="14" y="3" rx="1"/>
            <rect width="7" height="7" x="14" y="14" rx="1"/>
            <rect width="7" height="7" x="3" y="14" rx="1"/>
          </svg>
        </div>
        <h3>Controle de Visualização</h3>
      </div>
      <p>Escolha quantas atividades deseja ver por página:</p>
      <ul>
        <li><strong>8 atividades:</strong> Ideal para navegar com calma</li>
        <li><strong>16 atividades:</strong> Visão geral equilibrada</li>
        <li><strong>32 atividades:</strong> Ver todas de uma vez</li>
      </ul>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "clear-filters",
    attachTo: {
      element: () => document.querySelector('button[class*="gradient"]'),
      on: getAttachPosition("top", "bottom"),
    },
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <path d="M3 6h18"/>
            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
          </svg>
        </div>
        <h3>Limpar Filtros</h3>
      </div>
      <p>Quando você aplicar filtros, este botão aparecerá automaticamente.</p>
      <p>Use-o para remover todos os filtros de uma vez e ver todas as atividades disponíveis novamente.</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
    when: {
      show: function () {
        // Se o botão não estiver visível, pula este passo
        const button = document.querySelector('button[class*="gradient"]');
        if (!button || button.closest(".mt-6")?.style.display === "none") {
          this.next();
        }
      },
    },
  },
  {
    id: "activity-cards",
    attachTo: {
      element: () => document.querySelector(".my-3.grid"),
      on: getAttachPosition("top", "top"),
    },
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
            <line x1="12" x2="12" y1="22.08" y2="12"/>
          </svg>
        </div>
        <h3>Cards de Atividades</h3>
      </div>
      <p>Cada card mostra informações importantes:</p>
      <ul>
        <li><strong>Ícone e Nome:</strong> Identidade visual da atividade</li>
        <li><strong>Descrição:</strong> Resumo do que você vai aprender</li>
        <li><strong>Badges:</strong> Categoria, tipo e dificuldade</li>
        <li><strong>Informações:</strong> Tempo estimado, faixa etária e número de fases</li>
        <li><strong>Conceitos:</strong> Tópicos de programação abordados</li>
      </ul>
      <p><strong>Clique em qualquer card para iniciar a atividade!</strong></p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "pagination",
    attachTo: {
      element: () => document.querySelector(".mt-12.flex.items-center"),
      on: "top",
    },
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <polyline points="9 18 15 12 9 6"/>
          </svg>
        </div>
        <h3>Navegação entre Páginas</h3>
      </div>
      <p>Quando houver muitas atividades, use a paginação para navegar:</p>
      <ul>
        <li>Use as <strong>setas</strong> para ir para a página anterior ou próxima</li>
        <li>Clique nos <strong>números</strong> para ir direto para uma página específica</li>
      </ul>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
    when: {
      show: function () {
        // Se não houver paginação, pula este passo
        const pagination = document.querySelector(".mt-12.flex.items-center");
        if (!pagination) {
          this.next();
        }
      },
    },
  },
  {
    id: "finish",
    text: `
      <div class="tour-header">
        <div class="tour-icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tour-icon">
            <path d="M20 6 9 17l-5-5"/>
          </svg>
        </div>
        <h3>Pronto para Começar!</h3>
      </div>
      <p>Agora você conhece todos os recursos da página de atividades.</p>
      <p><strong>Dicas finais:</strong></p>
      <ul>
        <li>Comece com atividades de nível <strong>Iniciante</strong> se você é novo em programação</li>
        <li>Use os <strong>filtros</strong> para encontrar atividades por conceito específico</li>
        <li>Explore diferentes <strong>categorias</strong> para variar seu aprendizado</li>
        <li>Divirta-se aprendendo! 🎮</li>
      </ul>
      <p class="tour-footer-note">💡 Este tour não será exibido novamente, mas você pode acessá-lo a qualquer momento.</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Começar a Explorar!",
        action() {
          this.complete();
        },
      },
    ],
  },
];

export const tourOptions = {
  defaultStepOptions: {
    cancelIcon: {
      enabled: true,
    },
    classes: "custom-tour-step",
    scrollTo: { behavior: "smooth", block: "center" },
  },
  useModalOverlay: true,
};
