import React, { useState, useEffect } from 'react';
import { FaCheckCircle, FaRegCircle, FaFire } from 'react-icons/fa';
import Modal from '../../components/common/Modal';

function ShowcaseSortModal({ isOpen, onClose, reviews = [], showcase = [], onSave }) {
  const [selectedReviewIds, setSelectedReviewIds] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);

  // Инициализируем состояние только при первом открытии модального окна
  useEffect(() => {
    if (isOpen && selectedReviewIds.length === 0) {
      setSelectedReviewIds(showcase || []);
    }
  }, [isOpen]);

  // Сбрасываем состояние при закрытии
  useEffect(() => {
    if (!isOpen) {
      setSelectedReviewIds([]);
      setError(null);
    }
  }, [isOpen]);

  const handleToggleReview = (reviewId) => {
    setSelectedReviewIds(prev => {
      const isSelected = prev.includes(reviewId);
      if (isSelected) {
        return prev.filter(id => id !== reviewId);
      } else {
        if (prev.length < 3) {
          return [...prev, reviewId];
        } else {
          alert('Вы можете выбрать до 3 рецензий для витрины.');
          return prev;
        }
      }
    });
  };

  const handleSave = async () => {
    if (typeof onSave !== 'function') {
      console.error('onSave is not a function');
      setError('Ошибка: функция сохранения не определена');
      return;
    }

    setIsSubmitting(true);
    setError(null);

    try {
      await onSave(selectedReviewIds);
      onClose();
    } catch (err) {
      console.error('Error updating showcase:', err);
      setError(err.message || 'Произошла ошибка при обновлении витрины.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={`Управление витриной (${selectedReviewIds.length}/3)`}
      size="lg"
    >
      <div className="space-y-4">
        {error && (
          <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg">
            Ошибка: {error}
          </div>
        )}
        <p className="text-campfire-ash text-sm">Выберите до 3 рецензий, которые будут отображаться на вашей витрине.</p>
        {reviews.length > 0 ? (
          <ul className="space-y-3 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
            {reviews.map(review => {
              const reviewMedia = review.expand?.media_id;
              const reviewSeason = review.expand?.season_id;
              const isSelected = selectedReviewIds.includes(review.id);

              const reviewTitle = reviewMedia
                ? `${reviewMedia.title}${reviewSeason ? ` - Сезон ${reviewSeason.season_number}${reviewSeason.title ? `: ${reviewSeason.title}` : ''}` : ''}`
                : 'Загрузка...';

              return (
                <li
                  key={review.id}
                  className={`p-3 rounded-md border cursor-pointer flex items-center justify-between transition-colors duration-200
                    ${isSelected
                      ? 'bg-campfire-amber/20 border-campfire-amber text-campfire-light'
                      : 'bg-campfire-dark border-campfire-ash/30 text-campfire-ash hover:bg-campfire-ash/10'
                    }`}
                  onClick={() => handleToggleReview(review.id)}
                >
                  <div className="flex-grow mr-4">
                    <p className="font-semibold text-sm">{reviewTitle}</p>
                    <p className="text-xs mt-1 flex items-center">
                      Оценка: <span className="flex items-center text-campfire-amber ml-1 font-bold">
                        <FaFire className="mr-1 text-xs" />
                        {review.overall_rating !== null && review.overall_rating !== undefined ? review.overall_rating.toFixed(1) : 'N/A'} / 10
                      </span>
                    </p>
                  </div>
                  {isSelected ? (
                    <FaCheckCircle size={20} className="text-campfire-amber" />
                  ) : (
                    <FaRegCircle size={20} className="text-campfire-ash" />
                  )}
                </li>
              );
            })}
          </ul>
        ) : (
          <div className="text-center py-4 text-campfire-ash">
            У вас пока нет рецензий для добавления на витрину.
          </div>
        )}

        <div className="flex justify-end space-x-4 mt-6">
          <button
            type="button"
            onClick={onClose}
            className="btn-secondary"
            disabled={isSubmitting}
          >
            Отмена
          </button>
          <button
            type="button"
            onClick={handleSave}
            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
            disabled={isSubmitting}
          >
            {isSubmitting ? 'Сохранение...' : 'Сохранить витрину'}
          </button>
        </div>
      </div>
    </Modal>
  );
}

export default ShowcaseSortModal; 