File: frontend_src/main.js

import { compressImage } from './image-compressor';

const input = document.getElementById('uploadInput');
const outputDiv = document.getElementById('infoCompressed');
const previewImg = document.getElementById('previewCompressed');
const previewOriginal = document.getElementById('previewOriginal');
const infoOriginal = document.getElementById('infoOriginal');

const mockTitle = "Camiseta Developer Senior";
const mockPrice = "89.90";
const mockDesc = "Camiseta de algodão egípcio com estampa de código.";

input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  // Preview Imediato do Original
  previewOriginal.src = URL.createObjectURL(file);
  infoOriginal.innerText = "Carregando...";

  try {
    const result = await compressImage(file);
    
    // Atualiza info do original com dados reais
    infoOriginal.innerHTML = `
        Tamanho: ${(result.meta.originalSize / 1024).toFixed(2)} KB<br>
        Dimensões: ${result.meta.originalWidth} x ${result.meta.originalHeight} px
    `;

    // Mostra o resultado processado
    previewImg.src = URL.createObjectURL(result.file);
    
    // Mostra a cor extraída visualmente
    const colorBox = `<div style="
        display:inline-block; 
        width:20px; 
        height:20px; 
        background-color:${result.meta.dominantColor}; 
        border:1px solid #ccc;
        vertical-align: middle;
        margin-left: 5px;"></div>`;

    outputDiv.innerHTML = `
      <strong>Metadados Extraídos:</strong><br>
      Tamanho Final: ${(result.meta.compressedSize / 1024).toFixed(2)} KB<br>
      Dimensões Finais: ${result.meta.finalWidth} x ${result.meta.finalHeight} px<br>
      Cor Predominante: ${result.meta.dominantColor} ${colorBox}<br>
      <hr>
      <span style="color: green">Pronto para envio!</span>
    `;

    // Preparar o envio (FormData)
    const formData = new FormData();
    
    // Dados do produto
    formData.append('title', mockTitle);
    formData.append('price', mockPrice);
    formData.append('description', mockDesc);
    
    // O Arquivo WebP (Binário)
    formData.append('image', result.file);
    
    // Metadados (Extraídos pelo JS)
    formData.append('meta_width', result.meta.finalWidth);
    formData.append('meta_height', result.meta.finalHeight);
    formData.append('meta_color', result.meta.dominantColor);
    formData.append('meta_size', result.meta.compressedSize);

    console.log("Enviando para o servidor...");

    // Envio Assíncrono
    const response = await fetch('/products', { 
      method: 'POST',
      body: formData
    });

    const json = await response.json();
    
    if (response.ok) {
        alert(`Sucesso! Produto ID ${json.id} criado.`);
        console.log(json);
    } else {
        alert("Erro: " + json.error);
    }
       
  } catch (err) {
    console.error(err);
    alert("Erro ao processar/enviar");
  }
});