'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',
      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',
      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',
      icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
    },
  ];

  const getStatusStyles = (status: string) => {
    switch (status) {
      case 'pending': return 'bg-panel-gray border-gray-700 text-gray-600';
      case 'active': return 'bg-warning-amber/10 border-warning-amber text-warning-amber';
      case 'resolved': return 'bg-success-green/10 border-success-green text-success-green';
      default: return 'bg-panel-gray border-gray-700 text-gray-600';
    }
  };

  if (isMobile) {
    return (
      <Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" 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="none"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  mb={1}
                  border
                  borderWidth="1px"
                  className={getStatusStyles(step.status)}
                >
                  <Box as="svg" w="5" h="5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
                  </Box>
                </Box>
                <Text size="xs" color="text-white" weight="bold" textAlign="center" className="uppercase tracking-widest">{step.name}</Text>
              </Box>
              {i < steps.length - 1 && (
                <Box as="svg" w="4" h="4" mx={1} viewBox="0 0 24 24" fill="none">
                  <path d="M5 12h14m-7-7l7 7-7 7" stroke="#198CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </Box>
              )}
            </Box>
          ))}
        </Box>

        <Box position="relative" h="1" bg="white/5" rounded="none" overflow="hidden">
          <Box
            position="absolute"
            insetY="0"
            left="0"
            bg="primary-accent"
            style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
          />
        </Box>
      </Box>
    );
  }

  const stepVariants = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: shouldReduceMotion ? 0 : i * 0.2,
        duration: 0.4
      }
    })
  };

  return (
    <Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" 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="none"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    mb={{ base: 1, sm: 1.5, md: 2 }}
                    border
                    borderWidth="1px"
                    className={getStatusStyles(step.status)}
                    whileHover={shouldReduceMotion ? {} : {
                      scale: 1.05,
                      borderColor: '#198CFF',
                      transition: { duration: 0.2 }
                    }}
                  >
                    <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">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
                    </Box>
                    {step.status === 'active' && (
                      <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="warning-amber" />
                    )}
                  </Box>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-white" 
                    weight="bold" 
                    textAlign="center" 
                    className="uppercase tracking-widest"
                  >
                    {step.name}
                  </Text>
                </Box>

                {i < steps.length - 1 && (
                  <Box 
                    className="hidden md:block" 
                    position="relative" 
                    ml={2}
                    mr={2}
                  >
                    <Box as="svg" w={{ base: 3, sm: 4, md: 5 }} h={{ base: 3, sm: 4, md: 5 }} viewBox="0 0 24 24" fill="none">
                      <path d="M5 12h14m-7-7l7 7-7 7" stroke="#198CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity={0.5} />
                    </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="1"
        bg="white/5"
        rounded="none"
        overflow="hidden"
      >
        <Box
          as={motion.div}
          position="absolute"
          insetY="0"
          left="0"
          bg="primary-accent"
          initial={{ width: '0%' }}
          animate={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
          transition={{ duration: 0.5, ease: 'easeOut' }}
        />
      </Box>
    </Box>
  );
}