gridpilot.gg/apps/website/components/mockups/WorkflowMockup.tsx

'use client';

import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { CheckCircle2, LucideIcon } from 'lucide-react';
import { useEffect, useState } from 'react';

export interface WorkflowStep {
  id: number;
  icon: LucideIcon;
  title: string;
  description: string;
  intent: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
}

interface WorkflowMockupProps {
  steps: WorkflowStep[];
}

export function WorkflowMockup({ steps }: WorkflowMockupProps) {
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);
  const [activeStep, setActiveStep] = useState(0);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    if (!isMounted) return;
    
    const interval = setInterval(() => {
      setActiveStep((prev) => (prev + 1) % steps.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [isMounted, steps.length]);

  if (!isMounted) {
    return (
      <Box position="relative" fullWidth>
        <Surface variant="muted" rounded="none" padding={6}>
          <Box display="flex" justifyContent="between" gap={2}>
            {steps.map((step) => (
              <Box key={step.id} display="flex" alignItems="center" justifyContent="center" flexDirection="col">
                <Box width="10" height="10" rounded="none" bg="var(--ui-color-bg-base)" style={{ border: '1px solid var(--ui-color-border-default)' }} display="flex" alignItems="center" justifyContent="center" mb={2}>
                  <Text variant={step.intent}>
                    <Icon icon={step.icon} size={4} />
                  </Text>
                </Box>
                <Text size="xs" weight="bold" variant="high" uppercase>{step.title}</Text>
              </Box>
            ))}
          </Box>
        </Surface>
      </Box>
    );
  }

  return (
    <Box position="relative" fullWidth>
      <Surface variant="muted" rounded="none" padding={6} overflow="hidden">
        {/* Connection Lines */}
        <Box position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
          <Box height="0.5" bg="rgba(255,255,255,0.05)" position="relative">
            <Box
              as={motion.div}
              position="absolute"
              fullHeight
              bg="var(--ui-color-intent-primary)"
              initial={{ width: '0%' }}
              animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
              transition={{ duration: 0.5, ease: 'easeInOut' }}
            />
          </Box>
        </Box>

        {/* Steps */}
        <Box display="flex" justifyContent="between" gap={2} position="relative">
          {steps.map((step, index) => {
            const isActive = index === activeStep;
            const isCompleted = index < activeStep;
            const StepIcon = step.icon;

            return (
              <Box
                as={motion.div}
                key={step.id}
                display="flex"
                flexDirection="col"
                alignItems="center"
                justifyContent="center"
                cursor="pointer"
                flexGrow={1}
                onClick={() => setActiveStep(index)}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Box
                  as={motion.div}
                  w={{ base: '10', sm: '12' }}
                  h={{ base: '10', sm: '12' }}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  mb={2}
                  transition
                  style={{ 
                    backgroundColor: isActive ? 'rgba(25, 140, 255, 0.1)' : isCompleted ? 'rgba(16, 185, 129, 0.1)' : 'var(--ui-color-bg-base)',
                    opacity: isActive ? 1 : isCompleted ? 0.8 : 0.5,
                    border: `1px solid ${isActive ? 'var(--ui-color-intent-primary)' : isCompleted ? 'var(--ui-color-intent-success)' : 'var(--ui-color-border-default)'}`
                  }}
                  animate={isActive && !shouldReduceMotion ? {
                    opacity: [0.7, 1, 0.7],
                    transition: { duration: 1.5, repeat: Infinity }
                  } : {}}
                  className="relative"
                >
                  {isActive && (
                    <Box position="absolute" top="-1px" left="-1px" w="2" h="2" style={{ borderTop: '1px solid var(--ui-color-intent-primary)', borderLeft: '1px solid var(--ui-color-intent-primary)' }} />
                  )}
                  {isCompleted ? (
                    <Icon icon={CheckCircle2} size={5} intent="success" />
                  ) : (
                    <Text variant={isActive ? 'primary' : 'low'}>
                      <Icon icon={StepIcon} size={5} />
                    </Text>
                  )}
                </Box>
                <Text 
                  size="xs" 
                  weight="bold" 
                  variant={isActive ? 'high' : 'low'}
                  display={{ base: 'none', sm: 'block' }}
                  uppercase
                >
                  {step.title}
                </Text>
              </Box>
            );
          })}
        </Box>

        {/* Active Step Preview - Mobile */}
        <AnimatePresence mode="wait">
          <Box
            as={motion.div}
            key={activeStep}
            initial={{ opacity: 0, y: 5 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -5 }}
            transition={{ duration: 0.2 }}
            marginTop={4}
            paddingTop={4}
            style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
            display={{ base: 'block', sm: 'none' }}
          >
            <Box textAlign="center">
              <Text size="xs" variant="med" block marginBottom={1} font="mono" weight="bold" uppercase>
                STEP {activeStep + 1}: {steps[activeStep]?.title || ''}
              </Text>
              <Text size="xs" variant="low" block font="mono" uppercase>
                {steps[activeStep]?.description || ''}
              </Text>
            </Box>
          </Box>
        </AnimatePresence>
      </Surface>
    </Box>
  );
}