export interface Verbete {
  significado: string;
  sinonimos?: string[];
  aprenderEmOrdem?: string[];
}

export const TECNOLOGIAS: Record<string, Verbete> = {
  WordPress: {
    significado:
      'CMS (sistema de gestão de conteúdo) executado no servidor. O tema controla grande parte da apresentação; plugins adicionam formulários, SEO, cache e outras funções.',
    sinonimos: ['wp', 'wordpress'],
    aprenderEmOrdem: [
      'HTML e CSS',
      'PHP básico',
      'como funciona um CMS',
      'temas do WordPress',
      'plugins e hooks',
      'banco de dados MySQL',
    ],
  },
  WooCommerce: {
    significado:
      'Plugin de e-commerce para WordPress. Adiciona carrinho, produtos, checkout e pagamentos a um site WordPress.',
    aprenderEmOrdem: ['WordPress', 'modelagem de produtos', 'checkout e pagamentos', 'gestão de pedidos'],
  },
  PHP: {
    significado:
      'Linguagem de programação executada no servidor, muito comum em CMSs. Gera o HTML antes de enviá-lo ao navegador.',
    sinonimos: ['php'],
    aprenderEmOrdem: ['lógica de programação', 'sintaxe PHP', 'requisição/resposta HTTP', 'acesso a banco de dados'],
  },
  MySQL: {
    significado:
      'Banco de dados relacional onde o site guarda conteúdo, usuários e configurações. Normalmente fica atrás do servidor de aplicação.',
    aprenderEmOrdem: ['modelo relacional', 'SQL básico', 'consultas e índices'],
  },
  'Next.js': {
    significado:
      'Framework baseado em React que renderiza páginas no servidor e/ou gera páginas estáticas, com roteamento e otimizações prontas.',
    sinonimos: ['nextjs', 'next'],
    aprenderEmOrdem: [
      'HTML semântico',
      'JavaScript moderno',
      'componentes React',
      'roteamento',
      'renderização no servidor (SSR) e estática (SSG)',
      'chamadas a APIs',
      'implantação em plataforma serverless',
    ],
  },
  React: {
    significado:
      'Biblioteca de interfaces que monta a tela a partir de componentes reutilizáveis, atualizando o DOM conforme o estado muda.',
    sinonimos: ['react', 'reactjs'],
    aprenderEmOrdem: ['HTML e CSS', 'JavaScript moderno', 'componentes e props', 'estado e efeitos', 'hooks'],
  },
  'Vue.js': {
    significado:
      'Framework de interfaces progressivo. Como o React, monta a tela por componentes reativos ao estado.',
    sinonimos: ['vue', 'vuejs'],
    aprenderEmOrdem: ['HTML e CSS', 'JavaScript moderno', 'componentes Vue', 'reatividade', 'roteamento'],
  },
  'Nuxt.js': {
    significado: 'Framework sobre Vue.js com renderização no servidor, roteamento e estrutura de projeto prontos.',
    sinonimos: ['nuxt'],
    aprenderEmOrdem: ['Vue.js', 'roteamento', 'renderização no servidor', 'implantação'],
  },
  Angular: {
    significado:
      'Framework completo de interfaces mantido pelo Google, com estrutura opinativa, injeção de dependências e TypeScript.',
    aprenderEmOrdem: ['TypeScript', 'componentes', 'módulos e serviços', 'injeção de dependências', 'roteamento'],
  },
  Svelte: {
    significado:
      'Framework de interfaces que compila os componentes em JavaScript enxuto na etapa de build, sem framework em runtime.',
    aprenderEmOrdem: ['HTML e CSS', 'JavaScript moderno', 'componentes Svelte', 'reatividade', 'stores'],
  },
  Gatsby: {
    significado: 'Gerador de site estático baseado em React, focado em performance e conteúdo pré-renderizado.',
    aprenderEmOrdem: ['React', 'GraphQL', 'geração estática', 'implantação'],
  },
  'Tailwind CSS': {
    significado:
      'Sistema de classes utilitárias de CSS. Em vez de escrever CSS próprio, você compõe estilos direto no HTML com classes pequenas.',
    sinonimos: ['tailwind', 'tailwindcss'],
    aprenderEmOrdem: ['CSS (box model, flexbox, grid)', 'classes utilitárias', 'responsividade', 'customização de tema'],
  },
  Bootstrap: {
    significado: 'Framework CSS com componentes e grid prontos para montar layouts responsivos rapidamente.',
    aprenderEmOrdem: ['CSS básico', 'sistema de grid', 'componentes', 'customização'],
  },
  jQuery: {
    significado:
      'Biblioteca JavaScript clássica que simplifica manipular o DOM e fazer requisições. Muito comum em sites mais antigos.',
    aprenderEmOrdem: ['JavaScript básico', 'seleção e manipulação do DOM', 'eventos', 'AJAX'],
  },
  Cloudflare: {
    significado:
      'Camada de DNS, CDN e proteção que fica na frente do site: acelera a entrega, protege contra ataques e esconde o servidor de origem.',
    sinonimos: ['cloudflare'],
    aprenderEmOrdem: ['DNS', 'como funciona uma CDN', 'proxy reverso', 'cache de borda'],
  },
  Vercel: {
    significado:
      'Plataforma de hospedagem e execução serverless, muito usada com Next.js. Cuida de build, CDN e funções sob demanda.',
    aprenderEmOrdem: ['git e deploy contínuo', 'serverless', 'CDN', 'variáveis de ambiente'],
  },
  Netlify: {
    significado: 'Plataforma de hospedagem para sites estáticos e funções serverless, com deploy contínuo a partir do git.',
    aprenderEmOrdem: ['git e deploy contínuo', 'sites estáticos', 'funções serverless'],
  },
  Nginx: {
    significado:
      'Servidor web e proxy reverso. Entrega arquivos, encaminha requisições para a aplicação e faz cache e balanceamento.',
    aprenderEmOrdem: ['HTTP', 'servidor web vs. aplicação', 'proxy reverso', 'configuração do Nginx'],
  },
  Apache: {
    significado: 'Servidor web tradicional que entrega páginas e encaminha requisições para a aplicação (ex.: PHP).',
    aprenderEmOrdem: ['HTTP', 'servidor web', 'virtual hosts', '.htaccess'],
  },
  'Google Analytics': {
    significado: 'Ferramenta de analytics que mede visitas e comportamento dos usuários. Roda no navegador via script.',
    aprenderEmOrdem: ['como sites medem tráfego', 'eventos', 'privacidade e consentimento'],
  },
  'Google Tag Manager': {
    significado: 'Gerenciador de tags que injeta scripts de marketing/analytics sem alterar o código do site.',
    aprenderEmOrdem: ['analytics', 'tags e gatilhos', 'camada de dados (dataLayer)'],
  },
  Shopify: {
    significado: 'Plataforma de e-commerce hospedada (SaaS). Cuida de loja, produtos, checkout e pagamentos.',
    aprenderEmOrdem: ['conceitos de e-commerce', 'temas Liquid', 'apps', 'checkout'],
  },
  Stripe: {
    significado: 'Processador de pagamentos. O script no navegador coleta os dados do cartão com segurança e cobra via API.',
    aprenderEmOrdem: ['HTTP e APIs', 'tokenização de cartão', 'webhooks', 'segurança de pagamentos'],
  },
  'Node.js': {
    significado: 'Runtime que executa JavaScript no servidor. Base de muitos frameworks backend e ferramentas de build.',
    aprenderEmOrdem: ['JavaScript', 'módulos e npm', 'requisição/resposta HTTP', 'assíncrono e eventos'],
  },
};

export function significadoGenerico(categorias: string[]): string {
  const c = categorias[0] ?? '';
  const mapa: Record<string, string> = {
    CMS: 'Sistema de gestão de conteúdo: organiza páginas e conteúdo, normalmente no servidor.',
    Ecommerce: 'Plataforma de comércio eletrônico: cuida de produtos, carrinho e checkout.',
    Analytics: 'Ferramenta de analytics: mede visitas e comportamento dos usuários.',
    'JavaScript frameworks': 'Framework de interface: organiza a tela em componentes reativos.',
    'JavaScript libraries': 'Biblioteca JavaScript: adiciona funções prontas ao frontend.',
    'Web frameworks': 'Framework web: estrutura o backend/frontend da aplicação.',
    'Web servers': 'Servidor web: entrega páginas e encaminha requisições.',
    CDN: 'Rede de distribuição de conteúdo: acelera a entrega e protege o site.',
    'UI frameworks': 'Framework de UI/CSS: fornece estilos e componentes prontos.',
    'Static site generator': 'Gerador de site estático: pré-renderiza páginas na etapa de build.',
    'Payment processors': 'Processador de pagamentos: cobra cartões/pix com segurança.',
    Fonts: 'Serviço de fontes: fornece tipografia ao site.',
    Security: 'Camada de segurança: protege o site contra abusos e ataques.',
    PaaS: 'Plataforma de hospedagem/execução da aplicação.',
    'Live chat': 'Widget de atendimento/chat ao vivo.',
    'Programming languages': 'Linguagem de programação usada no servidor.',
    Databases: 'Banco de dados onde o site guarda suas informações.',
  };
  return mapa[c] ?? 'Tecnologia identificada no site.';
}

export function acharVerbete(consulta: string): { nome: string; verbete: Verbete } | undefined {
  const alvo = consulta.trim().toLowerCase();
  for (const [nome, verbete] of Object.entries(TECNOLOGIAS)) {
    if (nome.toLowerCase() === alvo) return { nome, verbete };
    if (verbete.sinonimos?.some((s) => s.toLowerCase() === alvo)) return { nome, verbete };
  }
  for (const [nome, verbete] of Object.entries(TECNOLOGIAS)) {
    if (nome.toLowerCase().includes(alvo)) return { nome, verbete };
  }
  return undefined;
}