'use client';

import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination, Keyboard, A11y } from 'swiper/modules';
import { SliderContent } from '@/types/slider';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

interface HeroSliderProps {
  sliderContent: SliderContent;
}

export function HeroSlider({ sliderContent }: HeroSliderProps) {
  const [activeIndex, setActiveIndex] = useState(0);

  const activeSlides = (sliderContent.slides || []).filter((s) => s.active !== false);

  if (activeSlides.length === 0) {
    return null;
  }

  return (
    <section aria-label="Hero slideshow" aria-roledescription="carousel">
      <Swiper
        modules={[Autoplay, Navigation, Pagination, Keyboard, A11y]}
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }}
        navigation
        pagination={{ clickable: true }}
        keyboard={{ enabled: true, pageUpDown: false }}
        a11y={{
          prevSlideMessage: 'Previous slide',
          nextSlideMessage: 'Next slide',
          firstSlideMessage: 'This is the first slide',
          lastSlideMessage: 'This is the last slide',
          paginationBulletMessage: 'Go to slide {{index}}',
          containerRoleDescriptionMessage: 'carousel',
          itemRoleDescriptionMessage: 'slide',
        }}
        loop={activeSlides.length > 1}
        className="hero-slider"
        onSlideChange={(swiper) => setActiveIndex(swiper.realIndex)}
      >
        {activeSlides.map((slide, index) => {
          const isActive = index === activeIndex;
          return (
            <SwiperSlide key={slide.id}>
              <div
                className="slide-content"
                aria-hidden={!isActive}
                inert={!isActive}
                style={{
                  backgroundImage: `url(${slide.image.url})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}
              >
                <div className="slide-overlay">
                  <div
                    className="overlay-content"
                    style={{
                      width: '550px',
                      marginLeft: slide.alignment === 'right' ? 'auto' : '0',
                      marginRight: slide.alignment === 'left' ? 'auto' : '0',
                    }}
                  >
                    {slide.headline && (
                      <h2
                        style={{
                          color: slide.headlineFormatting?.color,
                          fontWeight: slide.headlineFormatting?.bold ? 'bold' : 'normal',
                          fontStyle: slide.headlineFormatting?.italic ? 'italic' : 'normal',
                          textAlign: 'left',
                        }}
                      >
                        {slide.headline}
                      </h2>
                    )}

                    {slide.subheading && (
                      <p
                        style={{
                          color: slide.subheadingFormatting?.color,
                          fontWeight: slide.subheadingFormatting?.bold ? 'bold' : 'normal',
                          fontStyle: slide.subheadingFormatting?.italic ? 'italic' : 'normal',
                          textAlign: 'left',
                        }}
                      >
                        {slide.subheading}
                      </p>
                    )}

                    {slide.button.text && (
                      <a
                        href={slide.button.url || '#'}
                        className="slide-button"
                        target="_blank"
                        rel="noopener noreferrer"
                        tabIndex={isActive ? 0 : -1}
                      >
                        {slide.button.text}
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </section>
  );
}