'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { galleryImages } from '@/lib/gallery';
import LayoutContainer from '@/components/layout/LayoutContainer';
import styles from './WorksCarousel.module.css';

export default function WorksCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % galleryImages.length);
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  const goToSlide = (index: number) => {
    setCurrentIndex(index);
  };

  const goToPrevious = () => {
    setCurrentIndex((prev) =>
      prev === 0 ? galleryImages.length - 1 : prev - 1
    );
  };

  const goToNext = () => {
    setCurrentIndex((prev) => (prev + 1) % galleryImages.length);
  };

  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchStart(e.targetTouches[0].clientX);
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const handleTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > 50;
    const isRightSwipe = distance < -50;

    if (isLeftSwipe) {
      goToNext();
    }
    if (isRightSwipe) {
      goToPrevious();
    }
  };

  return (
    <section className={styles.carouselSection}>
      <LayoutContainer>
        <h2 className={styles.title}>Мои работы</h2>
        <div
          className={styles.carousel}
          onTouchStart={handleTouchStart}
          onTouchMove={handleTouchMove}
          onTouchEnd={handleTouchEnd}
        >
          <button
            className={styles.arrow}
            onClick={goToPrevious}
            aria-label="Предыдущее изображение"
          >
            ‹
          </button>
          <div className={styles.slidesContainer}>
            {galleryImages.map((image, index) => (
              <div
                key={image.id}
                className={`${styles.slide} ${
                  index === currentIndex ? styles.active : ''
                }`}
              >
                <Image
                  src={image.src}
                  alt={image.alt}
                  fill
                  className={styles.image}
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
                  loading={index === currentIndex ? 'eager' : 'lazy'}
                />
              </div>
            ))}
          </div>
          <button
            className={styles.arrow}
            onClick={goToNext}
            aria-label="Следующее изображение"
          >
            ›
          </button>
          <div className={styles.dots}>
            {galleryImages.map((_, index) => (
              <button
                key={index}
                className={`${styles.dot} ${
                  index === currentIndex ? styles.active : ''
                }`}
                onClick={() => goToSlide(index)}
                aria-label={`Перейти к слайду ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </LayoutContainer>
    </section>
  );
}

