'use client';
import React, { useCallback, useState } from 'react';

type ImageUploaderProps = {
  maxFiles?: number;
  onUploadIds?: (ids: number[]) => void;
};

export default function ImageUploader({ maxFiles = 4, onUploadIds }: ImageUploaderProps) {
  const [previews, setPreviews] = useState<string[]>([]);
  const [uploading, setUploading] = useState(false);
  const [uploadedIds, setUploadedIds] = useState<number[]>([]);

  const processFiles = useCallback(async (files: FileList | null) => {
    if (!files) return;
    const items = Array.from(files).slice(0, maxFiles - previews.length);

    setUploading(true);
    const ids: number[] = [];
    const updatedPreviews: string[] = [];

    for (const file of items) {
      if (!file.type.startsWith('image/')) {
        continue;
      }
      if (file.size > 6 * 1024 * 1024) {
        alert(`El archivo ${file.name} supera el límite de 6 MB.`);
        continue;
      }

      const webpBlob = await toWebP(file, 1200, 0.75);
      const formData = new FormData();
      formData.append('file', webpBlob, `${file.name}.webp`);

      const response = await fetch('/api/wp/media', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        console.error('Error subiendo imagen', file.name);
        continue;
      }

      const json = await response.json();
      ids.push(json.id);
      updatedPreviews.push(json.source_url || URL.createObjectURL(webpBlob));
    }

    setUploadedIds((current) => {
      const next = [...current, ...ids];
      onUploadIds?.(next);
      return next;
    });
    setPreviews((current) => [...current, ...updatedPreviews]);
    setUploading(false);
  }, [maxFiles, onUploadIds, previews.length]);

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    processFiles(event.dataTransfer.files);
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    processFiles(event.target.files);
    event.target.value = '';
  };

  return (
    <div className="space-y-3">
      <label className="block text-sm font-medium text-slate-700">Imágenes del servicio</label>
      <div
        onDrop={handleDrop}
        onDragOver={(event) => event.preventDefault()}
        className="rounded-3xl border-2 border-dashed border-slate-300 bg-slate-50 p-6 text-center transition hover:border-slate-400"
      >
        <p className="text-sm text-slate-500">Arrastra hasta {maxFiles} imágenes o haz clic para seleccionar.</p>
        <input type="file" accept="image/*" multiple onChange={handleChange} className="mt-4" />
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {previews.map((src, index) => (
          <img key={index} src={src} alt={`preview-${index}`} className="h-28 w-full rounded-3xl object-cover" />
        ))}
      </div>
      {uploading && <p className="text-sm text-slate-500">Subiendo imágenes...</p>}
    </div>
  );
}

async function toWebP(file: File, maxSize: number, quality = 0.75): Promise<Blob> {
  const image = await loadImage(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(1, maxSize / Math.max(image.width, image.height));
  canvas.width = Math.round(image.width * ratio);
  canvas.height = Math.round(image.height * ratio);

  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('Canvas no soportado');
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (blob) resolve(blob);
        else reject(new Error('No se pudo convertir la imagen.'));
      },
      'image/webp',
      quality,
    );
  });
}

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