/**
 * Configura ícones da toolbox do Blockly para mobile.
 * Ajusta tamanho e visibilidade de ícones em viewports pequenas (< 480px).
 * Usa múltiplas tentativas com retry para esperar renderização do Blockly.
 *
 * @function configureMobileToolboxIcons
 * @param {Blockly.Workspace} workspace - Workspace do Blockly
 * @returns {void}
 * 
 * Comportamento:
 * - Faz nada se viewport > 480px (desktop)
 * - Tenta até 5 vezes reconectando com delay de 200ms
 * - Busca elementos da toolbox com múltiplos seletores fallback
 * - Ajusta CSS inline para ícones ficarem visíveis em mobile
 *
 * @internal
 */
export function configureMobileToolboxIcons(workspace) {
  if (!workspace || window.innerWidth > 480) return;

  const tryConfigureIcons = (attempt = 1) => {
    // Tentar diferentes seletores para encontrar as categorias
    const possibleSelectors = [
      ".blocklyToolboxCategory",
      ".blocklyTreeRow",
      '[role="treeitem"]',
      ".blocklyToolboxContents > div",
      ".blocklyToolbox .blocklyTreeRow",
    ];

    let categories = [];
    for (const selector of possibleSelectors) {
      categories = document.querySelectorAll(selector);
      if (categories.length > 0) {
        break;
      }
    }

    if (categories.length === 0) {
      // Tentar novamente até 5 vezes
      if (attempt < 5) {
        setTimeout(() => tryConfigureIcons(attempt + 1), 200);
      }
      return;
    }

    categories.forEach((categoryElement, index) => {
      try {
        // Tentar diferentes seletores para encontrar os elementos internos
        const possibleIconSelectors = [
          ".blocklyToolboxCategoryIcon",
          ".blocklyTreeIcon",
          ".blocklyTreeRowIcon",
          'span[class*="Icon"]',
          ".fa",
          "i",
        ];

        const possibleLabelSelectors = [
          ".blocklyToolboxCategoryLabel",
          ".blocklyTreeLabel",
          ".blocklyTreeRowLabel",
          'span[class*="Label"]',
          'span:not([class*="Icon"])',
        ];

        let iconElement = null;
        let labelElement = null;

        // Procurar ícone
        for (const selector of possibleIconSelectors) {
          iconElement = categoryElement.querySelector(selector);
          if (iconElement) {
            break;
          }
        }

        // Procurar label
        for (const selector of possibleLabelSelectors) {
          labelElement = categoryElement.querySelector(selector);
          if (labelElement && labelElement.textContent.trim()) {
            break;
          }
        }

        // Se não encontrou, criar elementos
        if (!iconElement) {
          iconElement = document.createElement("i");
          iconElement.className = "blocklyToolboxCategoryIcon";
          categoryElement.insertBefore(iconElement, categoryElement.firstChild);
        }

        if (!labelElement) {
          labelElement = categoryElement.querySelector("*");
          if (!labelElement || !labelElement.textContent.trim()) {
            return;
          }
        }

        const categoryName = labelElement.textContent.trim().toLowerCase();

        // Mapeamento de ícones
        const iconMap = {
          // Movimento (com e sem emojis)
          "🤖 movimento": "fas fa-running",
          movimento: "fas fa-running",
          movimentos: "fas fa-running",
          mover: "fas fa-running",

          // Repetição/Loops
          "🔄 repetição": "fas fa-sync-alt",
          repetição: "fas fa-sync-alt",
          repeticao: "fas fa-sync-alt",
          loops: "fas fa-sync-alt",
          loop: "fas fa-sync-alt",

          // Lógica
          "🤔 lógica": "fas fa-brain",
          lógica: "fas fa-brain",
          logica: "fas fa-brain",
          logic: "fas fa-brain",

          // Outros
          matemática: "fas fa-calculator",
          matematica: "fas fa-calculator",
          math: "fas fa-calculator",
          texto: "fas fa-font",
          text: "fas fa-font",
          variáveis: "fas fa-box",
          variaveis: "fas fa-box",
          variables: "fas fa-box",
          funções: "fas fa-cog",
          funcoes: "fas fa-cog",
          functions: "fas fa-cog",
          controle: "fas fa-gamepad",
          control: "fas fa-gamepad",
          eventos: "fas fa-bolt",
          events: "fas fa-bolt",
        };

        const iconClass = iconMap[categoryName] || "fas fa-puzzle-piece";

        // Aplicar classe do ícone
        iconElement.className = `blocklyToolboxCategoryIcon ${iconClass}`;

        // Aplicar estilos diretamente no elemento
        const iconStyles = {
          display: "flex",
          "align-items": "center",
          "justify-content": "center",
          width: "32px",
          height: "32px",
          "font-family": '"Font Awesome 6 Free", "FontAwesome", sans-serif',
          "font-weight": "900",
          "font-size": "20px",
          color: "#C41E3A",
          margin: "0 auto",
          "text-rendering": "auto",
          "-webkit-font-smoothing": "antialiased",
          position: "relative",
          "z-index": "50",
        };

        Object.entries(iconStyles).forEach(([prop, value]) => {
          iconElement.style.setProperty(prop, value, "important");
        });

        // Ocultar o texto em mobile
        labelElement.style.setProperty("display", "none", "important");

        // Garantir que a categoria seja clicável
        categoryElement.style.setProperty(
          "pointer-events",
          "auto",
          "important",
        );
        categoryElement.style.setProperty("cursor", "pointer", "important");
      } catch (error) {
        // Silently ignore per-category configuration errors
      }
    });
  };

  // Começar tentativas
  tryConfigureIcons();

  // Reconfigurar quando houver mudanças no workspace
  if (workspace.addChangeListener) {
    workspace.addChangeListener((event) => {
      if (event.type === "selected" && window.innerWidth <= 480) {
        setTimeout(() => tryConfigureIcons(), 100);
      }
    });
  }
}
