'use client';

import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Check } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';

export function CompanionAutomationMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [isMobile, setIsMobile] = useState(false);

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

  // Simple mobile version - just the essence of automation
  if (isMobile) {
    return (
      <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
        <Box
          as={motion.div}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          w="full"
        >
          <Stack gap={4}>
            {/* Simple progress indicator */}
            <Box bg="bg-iron-gray/60" rounded="xl" p={4} border borderColor="border-primary-blue/40">
              <Box display="flex" alignItems="center" gap={3} mb={3}>
                <Box
                  as={motion.div}
                  h="8"
                  w="8"
                  bg="bg-performance-green/40"
                  rounded="full"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  border
                  borderWidth="2px"
                  borderColor="border-performance-green/60"
                  flexShrink={0}
                  animate={shouldReduceMotion ? {} : {
                    scale: [1, 1.1, 1],
                    opacity: [0.6, 1, 0.6]
                  }}
                  transition={{ duration: 1.5, repeat: Infinity }}
                >
                  <Box h="3" w="3" bg="bg-performance-green" rounded="full" />
                </Box>
                <Box>
                  <Text size="sm" color="text-white" weight="medium" block>Creating Session</Text>
                  <Text size="xs" color="text-white" opacity={0.5} block>Automated</Text>
                </Box>
              </Box>
              <Box h="2.5" fullWidth bg="bg-white/5" rounded="full" overflow="hidden">
                <Box
                  as={motion.div}
                  h="full"
                  bg="bg-primary-blue/60"
                  initial={{ width: '0%' }}
                  animate={{ width: '75%' }}
                  transition={{ duration: 2, ease: 'easeInOut' }}
                />
              </Box>
            </Box>

            {/* Simple CTA */}
            <Box display="flex" justifyContent="center">
              <Box bg="bg-primary-blue/20" color="text-primary-blue" px={6} py={2.5} rounded="lg" border borderColor="border-primary-blue/40">
                <Text size="sm" weight="semibold">One Click</Text>
              </Box>
            </Box>
          </Stack>
        </Box>
      </Box>
    );
  }

  // Desktop version - richer with more automation steps
  return (
    <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 3, md: 4, lg: 6 }} overflow="hidden">
      <Box
        as={motion.div}
        initial="hidden"
        animate="visible"
        variants={{
          hidden: { opacity: 0 },
          visible: {
            opacity: 1,
            transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 }
          }
        }}
      >
        <Stack gap={{ base: 3, md: 4, lg: 5 }}>
          {/* Companion App Header - Enhanced */}
          <Box as={motion.div} variants={{ hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0 } }}>
            <Box display="flex" alignItems="center" gap={{ base: 2.5, md: 3, lg: 4 }} mb={{ base: 3, md: 4, lg: 5 }}>
              <Box h={{ base: 10, md: 12, lg: 14 }} w={{ base: 10, md: 12, lg: 14 }} bg="bg-primary-blue/20" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/40" display="flex" alignItems="center" justifyContent="center" shadow="lg">
                <Box h={{ base: 6, md: 7, lg: 8 }} w={{ base: 6, md: 7, lg: 8 }} bg="bg-primary-blue/60" rounded="sm" />
              </Box>
              <Box>
                <Heading level={2} fontSize={{ base: 'base', md: 'lg', lg: 'xl' }} weight="semibold" color="text-white">GridPilot Companion</Heading>
                <Text size={{ base: 'xs', md: 'sm', lg: 'base' }} color="text-white" opacity={0.5} block>Automated Session Creator</Text>
              </Box>
            </Box>
          </Box>

          {/* Browser Automation Visual - Full workflow */}
          <Box
            as={motion.div}
            variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
            position="relative"
            bg="bg-charcoal-outline"
            rounded="lg"
            p={{ base: 3, md: 4, lg: 5 }}
            border
            borderWidth="2px"
            borderColor="border-primary-blue/40"
            overflow="hidden"
          >
            {/* Browser Window Mockup */}
            <Stack gap={{ base: 3, md: 4 }}>
              <Box display="flex" alignItems="center" gap={{ base: 2, md: 2.5 }} pb={{ base: 3, md: 4 }} borderBottom borderColor="border-white/10">
                <Box h={{ base: 2.5, md: 3 }} w={{ base: 2.5, md: 3 }} bg="bg-red-500/60" rounded="full" />
                <Box h={{ base: 2.5, md: 3 }} w={{ base: 2.5, md: 3 }} bg="bg-warning-amber/60" rounded="full" />
                <Box h={{ base: 2.5, md: 3 }} w={{ base: 2.5, md: 3 }} bg="bg-performance-green/60" rounded="full" />
                <Box flexGrow={1} h={{ base: 2.5, md: 3 }} bg="bg-white/5" rounded="sm" ml={2} px={2} display="flex" alignItems="center">
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '8px' }} 
                    color="text-white" 
                    opacity={0.3} 
                    font="mono"
                  >
                    members.iracing.com
                  </Text>
                </Box>
              </Box>
              
              {/* Automation Steps - More detailed */}
              <Stack gap={{ base: 3, md: 4 }}>
                {[
                  { label: 'Open iRacing', status: 'Complete', detail: 'Browser ready' },
                  { label: 'Navigate to Hosted', status: 'Complete', detail: 'Page loaded' },
                  { label: 'Create Session', status: 'Running', detail: 'Filling form...' },
                  { label: 'Configure Settings', status: 'Pending', detail: 'Waiting...' }
                ].map((step, index) => (
                  <Box
                    key={index}
                    as={motion.div}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{
                      opacity: 1,
                      x: 0,
                      transition: { delay: shouldReduceMotion ? 0 : 0.4 + (index * 0.15) }
                    }}
                  >
                    <Stack gap={2}>
                      <Box display="flex" alignItems="center" gap={{ base: 2.5, md: 3 }}>
                        <Box
                          as={motion.div}
                          h={{ base: 7, md: 8, lg: 9 }}
                          w={{ base: 7, md: 8, lg: 9 }}
                          rounded="full"
                          display="flex"
                          alignItems="center"
                          justifyContent="center"
                          flexShrink={0}
                          border
                          borderWidth="2px"
                          bg={
                            step.status === 'Complete'
                              ? 'bg-performance-green/40'
                              : step.status === 'Running'
                              ? 'bg-primary-blue/40'
                              : 'bg-charcoal-outline'
                          }
                          borderColor={
                            step.status === 'Complete'
                              ? 'border-performance-green/60'
                              : step.status === 'Running'
                              ? 'border-primary-blue/60'
                              : 'border-white/20'
                          }
                          animate={shouldReduceMotion ? {} : step.status === 'Running' ? {
                            scale: [1, 1.15, 1],
                            opacity: [0.4, 1, 0.4]
                          } : {}}
                          transition={{ duration: 1.5, repeat: Infinity }}
                        >
                          {step.status === 'Complete' && (
                            <Icon icon={Check} size={5} color="text-performance-green" />
                          )}
                          {step.status === 'Running' && (
                            <Box h={{ base: 3, md: 4 }} w={{ base: 3, md: 4 }} bg="bg-primary-blue" rounded="full" />
                          )}
                          {step.status === 'Pending' && (
                            <Box h={{ base: 2, md: 2.5 }} w={{ base: 2, md: 2.5 }} bg="bg-white/30" rounded="full" />
                          )}
                        </Box>
                        <Box flexGrow={1}>
                          <Text size={{ base: 'sm', md: 'base', lg: 'lg' }} color="text-white" weight="medium" block>{step.label}</Text>
                          <Text size={{ base: 'xs', md: 'sm' }} color="text-white" opacity={0.5} block>{step.detail}</Text>
                        </Box>
                      </Box>
                      {step.status !== 'Pending' && (
                        <Box h={{ base: 2.5, md: 3 }} fullWidth bg="bg-white/5" rounded="full" overflow="hidden" ml={{ base: 9, md: 10, lg: 11 }}>
                          <Box
                            as={motion.div}
                            h="full"
                            bg={step.status === 'Complete' ? 'bg-performance-green/60' : 'bg-primary-blue/60'}
                            initial={{ width: '0%' }}
                            animate={{ width: step.status === 'Complete' ? '100%' : '65%' }}
                            transition={{ duration: 2, ease: 'easeInOut' }}
                          />
                        </Box>
                      )}
                    </Stack>
                  </Box>
                ))}
              </Stack>
            </Stack>

            {/* Automation Running Indicator */}
            <Box
              as={motion.div}
              position="absolute"
              top="3"
              right="3"
              display="flex"
              alignItems="center"
              gap={2}
              bg="bg-deep-graphite/90"
              // eslint-disable-next-line gridpilot-rules/component-classification
              className="backdrop-blur-sm"
              px={3}
              py={2}
              rounded="full"
              border
              borderWidth="2px"
              borderColor="border-primary-blue/40"
              animate={shouldReduceMotion ? {} : {
                boxShadow: [
                  '0 0 12px rgba(25,140,255,0.3)',
                  '0 0 20px rgba(25,140,255,0.5)',
                  '0 0 12px rgba(25,140,255,0.3)'
                ]
              }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              <Box
                as={motion.div}
                h={{ base: 2.5, md: 3 }}
                w={{ base: 2.5, md: 3 }}
                bg="bg-primary-blue"
                rounded="full"
                animate={shouldReduceMotion ? {} : {
                  opacity: [1, 0.5, 1]
                }}
                transition={{ duration: 1.5, repeat: Infinity }}
              />
              <Text size={{ base: 'xs', md: 'sm' }} color="text-primary-blue" weight="medium">Running</Text>
            </Box>
          </Box>

          {/* One-Click Action - Enhanced */}
          <Box
            as={motion.div}
            variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
            display="flex"
            flexDirection="col"
            alignItems="center"
            gap={{ base: 2, md: 3 }}
          >
            <Box
              as={motion.div}
              bg="bg-primary-blue/20"
              color="text-primary-blue"
              px={8}
              py={4}
              rounded="lg"
              border
              borderWidth="2px"
              borderColor="border-primary-blue/40"
              cursor="pointer"
              whileHover={shouldReduceMotion ? {} : {
                scale: 1.03,
                boxShadow: '0 4px 24px rgba(25,140,255,0.3)',
                transition: { duration: 0.15 }
              }}
            >
              <Text size={{ base: 'base', md: 'lg' }} weight="semibold">Create Session</Text>
            </Box>
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              color="text-white" 
              opacity={0.4}
            >
              One click. All fields automated.
            </Text>
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}
