Fetch: HTTP do JavaScript.

// fetch retorna Promise<Response>
// response.json() retorna Promise<any>
// por isso: dois awaits

async function buscarArtigos() {
  const response = await fetch("/artigos.json");
  const artigos = await response.json();
  return artigos;
}

// versão compacta — quando não precisa inspecionar o response
const artigos = await (await fetch("/artigos.json")).json();

async function carregarArtigos() {
  try {
    const response = await fetch("/artigos.json");

    // response.ok é false para 4xx e 5xx
    if (!response.ok) {
      throw new Error(`Erro do servidor: ${response.status} ${response.statusText}`);
    }

    const artigos = await response.json();
    return artigos;

  } catch (erro) {
    // captura tanto erros de rede quanto o Error lançado acima
    console.error("Falha ao carregar artigos:", erro.message);
    throw erro; // propagar para o chamador tratar na UI
  }
}

async function enviarFormulario(dados) {
  const response = await fetch("/contato", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // outros headers quando necessário:
      // "Authorization": `Bearer ${token}`,
    },
    body: JSON.stringify(dados),
    // JSON.stringify converte o objeto em string JSON:
    // { nome: "Dev", email: "dev@ex.com" } → '{"nome":"Dev","email":"dev@ex.com"}'
  });

  if (!response.ok) throw new Error(`Erro ${response.status}`);

  return response.json(); // ler a resposta do servidor
}

// usar no handler do formulário
formContato.addEventListener("submit", async (event) => {
  event.preventDefault();

  const dados = {
    nome: document.getElementById("nome").value,
    email: document.getElementById("email").value,
    mensagem: document.getElementById("mensagem").value,
  };

  try {
    await enviarFormulario(dados);
    exibirNotificacao("sucesso", "Mensagem enviada!");
    event.target.reset(); // limpar o formulário
  } catch (erro) {
    exibirNotificacao("erro", "Falha ao enviar. Tente novamente.");
  }
});

[
  {
    "id": 1,
    "titulo": "CSS em geral",
    "autor": "Dev Aprendiz",
    "descricao": "O que é CSS, anatomia de uma regra e como conectar ao HTML.",
    "tags": ["css", "frontend"],
    "curtidas": 42,
    "publicado": true,
    "publicadoEm": "2025-03-15"
  },
  {
    "id": 2,
    "titulo": "Flexbox",
    "autor": "Dev Aprendiz",
    "descricao": "Layout em uma dimensão com display: flex.",
    "tags": ["css", "layout"],
    "curtidas": 87,
    "publicado": true,
    "publicadoEm": "2025-03-22"
  }
]

async function carregarArtigos() {
  const lista = document.getElementById("lista-artigos");
  if (!lista) return;

  // estado de carregamento
  lista.innerHTML = `
    <div class="carregando" aria-live="polite">
      <p>Carregando artigos…</p>
    </div>
  `;

  try {
    const response = await fetch("/artigos.json");

    if (!response.ok) {
      throw new Error(`Falha ao buscar artigos (${response.status})`);
    }

    const artigos = await response.json();
    const publicados = artigos.filter(a => a.publicado);

    if (publicados.length === 0) {
      lista.innerHTML = "<p>Nenhum artigo publicado ainda.</p>";
      return;
    }

    // recuperar curtidos do localStorage para atualizar os botões
    const curtidos = JSON.parse(localStorage.getItem("curtidos")) ?? [];

    lista.innerHTML = publicados.map(artigo => {
      const curtido = curtidos.includes(artigo.id);
      const dataFormatada = new Intl.DateTimeFormat("pt-BR").format(new Date(artigo.publicadoEm));

      return `
        <article class="card-artigo" data-id="${artigo.id}">
          <h2 class="card-titulo">${artigo.titulo}</h2>
          <p class="card-descricao">${artigo.descricao}</p>
          <div class="card-meta">
            <span>Por ${artigo.autor}</span>
            <time datetime="${artigo.publicadoEm}">${dataFormatada}</time>
          </div>
          <div class="card-tags">
            ${artigo.tags.map(t => `<span class="tag-artigo">${t}</span>`).join("")}
          </div>
          <button
            class="botao-curtir"
            aria-pressed="${curtido}"
          >
            ${curtido ? "❤️" : "🤍"} ${artigo.curtidas + (curtido ? 1 : 0)} curtidas
          </button>
        </article>
      `;
    }).join("");

  } catch (erro) {
    console.error(erro);
    lista.innerHTML = `
      <div class="erro-carregamento" role="alert">
        <p>Não foi possível carregar os artigos.</p>
        <button onclick="carregarArtigos()">Tentar novamente</button>
      </div>
    `;
  }
}

// chamar ao carregar a página
carregarArtigos();