'use client';

import React, { useRef } from 'react';
import Image from 'next/image';
import { Eye, EyeOff } from 'lucide-react';
import { useSliderEditor } from './SliderEditorContext';
import styles from './SliderCarousel.module.css';

export default function SliderCarousel() {
  const { sliderContent, addSlide, selectSlide, updateSlide, formState } = useSliderEditor();
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  return (
    <div className={styles.carouselContainer}>
      {/* Header */}
      <div className={styles.carouselHeader}>
        <span className={styles.carouselTitle}>Slides ({sliderContent.slides.length})</span>
      </div>

      {/* Vertical Carousel */}
      <div className={styles.carousel}>
        {/* Thumbnails */}
        <div className={styles.scrollContainer} ref={scrollContainerRef}>
          {sliderContent.slides.map((slide, index) => (
            <button
              key={slide.id}
              className={`${styles.thumbnail} ${
                index === formState.currentSlideIndex ? styles.selected : ''
              } ${slide.active === false ? styles.inactive : ''}`}
              onClick={() => selectSlide(index)}
              title={`Slide ${index + 1}`}
            >
              {slide.image.url && (
                <Image
                  src={slide.image.url}
                  alt={`Slide ${index + 1}`}
                  fill
                  style={{ objectFit: 'cover' }}
                  unoptimized
                />
              )}
              <div className={styles.thumbnailLabel}>
                Slide {index + 1}: {slide.headline || 'Untitled'}
              </div>
              <div
                className={styles.toggleButton}
                role="button"
                tabIndex={0}
                title={slide.active === false ? 'Show slide' : 'Hide slide'}
                onClick={(e) => {
                  e.stopPropagation();
                  updateSlide(index, { active: slide.active === false });
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.stopPropagation();
                    e.preventDefault();
                    updateSlide(index, { active: slide.active === false });
                  }
                }}
              >
                {slide.active === false ? <EyeOff size={14} /> : <Eye size={14} />}
              </div>
            </button>
          ))}

          {/* Add Slide Button */}
          <button
            className={styles.addButton}
            onClick={addSlide}
            disabled={sliderContent.slides.length >= 10}
            title="Add new slide"
          >
            <span>+</span> Add Slide
          </button>
        </div>
      </div>
    </div>
  );
}