import { useState } from 'react'
import { X, ChevronRight, ChevronLeft, Sparkles, Settings, BookOpen, Check, Palette, Save } from 'lucide-react'
import { useTheme } from './ThemeContext'

const steps = [
  {
    id: 'welcome',
    title: 'Welcome to NeuroArch Studio',
    description: 'Let\'s get you started with a quick setup',
    icon: Sparkles
  },
  {
    id: 'project',
    title: 'Project Settings',
    description: 'Configure your neural architecture project',
    icon: Settings
  },
  {
    id: 'preferences',
    title: 'Preferences',
    description: 'Customize your workspace appearance',
    icon: Palette
  },
  {
    id: 'tutorial',
    title: 'Interactive Tutorial',
    description: 'Learn the basics with our guided tour',
    icon: BookOpen
  },
  {
    id: 'complete',
    title: 'All Set!',
    description: 'You\'re ready to start building',
    icon: Check
  }
]

export default function SetupWizard({ onComplete, onSkip }) {
  const [currentStep, setCurrentStep] = useState(0)
  const [formData, setFormData] = useState({
    projectName: 'My Neural Network',
    framework: 'pytorch',
    autoSave: true,
    theme: 'light',
    showGrid: true,
    snapToGrid: true
  })
  const { setTheme } = useTheme()

  const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      localStorage.setItem('project-settings', JSON.stringify(formData))
      setTheme(formData.theme)
      onComplete()
    }
  }

  const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }))
  }

  const CurrentStepComponent = () => {
    switch (currentStep) {
      case 0:
        return (
          <div className="text-center py-8">
            <div className="w-24 h-24 bg-gradient-to-br from-primary-100 to-primary-200 rounded-full flex items-center justify-center mx-auto mb-6">
              <Sparkles className="w-12 h-12 text-primary-600" />
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Welcome to NeuroArch Studio</h2>
            <p className="text-lg text-gray-600 mb-8">Design neural architectures visually with our powerful node-based editor</p>
            <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-6 text-left">
              <h3 className="font-semibold text-blue-900 mb-3">✨ What you can do:</h3>
              <ul className="space-y-3 text-blue-800">
                <li className="flex items-start">
                  <span className="mr-2">🧠</span>
                  <span>Drag and drop neural layers to build architectures</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">🔗</span>
                  <span>Connect layers with visual data flow</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">📤</span>
                  <span>Export to PyTorch, TensorFlow, and more</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">💾</span>
                  <span>Save and manage multiple projects</span>
                </li>
              </ul>
            </div>
          </div>
        )
      
      case 1:
        return (
          <div className="py-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">Project Settings</h2>
            <div className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Project Name
                </label>
                <input
                  type="text"
                  name="projectName"
                  value={formData.projectName}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                  placeholder="Enter project name"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Default Framework
                </label>
                <select
                  name="framework"
                  value={formData.framework}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                >
                  <option value="pytorch">PyTorch</option>
                  <option value="tensorflow">TensorFlow</option>
                  <option value="keras">Keras</option>
                </select>
              </div>
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    name="autoSave"
                    checked={formData.autoSave}
                    onChange={handleInputChange}
                    className="mr-3 w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
                  />
                  <span className="text-sm font-medium text-gray-700">Enable Auto-save</span>
                </label>
                <Save className="w-4 h-4 text-gray-400" />
              </div>
            </div>
          </div>
        )
      
      case 2:
        return (
          <div className="py-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">Workspace Preferences</h2>
            <div className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-3">
                  Theme
                </label>
                <div className="grid grid-cols-2 gap-4">
                  <label className={`flex items-center p-4 border rounded-lg cursor-pointer transition-all ${formData.theme === 'light' ? 'border-primary-500 bg-primary-50' : 'border-gray-300 hover:bg-gray-50'}`}>
                    <input
                      type="radio"
                      name="theme"
                      value="light"
                      checked={formData.theme === 'light'}
                      onChange={handleInputChange}
                      className="mr-3"
                    />
                    <div className="flex items-center space-x-2">
                      <Sun className="w-5 h-5" />
                      <span className="text-sm font-medium">Light</span>
                    </div>
                  </label>
                  <label className={`flex items-center p-4 border rounded-lg cursor-pointer transition-all ${formData.theme === 'dark' ? 'border-primary-500 bg-primary-50' : 'border-gray-300 hover:bg-gray-50'}`}>
                    <input
                      type="radio"
                      name="theme"
                      value="dark"
                      checked={formData.theme === 'dark'}
                      onChange={handleInputChange}
                      className="mr-3"
                    />
                    <div className="flex items-center space-x-2">
                      <Moon className="w-5 h-5" />
                      <span className="text-sm font-medium">Dark</span>
                    </div>
                  </label>
                </div>
              </div>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      name="showGrid"
                      checked={formData.showGrid}
                      onChange={handleInputChange}
                      className="mr-3 w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
                    />
                    <span className="text-sm font-medium text-gray-700">Show Grid</span>
                  </label>
                </div>
                <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      name="snapToGrid"
                      checked={formData.snapToGrid}
                      onChange={handleInputChange}
                      className="mr-3 w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
                    />
                    <span className="text-sm font-medium text-gray-700">Snap to Grid</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        )
      
      case 3:
        return (
          <div className="py-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-6">Interactive Tutorial</h2>
            <div className="bg-gradient-to-r from-green-50 to-blue-50 border border-green-200 rounded-lg p-6 mb-6">
              <h3 className="font-semibold text-green-900 mb-3">🎯 Tutorial Highlights:</h3>
              <ul className="space-y-3 text-green-800">
                <li className="flex items-start">
                  <span className="mr-3 mt-1">📍</span>
                  <span>Learn the interface with step-by-step guidance</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-3 mt-1">🎯</span>
                  <span>Interactive hotspots highlight important features</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-3 mt-1">⏱️</span>
                  <span>Approximately 5 minutes to complete</span>
                </li>
                <li className="flex items-start">
                  <span className="mr-3 mt-1">🔄</span>
                  <span>Can be restarted anytime from the help menu</span>
                </li>
              </ul>
            </div>
            <p className="text-gray-600 mb-4">The tutorial will start automatically after setup. You can skip it and access it later from the header.</p>
            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
              <p className="text-sm text-yellow-800">
                <strong>💡 Tip:</strong> The tutorial adapts to your experience level and focuses on features you'll use most.
              </p>
            </div>
          </div>
        )
      
      case 4:
        return (
          <div className="text-center py-8">
            <div className="w-24 h-24 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-6">
              <Check className="w-12 h-12 text-green-600" />
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-4">You're All Set!</h2>
            <p className="text-lg text-gray-600 mb-8">Your workspace is configured and ready to go</p>
            <div className="bg-gradient-to-r from-gray-50 to-gray-100 border border-gray-200 rounded-lg p-6 mb-6 text-left">
              <h3 className="font-semibold text-gray-900 mb-4">✅ Quick Start Checklist:</h3>
              <div className="space-y-3">
                <div className="flex items-center text-green-700">
                  <Check className="w-5 h-5 mr-3 flex-shrink-0" />
                  <span className="text-sm">Project settings configured</span>
                </div>
                <div className="flex items-center text-green-700">
                  <Check className="w-5 h-5 mr-3 flex-shrink-0" />
                  <span className="text-sm">Workspace preferences saved</span>
                </div>
                <div className="flex items-center text-green-700">
                  <Check className="w-5 h-5 mr-3 flex-shrink-0" />
                  <span className="text-sm">Tutorial ready to launch</span>
                </div>
                <div className="flex items-center text-gray-500">
                  <div className="w-5 h-5 mr-3 flex-shrink-0 border-2 border-gray-300 rounded-full" />
                  <span className="text-sm">Create your first architecture</span>
                </div>
              </div>
            </div>
          </div>
        )
      
      default:
        return null
    }
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-screen overflow-y-auto">
        {/* Header */}
        <div className="px-8 py-6 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              {steps[currentStep].icon && (
                <div className="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
                  {steps[currentStep].icon && <steps[currentStep].icon className="w-5 h-5 text-primary-600" />}
                </div>
              )}
              <div>
                <h2 className="text-xl font-bold text-gray-900">{steps[currentStep].title}</h2>
                <p className="text-sm text-gray-500">{steps[currentStep].description}</p>
              </div>
            </div>
            <button
              onClick={onSkip}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              <X className="w-6 h-6" />
            </button>
          </div>
        </div>

        {/* Progress Bar */}
        <div className="px-8 py-4 bg-gray-50">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-600">Step {currentStep + 1} of {steps.length}</span>
            <button
              onClick={onSkip}
              className="text-sm text-gray-500 hover:text-gray-700"
            >
              Skip setup
            </button>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-gradient-to-r from-primary-500 to-primary-600 h-2 rounded-full transition-all duration-300"
              style={{ width: `${((currentStep + 1) / steps.length) * 100}%` }}
            />
          </div>
        </div>

        {/* Content */}
        <div className="px-8 py-6">
          <CurrentStepComponent />
        </div>

        {/* Footer */}
        <div className="px-8 py-6 border-t border-gray-200 flex items-center justify-between">
          <button
            onClick={handlePrevious}
            disabled={currentStep === 0}
            className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
              currentStep === 0
                ? 'text-gray-300 cursor-not-allowed'
                : 'text-gray-700 hover:bg-gray-100'
            }`}
          >
            <ChevronLeft className="w-5 h-5" />
            <span>Previous</span>
          </button>
          <button
            onClick={handleNext}
            className="flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-lg hover:from-primary-700 hover:to-primary-800 transition-all shadow-lg"
          >
            <span>{currentStep === steps.length - 1 ? 'Get Started' : 'Next'}</span>
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>
  )
}