'use client';

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

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 (
      <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
        <Stack
          as={motion.div}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          w="full"
        >
          <Stack gap={4}>
            {/* Simple progress indicator */}
            <Stack bg="panel-gray/60" rounded="none" p={4} border borderColor="primary-accent/40">
              <Stack display="flex" alignItems="center" gap={3} mb={3}>
                <Stack
                  as={motion.div}
                  h="8"
                  w="8"
                  bg="success-green/20"
                  rounded="none"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  border
                  borderWidth="1px"
                  borderColor="success-green/40"
                  flexShrink={0}
                  animate={shouldReduceMotion ? {} : {
                    scale: [1, 1.05, 1],
                    opacity: [0.6, 1, 0.6]
                  }}
                  transition={{ duration: 1.5, repeat: Infinity }}
                  className="relative"
                >
                  <Stack h="2" w="2" bg="success-green" />
                  <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="success-green" />
                </Stack>
                <Stack>
                  <Text size="sm" color="text-white" weight="bold" block className="uppercase tracking-widest">Creating Session</Text>
                  <Text size="xs" color="text-gray-500" block font="mono">AUTOMATED</Text>
                </Stack>
              </Stack>
              <Stack h="1" fullWidth bg="white/5" rounded="none" overflow="hidden">
                <Stack
                  as={motion.div}
                  h="full"
                  bg="primary-accent"
                  initial={{ width: '0%' }}
                  animate={{ width: '75%' }}
                  transition={{ duration: 2, ease: 'easeInOut' }}
                />
              </Stack>
            </Stack>

            {/* Simple CTA */}
            <Stack display="flex" justifyContent="center">
              <Stack bg="primary-accent/10" color="text-primary-accent" px={6} py={2.5} rounded="none" border borderColor="primary-accent/30">
                <Text size="xs" weight="bold" className="uppercase tracking-[0.2em]">One Click</Text>
              </Stack>
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    );
  }

  // Desktop version - richer with more automation steps
  return (
    <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 3, md: 4, lg: 6 }} overflow="hidden">
      <Stack
        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 */}
          <Stack as={motion.div} variants={{ hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0 } }}>
            <Stack display="flex" alignItems="center" gap={{ base: 2.5, md: 3, lg: 4 }} mb={{ base: 3, md: 4, lg: 5 }}>
              <Stack h={{ base: 10, md: 12, lg: 14 }} w={{ base: 10, md: 12, lg: 14 }} bg="primary-accent/10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" display="flex" alignItems="center" justifyContent="center" className="relative">
                <Stack h={{ base: 6, md: 7, lg: 8 }} w={{ base: 6, md: 7, lg: 8 }} bg="primary-accent/40" />
                <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
                <Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
              </Stack>
              <Stack>
                <Heading level={2} fontSize={{ base: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" className="uppercase tracking-widest">GridPilot Companion</Heading>
                <Text size={{ base: 'xs', md: 'sm', lg: 'base' }} color="text-gray-500" block font="mono">AUTOMATED SESSION CREATOR</Text>
              </Stack>
            </Stack>
          </Stack>

          {/* Browser Automation Visual - Full workflow */}
          <Stack
            as={motion.div}
            variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
            position="relative"
            bg="panel-gray/40"
            rounded="none"
            p={{ base: 3, md: 4, lg: 5 }}
            border
            borderWidth="1px"
            borderColor="border-gray/50"
            overflow="hidden"
          >
            {/* Browser Window Mockup */}
            <Stack gap={{ base: 3, md: 4 }}>
              <Stack display="flex" alignItems="center" gap={{ base: 2, md: 2.5 }} pb={{ base: 3, md: 4 }} borderBottom borderColor="border-gray/30">
                <Stack h="2" w="2" bg="critical-red/40" rounded="none" />
                <Stack h="2" w="2" bg="warning-amber/40" rounded="none" />
                <Stack h="2" w="2" bg="success-green/40" rounded="none" />
                <Stack flexGrow={1} h="4" bg="graphite-black" rounded="none" ml={2} px={2} display="flex" alignItems="center" border borderColor="border-gray/30">
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '8px' }} 
                    color="text-gray-500" 
                    font="mono"
                  >
                    members.iracing.com
                  </Text>
                </Stack>
              </Stack>
              
              {/* 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) => (
                  <Stack
                    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}>
                      <Stack display="flex" alignItems="center" gap={{ base: 2.5, md: 3 }}>
                        <Stack
                          as={motion.div}
                          h={{ base: 7, md: 8, lg: 9 }}
                          w={{ base: 7, md: 8, lg: 9 }}
                          rounded="none"
                          display="flex"
                          alignItems="center"
                          justifyContent="center"
                          flexShrink={0}
                          border
                          borderWidth="1px"
                          bg={
                            step.status === 'Complete'
                              ? 'success-green/10'
                              : step.status === 'Running'
                              ? 'primary-accent/10'
                              : 'transparent'
                          }
                          borderColor={
                            step.status === 'Complete'
                              ? 'success-green/40'
                              : step.status === 'Running'
                              ? 'primary-accent/40'
                              : 'border-gray/30'
                          }
                          animate={shouldReduceMotion ? {} : step.status === 'Running' ? {
                            opacity: [0.4, 1, 0.4]
                          } : {}}
                          transition={{ duration: 1.5, repeat: Infinity }}
                        >
                          {step.status === 'Complete' && (
                            <Stack w="2" h="2" bg="success-green" />
                          )}
                          {step.status === 'Running' && (
                            <Stack h="2" w="2" bg="primary-accent" />
                          )}
                          {step.status === 'Pending' && (
                            <Stack h="1" w="1" bg="gray-700" />
                          )}
                        </Stack>
                        <Stack flexGrow={1}>
                          <Text size={{ base: 'sm', md: 'base' }} color="text-white" weight="bold" block className="uppercase tracking-widest">{step.label}</Text>
                          <Text size="xs" color="text-gray-500" block font="mono">{step.detail.toUpperCase()}</Text>
                        </Stack>
                      </Stack>
                      {step.status !== 'Pending' && (
                        <Stack h="1" fullWidth bg="white/5" rounded="none" overflow="hidden" ml={{ base: 9, md: 10, lg: 11 }}>
                          <Stack
                            as={motion.div}
                            h="full"
                            bg={step.status === 'Complete' ? 'success-green/60' : 'primary-accent/60'}
                            initial={{ width: '0%' }}
                            animate={{ width: step.status === 'Complete' ? '100%' : '65%' }}
                            transition={{ duration: 2, ease: 'easeInOut' }}
                          />
                        </Stack>
                      )}
                    </Stack>
                  </Stack>
                ))}
              </Stack>
            </Stack>

            {/* Automation Running Indicator */}
            <Stack
              as={motion.div}
              position="absolute"
              top="3"
              right="3"
              display="flex"
              alignItems="center"
              gap={2}
              bg="graphite-black"
              px={3}
              py={1.5}
              rounded="none"
              border
              borderWidth="1px"
              borderColor="primary-accent/40"
              animate={shouldReduceMotion ? {} : {
                boxShadow: [
                  '0 0 8px rgba(25,140,255,0.2)',
                  '0 0 15px rgba(25,140,255,0.4)',
                  '0 0 8px rgba(25,140,255,0.2)'
                ]
              }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              <Stack
                as={motion.div}
                h="1.5"
                w="1.5"
                bg="primary-accent"
                animate={shouldReduceMotion ? {} : {
                  opacity: [1, 0.3, 1]
                }}
                transition={{ duration: 1.5, repeat: Infinity }}
              />
              <Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-widest">Running</Text>
            </Stack>
          </Stack>

          {/* One-Click Action - Enhanced */}
          <Stack
            as={motion.div}
            variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
            display="flex"
            flexDirection="col"
            alignItems="center"
            gap={3}
          >
            <Stack
              as={motion.div}
              bg="primary-accent/10"
              color="text-primary-accent"
              px={8}
              py={3}
              rounded="none"
              border
              borderWidth="1px"
              borderColor="primary-accent/40"
              cursor="pointer"
              whileHover={shouldReduceMotion ? {} : {
                scale: 1.02,
                borderColor: '#198CFF',
                transition: { duration: 0.15 }
              }}
              className="relative"
            >
              <Text size="sm" weight="bold" className="uppercase tracking-[0.2em]">Create Session</Text>
              <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
              <Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
            </Stack>
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              color="text-gray-500" 
              font="mono"
              className="uppercase tracking-widest"
            >
              One click. All fields automated.
            </Text>
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}