import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import type { HeroOverlay, HeroSlide } from '../lib/heroConfig';

interface HeroCarouselProps {
  slides: HeroSlide[];
  autoPlay?: boolean;
  autoPlayInterval?: number;
}

const overlayClasses: Record<HeroOverlay, string> = {
  'from-luxury-dark/60 to-luxury-dark/40': 'from-luxury-dark/60 to-luxury-dark/40',
  'from-luxury-dark/70 to-luxury-dark/50': 'from-luxury-dark/70 to-luxury-dark/50',
  'from-luxury-dark/80 to-luxury-dark/60': 'from-luxury-dark/80 to-luxury-dark/60',
};

const HeroCarousel: React.FC<HeroCarouselProps> = ({
  slides,
  autoPlay = true,
  autoPlayInterval = 5000
}) => {
  const router = useRouter();
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = useState(autoPlay);

  const goToSlide = (index: number) => {
    setCurrentSlide(index);
    setIsAutoPlaying(false);
  };

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
    setIsAutoPlaying(false);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
    setIsAutoPlaying(false);
  };

  const [startProgress, setStartProgress] = useState(true);

  useEffect(() => {
    if (!isAutoPlaying || slides.length === 0) {
      setStartProgress(false);
      return;
    }

    setStartProgress(true);

    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
      setStartProgress(false);
      setTimeout(() => setStartProgress(true), 0);
    }, autoPlayInterval);

    return () => clearInterval(interval);
  }, [isAutoPlaying, autoPlayInterval, slides.length]);

  if (slides.length === 0) {
    return (
      <div className="relative w-full h-[100svh] min-h-[40rem] md:h-screen md:min-h-0 overflow-hidden bg-luxury-dark flex items-center justify-center">
        <p className="text-luxury-gold">Načítání...</p>
      </div>
    );
  }

  return (
    <div className="relative w-full h-[100svh] min-h-[40rem] md:h-screen md:min-h-0 overflow-hidden bg-luxury-dark">
      <div className="relative w-full h-full">
        {slides.map((slide, index) => (
          <div
            key={slide.id}
            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
          >
            <div
              className="absolute inset-0 bg-cover bg-center bg-no-repeat"
              style={{
                backgroundImage: `url('${slide.image}')`,
                filter: 'blur(7px)',
              }}
            />
            <div className={`absolute inset-0 bg-gradient-to-r ${overlayClasses[slide.bgColor]}`} />
            <div className="absolute inset-0 bg-black/35" />

            <div className="relative h-full w-full flex items-center justify-center pt-24 xs:pt-28 sm:pt-32 md:pt-44">
              <div className="w-full px-3 sm:px-4 md:px-6 lg:px-8 py-6 sm:py-8 md:py-0">
                <div className="max-w-7xl mx-auto">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 md:gap-8 lg:gap-12 items-center">
                    <div className="flex flex-col justify-center order-2 md:order-1 min-h-0">
                      <div
                        className="transition-all duration-700 ease-out"
                        style={{
                          opacity: index === currentSlide ? 1 : 0,
                          transform: index === currentSlide ? 'translateX(0)' : 'translateX(-30px)',
                        }}
                      >
                        <p className="text-luxury-gold text-xs sm:text-sm md:text-base font-semibold uppercase tracking-wider mb-1.5 sm:mb-3 md:mb-4">
                          {slide.subtitle}
                        </p>
                        <p className="text-2xl sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl font-aptos font-black text-luxury-light mb-2 sm:mb-4 md:mb-6 leading-tight break-words">
                          {slide.title}
                        </p>
                        <p className="text-xs sm:text-sm md:text-lg text-luxury-light/85 mb-4 sm:mb-6 md:mb-8 max-w-sm md:max-w-md leading-relaxed">
                          {slide.description}
                        </p>
                        <button
                          data-link={slide.link}
                          onClick={(e) => {
                            const link = e.currentTarget.getAttribute('data-link');
                            if (link) router.push(link);
                          }}
                          className="bg-luxury-gold text-luxury-dark px-4 sm:px-8 md:px-10 py-2.5 md:py-4 text-xs sm:text-sm md:text-base font-bold font-aptos hover:bg-yellow-400 active:scale-95 transition-all duration-300 inline-block rounded-sm w-fit min-h-[40px] sm:min-h-[44px]"
                        >
                          {slide.cta}
                        </button>
                      </div>
                    </div>

                    <div
                      className="order-1 md:order-2 flex items-center justify-center transition-all duration-700 ease-out mb-4 md:mb-0"
                      style={{
                        opacity: index === currentSlide ? 1 : 0,
                        transform: index === currentSlide ? 'translateX(0)' : 'translateX(30px)',
                      }}
                    >
                      <div className="relative w-[min(52vw,34svh)] max-w-[180px] xs:w-[min(54vw,35svh)] xs:max-w-[210px] sm:w-[min(40vw,42svh)] sm:max-w-[260px] md:w-[min(42vw,45svh)] md:max-w-md lg:w-[min(32vw,38svh)] lg:max-w-md xl:max-w-96 qhd:max-w-xl bg-gradient-to-br from-luxury-gold/20 to-luxury-gold/5 rounded-lg overflow-hidden border border-luxury-gold/30">
                        <img
                          src={slide.image}
                          alt={slide.title}
                          className="w-full h-auto object-contain"
                          onError={(e) => {
                            (e.target as HTMLImageElement).src =
                              'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%25%22 height=%22100%25%22%3E%3Crect fill=%22%23363534%22 width=%22100%25%22 height=%22100%25%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22 dy=%22.3em%22 fill=%22%23f3bd35%22 font-size=%2224%22%3E' +
                              slide.title +
                              '%3C/text%3E%3C/svg%3E';
                          }}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <button
        onClick={prevSlide}
        className="absolute left-1.5 xs:left-2 sm:left-4 md:left-8 top-1/2 -translate-y-1/2 z-10 w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-full border border-luxury-gold/70 bg-luxury-dark/70 text-luxury-gold shadow-lg shadow-black/30 backdrop-blur-sm transition-all duration-300 hover:bg-luxury-gold hover:text-luxury-dark active:scale-95"
        aria-label="Předchozí slide"
      >
        <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
      </button>

      <button
        onClick={nextSlide}
        className="absolute right-1.5 xs:right-2 sm:right-4 md:right-8 top-1/2 -translate-y-1/2 z-10 w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-full border border-luxury-gold/70 bg-luxury-dark/70 text-luxury-gold shadow-lg shadow-black/30 backdrop-blur-sm transition-all duration-300 hover:bg-luxury-gold hover:text-luxury-dark active:scale-95"
        aria-label="Další slide"
      >
        <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>

      <div className="absolute bottom-[max(0.25rem,env(safe-area-inset-bottom))] sm:bottom-4 md:bottom-8 left-1/2 -translate-x-1/2 z-30 flex items-center gap-0.5 sm:gap-1">
        {slides.map((slide, index) => (
          <button
            key={slide.id}
            onClick={() => goToSlide(index)}
            className="relative flex h-11 w-9 sm:w-10 items-center justify-center rounded-full"
            aria-label={`Přejít na slide ${index + 1}`}
          >
            <span className={`relative block overflow-hidden rounded-full transition-all duration-300 ${
              index === currentSlide
                ? 'w-8 h-2.5 sm:w-9'
                : 'w-2.5 h-2.5 bg-luxury-gold/50 hover:bg-luxury-gold/70'
            }`}>
              {index === currentSlide && (
                <>
                  <span className="absolute inset-0 bg-luxury-gold/30" />
                  <span
                    className="absolute inset-0 bg-luxury-gold"
                    style={{
                      width: isAutoPlaying && startProgress ? '100%' : '0%',
                      transition: isAutoPlaying ? `width ${autoPlayInterval}ms linear` : 'none',
                    }}
                  />
                </>
              )}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
};

export default HeroCarousel;