import React from 'react'
import { Check, Send, Eye, PenTool, ThumbsUp, LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import { motion } from 'framer-motion'

type StepStatus = 'completed' | 'current' | 'pending'

interface StepProps {
  icon: LucideIcon
  label: string
  status: StepStatus
  isLast?: boolean
}

const Step: React.FC<StepProps> = ({ icon: Icon, label, status, isLast }) => {
  const isCompleted = status === 'completed'
  const isCurrent = status === 'current'
  const isPending = status === 'pending'

  return (
    <div className="flex items-center flex-1 last:flex-none">
      <div className="flex flex-col items-center gap-2 relative z-10">
        <motion.div
          initial={false}
          animate={{
            backgroundColor: isCompleted
              ? '#22c55e'
              : isCurrent
              ? '#3b82f6'
              : '#e5e7eb',
            borderColor: isCompleted
              ? '#22c55e'
              : isCurrent
              ? '#3b82f6'
              : '#e5e7eb',
            scale: isCurrent ? 1.1 : 1,
          }}
          className={cn(
            'w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors duration-300',
            isPending &&
              'bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-400',
            isCompleted && 'text-white',
            isCurrent && 'text-white shadow-lg shadow-blue-500/30'
          )}
        >
          {isCompleted ? <Check className="w-4 h-4" /> : <Icon className="w-4 h-4" />}
        </motion.div>

        <span
          className={cn(
            "text-xs font-medium whitespace-nowrap mt-1",
            isCompleted
              ? "text-green-600 dark:text-green-400"
              : isCurrent
              ? "text-blue-600 dark:text-blue-400"
              : "text-gray-400 dark:text-gray-600"
          )}
        >
          {label}
        </span>
      </div>

      {!isLast && (
        <div className="h-0.5 flex-1 mx-2 bg-gray-100 dark:bg-gray-800 overflow-hidden relative">
          <motion.div
            initial={{ width: '0%' }}
            animate={{ width: isCompleted ? '100%' : '0%' }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="absolute top-0 left-0 h-full bg-green-500"
          />
        </div>
      )}
    </div>
  )
}

type SignatureStatus =
  | 'Saisi'
  | 'Brouillon'
  | 'Envoyé'
  | 'Vu'
  | 'Accepté'
  | 'Signé'
  | 'Transformé en commande'

interface SignatureWorkflowProps {
  status?: SignatureStatus
}
const SignatureWorkflow: React.FC<SignatureWorkflowProps> = ({ status }) => {
  const getStepStatus = (step: SignatureStatus): StepStatus => {
    if (!status || status === 'Saisi' || status === 'Brouillon') return 'pending'

    const progression: SignatureStatus[] = [
      'Envoyé',
      'Vu',
      'Accepté',
      'Signé',
      'Transformé en commande',
    ]

    const currentIndex = progression.indexOf(status)
    const stepIndex = progression.indexOf(step)

    if (currentIndex > -1 && stepIndex > -1) {
      if (currentIndex > stepIndex) return 'completed'
      if (currentIndex === stepIndex) return 'current'
    }

    return 'pending'
  }

  return (
    <div className="flex items-center justify-between w-full max-w-lg mx-auto py-4 px-2 mb-6">
      <Step icon={Send} label="Envoyé" status={getStepStatus('Envoyé')} />
      <Step icon={Eye} label="Vu" status={getStepStatus('Vu')} />
      <Step icon={ThumbsUp} label="Accepté" status={getStepStatus('Accepté')} />
      <Step icon={PenTool} label="Signé" status={getStepStatus('Signé')} isLast />
    </div>
  )
}

export default SignatureWorkflow