/**
 * @fileoverview Utility module for tourSteps.js
 * 
 * @module pages.Playground.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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
        </div>
        <h3>Bem-vindo ao Playground!</h3>
      </div>
      <p>Este é um ambiente interativo onde você pode aprender programação usando blocos visuais.</p>
      <p>Vamos fazer um tour rápido para conhecer as funcionalidades!</p>
    `,
    buttons: [
      {
        text: "Pular Tour",
        classes: "shepherd-button-secondary",
        action() {
          this.complete();
        },
      },
      {
        text: "Iniciar Tour",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "blockly-toolbox",
    attachTo: {
      element: () => {
        return (
          document.querySelector(".blocklyToolbox") ||
          document.querySelector(".blocklyToolboxDiv") ||
          document.querySelector(".blocklyFlyout") ||
          document.querySelector('[class*="blocklyToolbox"]')
        );
      },
      on: "right",
    },
    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>Explore as categorias de Blocos</h3>
      </div>
      <p>Aqui estão organizadas as categorias de blocos por tipo de função:</p>
      <ul>
        <li><strong>Lógica:</strong> Condições e comparações</li>
        <li><strong>Loops:</strong> Estruturas de repetição</li>
        <li><strong>Matemática:</strong> Operações numéricas</li>
        <li><strong>Texto:</strong> Manipulação de strings</li>
        <li><strong>Listas:</strong> Arrays e coleções</li>
        <li><strong>Variáveis:</strong> Armazenamento de dados</li>
      </ul>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "blockly-workspace",
    attachTo: {
      element: ".blocklyWorkspace",
      on: getAttachPosition("right", "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="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/>
            <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
            <path d="M12 2v2"/>
            <path d="M12 22v-2"/>
            <path d="m17 20.66-1-1.73"/>
            <path d="M11 10.27 7 3.34"/>
            <path d="m20.66 17-1.73-1"/>
            <path d="m3.34 7 1.73 1"/>
            <path d="M14 12h8"/>
            <path d="M2 12h2"/>
            <path d="m20.66 7-1.73 1"/>
            <path d="m3.34 17 1.73-1"/>
            <path d="m17 3.34-1 1.73"/>
            <path d="m11 13.73-4 6.93"/>
          </svg>
        </div>
        <h3>Arraste blocos para a Área de Trabalho</h3>
      </div>
      <p><strong>Arrastar:</strong> Clique em um bloco da categoria à esquerda e arraste para esta área</p>
      <p><strong>Conectar:</strong> Aproxime blocos compatíveis - eles se encaixam automaticamente com um "clique"</p>
      <p><strong>Dica:</strong> Blocos com formatos diferentes indicam tipos de dados e conexões compatíveis</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "blockly-trashcan",
    attachTo: {
      element: ".blocklyTrash",
      on: getAttachPosition("left", "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="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"/>
            <line x1="10" x2="10" y1="11" y2="17"/>
            <line x1="14" x2="14" y1="11" y2="17"/>
          </svg>
        </div>
        <h3>Mova blocos para a Lixeira se necessário</h3>
      </div>
      <p><strong>Excluir blocos:</strong> Arraste qualquer bloco para esta lixeira para removê-lo da área de trabalho</p>
      <p><strong>Dica:</strong> Você também pode clicar com o botão direito em um bloco e selecionar "Excluir"</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "button-run",
    attachTo: {
      element: '[data-tour="run-button"]',
      on: "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="5 3 19 12 5 21 5 3"/>
          </svg>
        </div>
        <h3>Botão Executar</h3>
      </div>
      <p><strong>Execute seu código:</strong> Clique aqui para rodar o programa que você criou com os blocos.</p>
      <p>Os resultados aparecerão no console abaixo. Se houver erros, eles também serão mostrados lá.</p>
      <p><strong>Dica:</strong> Você precisa ter pelo menos um bloco na área de trabalho para execute.</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "button-download",
    attachTo: {
      element: '[data-tour="download-button"]',
      on: "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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="7 10 12 15 17 10"/>
            <line x1="12" x2="12" y1="15" y2="3"/>
          </svg>
        </div>
        <h3>Botão Salvar</h3>
      </div>
      <p><strong>Salve seu trabalho:</strong> Exporta seu workspace para um arquivo no seu computador.</p>
      <p>Use isso para fazer backup dos seus projetos ou compartilhar com outras pessoas.</p>
      <p><strong>Importante:</strong> Seus blocos também são salvos automaticamente no navegador!</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "button-upload",
    attachTo: {
      element: '[data-tour="upload-button"]',
      on: "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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="17 8 12 3 7 8"/>
            <line x1="12" x2="12" y1="3" y2="15"/>
          </svg>
        </div>
        <h3>Botão Carregar</h3>
      </div>
      <p><strong>Carregue um workspace salvo:</strong> Importa um arquivo que você salvou anteriormente.</p>
      <p>Clique aqui e selecione o arquivo do seu computador para restaurar seus blocos.</p>
      <p><strong>Atenção:</strong> Isso substituirá os blocos atuais na área de trabalho!</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "button-examples",
    attachTo: {
      element: '[data-tour="examples-button"]',
      on: "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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
        </div>
        <h3>Botão Exemplos</h3>
      </div>
      <p><strong>Explore exemplos prontos:</strong> Abre uma galeria com vários exemplos de programas.</p>
      <p>Ótimo para aprender novos conceitos e se inspirar para criar seus próprios projetos!</p>
      <p><strong>Clique no botão agora para ver os exemplos disponíveis!</strong></p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Ver Exemplos",
        action() {
          // Abrir o modal de exemplos
          const examplesButton = document.querySelector(
            '[data-tour="examples-button"]',
          );
          if (examplesButton) {
            examplesButton.click();
          }
          this.next();
        },
      },
    ],
  },
  {
    id: "examples-modal",
    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="18" height="18" x="3" y="3" rx="2" ry="2"/>
            <line x1="3" x2="21" y1="9" y2="9"/>
            <line x1="9" x2="9" y1="21" y2="9"/>
          </svg>
        </div>
        <h3>Galeria de Exemplos</h3>
      </div>
      <p>Aqui você encontra exemplos organizados por categoria:</p>
      <ul>
        <li><strong>Básicos:</strong> Conceitos fundamentais</li>
        <li><strong>Matemática:</strong> Operações e cálculos</li>
        <li><strong>Loops:</strong> Estruturas de repetição</li>
        <li><strong>Listas:</strong> Trabalho com arrays</li>
        <li><strong>Lógica:</strong> Condicionais e decisões</li>
      </ul>
      <p><strong>Clique em qualquer exemplo para carregar na área de trabalho!</strong></p>
    `,
    buttons: [
      {
        text: "Fechar Exemplos",
        classes: "shepherd-button-secondary",
        action() {
          // Fechar o modal
          const closeButton = document.querySelector("[data-modal-close]");
          if (closeButton) {
            closeButton.click();
          }
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          // Fechar o modal
          const closeButton = document.querySelector("[data-modal-close]");
          if (closeButton) {
            closeButton.click();
          }
          this.next();
        },
      },
    ],
  },
  {
    id: "code-viewer",
    attachTo: {
      element: '[data-tour="code-viewer"]',
      on: getAttachPosition("left", "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="16 18 22 12 16 6"/>
            <polyline points="8 6 2 12 8 18"/>
          </svg>
        </div>
        <h3>Visualize o código gerado pelos blocos</h3>
      </div>
      <p>Aqui você vê o código JavaScript e Python gerado automaticamente a partir dos seus blocos.</p>
      <p>É uma ótima forma de aprender como os blocos se traduzem em código real!</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "console",
    attachTo: {
      element: '[data-tour="console"]',
      on: getAttachPosition("left", "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="4 17 10 11 4 5"/>
            <line x1="12" x2="20" y1="19" y2="19"/>
          </svg>
        </div>
        <h3>Visualize no Console o resultado</h3>
      </div>
      <p>Quando você executa seu código, os resultados aparecem aqui.</p>
      <p>Mensagens de erro também serão exibidas para ajudar na depuração.</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "theme-toggle",
    attachTo: {
      element: '[data-tour="theme-toggle"]',
      on: "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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
          </svg>
        </div>
        <h3>Mude as cores se preferir</h3>
      </div>
      <p>Alterne entre tema claro e escuro para sua preferência de visualização.</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "resize-panels",
    when: {
      show() {
        // Só mostrar este step se estiver em mobile
        if (!isMobile()) {
          this.next();
        }
      },
    },
    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="18" height="18" x="3" y="3" rx="2"/>
            <path d="M9 3v18"/>
            <path d="m14 9 3 3-3 3"/>
            <path d="M5 9l3 3-3 3"/>
          </svg>
        </div>
        <h3>📱 Ajuste o tamanho das áreas</h3>
      </div>
      <p><strong>Barra divisória:</strong> Arraste a barra entre "Editor de Blocos" e "Código" para ajustar o tamanho de cada área conforme sua necessidade.</p>
      <p><em>💻 No computador as áreas ficam fixas em 50%.</em></p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Próximo",
        action() {
          this.next();
        },
      },
    ],
  },
  {
    id: "help-button",
    attachTo: {
      element: '[data-tour="help-button"]',
      on: "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="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
            <path d="M12 17h.01"/>
          </svg>
        </div>
        <h3>Botão de Ajuda</h3>
      </div>
      <p>Clique aqui sempre que quiser rever este tour!</p>
      <p>Agora você está pronto para começar a programar!</p>
    `,
    buttons: [
      {
        text: "Anterior",
        classes: "shepherd-button-secondary",
        action() {
          this.back();
        },
      },
      {
        text: "Finalizar",
        action() {
          this.complete();
        },
      },
    ],
  },
];

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