import React from 'react';
import { motion } from 'framer-motion';
import { Check } from 'lucide-react';

export interface TimelineStep {
  id: string;
  number: number;
  title: string;
  description?: string;
  items?: string[];
  color: 'blue' | 'purple' | 'green' | 'amber' | 'red' | 'teal';
  icon?: React.ReactNode;
}

export interface StepTimelineProps {
  steps: TimelineStep[];
  orientation?: 'vertical' | 'horizontal';
  showConnector?: boolean;
  animated?: boolean;
  className?: string;
}

const colorClasses = {
  blue: {
    bg: 'from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20',
    border: 'border-blue-200 dark:border-blue-800',
    badge: 'bg-blue-600',
    icon: 'text-blue-600',
    line: 'bg-gradient-to-b from-blue-600 to-indigo-600',
  },
  purple: {
    bg: 'from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20',
    border: 'border-purple-200 dark:border-purple-800',
    badge: 'bg-purple-600',
    icon: 'text-purple-600',
    line: 'bg-gradient-to-b from-purple-600 to-pink-600',
  },
  green: {
    bg: 'from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20',
    border: 'border-green-200 dark:border-green-800',
    badge: 'bg-green-600',
    icon: 'text-green-600',
    line: 'bg-gradient-to-b from-green-600 to-emerald-600',
  },
  amber: {
    bg: 'from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20',
    border: 'border-amber-200 dark:border-amber-800',
    badge: 'bg-amber-600',
    icon: 'text-amber-600',
    line: 'bg-gradient-to-b from-amber-600 to-orange-600',
  },
  red: {
    bg: 'from-red-50 to-rose-50 dark:from-red-900/20 dark:to-rose-900/20',
    border: 'border-red-200 dark:border-red-800',
    badge: 'bg-red-600',
    icon: 'text-red-600',
    line: 'bg-gradient-to-b from-red-600 to-rose-600',
  },
  teal: {
    bg: 'from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20',
    border: 'border-teal-200 dark:border-teal-800',
    badge: 'bg-teal-600',
    icon: 'text-teal-600',
    line: 'bg-gradient-to-b from-teal-600 to-cyan-600',
  },
};

/**
 * StepTimeline - Visual timeline for step-by-step processes
 *
 * Features:
 * - Vertical or horizontal orientation
 * - Connecting lines between steps
 * - Color-coded steps
 * - Optional animations
 * - Support for icons and lists
 *
 * @example
 * <StepTimeline
 *   steps={[
 *     { id: '1', number: 1, title: 'Step 1', color: 'blue', items: ['Item 1', 'Item 2'] },
 *     { id: '2', number: 2, title: 'Step 2', color: 'purple', items: ['Item 1', 'Item 2'] }
 *   ]}
 *   orientation="vertical"
 *   animated
 * />
 */
export const StepTimeline: React.FC<StepTimelineProps> = ({
  steps,
  orientation = 'vertical',
  showConnector = true,
  animated = true,
  className = '',
}) => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, x: orientation === 'vertical' ? -20 : 0, y: orientation === 'horizontal' ? 20 : 0 },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: {
        duration: 0.5,
        ease: [0.25, 0.1, 0.25, 1],
      },
    },
  };

  return (
    <motion.div
      className={`${orientation === 'vertical' ? 'space-y-6' : 'flex gap-4 overflow-x-auto'} ${className}`}
      variants={animated ? containerVariants : undefined}
      initial={animated ? 'hidden' : undefined}
      whileInView={animated ? 'visible' : undefined}
      viewport={{ once: true, amount: 0.2 }}
    >
      {steps.map((step, index) => {
        const colors = colorClasses[step.color];
        const isLast = index === steps.length - 1;

        return (
          <motion.div
            key={step.id}
            className="relative"
            variants={animated ? itemVariants : undefined}
          >
            {/* Connector Line */}
            {showConnector && !isLast && orientation === 'vertical' && (
              <div className="absolute left-8 top-20 bottom-0 w-1 -mb-6">
                <div className={`h-full w-full ${colors.line} opacity-30`} />
              </div>
            )}

            {/* Step Card */}
            <div className={`bg-gradient-to-r ${colors.bg} rounded-2xl p-6 md:p-8 border-2 ${colors.border} relative z-10 hover:shadow-lg transition-shadow duration-300`}>
              <div className="flex gap-4 md:gap-6 items-start">
                {/* Number Badge */}
                <div className={`w-16 h-16 ${colors.badge} rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0 shadow-lg`}>
                  {step.number}
                </div>

                {/* Content */}
                <div className="flex-1 min-w-0">
                  <h3 className="text-xl md:text-2xl font-bold text-[var(--text-primary)] mb-3">
                    {step.title}
                  </h3>

                  {step.description && (
                    <p className="text-[var(--text-secondary)] mb-4">
                      {step.description}
                    </p>
                  )}

                  {step.items && step.items.length > 0 && (
                    <ul className="space-y-2">
                      {step.items.map((item, itemIndex) => (
                        <li key={itemIndex} className="flex items-start gap-2">
                          <Check className={`w-5 h-5 ${colors.icon} mt-0.5 flex-shrink-0`} />
                          <span className="text-[var(--text-secondary)]">{item}</span>
                        </li>
                      ))}
                    </ul>
                  )}

                  {step.icon && (
                    <div className="mt-4">
                      {step.icon}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </motion.div>
        );
      })}
    </motion.div>
  );
};

export default StepTimeline;
