import { isMobileViewport } from './isMobile';

/**
 * Retorna posição de attachment (attach) responsiva para popover de tour.
 * Adapta posição baseado em breakpoint mobile.
 *
 * @function getAttachPosition
 * @param {string} [desktopPosition='right'] - Posição em desktop (right, left, top, bottom)
 * @param {string} [mobilePosition='bottom'] - Posição em mobile
 * @returns {string} Posição calculada baseado em viewport
 *
 * @example
 * const pos = getAttachPosition('right', 'bottom');
 * // Retorna 'right' em desktop, 'bottom' em mobile
 */
const getAttachPosition = (
  desktopPosition = "right",
  mobilePosition = "bottom",
) => {
  return isMobileViewport() ? mobilePosition : desktopPosition;
};

/**
 * Cria step de boas-vindas para tour inicial do jogo.
 * Exibe ícone, nome do jogo, descrição e desafio.
 *
 * @function createWelcomeStep
 * @param {Object} config - Configuração do step
 * @param {string} config.gameName - Nome do jogo (ex: 'Semáforo')
 * @param {string} config.description - Descrição breve do jogo
 * @param {string} [config.challenge] - Desafio/objetivo do jogo (opcional)
 * @param {string} config.iconSvg - HTML SVG para ícone do jogo
 * @returns {Object} Step Shepherd pronto para usar
 *
 * @example
 * const step = createWelcomeStep({
 *   gameName: 'Semáforo',
 *   description: 'Controle o semáforo...',
 *   iconSvg: '<svg>...</svg>'
 * });
 */
export const createWelcomeStep = ({
  gameName,
  description,
  challenge,
  iconSvg,
}) => ({
  id: "welcome",
  text: `
    <div class="tour-header">
      <div class="tour-icon-wrapper">
        ${iconSvg}
      </div>
      <h3>Bem-vindo ao ${gameName}!</h3>
    </div>
    <p>${description}</p>
    ${challenge ? `<p><strong>Desafio:</strong> ${challenge}</p>` : ""}
    <p>Vamos fazer um tour rápido para você entender como jogar.</p>
  `,
  buttons: [
    {
      text: "Pular Tour",
      classes: "shepherd-button-secondary",
      action() {
        this.complete();
      },
    },
    {
      text: "Começar Tour",
      action() {
        this.next();
      },
    },
  ],
});

/**
 * Cria step para área principal do jogo.
 * Destaca elemento e descreve interação principal.
 *
 * @function createGameAreaStep
 * @param {Object} config - Configuração do step
 * @param {string} [config.title='Área do Jogo'] - Título do step
 * @param {string} config.description - Descrição do que fazer na área
 * @param {string} [config.selector='.game-area-container'] - Seletor CSS do elemento
 * @returns {Object} Step Shepherd pronto para usar
 */
export const createGameAreaStep = ({
  title = "Área do Jogo",
  description,
  selector = ".game-area-container",
}) => ({
  id: "game-area",
  attachTo: {
    element: selector,
    on: getAttachPosition("right"),
  },
  text: `
    <div class="tour-header">
      <h3>${title}</h3>
    </div>
    <p>${description}</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createToolboxStep = ({
  description = "Aqui estão as categorias com os blocos de programação que você pode usar.",
}) => ({
  id: "blockly-toolbox",
  attachTo: {
    element: () => {
      // Buscar a toolbox do Blockly
      // Ordem de prioridade: containers completos primeiro, elementos individuais depois

      // 1. Tentar toolbox div principal
      let toolbox = document.querySelector(".blocklyToolboxDiv");

      // 2. Tentar o container das categorias (jogos)
      if (!toolbox) {
        toolbox = document.querySelector(".blocklyToolboxContents");
      }

      // 3. Tentar a árvore de categorias (raiz da toolbox)
      if (!toolbox) {
        toolbox = document.querySelector(".blocklyTreeRoot");
      }

      // 4. Se encontrou um container de categoria, buscar o elemento pai que contém TODOS os containers
      if (!toolbox) {
        const categoryContainer =
          document.querySelector(".blocklyToolboxCategoryContainer") ||
          document.querySelector(".blocklyToolboxCategory");
        if (categoryContainer) {
          // Buscar o elemento pai que contém todas as categorias
          toolbox =
            categoryContainer.closest(".blocklyToolboxContents") ||
            categoryContainer.closest(".blocklyTreeRoot") ||
            categoryContainer.closest(".blocklyToolboxDiv") ||
            categoryContainer.closest('[role="tree"]') ||
            categoryContainer.parentElement?.parentElement;
        }
      }

      // 5. Tentar flyout como último recurso
      if (!toolbox) {
        toolbox = document.querySelector(".blocklyFlyout");
      }

      // 6. Fallback: buscar dentro do blocklyDiv
      if (!toolbox) {
        const blocklyDiv = document.querySelector(".blocklyDiv");
        if (blocklyDiv) {
          toolbox =
            blocklyDiv.querySelector('[role="tree"]') ||
            blocklyDiv.querySelector('[class*="toolbox"]');
        }
      }

      // Se encontrou blocklyToolboxCategoryGroup, preferir usar o pai .blocklyToolbox para destaque melhor
      if (
        toolbox?.className.includes("blocklyToolboxCategoryGroup") &&
        toolbox.parentElement?.className.includes("blocklyToolbox")
      ) {
        toolbox = toolbox.parentElement;
      }

      // Se não encontrar nenhum elemento, retorna null para que o Shepherd centralize o modal
      return toolbox || null;
    },
    on: getAttachPosition("right"),
  },
  text: `
    <div class="tour-header">
      <h3>Categorias de Blocos</h3>
    </div>
    <p>${description}</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createWorkspaceStep = ({
  description = "Arraste os blocos das categorias para esta área e conecte-os para criar seu programa.",
}) => ({
  id: "blockly-workspace",
  attachTo: {
    element: () => {
      // Buscar o workspace do Blockly de forma mais robusta
      // Tenta diferentes seletores e elementos filhos
      const workspace =
        document.querySelector(".blocklyWorkspace") ||
        document.querySelector(".blocklySvg") ||
        document.querySelector(".blocklyMainBackground")?.closest("svg") ||
        document.querySelector(".blocklyDiv svg") ||
        document.querySelector(".blocklyDiv");

      // Se não encontrar nenhum elemento, retorna null para que o Shepherd centralize o modal
      return workspace || null;
    },
    on: getAttachPosition("left"),
  },
  text: `
    <div class="tour-header">
      <h3>Área de Trabalho</h3>
    </div>
    <p>${description}</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createRunButtonStep = ({
  description = "Quando seu programa estiver pronto, clique neste botão para executar.",
}) => ({
  id: "run-button",
  attachTo: {
    element: '[data-tour="run-button"]',
    on: "bottom",
  },
  text: `
    <div class="tour-header">
      <h3>Executar Programa</h3>
    </div>
    <p>${description}</p>
    <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; vertical-align: middle; margin-right: 4px;"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg><strong>Ação:</strong> O programa será executado passo a passo para você ver o resultado.</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createResetInfoStep = ({
  description = "Após executar seu programa, este botão aparecerá para você reiniciar o jogo e tentar novamente.",
}) => ({
  id: "reset-info",
  attachTo: {
    element: '[data-tour="reset-button"]',
    on: "bottom",
  },
  text: `
    <div class="tour-header">
      <h3>Reiniciar o Jogo</h3>
    </div>
    <p>${description}</p>
    <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; vertical-align: middle; margin-right: 4px;"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><strong>Observação:</strong> Este botão só aparece após você executar o programa.</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createPhaseSelectorStep = ({
  description = "Use este menu para escolher diferentes fases e desafios.",
}) => ({
  id: "phase-selector",
  attachTo: {
    element: '[data-tour="phase-selector"]',
    on: "bottom",
  },
  text: `
    <div class="tour-header">
      <h3>Seletor de Fases</h3>
    </div>
    <p>${description}</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createPhaseInfoStep = ({
  description = "Aqui você vê informações sobre a fase atual e seu objetivo.",
}) => ({
  id: "phase-info",
  attachTo: {
    element: ".game-fase-info",
    on: "bottom",
  },
  text: `
    <div class="tour-header">
      <h3>Informações da Fase</h3>
    </div>
    <p>${description}</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createHelpButtonStep = ({
  description = "Se precisar ver este tour novamente, clique no botão de ajuda.",
}) => ({
  id: "help-button",
  attachTo: {
    element: '[data-tour="help-button"]',
    on: "top",
  },
  text: `
    <div class="tour-header">
      <h3>Precisa de Ajuda?</h3>
    </div>
    <p>${description}</p>
    <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; vertical-align: middle; margin-right: 4px;"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg><strong>Dica:</strong> Você pode rever este tour a qualquer momento clicando no botão de ajuda.</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Entendi!",
      action() {
        this.complete();
      },
    },
  ],
});

export const gameIcons = {
  robot: `<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="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/>
    <path d="M12 2v2"/>
    <path d="M12 20v2"/>
    <path d="m3.64 6.36 1.42 1.42"/>
    <path d="m18.34 16.94 1.42 1.42"/>
    <path d="M2 12h2"/>
    <path d="M20 12h2"/>
    <path d="m6.36 18.34 1.42-1.42"/>
    <path d="m16.94 5.66 1.42-1.42"/>
  </svg>`,

  bird: `<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="M16 7h.01"/>
    <path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20"/>
    <path d="m20 7 2 .5-2 .5"/>
    <path d="M10 18v3"/>
    <path d="M14 17.75V21"/>
    <path d="M7 18a6 6 0 0 0 3.84-10.61"/>
  </svg>`,

  traffic: `<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">
    <rect width="6" height="16" x="9" y="4" rx="1"/>
    <circle cx="12" cy="9" r="1.5"/>
    <circle cx="12" cy="12" r="1.5"/>
    <circle cx="12" cy="15" r="1.5"/>
  </svg>`,

  turtle: `<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="m12 10 2 4v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a8 8 0 1 0-16 0v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3l2-4h4Z"/>
    <path d="M4.82 7.9 8 10"/>
    <path d="M15.18 7.9 12 10"/>
    <path d="M16.93 10H20a2 2 0 0 1 0 4H2"/>
  </svg>`,

  motorcycle: `<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">
    <circle cx="5" cy="18" r="3"/>
    <circle cx="19" cy="18" r="3"/>
    <path d="M9 18h6"/>
    <path d="M5 18v-4l4-4 4 2v6"/>
    <path d="M19 18v-6l-4-2-2 2"/>
  </svg>`,

  emoji: `<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">
    <circle cx="12" cy="12" r="10"/>
    <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
    <line x1="9" y1="9" x2="9.01" y2="9"/>
    <line x1="15" y1="9" x2="15.01" y2="9"/>
  </svg>`,

  sentiment: `<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="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
    <circle cx="6.5" cy="11.5" r="1.5"/>
    <circle cx="9.5" cy="8" r="1.5"/>
    <circle cx="14.5" cy="8" r="1.5"/>
    <circle cx="17.5" cy="11.5" r="1.5"/>
  </svg>`,

  mole: `<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 20c0-2 4-4 10-4s10 2 10 4"/>
    <path d="M7 16v-4a5 5 0 0 1 10 0v4"/>
    <path d="M10 10h.01"/>
    <path d="M14 10h.01"/>
    <path d="M12 12v.01"/>
  </svg>`,

  lock: `<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">
    <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
  </svg>`,
};

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

/* ========================================
 * HELPERS PARA JOGOS BASEADOS EM CÓDIGO
 * ======================================== */

export const createCodeEditorStep = ({
  title = "Editor de Código",
  description = "Digite seu código JavaScript aqui para controlar o jogo.",
  additionalInfo = "Use as funções disponíveis e estruturas de controle para resolver o desafio.",
}) => ({
  id: "code-editor",
  attachTo: {
    element: () => {
      // Buscar o editor CodeMirror
      const editor =
        document.querySelector(".cm-editor") ||
        document.querySelector(".CodeMirror") ||
        document.querySelector('[class*="codemirror"]') ||
        document.querySelector(".code-editor-container");

      return editor || null;
    },
    on: getAttachPosition("left"),
  },
  text: `
    <div class="tour-header">
      <h3>${title}</h3>
    </div>
    <p>${description}</p>
    ${additionalInfo ? `<p>${additionalInfo}</p>` : ""}
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createAvailableFunctionsStep = ({
  functions = [],
  description = "Estas são as funções disponíveis que você pode usar no seu código:",
}) => ({
  id: "available-functions",
  text: `
    <div class="tour-header">
      <h3>Funções Disponíveis</h3>
    </div>
    <p>${description}</p>
    ${
      functions.length > 0
        ? `
      <ul style="margin: 10px 0; padding-left: 20px;">
        ${functions.map((func) => `<li><code>${func}</code></li>`).join("")}
      </ul>
    `
        : ""
    }
    <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; vertical-align: middle; margin-right: 4px;"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg><strong>Dica:</strong> Use o autocomplete (Ctrl+Espaço) para ver todas as funções disponíveis.</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createControlStructuresStep = ({
  structures = [],
  description = "Você pode usar estas estruturas de controle para criar lógica mais complexa:",
}) => ({
  id: "control-structures",
  text: `
    <div class="tour-header">
      <h3>Estruturas de Controle</h3>
    </div>
    <p>${description}</p>
    ${
      structures.length > 0
        ? `
      <ul style="margin: 10px 0; padding-left: 20px;">
        ${structures.map((struct) => `<li><code>${struct}</code></li>`).join("")}
      </ul>
    `
        : ""
    }
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});

export const createCodeExampleStep = ({
  title = "Exemplo de Código",
  example = "// Seu código aqui",
  description = "Veja um exemplo de como você pode resolver este desafio:",
}) => ({
  id: "code-example",
  text: `
    <div class="tour-header">
      <h3>${title}</h3>
    </div>
    <p>${description}</p>
    <pre style="background: #f5f5f5; padding: 10px; border-radius: 5px; overflow-x: auto; margin: 10px 0;"><code>${example}</code></pre>
    <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; vertical-align: middle; margin-right: 4px;"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><strong>Lembre-se:</strong> Este é apenas um exemplo, você pode resolver de outras formas!</p>
  `,
  buttons: [
    {
      text: "Voltar",
      classes: "shepherd-button-secondary",
      action() {
        this.back();
      },
    },
    {
      text: "Próximo",
      action() {
        this.next();
      },
    },
  ],
});
