import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Trash2, Maximize2, X } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { UnassignedImage, Product } from "../../types";

interface UnassignedImageItemProps {
  image: UnassignedImage;
  index: number;
  data: Product[];
  onAssign: (imageIndex: number, productIndex: number) => void;
  onRemove: (index: number) => void;
}

export const UnassignedImageItem = ({ 
  image, 
  index, 
  data,
  onAssign,
  onRemove
}: UnassignedImageItemProps) => {
  const [dialogOpen, setDialogOpen] = useState(false);
  
  return (
    <div className="relative border rounded-md overflow-hidden">
      <img 
        src={image.previewUrl} 
        alt={`Unassigned image ${index + 1}`}
        className="h-full w-full object-cover"
      />
      <div className="absolute bottom-0 left-0 right-0 bg-black/60 p-2">
        <p className="text-white text-xs mb-1 truncate">{image.file.name}</p>
        <div className="flex gap-2">
          <Select onValueChange={(value) => onAssign(index, parseInt(value))}>
            <SelectTrigger className="h-7 text-xs bg-white dark:bg-gray-800 border-0 text-black dark:text-white">
              <SelectValue placeholder="Assign to..." />
            </SelectTrigger>
            <SelectContent>
              {data.map((product: Product, productIndex: number) => (
                <SelectItem key={productIndex} value={productIndex.toString()}>
                  {product.name || `Product #${productIndex + 1}`}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button 
            variant="ghost" 
            size="icon"
            className="h-7 w-7 bg-white dark:bg-gray-800 text-black dark:text-white"
            onClick={(e) => {
              e.stopPropagation();
              onRemove(index);
            }}
          >
            <Trash2 className="h-3.5 w-3.5" />
          </Button>
        </div>
      </div>
      {/* Zoom button for unassigned images */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogTrigger asChild>
          <button 
            className="absolute top-1 left-1 bg-black/60 rounded-full p-1 text-white z-10 hover:bg-black/80"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              setDialogOpen(true);
            }}
            onPointerDown={(e) => e.stopPropagation()}
            onMouseDown={(e) => e.stopPropagation()}
            onTouchStart={(e) => e.stopPropagation()}
          >
            <Maximize2 className="h-3.5 w-3.5" />
          </button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[650px] max-h-[90vh] p-6 bg-background/95 backdrop-blur-sm border border-border rounded-lg shadow-2xl">
          <div className="relative flex flex-col items-center justify-center">
            <Button 
              variant="ghost" 
              size="icon" 
              className="absolute -top-2 -right-2 bg-black/60 text-white hover:bg-black/80 rounded-full z-10 h-8 w-8"
              onClick={() => setDialogOpen(false)}
            >
              <X className="h-4 w-4" />
            </Button>
            <div className="overflow-hidden rounded-md border border-border shadow-md bg-white dark:bg-black">
              <img 
                src={image.previewUrl} 
                alt={`Unassigned image: ${image.file.name}`}
                className="max-h-[70vh] max-w-full object-contain"
              />
            </div>
            <div className="mt-2 text-sm text-muted-foreground text-center">
              {`Unassigned image: ${image.file.name}`}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}; 