import React, { useState } from 'react';
import { PillIcon, PlusIcon, CheckCircleIcon } from '../icons/Icons';

interface OnboardingModalProps {
  isOpen: boolean;
  onComplete: () => void;
}

const onboardingSteps = [
  {
    icon: PillIcon,
    title: 'Welcome to Medication Reminder!',
    description:
      'This quick tour will show you how to get the most out of the app.',
  },
  {
    icon: PlusIcon,
    title: 'Add Your Medications',
    description:
      "Start by clicking the 'Add Medication' button. You can set the name, dosage, frequency, and a custom icon.",
  },
  {
    icon: CheckCircleIcon,
    title: 'Track Your Doses',
    description:
      "Your daily schedule will appear on the main screen. Simply tap 'Take' to record a dose and stay on track with your health.",
  },
];

const OnboardingModal: React.FC<OnboardingModalProps> = ({
  isOpen,
  onComplete,
}) => {
  const [step, setStep] = useState(0);
  const currentStep = onboardingSteps[step];
  const isLastStep = step === onboardingSteps.length - 1;

  const handleNext = () => {
    if (isLastStep) {
      onComplete();
    } else {
      setStep(s => s + 1);
    }
  };

  if (!isOpen) return null;

  return (
    <div className='fixed inset-0 bg-black bg-opacity-60 dark:bg-opacity-80 z-50 flex justify-center items-center p-4'>
      <div className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-sm text-center p-8 m-4'>
        <div className='mx-auto bg-indigo-100 dark:bg-indigo-900/50 rounded-full h-16 w-16 flex items-center justify-center mb-6'>
          <currentStep.icon className='w-8 h-8 text-indigo-600 dark:text-indigo-400' />
        </div>
        <h2 className='text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2'>
          {currentStep.title}
        </h2>
        <p className='text-slate-600 dark:text-slate-300 mb-8'>
          {currentStep.description}
        </p>

        <div className='flex justify-center items-center mb-8 space-x-2'>
          {onboardingSteps.map((_, index) => (
            <div
              key={index}
              className={`w-2.5 h-2.5 rounded-full transition-colors ${step === index ? 'bg-indigo-600' : 'bg-slate-300 dark:bg-slate-600'}`}
            />
          ))}
        </div>

        <button
          onClick={handleNext}
          className='w-full px-4 py-3 text-lg font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800'
        >
          {isLastStep ? 'Get Started' : 'Next'}
        </button>
      </div>
    </div>
  );
};

export default OnboardingModal;