'use client';
import { useState, useEffect, useRef } from 'react';
import { format } from 'date-fns';
import { ru } from 'date-fns/locale';
import PosterModal from './modal/Poster';
import ReactDOM from 'react-dom/client';

interface Poster {
  id: number;
  title: string;
  description: string;
  image: string;
  date: string | null;
  price: number;
  like: number;
}

interface DetailedPosterData {
  id: number;
  img: string;  // адаптируем имя поля для модального окна
  title: string;
  likes: number;  // адаптируем имя поля для модального окна
  desc: string;   // адаптируем имя поля для модального окна
  price: number;
  date: string;
}

const PosterSlider = () => {
  const [posters, setPosters] = useState<Poster[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [translateX, setTranslateX] = useState<number>(0);
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const sliderRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  
  // Состояния для модального окна
  // Removed unused isModalOpen state
  // Removed unused selectedPoster state
  const [loadingPosterDetails, setLoadingPosterDetails] = useState<boolean>(false);
  
  // Загрузка данных с сервера
  useEffect(() => {
    const fetchPosters = async () => {
      try {
        setLoading(true);
        const response = await fetch('http://localhost:8000/getallposter', {
          credentials: 'include'
        });
        
        if (!response.ok) {
          throw new Error('Не удалось загрузить постеры');
        }
        
        const data = await response.json();
        setPosters(data.posters);
      } catch (error) {
        console.error('Ошибка при загрузке постеров:', error);
        setError('Не удалось загрузить постеры. Пожалуйста, попробуйте позже.');
      } finally {
        setLoading(false);
      }
    };
    
    fetchPosters();
  }, []);
  
  // Добавляем функцию для создания портала
  const openPortal = (cmp: React.ReactElement) => {
    const host = document.createElement('div');
    document.body.appendChild(host);
    const root = ReactDOM.createRoot(host);
    const close = () => {
      root.unmount();
      host.remove();
    };
    root.render(cmp);
    return close;
  };
  
  // Модифицируем функцию для открытия модального окна
  const handlePosterClick = (poster: Poster) => {
    setLoadingPosterDetails(true);
    
    fetchPosterDetails(poster.id)
      .then(posterData => {
        if (posterData) {
          const closeModal = openPortal(
            <PosterModal 
              data={posterData} 
              isOpen={true} 
              onClose={() => {
                closeModal();
                // Удаляем эту строку, т.к. функция setSelectedPoster больше не существует
                // setSelectedPoster(null);
              }}
            />
          );
        }
      })
      .finally(() => {
        setLoadingPosterDetails(false);
      });
  };
  
  // Модифицируем функцию загрузки деталей постера
  const fetchPosterDetails = async (posterId: number): Promise<DetailedPosterData | null> => {
    try {
      const response = await fetch(`http://localhost:8000/getposter/${posterId}`, {
        credentials: 'include'
      });
      
      if (!response.ok) {
        throw new Error('Не удалось загрузить информацию о мероприятии');
      }
      
      const posterData = await response.json();
      
      // Адаптируем данные для модального окна
      return {
        id: posterData.id,
        img: posterData.image,
        title: posterData.title,
        likes: posterData.like,
        desc: posterData.description,
        price: posterData.price,
        date: posterData.date || '',
      };
    } catch (error) {
      console.error('Ошибка при загрузке детальной информации о постере:', error);
      alert('Не удалось загрузить информацию о мероприятии. Пожалуйста, попробуйте позже.');
      return null;
    }
  };
  
  // Установка начального активного слайда и обновление при изменении размера окна
  useEffect(() => {
    if (containerRef.current && posters.length > 0) {
      // Устанавливаем начальный активный индекс в центр, если есть достаточно постеров
      const initialIndex = Math.min(Math.floor(posters.length / 2), 1);
      centerActiveSlide(initialIndex);
    }
    
    const handleResize = () => {
      centerActiveSlide(activeIndex);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [posters]);
  
  // Пересчет позиции при изменении активного индекса
  useEffect(() => {
    if (containerRef.current && posters.length > 0) {
      centerActiveSlide(activeIndex);
    }
  }, [activeIndex]);
  
  // Форматирование даты и цены
  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return 'Дата не указана';
    const date = new Date(dateStr);
    return format(date, "d MMMM yyyy, HH:mm", { locale: ru });
  };
  
  const formatPrice = (price: number) => {
    return price.toLocaleString('ru-RU', { 
      style: 'currency', 
      currency: 'RUB',
      maximumFractionDigits: 0 
    });
  };
  
  // Улучшенная функция центрирования активного слайда
  const centerActiveSlide = (index: number) => {
    if (!sliderRef.current || !containerRef.current || posters.length === 0) return;
    
    const containerWidth = containerRef.current.clientWidth;
    const cardWidth = 320; // Ширина карточки + отступ
    
    // Строго центрируем выбранную карточку
    const offset = (containerWidth / 2) - (cardWidth / 2);
    let newTranslateX = (index * cardWidth) - offset;
    
    // Проверяем, достаточно ли слайдов для прокрутки
    const totalSlidesWidth = posters.length * cardWidth;
    const canSlide = totalSlidesWidth > containerWidth;
    
    // Если слайдов мало или они помещаются на экране - центрируем контейнер целиком
    if (!canSlide) {
      // Вычисляем смещение для центрирования группы карточек
      const centeringOffset = (containerWidth - totalSlidesWidth) / 2;
      newTranslateX = 0; // Нет смещения
      
      // Применяем центрирующее смещение через стиль margin вместо transform
      if (sliderRef.current) {
        sliderRef.current.style.marginLeft = `${centeringOffset}px`;
      }
    } else {
      // Возвращаем margin к нормальному значению
      if (sliderRef.current) {
        sliderRef.current.style.marginLeft = '0px';
      }

      // Ограничиваем максимальный сдвиг для прокрутки
      const maxTranslateX = Math.max(0, (cardWidth * posters.length) - containerWidth);
      newTranslateX = Math.max(0, Math.min(newTranslateX, maxTranslateX));
    }
    
    // Важное изменение: для первого и последнего слайда делаем особое смещение
    if (index === 0) {
      newTranslateX = 0; // Смещение для первого слайда
    } else if (index === posters.length - 1 && canSlide) {
      newTranslateX = totalSlidesWidth - containerWidth; // Смещение для последнего слайда
    }
    
    setTranslateX(newTranslateX);
    setActiveIndex(index);
  };
  
  // Обработка колесика мыши для прокрутки слайдера
  const handleWheel = (e: React.WheelEvent) => {
    e.preventDefault(); // Предотвращаем стандартную прокрутку страницы
    
    if (e.deltaY > 0 && activeIndex < posters.length - 1) {
      // Прокрутка вниз/вправо
      setActiveIndex(prevIndex => Math.min(prevIndex + 1, posters.length - 1));
    } else if (e.deltaY < 0 && activeIndex > 0) {
      // Прокрутка вверх/влево
      setActiveIndex(prevIndex => Math.max(prevIndex - 1, 0));
    }
  };
  
  // Обработка наведения и клика
  const handlePosterHover = (index: number) => {
    setActiveIndex(index); // Активация слайда при наведении
  };
  
  // Закрытие модального окна (удалено, так как не используется)
  
  // Расчет дистанции от активного слайда для эффекта затемнения
  const calculateDimFactor = (index: number) => {
    if (index === activeIndex) return 1; // Активный слайд на 100% яркий
    
    const distance = Math.abs(index - activeIndex);
    
    // Чем дальше от активного, тем больше затемнение
    if (distance === 1) return 0.5; // Соседние слайды на 50% яркости
    if (distance === 2) return 0.3; // Слайды через один на 30% яркости
    
    return 0.2; // Остальные слайды почти невидимы
  };
  
  // Стили для компонентов с прозрачным фоном
  const styles = `
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes pulseGlow {
      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);
      }
    }
    
    .slider-section {
      width: 90vw;
      margin: 0 auto;
      position: relative;
      padding: 20px 0 40px;
      background: transparent;
    }
    
    .slider-title {
      font-size: 2.2rem;
      margin-bottom: 1.8rem;
      font-weight: bold;
      text-align: center;
      background: linear-gradient(to right, #ff7f27, #ff5500);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: pulseGlow 3s infinite;
      letter-spacing: -0.5px;
    }
    
    .slider-container-outer {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 40px 0;
      background: transparent;
    }
    
    .slider-container {
      position: relative;
      overflow: visible;
      width: 100%;
      margin: 0 auto;
      padding: 0;
      background: transparent;
    }
    
    .slider-wrapper {
      display: flex;
      transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
      padding-bottom: 15px;
      will-change: transform;
    }
    
    .poster-card {
      flex: 0 0 300px;
      height: 420px;
      margin-right: 20px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1), filter 0.4s ease;
      animation: fadeIn 0.5s forwards;
      background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
      border: 1px solid rgba(255,127,39,0.2);
      filter: brightness(0.3) saturate(0.3);
      transform-origin: center center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      will-change: transform, filter, box-shadow;
    }
    
    .poster-card.active {
      filter: brightness(1) saturate(1) !important; /* Яркий активный слайд */
      border: 1px solid rgba(255,127,39,1);
      transform: translateY(-8px) scale(1.08); /* Увеличенное выделение */
      box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 25px rgba(255,127,39,0.4);
      z-index: 11 !important; /* Всегда поверх остальных */
    }
    
    .poster-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      z-index: 1;
      transition: all 0.4s ease;
    }
    
    .poster-gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70%;
      background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 100%);
      z-index: 2;
    }
    
    .poster-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      color: #fff;
      z-index: 3;
      transform: translateY(0);
      transition: transform 0.4s ease;
    }
    
    .poster-card.active .poster-content {
      transform: translateY(-5px);
    }
    
    .poster-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 8px;
      color: #ff7f27;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      transition: color 0.3s ease;
    }
    
    .poster-card.active .poster-title {
      color: #ffa54f;
    }
    
    .poster-description {
      font-size: 0.9rem;
      margin-bottom: 16px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }
    
    .poster-card.active .poster-description {
      opacity: 1;
    }
    
    .poster-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
    }
    
    .poster-price {
      font-size: 1.2rem;
      font-weight: bold;
      color: #ff7f27;
      transition: all 0.3s ease;
    }
    
    .poster-card.active .poster-price {
      transform: scale(1.05);
    }
    
    .poster-date {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.7);
    }
    
    /* Индикаторы для навигации */
    .slider-indicators {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 8px;
    }
    
    .slider-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,127,39,0.2);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .slider-indicator.active {
      width: 20px;
      border-radius: 5px;
      background: #ff7f27;
    }
    
    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      width: 100%;
    }
    
    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid rgba(255,127,39,0.3);
      border-radius: 50%;
      border-top-color: #ff7f27;
      animation: spin 1s infinite linear;
    }
    
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
    
    .error-container {
      text-align: center;
      padding: 50px;
      color: #ff453a;
      background: rgba(255,69,58,0.1);
      border: 1px solid rgba(255,69,58,0.3);
      border-radius: 16px;
      margin: 0 60px;
    }

    .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;
    }
  `;
  
  // Проверка на малое количество постеров
  const hasLimitedPosters = posters.length <= 3;
  
return (
  <div className="slider-section">
    <style>{styles}</style>
              <h2 className="title">Афиша</h2>
    <div className="slider-container-outer">
      <div className="slider-container" ref={containerRef}>
        <div
          className="slider-wrapper"
          ref={sliderRef}
          style={{ transform: `translateX(-${translateX}px)` }}
          onWheel={handleWheel}
        >

          {posters.map((poster, index) => {
            const dimFactor = calculateDimFactor(index);
            return (
              <div
                className={`poster-card ${index === activeIndex ? 'active' : ''}`}
                key={poster.id}
                onClick={() => handlePosterClick(poster)}
                onMouseEnter={() => handlePosterHover(index)}
                style={{
                  animationDelay: `${index * 0.1}s`,
                  zIndex: index === activeIndex ? 10 : posters.length - Math.abs(index - activeIndex),
                  filter: `brightness(${dimFactor}) saturate(${dimFactor})`,
                  opacity: hasLimitedPosters ? 1 : 0.4 + dimFactor * 0.6,
                }}
              >
                <img
                  src={poster.image}
                  alt={poster.title}
                  className="poster-image"
                  onError={(e) => {
                    (e.target as HTMLImageElement).src = '/default-poster.jpg';
                  }}
                />
                <div className="poster-gradient"></div>
                <div className="poster-content">
                  <h3 className="poster-title">{poster.title}</h3>
                  <p className="poster-description">{poster.description}</p>
                  <div className="poster-footer">
                    <div className="poster-price">{formatPrice(poster.price)}</div>
                    <div className="poster-date">{formatDate(poster.date)}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Индикаторы для навигации */}
      {posters.length > 1 && (
        <div className="slider-indicators">
          {posters.map((_, index) => (
            <div
              key={index}
              className={`slider-indicator ${index === activeIndex ? 'active' : ''}`}
              onClick={() => setActiveIndex(index)}
            />
          ))}
        </div>
      )}

      {/* Индикатор загрузки для модального окна */}
      {loadingPosterDetails && (
        <div className="modal-loading-overlay">
          <div className="loading-spinner"></div>
          <style jsx>{`
            .modal-loading-overlay {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: rgba(0, 0, 0, 0.7);
              display: flex;
              justify-content: center;
              align-items: center;
              z-index: 1100;
            }
          `}</style>
        </div>
      )}
    </div>

    {!loading && !error && posters.length === 0 && (
      <div
        style={{
          textAlign: 'center',
          padding: '50px',
          margin: '0 60px',
          color: 'rgba(255,255,255,0.7)',
          background: 'transparent',
          borderRadius: '16px',
          border: '1px dashed rgba(255,127,39,0.3)',
        }}
      >
        <p>Пока нет доступных мероприятий</p>
      </div>
    )}
  </div>
);
};

// Removed unused selectedPoster state

export default PosterSlider;


// Removed unused setSelectedPoster function
