'use client';
import React, { useEffect, useState, CSSProperties, useRef } from 'react';
import Header from '@/components/Header';
import Fotter from '@/components/Fotter';
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;
}

// Стили для страницы Feedback
const styles = `
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@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);
  }
}

@keyframes borderGlow {
  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);
  }
}

.page-container {
  background: radial-gradient(circle at top right, rgba(30,30,30,0.8) 0%, rgba(15,15,15,0.8) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.page-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/noise-texture.png'), linear-gradient(145deg, rgba(255,127,39,0.1) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.content-container {
  animation: fadeInUp 0.6s ease-out forwards;
  width: 100%;
}

.section-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;
}

.section-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.7;
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
  animation-delay: 0.2s;
  color: rgba(255,255,255,0.9);
}

.comments-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
  opacity: 0;
  animation: fadeIn 0.8s forwards;
  animation-delay: 0.3s;
  width: 100%; /* Обеспечиваем полную ширину контейнера */
}

.comment-card {
  background: linear-gradient(145deg, rgba(30,30,30,0.6), rgba(15,15,15,0.8));
  border-radius: 1rem;
  padding: 2rem; /* Увеличен padding */
  border: 1px solid rgba(255,127,39,0.2);
  transition: all 0.3s ease;
  opacity: 0;
  animation: slideInLeft 0.5s forwards;
  position: relative;
  overflow: hidden;
  width: 100%; /* Важно для использования всей доступной ширины */
  box-sizing: border-box; /* Включает padding в общую ширину элемента */
}

.comment-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,127,39,0.5);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.comment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #ff7f27, transparent);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff7f27;
  padding: 2px;
  background: rgba(0,0,0,0.2);
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 1.1rem;
  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.85rem;
  color: rgba(255,255,255,0.6);
}

.comment-text {
  line-height: 1.7; /* Увеличен line-height */
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem; /* Увеличен размер шрифта */
}

.comment-form-container {
  background: rgba(0,0,0,0.3);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(255,127,39,0.2);
  margin-top: 3rem;
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
  animation-delay: 0.5s;
  width: 100%; /* Увеличиваем ширину формы комментария */
  box-sizing: border-box; /* Включает padding в общую ширину элемента */
}

.auth-message {
  text-align: center;
  padding: 2rem;
  background: rgba(0,0,0,0.2);
  border-radius: 1rem;
  border: 1px dashed rgba(255,127,39,0.3);
  color: rgba(255,255,255,0.8);
  font-style: italic;
}

.form-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #ff7f27;
  font-weight: 600;
  text-align: center;
}

.comment-textarea {
  width: 100%;
  min-height: 180px; /* Увеличена высота */
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,127,39,0.4);
  border-radius: 0.8rem;
  padding: 1.2rem; /* Увеличен padding */
  color: #fff;
  font-size: 1.1rem; /* Увеличен размер шрифта */
  resize: vertical;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.comment-textarea:focus {
  border-color: #ff7f27;
  box-shadow: 0 0 0 2px rgba(255,127,39,0.2);
  outline: none;
}

.submit-button {
  background: linear-gradient(145deg, #ff7f27, #ff5500);
  color: #000;
  font-weight: bold;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: block;
  margin: 0 auto;
}

.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255,127,39,0.4);
}

.submit-button:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,127,39,0.4);
}

.submit-button:disabled {
  background: rgba(255,127,39,0.3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.comment-action {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-action:hover {
  background: rgba(255,69,58,0.2);
  border-color: rgba(255,69,58,0.5);
}

.loading {
  text-align: center;
  padding: 2rem;
  color: rgba(255,255,255,0.7);
  font-style: italic;
}

.error-message {
  background: rgba(255,69,58,0.1);
  border: 1px solid rgba(255,69,58,0.3);
  color: #ff453a;
  padding: 1rem;
  border-radius: 0.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.success-message {
  background: rgba(48,209,88,0.1);
  border: 1px solid rgba(48,209,88,0.3);
  color: #30d158;
  padding: 1rem;
  border-radius: 0.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  animation: fadeIn 0.3s forwards;
}

.empty-comments {
  text-align: center;
  padding: 3rem 0;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  background: rgba(0,0,0,0.2);
  border-radius: 1rem;
  border: 1px dashed rgba(255,127,39,0.3);
}

/* Стилизация скроллбара */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, #ff7f27, #e96c00);
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(145deg, #ff9540, #ff7f27);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Стили для капчи */
.captcha-container {
  margin: 0 auto 20px; /* Центрирование блока */
  width: 35%; /* Уменьшение ширины до 65% */
  border: 1px solid rgba(255,127,39,0.3);
  border-radius: 12px;
  padding: 15px;
  background: rgba(255,127,39,0.05);
}

.captcha-canvas {
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,127,39,0.3);
}

.captcha-input-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.captcha-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255,127,39,0.6);
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 15px;
  outline: none;
}

.captcha-button {
  background: transparent;
  border: 1px solid #ff7f27;
  border-radius: 8px;
  color: #ff7f27;
  cursor: pointer;
  padding: 0 15px;
  transition: all 0.2s ease;
}

.captcha-button:hover {
  background: rgba(255,127,39,0.1);
}

.captcha-verify {
  background: rgba(255,127,39,0.1);
  border: 1px solid #ff7f27;
  border-radius: 8px;
  color: #ff7f27;
  cursor: pointer;
  padding: 0 15px;
}

.captcha-verify:hover {
  background: rgba(255,127,39,0.2);
}

.captcha-success {
  color: #4caf50; 
  margin-top: 10px; 
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.captcha-success span {
  font-size: 16px;
  font-weight: bold;
}

/* Обновленные стили для звездочных рейтингов */
.rating-stars {
  display: flex;
  flex-direction: row-reverse; /* Меняем направление отображения */
  gap: 4px;
  margin: 8px 0;
  justify-content: flex-end; /* Выравниваем по правому краю */
}

.star {
  color: rgba(255,127,39,0.2);
  font-size: 20px;
  transition: all 0.2s ease;
}

.star.filled {
  color: #ff7f27;
}

.rating-input {
  display: flex;
  flex-direction: row-reverse; /* Меняем направление на обратное */
  gap: 8px;
  margin: 15px 0;
  justify-content: center;
}

.rating-input label {
  cursor: pointer;
  font-size: 32px; /* Увеличенный размер звездочек */
  color: rgba(255,127,39,0.2);
  transition: all 0.3s ease;
}

/* Исправляем логику подсветки при наведении */
.rating-input label:hover,
.rating-input label:hover ~ label {
  color: #ff7f27;
  transform: scale(1.1);
}

.rating-input input:checked ~ label {
  color: #ff7f27;
}
`;

// Стили для главного контейнера
const mainContentStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  width: '100%',
  maxWidth: '90%', // Увеличено с 80% до 90%
  margin: '0 auto',
  flex: 1,
  paddingTop: '76px',
  paddingBottom: '30px',
};

// Компонент для отображения рейтинга звездочками
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>
  );
};

export default function Feedback() {
  // Существующие состояния
  const [comments, setComments] = useState<Comment[]>([]);
  const [commentText, setCommentText] = useState('');
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [user, setUser] = useState<{login: string; avatar: string} | null>(null);
  
  // Новые состояния для капчи
  const [captchaText, setCaptchaText] = useState('');
  const [userCaptcha, setUserCaptcha] = useState('');
  const [captchaValidated, setCaptchaValidated] = useState(false);
  
  // Новое состояние для рейтинга
  const [rating, setRating] = useState(5);
  const [averageRating, setAverageRating] = useState<number | null>(null);
  
  // Добавляем реф для canvas
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  // Генерация капчи при загрузке компонента
  useEffect(() => {
    // Добавляем таймаут, чтобы убедиться, что DOM загружен
    const timer = setTimeout(() => {
      generateCaptcha();
    }, 500);
    
    return () => clearTimeout(timer);
  }, []); // Пустой массив зависимостей означает, что эффект выполняется только при монтировании

  // Улучшаем функцию генерации капчи
  const generateCaptcha = () => {
    const canvas = document.getElementById('captchaCanvasFeedback') as HTMLCanvasElement;
    if (!canvas) {
      console.error('Canvas element not found!');
      // Пробуем снова через небольшую задержку
      setTimeout(generateCaptcha, 200);
      return;
    }
    
    const ctx = canvas.getContext('2d');
    if (!ctx) {
      console.error('Cannot get canvas context!');
      return;
    }
    
    console.log('Generating CAPTCHA...'); // Для отладки
    
    // Сбрасываем состояния капчи
    setUserCaptcha('');
    setCaptchaValidated(false);
    
    // Остальной код генерации капчи
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Установка фона
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Генерация случайного текста
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
    let captchaString = '';
    
    for (let i = 0; i < 6; i++) {
      captchaString += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    
    setCaptchaText(captchaString);
    console.log('CAPTCHA set to:', captchaString); // Для отладки
    
    // Отрисовка текста
    ctx.font = 'bold 28px Arial';
    ctx.fillStyle = '#ff7f27';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Добавляем искажения для защиты
    for (let i = 0; i < captchaString.length; i++) {
      const x = (canvas.width / (captchaString.length + 1)) * (i + 1);
      const y = canvas.height / 2 + Math.random() * 10 - 5;
      const angle = Math.random() * 0.4 - 0.2;
      
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.fillText(captchaString[i], 0, 0);
      ctx.restore();
    }
    
    // Добавляем шум
    for (let i = 0; i < 100; i++) {
      ctx.fillStyle = `rgba(255,127,39,${Math.random() * 0.3})`;
      ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2);
    }
    
    // Добавляем линии
    for (let i = 0; i < 4; i++) {
      ctx.beginPath();
      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
      ctx.strokeStyle = `rgba(255,127,39,${Math.random() * 0.5})`;
      ctx.lineWidth = 1;
      ctx.stroke();
    }
    
    // Сбрасываем ввод пользователя
    setUserCaptcha('');
    setCaptchaValidated(false);
  };
  
  // Валидация капчи
  const validateCaptcha = () => {
    if (userCaptcha.toLowerCase() === captchaText.toLowerCase()) {
      setCaptchaValidated(true);
      return true;
    } else {
      setCaptchaValidated(false);
      setError('Неверный код с картинки. Попробуйте еще раз.');
      generateCaptcha();
      return false;
    }
  };
  
  // Получаем данные о текущем пользователе из cookie
  useEffect(() => {
    const loginCookie = document.cookie
      .split("; ")
      .find((row) => row.startsWith("login="))
      ?.split("=")[1];
    
    const avatarCookie = document.cookie
      .split("; ")
      .find((row) => row.startsWith("avatar="))
      ?.split("=")[1];
    
    if (loginCookie) {
      try {
        setUser({ 
          login: decodeURIComponent(loginCookie), 
          avatar: avatarCookie ? decodeURIComponent(avatarCookie) : '/default-avatar.png' 
        });
      } catch (e) {
        console.error("Ошибка декодирования cookie:", e);
      }
    }
  }, []);

  // Получаем список комментариев с сервера
  const fetchComments = async () => {
    setLoading(true);
    try {
      const response = await fetch('http://localhost:8000/comments', {
        method: 'GET',
        credentials: 'include',
      });
      
      if (!response.ok) {
        throw new Error('Не удалось загрузить комментарии');
      }
      
      const data = await response.json();
      
      // Получаем информацию о пользователях для каждого комментария
      const commentsWithUsers = await Promise.all(
        data.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 (e) {
      console.error("Ошибка при загрузке комментариев:", e);
      setError("Не удалось загрузить комментарии. Пожалуйста, попробуйте позже.");
    } finally {
      setLoading(false);
    }
  };

  // Получаем средний рейтинг
  const fetchAverageRating = async () => {
    try {
      const response = await fetch('http://localhost:8000/average-rating', {
        method: 'GET',
        credentials: 'include',
      });
      
      if (!response.ok) {
        console.error('Не удалось загрузить средний рейтинг');
        return;
      }
      
      const data = await response.json();
      if (data && data.Рейтинг !== undefined) {
        setAverageRating(data.Рейтинг);
      }
    } catch (e) {
      console.error("Ошибка при получении среднего рейтинга:", e);
    }
  };

  useEffect(() => {
    fetchComments();
    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 handleSubmitComment = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!commentText.trim()) return;
    if (!user) {
      setError("Необходимо войти в систему, чтобы оставить комментарий");
      return;
    }
    
    // Проверяем капчу
    if (!captchaValidated && !validateCaptcha()) {
      return;
    }
    
    setSubmitting(true);
    setError(null);
    
    try {
      // Получаем JWT токен из cookie
      const jwtToken = document.cookie
        .split("; ")
        .find((row) => row.startsWith("JWT_token="))
        ?.split("=")[1];
      
      if (!jwtToken) {
        throw new Error("Токен авторизации не найден. Пожалуйста, войдите снова.");
      }
      
      const userId = document.cookie
        .split("; ")
        .find((row) => row.startsWith("id="))
        ?.split("=")[1];
      
      if (!userId) {
        throw new Error("ID пользователя не найден. Пожалуйста, войдите снова.");
      }
      
      const response = await fetch('http://localhost:8000/comment', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${jwtToken}`
        },
        body: JSON.stringify({
          user_id: parseInt(userId),
          text: commentText,
          rating: rating // Добавляем рейтинг в запрос
        }),
        credentials: 'include',
      });
      
      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.detail || 'Не удалось отправить комментарий');
      }
      
      setCommentText('');
      setRating(5); // Сбрасываем рейтинг на 5 звезд
      setSuccess("Ваш комментарий успешно добавлен!");
      setCaptchaValidated(false);
      generateCaptcha();
      
      // Убираем сообщение об успехе через 3 секунды
      setTimeout(() => {
        setSuccess(null);
      }, 3000);
      
      // Обновляем список комментариев и средний рейтинг
      fetchComments();
      fetchAverageRating();
    } catch (e) {
      console.error("Ошибка при отправке комментария:", e);
      if (e instanceof Error) {
        setError(e.message);
      } else {
        setError("Произошла неизвестная ошибка. Пожалуйста, попробуйте позже.");
      }
    } finally {
      setSubmitting(false);
    }
  };
  
  // Удаление комментария
  const handleDeleteComment = async (commentId: number) => {
    if (!confirm("Вы уверены, что хотите удалить этот комментарий?")) {
      return;
    }
    
    try {
      // Получаем JWT токен из cookie
      const jwtToken = document.cookie
        .split("; ")
        .find((row) => row.startsWith("JWT_token="))
        ?.split("=")[1];
      
      if (!jwtToken) {
        throw new Error("Токен авторизации не найден. Пожалуйста, войдите снова.");
      }
      
      const response = await fetch(`http://localhost:8000/comment/${commentId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${jwtToken}`
        },
        credentials: 'include',
      });
      
      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.detail || 'Не удалось удалить комментарий');
      }
      
      setSuccess("Комментарий успешно удален!");
      
      // Убираем сообщение об успехе через 3 секунды
      setTimeout(() => {
        setSuccess(null);
      }, 3000);
      
      // Обновляем список комментариев и средний рейтинг
      fetchComments();
      fetchAverageRating();
    } catch (e) {
      console.error("Ошибка при удалении комментария:", e);
      if (e instanceof Error) {
        setError(e.message);
      } else {
        setError("Произошла неизвестная ошибка. Пожалуйста, попробуйте позже.");
      }
    }
  };

  return (
    <div className="page-container">
      <style>{styles}</style>
      <Header />
      
      <main style={mainContentStyle} className="content-container">
        <h1 className="section-title">Отзывы наших пользователей</h1>
        
        {/* Отображаем средний рейтинг, если он доступен */}
        {averageRating !== null && (
          <div className="average-rating-container">
            <span className="average-rating-label">
              Средняя оценка:
            </span>
            <StarRating rating={Math.round(averageRating)} />
            <span className="average-rating-value">
              {averageRating.toFixed(1)}
            </span>
          </div>
        )}
        
        <p className="section-intro">
          Мнение наших пользователей — самое ценное для нас. Мы постоянно работаем над улучшением сервиса, 
          учитывая ваши отзывы и предложения. Вот что говорят о нас те, кто уже воспользовался нашим сервисом.
        </p>
        
        {error && (
          <div className="error-message">
            {error}
          </div>
        )}
        
        {success && (
          <div className="success-message">
            {success}
          </div>
        )}
        
        {loading ? (
          <div className="loading">
            Загрузка комментариев...
          </div>
        ) : comments.length === 0 ? (
          <div className="empty-comments">
            Пока нет комментариев. Будьте первым, кто оставит отзыв!
          </div>
        ) : (
          <div className="comments-container">
            {comments.map((comment, index) => (
              <div 
                key={comment.id} 
                className="comment-card"
                style={{ animationDelay: `${0.1 * index}s` }}
              >
                <div className="comment-header">
                  <img 
                    src={comment.user?.avatar || '/default-avatar.png'} 
                    alt={`Аватар пользователя ${comment.user?.login || 'Unknown'}`} 
                    className="user-avatar"
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = '/default-avatar.png';
                    }}
                  />
                  
                  <div className="user-info">
                    <div className="user-name">
                      {comment.user ? `${comment.user.last_name} ${comment.user.first_name}` : 'Пользователь'}
                    </div>
                    <div className="comment-date">
                      {formatDate(comment.date)}
                    </div>
                    {/* Отображаем рейтинг */}
                    <StarRating rating={comment.rating || 0} />
                  </div>
                  
                  {/* Кнопка удаления (видна только для собственных комментариев) */}
                  {user && user.login === comment.user?.login && (
                    <button 
                      className="comment-action" 
                      onClick={() => handleDeleteComment(comment.id)}
                      title="Удалить комментарий"
                    >
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ff4538" strokeWidth="2">
                        <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6" />
                      </svg>
                    </button>
                  )}
                </div>
                
                <p className="comment-text">
                  {comment.text}
                </p>
              </div>
            ))}
          </div>
        )}
        
        <div className="comment-form-container">
          <h2 className="form-title">Поделитесь своим мнением</h2>
          
          {user ? (
            <form onSubmit={handleSubmitComment}>
              {/* Блок оценки перемещен перед полем ввода текста */}
              <div className="rating-container">
                <div className="rating-title">Поставьте 5 звезд позязя :3</div>
                <div className="rating-input">
                  {/* Меняем порядок звездочек и направление выбора */}
                  {[5, 4, 3, 2, 1].map((star) => (
                    <React.Fragment key={star}>
                      <input
                        type="radio"
                        id={`star${star}`}
                        name="rating"
                        value={star}
                        checked={rating === star}
                        onChange={() => setRating(star)}
                        style={{ display: 'none' }}
                      />
                      <label htmlFor={`star${star}`} title={`${star} ${star === 1 ? 'звезда' : star < 5 ? 'звезды' : 'звёзд'}`}>
                        ★
                      </label>
                    </React.Fragment>
                  ))}
                </div>
              </div>
              
              <textarea
                className="comment-textarea"
                placeholder="Напишите свой отзыв здесь..."
                value={commentText}
                onChange={(e) => setCommentText(e.target.value)}
                disabled={submitting}
              />
              
              {/* Добавляем капчу */}
              <div className="captcha-container">
                <canvas 
                  ref={canvasRef}
                  id="captchaCanvasFeedback" 
                  width="300" 
                  height="80" 
                  className="captcha-canvas"
                />
                
                <div className="captcha-input-container">
                  <input
                    type="text"
                    placeholder="Введите текст с картинки"
                    className="captcha-input"
                    value={userCaptcha}
                    onChange={(e) => setUserCaptcha(e.target.value)}
                  />
                  <button 
                    type="button"
                    className="captcha-button"
                    onClick={generateCaptcha}
                  >
                    ↻
                  </button>
                  <button 
                    type="button"
                    className="captcha-verify"
                    onClick={validateCaptcha}
                  >
                    Проверить
                  </button>
                </div>
                
                {captchaValidated && (
                  <div className="captcha-success">
                    <span>✓</span>
                    Проверка пройдена
                  </div>
                )}
              </div>
              
              <button 
                type="submit" 
                className="submit-button" 
                disabled={submitting || !commentText.trim() || !captchaValidated}
              >
                {submitting ? "Отправка..." : "Отправить отзыв"}
              </button>
            </form>
          ) : (
            <div className="auth-message">
              Чтобы оставить отзыв, пожалуйста, 
              <span 
                style={{ 
                  color: '#ff7f27', 
                  cursor: 'pointer', 
                  marginLeft: '5px',
                  fontWeight: 'bold'
                }}
                onClick={() => {
                  // Вызываем глобальное событие для открытия модального окна логина
                  window.dispatchEvent(new Event('open-login-modal'));
                }}
              >
                войдите в систему
              </span>
            </div>
          )}
        </div>
      </main>
      
      <Fotter />
    </div>
  );
}