import { Button } from "@/components/ui/button";
import { Loader2, Upload } from "lucide-react";
import { useDropzone } from "react-dropzone";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";

interface GenericDropzoneProps {
  processingBulk: boolean;
  unassignedImages: { previewUrl: string; file: File }[];
  showUnassigned: boolean;
  onDrop: (files: File[]) => void;
  onShowUnassigned: () => void;
}

export const GenericDropzone = ({
  processingBulk,
  unassignedImages,
  showUnassigned,
  onDrop,
  onShowUnassigned
}: GenericDropzoneProps) => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: IMAGE_UPLOAD_ACCEPT,
    maxSize: MAX_UPLOAD_BYTES,
    onDrop,
    onDropRejected: (rejections) => {
      rejections.forEach((rejection) => {
        const tooLarge = rejection.errors.some((e) => e.code === 'file-too-large');
        const reason = tooLarge
          ? `larger than ${formatUploadLimitMb()} limit`
          : rejection.errors[0]?.message ?? 'rejected';
        toast.error(`${rejection.file.name}: ${reason}`);
      });
    },
    multiple: true
  });

  return (
    <div 
      {...getRootProps()}
      className={cn(
        "border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md w-full py-6 flex flex-col items-center justify-center cursor-pointer hover:bg-muted/70 transition-colors",
        isDragActive && "border-primary bg-muted"
      )}
    >
      <input {...getInputProps()} />
      <div className="flex flex-col items-center justify-center h-32 py-2">
        {processingBulk ? (
          <>
            <Loader2 className="h-8 w-8 animate-spin text-primary mb-2" />
            <p className="text-base text-muted-foreground">Processing images...</p>
          </>
        ) : isDragActive ? (
          <>
            <Upload className="h-8 w-8 mb-2 text-primary" />
            <p className="text-base text-muted-foreground mb-2">Drop images here</p>
            <p className="text-sm text-muted-foreground">&nbsp;</p>
          </>
        ) : (
          <>
            <Upload className="h-8 w-8 mb-2 text-muted-foreground" />
            <p className="text-base text-muted-foreground mb-2">Drop images here or click to select</p>
            <p className="text-sm text-muted-foreground">Images dropped here will be automatically assigned to products based on filename</p>
            {unassignedImages.length > 0 && !showUnassigned && (
              <Button 
                variant="link" 
                size="sm" 
                onClick={(e) => {
                  e.stopPropagation();
                  onShowUnassigned();
                }}
                className="mt-2 text-amber-600 dark:text-amber-400"
              >
                Show {unassignedImages.length} unassigned {unassignedImages.length === 1 ? 'image' : 'images'}
              </Button>
            )}
          </>
        )}
      </div>
    </div>
  );
}; 