import React, { useEffect, useState, useRef } from 'react';
import { TipTapEditor } from './Editor/TipTapEditor';
import { CoverImageUpload } from './ImageUpload/CoverImageUpload';
import { ImageUploader } from './ImageUpload/ImageUploader';
import { GalleryManager } from './GalleryManager';
import { useGallery } from '../hooks/useGallery';
import {
  ArticleData,
  Author,
  AuthorLink,
  AuthorRole,
  CategoryTitles,
  CityTitles,
  GalleryImage,
  ViewMode
} from '../types';
import { useAuthStore } from '../stores/authStore';
import ConfirmModal from './ConfirmModal';
import RolesWord from "./Words/RolesWord";
import { ArrowLeft, Trash2, UserPlus } from "lucide-react";
import isEqual from 'lodash/isEqual';
import { NewGalleryManager } from "./Gallery";
import AuthorSelectionModal from './AuthorSelectionModal';


interface FormState {
  title: string;
  excerpt: string;
  categoryId: number;
  cityId: number;
  coverImage: string;
  readTime: number;
  content: string;
  authors: {
    role: AuthorRole;
    author: Author;
  }[];
  galleryImages: GalleryImage[];
}

interface ArticleFormProps {
  editingId: string | null;
  viewMode: ViewMode;
  articleId: string;
  initialFormState: FormState | null;
  onSubmit: (articleData: ArticleData, closeForm: boolean) => Promise<void>;
  onCancel: () => void;
  authors: Author[];
  availableCategoryIds: number[];
  availableCityIds: number[];
  onAfterSave?: () => void; // Новый пропс для колбэка после сохранения
}

export function ArticleForm({
                              editingId,
                              viewMode,
                              articleId,
                              initialFormState,
                              onSubmit,
                              onCancel,
                              authors,
                              availableCategoryIds,
                              availableCityIds,
                              onAfterSave,
                            }: ArticleFormProps) {
  const { user } = useAuthStore();
  const isAdmin = user?.permissions.isAdmin || false;
  const showGallery = false;

  // Используем useRef для отслеживания состояния инициализации
  const isInitializingRef = useRef(false);
  const initialDataRef = useRef<FormState | null>(null);

  const [title, setTitle] = useState('');
  const [excerpt, setExcerpt] = useState('');
  const [categoryId, setCategoryId] = useState(availableCategoryIds[0] || 1);
  const [cityId, setCityId] = useState(availableCityIds[0] || 1);
  const [coverImage, setCoverImage] = useState('/images/cover-placeholder.webp');
  const [readTime, setReadTime] = useState(5);
  const [content, setContent] = useState('');
  const [displayedImages, setDisplayedImages] = useState<GalleryImage[]>([]);
  const [formNewImageUrl, setFormNewImageUrl] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [hasChanges, setHasChanges] = useState<boolean>(false);
  const [isInitialized, setIsInitialized] = useState(false); // Заменяем isInitialLoad и formReady
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);    // Добавляем флаг для отслеживания отправки
  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false); // Состояние для модального окна

  // Добавляем новое состояние для модального окна
  const [isAuthorModalOpen, setIsAuthorModalOpen] = useState(false);

  // Изменяем логику отслеживания состояния загрузки
  const [dataLoaded, setDataLoaded] = useState(false);

  const { images: galleryImages, loading: galleryLoading, error: galleryError, addImage: addGalleryImage, updateImage: updateGalleryImage, deleteImage: deleteGalleryImage, reorderImages: reorderGalleryImages } = useGallery(editingId || '');

  const [selectedAuthors, setSelectedAuthors] = useState<AuthorLink[]>([]);

  // Добавляем обработку ошибок
  useEffect(() => {
    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      console.error('Unhandled promise rejection in ArticleForm:', event.reason);
      event.preventDefault(); // Предотвращаем "всплытие" ошибки
    };

    const handleError = (event: ErrorEvent) => {
      console.error('Unhandled error in ArticleForm:', event.error);
      event.preventDefault(); // Предотвращаем "всплытие" ошибки
    };

    window.addEventListener('unhandledrejection', handleUnhandledRejection);
    window.addEventListener('error', handleError);

    return () => {
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
      window.removeEventListener('error', handleError);
    };
  }, []);

  // Эффект для отслеживания загрузки всех данных
  useEffect(() => {
    if (!editingId) {
      // Для новой статьи данные загружены сразу
      setDataLoaded(true);
      return;
    }

    // Для редактирования ждем загрузки галереи
    if (!galleryLoading) {
      setDataLoaded(true);
    }
  }, [editingId, galleryLoading]);

  // Эффект для инициализации формы
  useEffect(() => {
    // Если начальные данные не пришли или данные еще не загружены - выходим
    if (!initialFormState || !dataLoaded) return;

    isInitializingRef.current = true;

    setTitle(initialFormState.title);
    setExcerpt(initialFormState.excerpt);
    setCategoryId(initialFormState.categoryId);
    setCityId(initialFormState.cityId);
    setCoverImage(initialFormState.coverImage);
    setReadTime(initialFormState.readTime);
    setContent(initialFormState.content);

    // Для редактирования используем загруженные данные галереи
    // Для новой статьи - пустой массив
    const galleryData = editingId ? galleryImages : [];

    // Нормализуем данные галереи
    const normalizedGalleryImages = galleryData.map(img => ({
      id: img.id,
      url: img.url,
      caption: img.caption || '',
      alt: img.alt || '',
      width: img.width || 0,
      height: img.height || 0,
      size: img.size || 0,
      format: img.format,
    }));

    setDisplayedImages(normalizedGalleryImages);

    setSelectedAuthors(
        (initialFormState.authors || []).map(a => ({
          authorId: a.author.id,
          role: a.role,
          author: a.author
        }))
    );

    // Сохраняем начальное состояние с нормализованной галереей
    initialDataRef.current = {
      ...initialFormState,
      authors: (initialFormState.authors || []).map(a => ({
        role: a.role,
        author: a.author
      })),
      galleryImages: normalizedGalleryImages
    };

    setIsInitialized(true);
  }, [initialFormState, dataLoaded, editingId, galleryImages]);

  // Эффект для отслеживания изменений формы
  useEffect(() => {
    if (!isInitialized || !initialDataRef.current) return;

    // Нормализуем текущее состояние для сравнения
    const normalizedAuthors = selectedAuthors.map(sa => ({
      role: sa.role,
      author: sa.author
    }));

    // Нормализуем текущую галерею для сравнения
    const normalizedCurrentGallery = displayedImages.map(img => ({
      id: img.id,
      url: img.url,
      caption: img.caption || '',
      alt: img.alt || '',
      width: img.width || 0,
      height: img.height || 0,
      size: img.size || 0,
      format: img.format,
    }));

    const currentState: FormState = {
      title,
      excerpt,
      categoryId,
      cityId,
      coverImage,
      readTime,
      content,
      authors: normalizedAuthors,
      galleryImages: normalizedCurrentGallery,
    };

    // Проверяем заполнение обязательных полей
    const areRequiredFieldsFilled = title.trim() !== '' && excerpt.trim() !== '';

    // Сравниваем текущее состояние с начальным
    const hasFormChanges = !isEqual(currentState, initialDataRef.current);

    // Устанавливаем флаг изменений
    setHasChanges(hasFormChanges && areRequiredFieldsFilled);
  }, [
    title, excerpt, categoryId, cityId, coverImage,
    readTime, content, selectedAuthors, displayedImages,
    isInitialized
  ]);

  const handleSubmit = async (e: React.FormEvent, closeForm: boolean = true) => {
    e.preventDefault();

    //console.log('Вызов handleSubmit:', { closeForm });
    //console.log('Содержимое статьи перед сохранением:', content);

    if (isSubmitting) {
      return;
    }

    if (!title.trim() || !excerpt.trim()) {
      setError('Пожалуйста, заполните обязательные поля: Заголовок и Краткое описание.');
      return;
    }

    if (!hasChanges) return;

    const articleData: ArticleData = {
      title,
      excerpt,
      categoryId,
      cityId,
      coverImage,
      readTime,
      gallery: displayedImages,
      content: content || '',
      importId: 0,
      isActive: false,
      authors: selectedAuthors,
    };

    try {
      setIsSubmitting(true);
      await onSubmit(articleData, closeForm);

      // Вызываем колбэк после успешного сохранения
      if (closeForm && onAfterSave) {
        onAfterSave();
      }
    } catch (error) {
      console.error('Ошибка при сохранении статьи:', error);
      setError('Не удалось сохранить статью. Пожалуйста, попробуйте снова.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleApply = (e: React.FormEvent) => {
    handleSubmit(e, false);
  };

  const handleCancel = () => {
    if (hasChanges) {
      setIsConfirmModalOpen(true); // Открываем модальное окно
    } else {
      onCancel();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  const handleConfirmCancel = () => {
    setIsConfirmModalOpen(false);
    onCancel();
  };

  // Обновляем обработчики
  const handleOpenModal = () => {
    setIsAuthorModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsAuthorModalOpen(false);
  };

  const handleAddAuthor = (authorId: string, role: AuthorRole) => {
    const author = authors.find(a => a.id === authorId);
    if (author) {
      setSelectedAuthors([...selectedAuthors, { authorId: author.id, role, author }]);
    }
  };

  const handleRemoveAuthor = (authorId: string, role: AuthorRole) => {
    setSelectedAuthors(prev =>
        prev.filter(a => !(a.authorId === authorId && a.role === role))
    );
  };

  if (viewMode === 'edit' && editingId && galleryLoading) {
    return (
        <div className="min-h-screen flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        </div>
    );
  }

  return (
      <div className="bg-white rounded-lg shadow-sm p-6 mb-8">

        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center">
            <button
                onClick={handleCancel}
                className="mr-4 p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100"
            >
              <ArrowLeft size={20} />
            </button>
            <h1 className="text-2xl font-bold text-gray-900">
              {viewMode === 'edit' ? 'Редактирование' : 'Новая статья'}
            </h1>
          </div>
        </div>

        {(error || galleryError) && (
            <div className="mb-6 bg-red-50 text-red-700 p-4 rounded-md">{error || galleryError}</div>
        )}

        <form onSubmit={(e) => handleSubmit(e, true)} className="space-y-6">
          <div>
            <label htmlFor="title" className="block text-sm font-medium text-gray-700">
              <span className="italic font-bold">Заголовок</span> <span className="text-red-500">*</span>
            </label>
            <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
                required
            />
          </div>
          <div>
            <label htmlFor="excerpt" className="block text-sm font-medium text-gray-700">
              <span className="italic font-bold">Краткое описание</span> <span className="text-red-500">*</span>
            </label>
            <textarea
                id="excerpt"
                rows={3}
                value={excerpt}
                onChange={(e) => setExcerpt(e.target.value)}
                className="px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
                required
            />
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
            <div>
              <label htmlFor="category" className="block text-sm font-medium text-gray-700">
                <span className="italic font-bold">Категория</span>
              </label>
              <select
                  id="category"
                  value={categoryId}
                  onChange={(e) => setCategoryId(Number(e.target.value))}
                  className="px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
              >
                {availableCategoryIds.map(cat => <option key={cat} value={cat}>{CategoryTitles[cat]}</option>)}
              </select>
            </div>
            <div>
              <label htmlFor="city" className="block text-sm font-medium text-gray-700">
                <span className="italic font-bold">Столица</span>
              </label>
              <select
                  id="city"
                  value={cityId}
                  onChange={(e) => setCityId(Number(e.target.value))}
                  className="px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
              >
                {availableCityIds.map(c => <option key={c} value={c}>{CityTitles[c]}</option>)}
              </select>
            </div>
            <div>
              <label htmlFor="readTime" className="block text-sm font-medium text-gray-700">
                <span className="italic font-bold">Время чтения (минуты)</span>
              </label>
              <input
                  type="number"
                  id="readTime"
                  min="1"
                  value={readTime}
                  onChange={(e) => setReadTime(Number(e.target.value))}
                  className="px-2 py-1 mt-1 block w-full rounded-lg border border-gray-300 shadow-sm hover:border-blue-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all duration-200"
              />
            </div>
            {editingId && isAdmin && (
                <div className="space-y-4">
                  <div className="flex items-center mb-2">
                    <label htmlFor="category" className="block text-sm font-medium text-gray-700">
                      <span className="italic font-bold">Авторы статьи</span>
                    </label>

                    <button
                        type="button"
                        onClick={handleOpenModal}
                        className="p-2 rounded-full hover:bg-gray-100 text-gray-500"
                    >
                      <UserPlus size={18} />
                    </button>
                  </div>

                  {/* Таблица выбранных авторов */}
                  <ul className="space-y-2">
                    {selectedAuthors.map((a, index) => (
                        <li key={index} className="flex items-center justify-between border p-2 rounded-md">
                          <div className="flex items-center">
                            <img
                                src={a.author.avatarUrl}
                                alt={a.author.displayName}
                                className="w-12 h-12 rounded-full object-cover mr-3"
                            />
                            <div className="flex items-center space-x-2">
                              <span className="font-semibold">{a.author.displayName}</span>
                              <span className="text-sm text-gray-500">(<RolesWord role={a.role}/>)</span>
                            </div>
                          </div>

                          <button
                              type="button"
                              onClick={() => handleRemoveAuthor(a.authorId, a.role)}
                              className="p-2 rounded-full hover:bg-gray-100 text-red-400"
                          >
                            <Trash2 size={18} />
                          </button>
                        </li>
                    ))}
                  </ul>

                </div>
            )}
          </div>
          <CoverImageUpload
              coverImage={coverImage}
              articleId={articleId}
              onImageUpload={setCoverImage}
              onError={setError}
              allowUpload={!!editingId}
          />
          <div>
            <label className="block text-sm font-medium text-gray-700">
              <span className="italic font-bold">Статья</span>
            </label>
            <TipTapEditor
                initialContent={content}
                onContentChange={setContent}
                articleId={articleId}
            />
          </div>

          {editingId && (
            <NewGalleryManager
                articleId={articleId}
                images={displayedImages}
                onChange={setDisplayedImages}
            />
          )}

          {showGallery && (
            <div>
              <label className="block text-sm font-medium text-gray-700">
                <span className="italic font-bold">Галерея</span>
              </label>
              {editingId ? (
                  <>
                    <ImageUploader
                        onUploadComplete={(imageUrl) => {
                          setFormNewImageUrl(imageUrl);
                        }}
                        articleId={articleId}
                    />
                    <GalleryManager
                        images={displayedImages}
                        imageUrl={formNewImageUrl}
                        setImageUrl={setFormNewImageUrl}
                        onAddImage={async (imageData) => {
                          console.log('Добавляем изображение в форме:', imageData);
                          const newImage = await addGalleryImage(imageData);
                          setFormNewImageUrl('');
                          setDisplayedImages(prev => [...prev, newImage]);
                        }}
                        onReorder={(images) => {
                          console.log('Переупорядочиваем изображения в форме:', images);
                          reorderGalleryImages(images.map(img => img.id));
                          setDisplayedImages(images);
                        }}
                        onDelete={(id) => {
                          console.log('Удаляем изображение в форме:', id);
                          deleteGalleryImage(id);
                          setDisplayedImages(prev => prev.filter(img => img.id !== id));
                        }}
                        onEdit={(image) => {
                          console.log('Редактируем изображение в форме:', image);
                          updateGalleryImage(image.id, { alt: image.alt }).catch(err => {
                            console.error('Ошибка при редактировании изображения в форме:', err);
                            setError('Не удалось обновить изображение');
                          });
                        }}
                    />
                  </>
              ) : (
                  <p className="text-sm text-gray-500">Галерея доступна после создания статьи.</p>
              )}
            </div>
          )}

          <div className="flex justify-end gap-4">
            <button
                type="button"
                onClick={handleCancel}
                className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              Отмена
            </button>
            {!editingId && (
                <button
                    type="button"
                    onClick={handleApply}
                    disabled={!hasChanges || isSubmitting}
                    className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${hasChanges && !isSubmitting ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-400 cursor-not-allowed'} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500`}
                >
                  Применить
                </button>
            )}
            <button
                type="submit"
                disabled={!hasChanges || isSubmitting}
                className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${hasChanges && !isSubmitting ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-400 cursor-not-allowed'} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500`}
            >
              {editingId ? 'Изменить' : 'Сохранить черновик'}
            </button>
          </div>
        </form>
        <ConfirmModal
            isOpen={isConfirmModalOpen}
            onConfirm={handleConfirmCancel}
            onCancel={handleCloseModal}
            message="У вас есть несохранённые изменения. Вы уверены, что хотите отменить?"
        />

        {/* Модальное окно выбора автора */}
        {isAuthorModalOpen && (
            <AuthorSelectionModal
                isOpen={isAuthorModalOpen}
                onClose={handleCloseModal}
                onAddAuthor={handleAddAuthor}
                authors={authors}
                existingAuthors={selectedAuthors}
            />
        )}

      </div>
  );
}