import { useState, useEffect } from 'react';
import { GalleryImage } from '../../types';
import { GalleryGrid } from './GalleryGrid';
import { ImageForm } from './ImageForm';

interface GalleryManagerProps {
  images: GalleryImage[];
  imageUrl: string;
  setImageUrl: (url: string) => void;
  onAddImage: (imageData: Omit<GalleryImage, 'id'>) => void;
  onReorder: (images: GalleryImage[]) => void;
  onDelete: (id: string) => void;
  onEdit: (image: GalleryImage) => void;
}

export function GalleryManager({
                                 images,
                                 imageUrl,
                                 setImageUrl,
                                 onAddImage,
                                 onReorder,
                                 onDelete,
                                 onEdit,
                               }: GalleryManagerProps) {
  const [newImageUrl, setNewImageUrl] = useState('');
  const [newImageCaption, setNewImageCaption] = useState('');
  const [newImageAlt, setNewImageAlt] = useState('');
  const [showEditModal, setShowEditModal] = useState<string | null>(null);
  const [editAltText, setEditAltText] = useState<string>('');

  // Отладка передачи images в GalleryGrid
  useEffect(() => {
    console.log('Images, переданные в GalleryGrid:', images);
  }, [images]);

  // Отладка изменения состояния showEditModal
  useEffect(() => {
    console.log('Текущее значение showEditModal:', showEditModal);
  }, [showEditModal]);

  // Следим за изменением imageUrl и обновляем newImageUrl
  useEffect(() => {
    if (imageUrl) {
      setNewImageUrl(imageUrl);
    }
  }, [imageUrl]);

  const handleAddImage = () => {
    if (!newImageUrl.trim()) return;

    const newImage = {
      url: newImageUrl,
      caption: newImageCaption,
      alt: newImageAlt || newImageCaption,
      width: 800, // Примерное значение, можно заменить на динамическое
      height: 600,
      size: 100000, // Примерное значение
      format: 'webp', // Формат по умолчанию
    };

    console.log('Добавляем новое изображение:', newImage);
    onAddImage(newImage); // Вызываем функцию добавления
    setNewImageUrl('');
    setNewImageCaption('');
    setNewImageAlt('');
    setImageUrl(''); // Очищаем после добавления
  };

  const handleEditClick = (image: GalleryImage) => {
    console.log('Открываем модальное окно редактирования для изображения:', image);
    console.log('ID изображения:', image.id);
    setShowEditModal(image.id);
    setEditAltText(image.alt || '');
    console.log('Новое значение showEditModal:', image.id);
  };

  const handleEditSubmit = (image: GalleryImage) => {
    const updatedImage = { ...image, alt: editAltText };
    console.log('Сохраняем изменения для изображения:', updatedImage);
    onEdit(updatedImage);
    setShowEditModal(null);
    setEditAltText('');
  };

  return (
      <div className="space-y-6">
        <div className="border rounded-lg p-4 space-y-4">
          <h3 className="text-lg font-medium text-gray-900">Добавить фото</h3>
          <ImageForm
              url={newImageUrl}
              caption={newImageCaption}
              alt={newImageAlt}
              onUrlChange={setNewImageUrl}
              onCaptionChange={setNewImageCaption}
              onAltChange={setNewImageAlt}
              onSubmit={handleAddImage}
              submitLabel="Добавить в галерею"
          />
        </div>

        <div className="border rounded-lg p-4">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Изображения галереи</h3>
          <GalleryGrid
              images={images}
              onEdit={(img) => {
                console.log('Вызываем onEdit из GalleryGrid:', img);
                handleEditClick(img);
              }}
              onDelete={(id) => {
                console.log('Вызываем onDelete из GalleryGrid:', id);
                onDelete(id);
              }}
              onReorder={(dragIndex, dropIndex) => {
                console.log('Переупорядочиваем изображения: dragIndex=', dragIndex, 'dropIndex=', dropIndex);
                const reorderedImages = [...images];
                const [draggedImage] = reorderedImages.splice(dragIndex, 1);
                reorderedImages.splice(dropIndex, 0, draggedImage);
                onReorder(reorderedImages);
              }}
          />
        </div>

        {/* Модальное окно редактирования */}
        {showEditModal && (
            console.log('Рендерим модальное окно с showEditModal:', showEditModal),
                <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-md w-full p-6">
                    <h3 className="text-lg font-medium text-gray-900 mb-4">Редактировать изображение</h3>
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700">Alt-текст</label>
                      <input
                          type="text"
                          value={editAltText}
                          onChange={(e) => setEditAltText(e.target.value)}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                      />
                    </div>
                    <div className="flex justify-end gap-4">
                      <button
                          onClick={() => setShowEditModal(null)}
                          className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                      >
                        Отмена
                      </button>
                      <button
                          onClick={() => {
                            const image = images.find(img => img.id === showEditModal);
                            if (image) handleEditSubmit(image);
                          }}
                          className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
                      >
                        Сохранить
                      </button>
                    </div>
                  </div>
                </div>
        )}
      </div>
  );
}