export type CropArea = { x: number; y: number; width: number; height: number };

// Recorta la región indicada (en píxeles del original) y reescala el lado más
// largo a `maxDimension`, devolviendo un WebP ya optimizado listo para subir.
export async function getCroppedWebp(
  src: string,
  area: CropArea,
  maxDimension: number,
  quality = 0.82,
): Promise<Blob> {
  const img = await loadImage(src);
  const scale = Math.min(1, maxDimension / Math.max(area.width, area.height));
  const outW = Math.max(1, Math.round(area.width * scale));
  const outH = Math.max(1, Math.round(area.height * scale));

  const canvas = document.createElement('canvas');
  canvas.width = outW;
  canvas.height = outH;
  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('No se pudo crear el lienzo.');
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(img, area.x, area.y, area.width, area.height, 0, 0, outW, outH);

  const blob = await new Promise<Blob | null>((resolve) =>
    canvas.toBlob(resolve, 'image/webp', quality),
  );
  if (!blob) throw new Error('No se pudo procesar la imagen.');
  return blob;
}

function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error('No se pudo cargar la imagen.'));
    img.src = src;
  });
}