import { useState, useEffect } from 'react';
import { X } from 'lucide-react';
import { GalleryManager } from './index';
import { useGallery } from '../../hooks/useGallery';
import { GalleryImage } from '../../types';

interface GalleryModalProps {
  articleId: string | null;
  onClose: () => void;
}

export function GalleryModal({ articleId, onClose }: GalleryModalProps) {
  const { images: modalGalleryImages, loading: modalGalleryLoading, error: modalGalleryError, addImage: addGalleryImage, updateImage: updateGalleryImage, deleteImage: deleteGalleryImage, reorderImages: reorderGalleryImages } = useGallery(articleId || '');
  const [modalDisplayedImages, setModalDisplayedImages] = useState<GalleryImage[]>([]);
  const [newImageUrl, setNewImageUrl] = useState('');

  useEffect(() => {
    if (articleId) {
      setModalDisplayedImages(modalGalleryImages);
    } else {
      setModalDisplayedImages([]);
    }
  }, [articleId, modalGalleryImages]);

  if (!articleId) return null;

  return (
      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50">
        <div className="bg-white rounded-lg max-w-lg w-full p-6">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-medium text-gray-900">Управление галереей</h3>
            <button onClick={onClose} className="text-gray-400 hover:text-gray-500"><X size={20} /></button>
          </div>
          {modalGalleryLoading ? (
              <div className="flex justify-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
              </div>
          ) : modalGalleryError ? (
              <div className="text-red-700 p-4 rounded-md bg-red-50">Ошибка загрузки галереи: {modalGalleryError}</div>
          ) : (
              <GalleryManager
                  images={modalDisplayedImages}
                  imageUrl={newImageUrl}
                  setImageUrl={setNewImageUrl}
                  onAddImage={async (imageData) => {
                    console.log('Добавляем изображение в модальном окне:', imageData);
                    const newImage = await addGalleryImage(imageData);
                    setNewImageUrl('');
                    setModalDisplayedImages(prev => [...prev, newImage]);
                  }}
                  onReorder={(images) => {
                    console.log('Переупорядочиваем изображения в модальном окне:', images);
                    reorderGalleryImages(images.map(img => img.id));
                    setModalDisplayedImages(images);
                  }}
                  onDelete={(id) => {
                    console.log('Удаляем изображение в модальном окне:', id);
                    deleteGalleryImage(id);
                    setModalDisplayedImages(prev => prev.filter(img => img.id !== id));
                  }}
                  onEdit={(image) => {
                    console.log('Редактируем изображение в модальном окне:', image);
                    updateGalleryImage(image.id, { alt: image.alt }).catch(err => {
                      console.error('Ошибка при редактировании изображения в модальном окне:', err);
                    });
                  }}
              />
          )}
        </div>
      </div>
  );
}