import React, { useState } from 'react';

const StepCarousel = ({ 
  steps = [],
  showStepNumbers = true,
  showNavigation = true,
  showDots = true,
  className = ""
}) => {
  const [currentStep, setCurrentStep] = useState(0);

  // Default demo data if no steps provided
  const defaultSteps = [
    {
      title: "Mill the Mould",
      description: "Download the .stp-files and the blueprints for the mould for CNC milling. Metal examples for CNC Milling: Aluminium 7050, 7075-T6, Steel 1045. CNC mill the mould according to the blueprint and insert 8x10mm Dowel pins.",
      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600&h=400&fit=crop",
      stepNumber: 1
    },
    {
      title: "Inject",
      description: "Fill the injection machine with Polypropylene, heat up for 10-12min, check the viscosity of the outcoming plastic. You need about 25g for the bottom part and 30g for the Top Part.",
      image: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=600&h=400&fit=crop",
      stepNumber: 2
    },
    {
      title: "Demoulding",
      description: "Unscrew the moulds, use the demoulding pockets to open the moulds, knock out the sprues, cut them and do the afterwork.",
      image: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=600&h=400&fit=crop",
      stepNumber: 3
    },
    {
      title: "Drill the holes",
      description: "You need to drill 2x D2mm for the button screws and 3x D2mm for the case screws. Keep attention just to drill 3mm deep. After that insert button screws.",
      image: "https://images.unsplash.com/photo-1609592842914-b3e29c6b0b25?w=600&h=400&fit=crop",
      stepNumber: 4
    },
    {
      title: "Final Assembly",
      description: "The final steps are inserting the lens, the circuit board and screwing the top and bottom together. Test the click and adjust button screws for the best feel.",
      image: "https://images.unsplash.com/photo-1518709268805-4e9042af2ac1?w=600&h=400&fit=crop",
      stepNumber: 5
    }
  ];

  const stepsData = steps.length > 0 ? steps : defaultSteps;

  const nextStep = () => {
    setCurrentStep((prev) => (prev + 1) % stepsData.length);
  };

  const prevStep = () => {
    setCurrentStep((prev) => (prev - 1 + stepsData.length) % stepsData.length);
  };

  const goToStep = (index) => {
    setCurrentStep(index);
  };

  const styles = {
    container: {
      maxWidth: '1024px',
      margin: '0 auto',
      backgroundColor: '#ffffff',
      borderRadius: '8px',
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
      overflow: 'hidden'
    },
    imageContainer: {
      position: 'relative',
      height: '384px',
      backgroundColor: '#f3f4f6',
      overflow: 'hidden'
    },
    image: {
      width: '100%',
      height: '100%',
      objectFit: 'cover',
      transition: 'opacity 0.3s ease'
    },
    stepBadge: {
      position: 'absolute',
      top: '16px',
      left: '16px',
      backgroundColor: '#2563eb',
      color: 'white',
      width: '40px',
      height: '40px',
      borderRadius: '50%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontWeight: 'bold',
      fontSize: '18px',
      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
    },
    navButton: {
      position: 'absolute',
      top: '50%',
      transform: 'translateY(-50%)',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      color: 'white',
      width: '40px',
      height: '40px',
      borderRadius: '50%',
      border: 'none',
      cursor: 'pointer',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '20px',
      fontWeight: 'bold',
      transition: 'background-color 0.2s ease'
    },
    prevButton: {
      left: '16px'
    },
    nextButton: {
      right: '16px'
    },
    content: {
      padding: '24px'
    },
    title: {
      fontSize: '24px',
      fontWeight: 'bold',
      color: '#111827',
      marginBottom: '12px'
    },
    description: {
      color: '#374151',
      lineHeight: '1.6'
    },
    dotsContainer: {
      display: 'flex',
      justifyContent: 'center',
      gap: '8px',
      paddingBottom: '24px'
    },
    dot: {
      width: '12px',
      height: '12px',
      borderRadius: '50%',
      border: 'none',
      cursor: 'pointer',
      transition: 'all 0.2s ease'
    },
    activeDot: {
      backgroundColor: '#2563eb',
      transform: 'scale(1.25)'
    },
    inactiveDot: {
      backgroundColor: '#d1d5db'
    },
    counter: {
      backgroundColor: '#f9fafb',
      padding: '12px 24px',
      textAlign: 'center',
      fontSize: '14px',
      color: '#6b7280',
      borderTop: '1px solid #e5e7eb'
    }
  };

  return (
    <div style={{...styles.container, className}}>
      {/* Main Content Area */}
      <div style={{position: 'relative'}}>
        {/* Image Container */}
        <div style={styles.imageContainer}>
          <img
            src={stepsData[currentStep].image}
            alt={stepsData[currentStep].title}
            style={styles.image}
          />
          
          {/* Step Number Badge */}
          {showStepNumbers && (
            <div style={styles.stepBadge}>
              {stepsData[currentStep].stepNumber || currentStep + 1}
            </div>
          )}

          {/* Navigation Arrows */}
          {showNavigation && stepsData.length > 1 && (
            <>
              <button
                onClick={prevStep}
                style={{...styles.navButton, ...styles.prevButton}}
                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'}
                aria-label="Previous step"
              >
                ‹
              </button>
              <button
                onClick={nextStep}
                style={{...styles.navButton, ...styles.nextButton}}
                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'}
                aria-label="Next step"
              >
                ›
              </button>
            </>
          )}
        </div>

        {/* Content Area */}
        <div style={styles.content}>
          <h3 style={styles.title}>
            {stepsData[currentStep].title}
          </h3>
          <p style={styles.description}>
            {stepsData[currentStep].description}
          </p>
        </div>

        {/* Dot Navigation */}
        {showDots && stepsData.length > 1 && (
          <div style={styles.dotsContainer}>
            {stepsData.map((_, index) => (
              <button
                key={index}
                onClick={() => goToStep(index)}
                style={{
                  ...styles.dot,
                  ...(index === currentStep ? styles.activeDot : styles.inactiveDot)
                }}
                onMouseEnter={(e) => {
                  if (index !== currentStep) {
                    e.target.style.backgroundColor = '#9ca3af';
                  }
                }}
                onMouseLeave={(e) => {
                  if (index !== currentStep) {
                    e.target.style.backgroundColor = '#d1d5db';
                  }
                }}
                aria-label={`Go to step ${index + 1}`}
              />
            ))}
          </div>
        )}
      </div>

      {/* Step Counter */}
      <div style={styles.counter}>
        Step {currentStep + 1} of {stepsData.length}
      </div>
    </div>
  );
};

export default StepCarousel;