import React, { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-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);
  };

  return (
    <div className={`max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden ${className}`}>
      {/* Main Content Area */}
      <div className="relative">
        {/* Image Container */}
        <div className="relative h-96 bg-gray-100 overflow-hidden">
          <img
            src={stepsData[currentStep].image}
            alt={stepsData[currentStep].title}
            className="w-full h-full object-cover transition-opacity duration-300"
          />
          
          {/* Step Number Badge */}
          {showStepNumbers && (
            <div className="absolute top-4 left-4 bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg shadow-lg">
              {stepsData[currentStep].stepNumber || currentStep + 1}
            </div>
          )}

          {/* Navigation Arrows */}
          {showNavigation && stepsData.length > 1 && (
            <>
              <button
                onClick={prevStep}
                className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
                aria-label="Previous step"
              >
                <ChevronLeft size={24} />
              </button>
              <button
                onClick={nextStep}
                className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
                aria-label="Next step"
              >
                <ChevronRight size={24} />
              </button>
            </>
          )}
        </div>

        {/* Content Area */}
        <div className="p-6">
          <h3 className="text-2xl font-bold text-gray-900 mb-3">
            {stepsData[currentStep].title}
          </h3>
          <p className="text-gray-700 leading-relaxed">
            {stepsData[currentStep].description}
          </p>
        </div>

        {/* Dot Navigation */}
        {showDots && stepsData.length > 1 && (
          <div className="flex justify-center space-x-2 pb-6">
            {stepsData.map((_, index) => (
              <button
                key={index}
                onClick={() => goToStep(index)}
                className={`w-3 h-3 rounded-full transition-all duration-200 ${
                  index === currentStep
                    ? 'bg-blue-600 transform scale-125'
                    : 'bg-gray-300 hover:bg-gray-400'
                }`}
                aria-label={`Go to step ${index + 1}`}
              />
            ))}
          </div>
        )}
      </div>

      {/* Step Counter */}
      <div className="bg-gray-50 px-6 py-3 text-center text-sm text-gray-600 border-t">
        Step {currentStep + 1} of {stepsData.length}
      </div>
    </div>
  );
};

// Example usage component
const ExampleUsage = () => {
  const customSteps = [
    {
      title: "Prepare Your Materials",
      description: "Gather all necessary tools and materials before starting the project. Make sure you have adequate workspace and safety equipment.",
      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600&h=400&fit=crop",
      stepNumber: 1
    },
    {
      title: "Setup the Equipment",
      description: "Configure your equipment according to the specifications. Double-check all connections and settings before proceeding.",
      image: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=600&h=400&fit=crop",
      stepNumber: 2
    }
  ];

  return (
    <div className="p-8 bg-gray-50 min-h-screen">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-8 text-gray-900">
          Docusaurus Step Carousel Component
        </h1>
        
        <div className="mb-12">
          <h2 className="text-xl font-semibold mb-4 text-gray-800">Default Example</h2>
          <StepCarousel />
        </div>

        <div className="mb-12">
          <h2 className="text-xl font-semibold mb-4 text-gray-800">Custom Steps Example</h2>
          <StepCarousel steps={customSteps} />
        </div>

        <div className="mb-12">
          <h2 className="text-xl font-semibold mb-4 text-gray-800">Minimal Version (No Navigation)</h2>
          <StepCarousel 
            showNavigation={false} 
            showDots={false}
            showStepNumbers={false}
          />
        </div>

        <div className="bg-white p-6 rounded-lg shadow mt-8">
          <h3 className="text-lg font-semibold mb-3">Usage in Docusaurus:</h3>
          <div className="bg-gray-100 p-4 rounded font-mono text-sm">
            <div className="text-gray-600">// In your MDX file:</div>
            <div className="mt-2">
              {`import StepCarousel from '@site/src/components/StepCarousel';

<StepCarousel 
  steps={[
    {
      title: "Step 1",
      description: "Description here...",
      image: "/img/step1.jpg",
      stepNumber: 1
    }
  ]}
/>`}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ExampleUsage;