/**
 * @fileoverview Tour steps para o jogo Quebra-Cabeças.
 * @module games.puzzle.config.tourSteps
 */

import {
  createWelcomeStep,
  createGameAreaStep,
  createToolboxStep,
  createWorkspaceStep,
  createRunButtonStep,
  createResetInfoStep,
  createPhaseSelectorStep,
  createPhaseInfoStep,
  createHelpButtonStep,
  defaultGameTourOptions,
} from "../../../../utils/tourHelpers";

const puzzleIcon = `<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="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.69a.979.979 0 0 1 .837-.276c.47.07.801.48.967.925a2.5 2.5 0 1 0 3.237-3.237c-.464-.18-.894-.527-.967-1.02a.979.979 0 0 1 .276-.837l1.61-1.61a2.402 2.402 0 0 1 1.705-.707 2.404 2.404 0 0 1 1.704.706l1.568 1.568c.23.23.556.338.878.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.893.527-.967 1.02z"/>
</svg>`;

export const puzzleTourSteps = [
  createWelcomeStep({
    gameName: "Quebra-Cabeças Animal",
    description:
      "Bem-vindo ao Quebra-Cabeças! Aqui você vai aprender como os objetos têm propriedades e como atribuir valores corretos a cada característica.",
    challenge:
      "Use os blocos de seleção para montar a ficha técnica completa de cada animal — tipo, patas, cobertura, locomoção e som!",
    iconSvg: puzzleIcon,
  }),

  createGameAreaStep({
    title: "Arena dos Animais",
    description:
      "Nesta tela você verá os animais aparecendo enquanto seu código é executado. Ao acertar, o animal correto aparece na tela!",
  }),

  createToolboxStep({
    description:
      "Aqui ficam as peças do puzzle! Cada categoria corresponde a uma característica do animal: Tipo de Animal, Patas, Corpo, Movimento e Som. Arraste os blocos para a área de trabalho.",
  }),

  createWorkspaceStep({
    description:
      "Monte a ficha do animal aqui. Primeiro coloque o bloco de Tipo de Animal e, dentro dele, encaixe os blocos das características na ordem correta.",
  }),

  createRunButtonStep({
    description:
      "Execute seu código para ver as peças encaixando! Cada bloco exibirá uma frase na tela — por exemplo: \"É um MAMÍFERO!\", \"Tem 4 patas!\". Acompanhe o feedback em tempo real.",
  }),

  createResetInfoStep({
    description:
      "Se as peças não encaixarem, use o reset para limpar a área e montar o animal novamente do zero.",
  }),

  createPhaseSelectorStep({
    description:
      "O jogo tem 10 animais para montar, cada um com suas características únicas — de gatos e leões a polvos e aranhas. Avance pelas fases para desbloquear todos!",
  }),

  createPhaseInfoStep({
    description:
      "Leia com atenção o enunciado de cada fase — ele descreve as características exatas do animal que você precisa montar.",
  }),

  createHelpButtonStep({
    description:
      "Ficou perdido? Clique no botão de ajuda para rever este tour a qualquer momento.",
  }),
];

export const puzzleTourOptions = defaultGameTourOptions;
