'use client';
import { useState, useEffect } from 'react';
import { format } from 'date-fns';
import { ru } from 'date-fns/locale';

// Интерфейсы для типизации данных
interface User {
  login: string;
  avatar: string;
  first_name: string;
  last_name: string;
  middle_name?: string;
}

interface Comment {
  id: number;
  userid: number;
  text: string;
  date: string;
  rating: number; // Добавляем поле рейтинга
  user?: User;
}

// Компонент для отображения звездочек
const StarRating = ({ rating }: { rating: number }) => {
  return (
    <div className="rating-stars">
      {[1, 2, 3, 4, 5].map((star) => (
        <span
          key={star}
          className={`star ${star <= rating ? 'filled' : ''}`}
        >
          ★
        </span>
      ))}
    </div>
  );
};

const DEMO_AVERAGE_RATING = 4.7; // Демонстрационное значение среднего рейтинга

const RandomComment = () => {
  const [comments, setComments] = useState<Comment[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [averageRating, setAverageRating] = useState<number>(DEMO_AVERAGE_RATING); // Устанавливаем начальное значение
  const [ratingLoaded, setRatingLoaded] = useState<boolean>(false);

  // Загрузка комментариев с сервера
  useEffect(() => {
    const fetchRandomComments = async () => {
      try {
        setLoading(true);
        // Получаем все комментарии
        const response = await fetch('http://localhost:8000/comments', {
          credentials: 'include',
        });

        if (!response.ok) {
          throw new Error('Не удалось загрузить комментарии');
        }

        const allComments = await response.json();

        // Выбираем случайные комментарии (от 1 до 4)
        const shuffled = [...allComments].sort(() => 0.5 - Math.random());
        const count = Math.floor(Math.random() * 4) + 1; // от 1 до 4
        const selectedComments = shuffled.slice(0, Math.min(count, shuffled.length));

        // Добавляем информацию о пользователях
        const commentsWithUsers = await Promise.all(
          selectedComments.map(async (comment: Comment) => {
            try {
              const userResponse = await fetch(`http://localhost:8000/user/${comment.userid}`, {
                credentials: 'include',
              });
              
              if (userResponse.ok) {
                const userData = await userResponse.json();
                return { ...comment, user: userData };
              }
              return comment;
            } catch (e) {
              console.error("Ошибка при получении данных пользователя:", e);
              return comment;
            }
          })
        );

        setComments(commentsWithUsers);
      } catch (error) {
        console.error('Ошибка при загрузке комментариев:', error);
        setError('Не удалось загрузить отзывы');
      } finally {
        setLoading(false);
      }
    };

    fetchRandomComments();
  }, []);

  // Загружаем средний рейтинг
  useEffect(() => {
    const fetchAverageRating = async () => {
      try {
        // Добавляем сигнал для прерывания запроса через 5 секунд
        const controller = new AbortController();
        const signal = controller.signal;
        const timeoutId = setTimeout(() => controller.abort(), 5000);
        
        const response = await fetch('http://localhost:8000/average-rating', {
          credentials: 'include',
          signal
        });
        
        clearTimeout(timeoutId);
        
        if (!response.ok) {
          console.warn('Не удалось загрузить средний рейтинг с сервера');
          return;
        }
        
        const data = await response.json();
        if (data && data.Рейтинг !== undefined) {
          setAverageRating(data.Рейтинг);
          setRatingLoaded(true);
        }
      } catch (e) {
        console.warn("Ошибка при получении среднего рейтинга:", e);
        // При ошибке оставляем демо-значение
      }
    };

    fetchAverageRating();
  }, []);

  // Форматирование даты в читаемый вид
  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return format(date, "d MMMM yyyy, HH:mm", { locale: ru });
    } catch {
      return dateString;
    }
  };

  // Обрезка длинного текста комментария
  const truncateText = (text: string, maxLength: number = 150) => {
    if (text.length <= maxLength) return text;
    return text.substring(0, maxLength) + '...';
  };

  // Обновленные стили для карточек комментариев
  const styles = `
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes glow {
      0% {
        box-shadow: 0 0 5px rgba(255,127,39,0.3);
      }
      50% {
        box-shadow: 0 0 15px rgba(255,127,39,0.5);
      }
      100% {
        box-shadow: 0 0 5px rgba(255,127,39,0.3);
      }
    }
    
    @keyframes glowPulse {
      0% {
        text-shadow: 0 0 5px rgba(255,127,39,0.3);
      }
      50% {
        text-shadow: 0 0 20px rgba(255,127,39,0.6);
      }
      100% {
        text-shadow: 0 0 5px rgba(255,127,39,0.3);
      }
    }
    
    .random-comments-container {
      width: 100%;
      margin: 3rem auto 2rem;
      padding: 0;
      max-width: 1400px;
    }
    
    .random-comments-title {
      color: #ff7f27;
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      font-weight: bold;
      background: linear-gradient(to right, #ff7f27, #ff5500);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: glowPulse 3s infinite;
      text-align: center;
      letter-spacing: -0.5px;
    }
    
    .comments-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      width: 100%;
      justify-content: center;
    }
    
    .comment-card {
      background: linear-gradient(145deg, rgba(30,30,30,0.6), rgba(15,15,15,0.8));
      border-radius: 1.2rem;
      border: 1px solid rgba(255,127,39,0.2);
      padding: 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      animation: fadeInUp 0.5s forwards;
      animation-delay: calc(var(--index) * 0.1s);
      transform: translateY(20px);
      opacity: 0;
      height: 100%;
      min-height: 320px;
      max-width: none;
      margin: 0;
    }
    
    .comment-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255,127,39,0.5);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .comment-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(to right, transparent, #ff7f27, transparent);
    }
    
    .avatar-container {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid #ff7f27;
      padding: 2px;
      background: rgba(0,0,0,0.2);
      margin-bottom: 1rem;
      box-shadow: 0 5px 15px rgba(255,127,39,0.3);
    }
    
    .user-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .user-info {
      margin-bottom: 0.4rem;
      width: 100%;
    }
    
    .user-name {
      font-size: 1.2rem;
      font-weight: bold;
      margin-bottom: 0.2rem;
      background: linear-gradient(to right, #ff7f27, #ff5500);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .comment-date {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.6);
    }
    
    .comment-text {
      line-height: 1.5;
      color: rgba(255,255,255,0.85);
      font-size: 0.95rem;
      position: relative;
      margin-top: 0.5rem;
      font-style: italic;
    }
    
    .quote-icon {
      position: absolute;
      bottom: 10px;
      right: 10px;
      opacity: 0.1;
      color: #ff7f27;
      font-size: 24px;
      transform: rotate(180deg);
    }
    
    .loading-container {
      text-align: center;
      padding: 2rem;
      font-style: italic;
      color: rgba(255,255,255,0.6);
    }
    
    /* Обновленные стили для среднего рейтинга - сделаем его более заметным */
    .average-rating-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin: -5px auto 30px;
      animation: fadeInUp 0.6s forwards;
      background: rgba(0,0,0,0.3);
      border-radius: 15px;
      padding: 15px 30px;
      max-width: 400px;
      box-shadow: 0 0 20px rgba(255,127,39,0.15);
      border: 1px solid rgba(255,127,39,0.2);
    }
    
    .average-rating-container:hover {
      animation: glow 1.5s infinite; /* Добавляем анимацию при наведении */
      border-color: rgba(255,127,39,0.3);
      transform: translateY(-2px);
    }
    
    .rating-stars {
      display: flex;
      gap: 6px;
    }
    
    .star {
      color: rgba(255,127,39,0.2);
      font-size: 28px; /* Увеличенный размер звезд */
      transition: all 0.2s ease;
    }
    
    .star.filled {
      color: #ff7f27;
    }
    
    .average-rating-label {
      color: rgba(255,255,255,0.9);
      font-size: 1.25rem;
      font-weight: 500;
    }
    
    .average-rating-value {
      color: #ff7f27;
      font-weight: bold;
      font-size: 1.5rem;
      text-shadow: 0 0 10px rgba(255,127,39,0.4);
    }
    
    /* Новый стиль для контейнера рейтинга пользователя */
    .user-rating {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 10px 0 15px;
    }
    
    @media (max-width: 768px) {
      .comments-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
    }
    
    @media (max-width: 480px) {
      .comments-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }
      
      .avatar-container {
        width: 90px;
        height: 90px;
      }
    }
  `;

  if (loading) {
    return (
      <div className="random-comments-container">
        <style>{styles}</style>
        <div className="loading-container">
          Загрузка отзывов...
        </div>
      </div>
    );
  }

  if (error || comments.length === 0) {
    return (
      <section className="random-comments-container">
        <style>{styles}</style>
        <h2 className="random-comments-title">Отзывы пользователей</h2>
        
        {/* Отображаем средний рейтинг даже если нет комментариев */}
        <div className="average-rating-container">

          <StarRating rating={Math.round(averageRating)} />
          <span className="average-rating-value">
            {averageRating.toFixed(1)}
          </span>
        </div>
        
        {error ? (
          <div className="loading-container">
            Произошла ошибка при загрузке отзывов.
          </div>
        ) : (
          <div className="loading-container">
            Отзывы пока отсутствуют. Будьте первым!
          </div>
        )}
      </section>
    );
  }

  return (
    <section className="random-comments-container">
      <style>{styles}</style>
      <h2 className="random-comments-title">Отзывы пользователей</h2>
      

      
      <div className="comments-grid">
        {comments.map((comment, index) => (
          <div 
            key={comment.id} 
            className="comment-card"
            style={{ '--index': index } as React.CSSProperties}
          >
            {/* Аватар вверху */}
            <div className="avatar-container">
              <img 
                src={comment.user?.avatar || '/default-avatar.png'} 
                alt={`Аватар ${comment.user?.login || 'пользователя'}`} 
                className="user-avatar"
                onError={(e) => {
                  (e.target as HTMLImageElement).src = '/default-avatar.png';
                }}
              />
            </div>
            
            {/* Имя и дата под аватаром */}
            <div className="user-info">
              <div className="user-name">
                {comment.user ? `${comment.user.first_name} ${comment.user.last_name.charAt(0)}.` : 'Пользователь'}
              </div>
              <div className="comment-date">
                {formatDate(comment.date)}
              </div>
            </div>
            
            {/* Рейтинг в отдельном блоке по центру */}
            {comment.rating > 0 && (
              <div className="user-rating">
                <StarRating rating={comment.rating} />
              </div>
            )}
            
            {/* Текст отзыва внизу */}
            <div className="comment-text">
              "{truncateText(comment.text)}"
            </div>
            
            <div className="quote-icon">❝</div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default RandomComment;