import React, { useState, useEffect } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { useAuth } from '../../contexts/AuthContext';
import { pb } from '../../services/pocketbaseService';
import { toast } from 'react-toastify';
import { createReviewLikeNotification } from '../../services/notificationService';

const LikeButton = ({ reviewId, initialLikes = 0, onLikeChange, reviewOwnerId }) => {
  const { user } = useAuth();
  const [isLiked, setIsLiked] = useState(false);
  const [likesCount, setLikesCount] = useState(initialLikes);
  const [isLoading, setIsLoading] = useState(false);
  const [likedUsers, setLikedUsers] = useState([]);
  const [showTooltip, setShowTooltip] = useState(false);

  useEffect(() => {
    const checkLikeStatus = async () => {
      if (!user) return;

      try {
        // Получаем рецензию и проверяем, есть ли пользователь в списке лайков
        const review = await pb.collection('reviews').getOne(reviewId, {
          expand: 'media_id'
        });
        const likes = review.likes || [];
        setIsLiked(likes.includes(user.id));
        setLikesCount(likes.length);

        // Если пользователь - владелец рецензии и есть лайки, получаем информацию о пользователях
        if (user.id === reviewOwnerId && likes.length > 0) {
          // Получаем информацию о пользователях, которые поставили лайки
          const users = await Promise.all(
            likes.map(userId => 
              pb.collection('users').getOne(userId)
                .catch(() => null) // Игнорируем ошибки для отдельных пользователей
            )
          );
          // Фильтруем null значения и обновляем состояние
          setLikedUsers(users.filter(Boolean));
        }
      } catch (err) {
        console.error('Ошибка при проверке статуса лайка:', err);
        setIsLiked(false);
      }
    };

    checkLikeStatus();
  }, [user, reviewId, reviewOwnerId]);

  const handleLike = async () => {
    if (!user) {
      toast.error('Необходимо войти в систему');
      return;
    }

    setIsLoading(true);
    try {
      // Получаем текущую рецензию
      const review = await pb.collection('reviews').getOne(reviewId, {
        expand: 'media_id,user_id'
      });
      const currentLikes = review.likes || [];

      let newLikes;
      if (isLiked) {
        // Удаляем лайк
        newLikes = currentLikes.filter(id => id !== user.id);
      } else {
        // Добавляем лайк
        newLikes = [...currentLikes, user.id];
        
        // Создаем уведомление о лайке, если это новый лайк и лайкающий не является автором рецензии
        if (review.user_id !== user.id) {
          await createReviewLikeNotification(
            review.user_id,
            review,
            user
          );
        }
      }

      // Обновляем рецензию с новым списком лайков
      await pb.collection('reviews').update(reviewId, {
        likes: newLikes
      });

      // Если пользователь - владелец рецензии, обновляем список лайкнувших
      if (user.id === reviewOwnerId) {
        const users = await Promise.all(
          newLikes.map(userId => 
            pb.collection('users').getOne(userId)
              .catch(() => null)
          )
        );
        setLikedUsers(users.filter(Boolean));
      }

      setIsLiked(!isLiked);
      setLikesCount(newLikes.length);
      
      if (onLikeChange) {
        onLikeChange(!isLiked);
      }
    } catch (err) {
      console.error('Ошибка при обработке лайка:', err);
      toast.error('Не удалось обработать лайк');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="relative group">
      <button
        onClick={handleLike}
        disabled={isLoading}
        className={`flex items-center space-x-1 ${
          isLiked ? 'text-red-500' : 'text-campfire-light/70'
        } hover:text-red-500 transition-colors`}
        title={isLiked ? 'Убрать лайк' : 'Поставить лайк'}
      >
        {isLiked ? <FaHeart /> : <FaRegHeart />}
        <span>{likesCount}</span>
      </button>

      {/* Показываем список лайкнувших только владельцу рецензии при наведении */}
      {user?.id === reviewOwnerId && likesCount > 0 && (
        <div className="absolute left-0 bottom-full mb-2 w-48 bg-campfire-darker rounded-lg shadow-lg p-2 z-10 border border-campfire-ash/20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
          <div className="text-xs text-campfire-light/70 mb-1">Лайкнули:</div>
          {likedUsers.map(user => (
            <div key={user.id} className="text-sm text-campfire-light py-1">
              {user.username}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default LikeButton; 