-- Camada de interface: DOM via fengari-web, teclado, botões de toque e o
-- loop de tempo real (setInterval). Toda regra de jogo mora em
-- logica/cobra.lua — este arquivo só desenha e traduz evento em chamada.
--
-- Mesmos dois gotchas de interop já documentados no Depósito Lotado:
-- callback de evento recebe (self, evento), e método do DOM precisa de
-- chamada com dois-pontos (elemento:metodo(...)), nunca ponto.

local js = require "js"
local document = js.global.document
local window = js.global.window

local LARGURA = 14
local ALTURA = 14
local TICK_MS = 150
local TAMANHO_CELULA = 22 -- px, precisa bater com --celula no styles.css

local estado = nil
local intervaloId = nil

local elTabuleiro = document:getElementById("tabuleiro")
local elPontuacao = document:getElementById("pontuacao")
local elTelaFim = document:getElementById("tela-fim")
local elFimTitulo = document:getElementById("fim-titulo")
local elFimResumo = document:getElementById("fim-resumo")

local function classeDaCelula(x, y)
  local cabeca = estado.cobra[1]
  if cabeca.x == x and cabeca.y == y then
    return "celula cobra-cabeca"
  end
  for i = 2, #estado.cobra do
    local seg = estado.cobra[i]
    if seg.x == x and seg.y == y then
      return "celula cobra-corpo"
    end
  end
  if estado.comida and estado.comida.x == x and estado.comida.y == y then
    return "celula comida"
  end
  return "celula"
end

local function renderizar()
  elTabuleiro.innerHTML = ""
  for y = 0, estado.altura - 1 do
    for x = 0, estado.largura - 1 do
      local div = document:createElement("div")
      div.className = classeDaCelula(x, y)
      elTabuleiro:appendChild(div)
    end
  end

  elPontuacao.textContent = "Pontuação: " .. estado.pontuacao

  if estado.fase ~= "jogando" then
    if intervaloId then
      window:clearInterval(intervaloId)
      intervaloId = nil
    end
    elFimTitulo.textContent = estado.fase == "vitoria" and "Você encheu o tabuleiro! 🐍" or "Bateu!"
    elFimResumo.textContent = "Pontuação final: " .. estado.pontuacao
    elTelaFim:removeAttribute("hidden")
  end
end

local function tick()
  estado = Cobra.avancar(estado)
  renderizar()
end

local function iniciarLoop()
  if intervaloId then
    window:clearInterval(intervaloId)
  end
  intervaloId = window:setInterval(tick, TICK_MS)
end

local function novoJogo()
  estado = Cobra.novoJogo(LARGURA, ALTURA, os.time())
  elTelaFim:setAttribute("hidden", "")
  renderizar()
  iniciarLoop()
end

elTabuleiro.style.gridTemplateColumns = "repeat(" .. LARGURA .. ", " .. TAMANHO_CELULA .. "px)"
elTabuleiro.style.gridTemplateRows = "repeat(" .. ALTURA .. ", " .. TAMANHO_CELULA .. "px)"

local TECLA_PARA_DIRECAO = {
  ArrowUp = "cima",
  ArrowDown = "baixo",
  ArrowLeft = "esquerda",
  ArrowRight = "direita",
}

local function aoTeclar(self, evento)
  local direcao = TECLA_PARA_DIRECAO[evento.key]
  if direcao then
    evento:preventDefault()
    estado = Cobra.definirDirecao(estado, direcao)
  end
end
window:addEventListener("keydown", aoTeclar)

local function ligarBotao(id, direcao)
  local el = document:getElementById(id)
  el:addEventListener("click", function(self, evento)
    estado = Cobra.definirDirecao(estado, direcao)
  end)
end

ligarBotao("btn-cima", "cima")
ligarBotao("btn-baixo", "baixo")
ligarBotao("btn-esquerda", "esquerda")
ligarBotao("btn-direita", "direita")

document:getElementById("btn-reiniciar"):addEventListener("click", function(self, evento)
  novoJogo()
end)

novoJogo()