"use client"

import { useState } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getProperImageUrl } from "@/components/product/product-card"

type ImageType = string | { id: number; image_url: string; is_primary?: boolean; alt_text?: string }

interface ImageSliderProps {
  images: ImageType[]
  productName: string
}

export function ImageSlider({ images, productName }: ImageSliderProps) {
  const [currentIndex, setCurrentIndex] = useState(0)

  // Обработка изображений с учетом разных форматов
  const processedImages = images.map((image) => {
    if (typeof image === 'string') {
      return { url: getProperImageUrl(image), alt: productName }
    } else {
      // Подробная отладка
      console.log('Обрабатываем объект изображения:', image);
      const imageUrl = image.image_url;
      console.log('URL изображения:', imageUrl);
      const processed = { 
        url: getProperImageUrl(image), 
        alt: image.alt_text || productName 
      };
      console.log('Обработанное изображение:', processed);
      return processed;
    }
  })

  const goToPrevious = () => {
    const isFirstImage = currentIndex === 0
    const newIndex = isFirstImage ? processedImages.length - 1 : currentIndex - 1
    setCurrentIndex(newIndex)
  }

  const goToNext = () => {
    const isLastImage = currentIndex === processedImages.length - 1
    const newIndex = isLastImage ? 0 : currentIndex + 1
    setCurrentIndex(newIndex)
  }

  const goToImage = (index: number) => {
    setCurrentIndex(index)
  }

  // Обработка свайпов для мобильных устройств
  const [touchStart, setTouchStart] = useState<number | null>(null)
  const [touchEnd, setTouchEnd] = useState<number | null>(null)

  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchStart(e.targetTouches[0].clientX)
    setTouchEnd(null) // Сбрасываем конечную точку
  }

  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()
    } else if (isRightSwipe) {
      goToPrevious()
    }
  }

  console.log("Изображения в слайдере:", images)
  console.log("Обработанные изображения:", processedImages)

  if (processedImages.length === 0) {
    return (
      <div className="aspect-square relative bg-gray-100 rounded-lg overflow-hidden">
        <Image
          src="/placeholder.png"
          alt={productName}
          fill
          className="object-cover"
        />
      </div>
    )
  }

  return (
    <div className="space-y-3 sm:space-y-4">
      {/* Главное изображение */}
      <div 
        className="relative aspect-square"
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        <div className="absolute inset-0 bg-gray-100 rounded-lg overflow-hidden">
          <Image
            src={processedImages[currentIndex].url}
            alt={processedImages[currentIndex].alt}
            fill
            className="object-contain md:object-cover"
            priority
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </div>

        {/* Индикаторы для мобильных устройств */}
        <div className="absolute bottom-3 left-0 right-0 flex justify-center gap-1.5 md:hidden">
          {processedImages.map((_, idx) => (
            <button
              key={idx}
              className={`w-2 h-2 rounded-full transition-colors ${
                idx === currentIndex ? "bg-primary" : "bg-gray-300"
              }`}
              onClick={() => goToImage(idx)}
              aria-label={`Перейти к изображению ${idx + 1}`}
            />
          ))}
        </div>

        {/* Навигационные кнопки */}
        {processedImages.length > 1 && (
          <>
            <Button
              variant="ghost"
              size="icon"
              className="absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-white/80 text-black hover:bg-white"
              onClick={goToPrevious}
            >
              <ChevronLeft className="h-4 w-4 sm:h-6 sm:w-6" />
              <span className="sr-only">Предыдущее изображение</span>
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-white/80 text-black hover:bg-white"
              onClick={goToNext}
            >
              <ChevronRight className="h-4 w-4 sm:h-6 sm:w-6" />
              <span className="sr-only">Следующее изображение</span>
            </Button>
          </>
        )}
      </div>

      {/* Миниатюры - скрываем на очень маленьких экранах */}
      {processedImages.length > 1 && (
        <div className="hidden sm:flex gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
          {processedImages.map((image, index) => (
            <button
              key={index}
              className={`relative w-16 h-16 sm:w-20 sm:h-20 rounded-md overflow-hidden transition-opacity flex-shrink-0 ${
                index === currentIndex ? "ring-2 ring-primary" : "opacity-70 hover:opacity-100"
              }`}
              onClick={() => goToImage(index)}
            >
              <Image
                src={image.url}
                alt={image.alt}
                fill
                className="object-cover"
                sizes="80px"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  )
} 