<div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">
  <h2>Orçamento de Fórmula Manipulada</h2>
  <p>Envie a foto da sua receita para fazermos a leitura automática.</p>

  <form id="form-receita">
    <label for="arquivo-receita">Selecione a receita (imagem JPG ou PNG):</label><br />
    <input type="file" id="arquivo-receita" name="receita" accept="image/*" required />
    <br /><br />
    <button type="submit">Analisar receita</button>
  </form>

  <div id="status" style="margin-top: 20px; font-weight: bold;"></div>

  <pre id="resultado" style="margin-top: 20px; background: #f4f4f4; padding: 10px; overflow-x: auto;"></pre>
</div>

<script>
  const form = document.getElementById("form-receita");
  const statusDiv = document.getElementById("status");
  const resultadoPre = document.getElementById("resultado");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const fileInput = document.getElementById("arquivo-receita");
    if (!fileInput.files.length) {
      alert("Por favor, selecione uma imagem da receita.");
      return;
    }

    const formData = new FormData();
    formData.append("receita", fileInput.files[0]);

    statusDiv.textContent = "Analisando receita, aguarde...";
    resultadoPre.textContent = "";

    try {
      const response = await fetch("http://localhost:3000/api/analisar-receita", {
        method: "POST",
        body: formData,
      });

      const data = await response.json();

      if (!response.ok || !data.sucesso) {
        statusDiv.textContent = "Ocorreu um erro ao analisar a receita.";
        resultadoPre.textContent = JSON.stringify(data, null, 2);
        return;
      }

      statusDiv.textContent = "Receita analisada com sucesso!";
      resultadoPre.textContent = JSON.stringify(data.receita, null, 2);
    } catch (err) {
      console.error(err);
      statusDiv.textContent = "Erro de comunicação com o servidor.";
      resultadoPre.textContent = err.message;
    }
  });
</script>