import { ImagePlus, Pencil, Trash2, Move } from 'lucide-react';
import { GalleryImage } from '../../types';

interface GalleryPreviewProps {
  images: GalleryImage[];
  onAddImage: () => void;
  onEditImage: (image: GalleryImage) => void;
  onDeleteImage: (id: string) => void;
  onReorderImages: (dragIndex: number, dropIndex: number) => void;
}

export function GalleryPreview({
                                 images,
                                 onAddImage,
                                 onEditImage,
                                 onDeleteImage,
                                 onReorderImages
                               }: GalleryPreviewProps) {
  return (
      <div className="space-y-4">
        <div className="flex justify-between items-center">
          <h3 className="text-lg font-medium text-gray-900">Фото галерея</h3>
          <button
              type="button"
              onClick={onAddImage}
              className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            <ImagePlus size={16} className="mr-2" />
            Добавить фото
          </button>
        </div>

        {images.length > 0 ? (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {images.map((image, index) => (
                  <div
                      key={image.id}
                      className="relative group border rounded-lg overflow-hidden bg-gray-50"
                      draggable
                      onDragStart={(e) => e.dataTransfer.setData('text/plain', index.toString())}
                      onDragOver={(e) => e.preventDefault()}
                      onDrop={(e) => {
                        e.preventDefault();
                        const dragIndex = parseInt(e.dataTransfer.getData('text/plain'));
                        onReorderImages(dragIndex, index);
                      }}
                  >
                    <img
                        src={image.url}
                        alt={image.alt}
                        className="w-full h-32 object-cover"
                    />

                    {/* Overlay with controls */}
                    <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <div className="flex space-x-2">
                          <button
                              type="button"
                              onClick={() => onEditImage(image)}
                              className="p-2 bg-white rounded-full text-gray-700 hover:text-blue-600 shadow-md"
                              title="Редактировать"
                          >
                            <Pencil size={14} />
                          </button>
                          <button
                              type="button"
                              onClick={() => onDeleteImage(image.id)}
                              className="p-2 bg-white rounded-full text-gray-700 hover:text-red-600 shadow-md"
                              title="Удалить"
                          >
                            <Trash2 size={14} />
                          </button>
                          <button
                              type="button"
                              className="p-2 bg-white rounded-full text-gray-700 cursor-move shadow-md"
                              title="Перетащить"
                          >
                            <Move size={14} />
                          </button>
                        </div>
                      </div>
                    </div>

                    {/* Caption overlay */}
                    {image.caption && (
                        <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-75 text-white p-2 text-xs truncate">
                          {image.caption}
                        </div>
                    )}
                  </div>
              ))}
            </div>
        ) : (
            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
              <ImagePlus className="mx-auto h-12 w-12 text-gray-400" />
              <p className="mt-2 text-sm text-gray-600">В галерее еще нет изображений</p>
              <p className="text-xs text-gray-500">Нажмите "Добавить изображения" чтобы начать.</p>
            </div>
        )}
      </div>
  );
}