'use client';

import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

export function ProtestWorkflowMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [activeStep, setActiveStep] = useState<number>(1);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  const steps = [
    {
      name: 'Submit',
      status: 'pending',
      color: 'charcoal-outline',
      icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
    },
    {
      name: 'Review',
      status: 'active',
      color: 'warning-amber',
      icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4'
    },
    {
      name: 'Resolve',
      status: 'resolved',
      color: 'performance-green',
      icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
    },
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'pending': return 'bg-charcoal-outline border-charcoal-outline text-gray-500';
      case 'active': return 'bg-warning-amber/20 border-warning-amber text-warning-amber';
      case 'resolved': return 'bg-performance-green/20 border-performance-green text-performance-green';
      default: return 'bg-charcoal-outline border-charcoal-outline text-gray-500';
    }
  };

  if (isMobile) {
    return (
      <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" overflow="hidden" p={3} display="flex" flexDirection="col" justifyContent="center" gap={4}>
        <Box display="flex" alignItems="center" justifyContent="center" gap={3}>
          {steps.map((step, i) => (
            <Box key={step.name} display="flex" alignItems="center">
              <Box display="flex" flexDirection="col" alignItems="center">
                <Box
                  w="10"
                  h="10"
                  rounded="lg"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  mb={1}
                  border
                  borderWidth="2px"
                  // eslint-disable-next-line gridpilot-rules/component-classification
                  className={getStatusColor(step.status)}
                >
                  <Box as="svg" w="5" h="5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
                  </Box>
                </Box>
                <Text size="xs" color="text-white" opacity={0.7} textAlign="center">{step.name}</Text>
              </Box>
              {i < steps.length - 1 && (
                <Box as="svg" w="4" h="4" mx={1} viewBox="0 0 24 24" fill="none">
                  {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                  <path d="M5 12h14m-7-7l7 7-7 7" stroke="#43C9E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </Box>
              )}
            </Box>
          ))}
        </Box>

        <Box position="relative" h="1" bg="bg-charcoal-outline" rounded="full" overflow="hidden">
          <Box
            position="absolute"
            insetY="0"
            left="0"
            bg="bg-gradient-to-r from-neon-aqua to-primary-blue"
            rounded="full"
            // eslint-disable-next-line gridpilot-rules/component-classification
            style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
          />
        </Box>
      </Box>
    );
  }

  const stepVariants = {
    hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.8 },
    visible: (i: number) => ({
      opacity: 1,
      scale: 1,
      transition: {
        delay: shouldReduceMotion ? 0 : i * 0.2,
        type: 'spring' as const,
        stiffness: 200,
        damping: 20
      }
    })
  };

  return (
    <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" overflow="hidden" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} display="flex" flexDirection="col" justifyContent="center" gap={{ base: 2, sm: 4, md: 6, lg: 8 }}>
      <Box display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems="center" justifyContent="center" gap={{ base: 2, sm: 3, md: 4 }}>
        {steps.map((step, i) => (
          <Box key={step.name} display="flex" alignItems="center" flexShrink={0}>
                <Box
                  as={motion.div}
                  custom={i}
                  variants={stepVariants}
                  initial="hidden"
                  animate="visible"
                  display="flex"
                  flexDirection="col"
                  alignItems="center"
                  onHoverStart={() => !shouldReduceMotion && setActiveStep(i)}
                >
                  <Box
                    as={motion.div}
                    position="relative"
                    w={{ base: 8, sm: 10, md: 12, lg: 14 }}
                    h={{ base: 8, sm: 10, md: 12, lg: 14 }}
                    rounded="lg"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    mb={{ base: 1, sm: 1.5, md: 2 }}
                    border
                    borderWidth="2px"
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    className={getStatusColor(step.status)}
                    whileHover={shouldReduceMotion ? {} : {
                      scale: 1.1,
                      boxShadow: step.status === 'active'
                        ? '0 0 32px rgba(255,197,86,0.4)'
                        : step.status === 'resolved'
                        ? '0 0 32px rgba(111,227,122,0.4)'
                        : '0 0 20px rgba(34,38,42,0.4)',
                      transition: { duration: 0.2 }
                    }}
                    transition={{ type: 'spring', stiffness: 300, damping: 15 }}
                  >
                    <Box as="svg" w={{ base: 4, sm: 5, md: 6, lg: 7 }} h={{ base: 4, sm: 5, md: 6, lg: 7 }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
                    </Box>
                    {step.status === 'active' && (
                      <Box
                        as={motion.div}
                        position="absolute"
                        inset="0"
                        rounded="lg"
                        animate={shouldReduceMotion ? {} : {
                          boxShadow: [
                            '0 0 20px rgba(25,140,255,0.3)',
                            '0 0 32px rgba(255,197,86,0.5)',
                            '0 0 20px rgba(25,140,255,0.3)'
                          ]
                        }}
                        transition={{ duration: 2, repeat: Infinity }}
                      />
                    )}
                  </Box>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '8px' }} 
                    color="text-white" 
                    opacity={0.7} 
                    textAlign="center" 
                    mb={0.5}
                  >
                    {step.name}
                  </Text>
                  <Box
                    as={motion.div}
                    h={{ base: 0.5, sm: 1, md: 1.5 }}
                    w={{ base: 6, sm: 8, md: 10, lg: 12 }}
                    rounded="sm"
                    bg={
                      step.status === 'pending' ? 'bg-charcoal-outline' :
                      step.status === 'active' ? 'bg-warning-amber/30' :
                      'bg-performance-green/30'
                    }
                    animate={shouldReduceMotion ? {} : step.status === 'active' ? {
                      opacity: [0.5, 1, 0.5]
                    } : {}}
                    transition={{ duration: 2, repeat: Infinity }}
                  />
                </Box>

                {i < steps.length - 1 && (
                  <Box 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    className="hidden md:block" 
                    position="relative" 
                    ml={1}
                  >
                    <Box as="svg" w={{ base: 3, sm: 4, md: 5 }} h={{ base: 3, sm: 4, md: 5 }} viewBox="0 0 24 24" fill="none">
                      {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                      <path d="M5 12h14m-7-7l7 7-7 7" stroke="#43C9E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </Box>
                  </Box>
                )}
          </Box>
        ))}
      </Box>

      <Box
        as={motion.div}
        initial={{ opacity: 0, scaleX: 0 }}
        animate={{ opacity: 1, scaleX: 1 }}
        transition={{ delay: shouldReduceMotion ? 0 : 0.8, duration: 0.6 }}
        position="relative"
        h={{ base: 0.5, md: 1 }}
        bg="bg-charcoal-outline"
        rounded="full"
        overflow="hidden"
      >
        <Box
          as={motion.div}
          position="absolute"
          insetY="0"
          left="0"
          bg="bg-gradient-to-r from-neon-aqua to-primary-blue"
          rounded="full"
          initial={{ width: '0%' }}
          animate={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
          transition={{ duration: 0.5, ease: 'easeOut' }}
        />
      </Box>
    </Box>
  );
}