'use client';

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

export function RaceHistoryMockup() {
  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);
  }, []);

  const itemVariants = {
    hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 },
    visible: { opacity: 1, scale: 1 }
  };

  // Simple, elegant mobile version - just the core story
  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="hidden"
          animate="visible"
          variants={{
            visible: { transition: { staggerChildren: 0.12 } }
          }}
          w="full"
          maxWidth="xs"
        >
          <Stack gap={4}>
            {/* Race result - clean and simple */}
            <Box as={motion.div} variants={itemVariants}>
              <Box bg="bg-iron-gray/60" rounded="xl" p={4} border borderWidth="2px" borderColor="border-primary-blue/40">
                <Box display="flex" alignItems="center" gap={3}>
                  <Box h="14" w="14" bg="bg-primary-blue/20" rounded="lg" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                    <Text size="2xl" weight="bold" color="text-primary-blue">P3</Text>
                  </Box>
                  <Box>
                    <Text size="base" weight="semibold" color="text-white" block>Watkins Glen</Text>
                    <Text size="xs" color="text-white" opacity={0.6} block>GT3 Sprint</Text>
                  </Box>
                </Box>
              </Box>
            </Box>

            {/* Simple arrow */}
            <Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
              <Text color="text-primary-blue" size="2xl">↓</Text>
            </Box>

            {/* Updates - minimal */}
            <Box as={motion.div} variants={itemVariants}>
              <Box bg="bg-iron-gray/40" rounded="xl" p={3} border borderColor="border-charcoal-outline">
                <Stack gap={2}>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-white" 
                    opacity={0.7} 
                    textAlign="center" 
                    mb={2} 
                    block
                  >
                    Profile Updated
                  </Text>
                  <Box display="flex" gap={2}>
                    <Box flexGrow={1} bg="bg-deep-graphite/50" rounded="sm" py={2} textAlign="center" border borderColor="border-primary-blue/30">
                      <Text size="xs" color="text-primary-blue" weight="semibold" block>Stats ↑</Text>
                    </Box>
                    <Box flexGrow={1} bg="bg-deep-graphite/50" rounded="sm" py={2} textAlign="center" border borderColor="border-performance-green/30">
                      <Text size="xs" color="text-performance-green" weight="semibold" block>+12</Text>
                    </Box>
                  </Box>
                </Stack>
              </Box>
            </Box>
          </Stack>
        </Box>
      </Box>
    );
  }

  // Desktop version - richer with more updates
  return (
    <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
      <Box
        as={motion.div}
        initial="hidden"
        animate="visible"
        variants={{
          visible: { transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 } }
        }}
      >
        <Stack gap={{ base: 2, sm: 3, md: 4, lg: 5 }}>
          {/* Race Result Card - Enhanced */}
          <Box as={motion.div} variants={itemVariants}>
            <Box bg="bg-iron-gray" rounded="lg" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderWidth="2px" borderColor="border-primary-blue/40">
              <Box display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
                <Box position="relative" h={{ base: 12, sm: 14, md: 16, lg: 20 }} w={{ base: 12, sm: 14, md: 16, lg: 20 }} bg="bg-charcoal-outline" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" overflow="hidden" flexShrink={0}>
                  <Box position="absolute" inset="0" bg="bg-gradient-to-br from-primary-blue/20 to-performance-green/20" />
                  <Box position="absolute" inset="0" display="flex" alignItems="center" justifyContent="center">
                    <Text color="text-white" size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold">P3</Text>
                  </Box>
                </Box>
                <Box flexGrow={1} minWidth="0">
                  <Box display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }} mb={1}>
                    <Text size={{ base: 'sm', sm: 'base', md: 'lg' }}>🏁</Text>
                    <Heading level={3} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="semibold" color="text-white" truncate>Watkins Glen</Heading>
                  </Box>
                  <Text size={{ base: 'xs', sm: 'sm', md: 'base' }} color="text-white" opacity={0.6} mb={1} block>GT3 Sprint Race</Text>
                  <Box display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.5}
                    >
                      24 drivers
                    </Text>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.5}
                    >
                      •
                    </Text>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.5}
                    >
                      45 min
                    </Text>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.5}
                    >
                      •
                    </Text>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.5}
                    >
                      Just finished
                    </Text>
                  </Box>
                </Box>
              </Box>
            </Box>
          </Box>

          {/* Connection Flow with Animation */}
          <Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
            <Box
              as={motion.div}
              display="flex"
              flexDirection="col"
              alignItems="center"
              gap={1}
              animate={shouldReduceMotion ? {} : {
                y: [0, 5, 0]
              }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              <Text color="text-primary-blue" size={{ base: '2xl', sm: '3xl', md: '4xl' }}>↓</Text>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-primary-blue" 
                opacity={0.7}
              >
                Auto-sync
              </Text>
            </Box>
          </Box>

          {/* Profile Updates Grid - More detailed */}
          <Box as={motion.div} variants={itemVariants}>
            <Box bg="bg-iron-gray/80" rounded="lg" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderColor="border-charcoal-outline">
              <Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" opacity={0.8} textAlign="center" mb={{ base: 2, sm: 3, md: 4 }} block>
                Profile Updates
              </Text>
              
              <Box display="grid" gridCols={2} gap={{ base: 2, sm: 3, md: 4 }}>
                {/* Career Stats Update */}
                <Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-primary-blue/30">
                  <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.7}
                    >
                      Career Stats
                    </Text>
                    <Box
                      as={motion.span}
                      color="text-performance-green"
                      weight="semibold"
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                      animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                      transition={{ duration: 0.5, delay: 0.5 }}
                    >
                      ↑
                    </Box>
                  </Box>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '9px' }} 
                    color="text-white" 
                    opacity={0.5} 
                    block
                  >
                    Wins: 24 → 25
                  </Text>
                </Box>

                {/* Rating Update */}
                <Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-performance-green/30">
                  <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.7}
                    >
                      Rating
                    </Text>
                    <Box
                      as={motion.span}
                      color="text-performance-green"
                      weight="semibold"
                      font="mono"
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                      animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                      transition={{ duration: 0.5, delay: 0.6 }}
                    >
                      +12
                    </Box>
                  </Box>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '9px' }} 
                    color="text-white" 
                    opacity={0.5} 
                    block
                  >
                    1342 → 1354
                  </Text>
                </Box>

                {/* Season Points Update */}
                <Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-warning-amber/30">
                  <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.7}
                    >
                      Season
                    </Text>
                    <Box
                      as={motion.span}
                      color="text-warning-amber"
                      weight="semibold"
                      font="mono"
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                      animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                      transition={{ duration: 0.5, delay: 0.7 }}
                    >
                      +18
                    </Box>
                  </Box>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '9px' }} 
                    color="text-white" 
                    opacity={0.5} 
                    block
                  >
                    248 → 266 pts
                  </Text>
                </Box>

                {/* Team Points Update */}
                <Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-neon-aqua/30">
                  <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-white" 
                      opacity={0.7}
                    >
                      Team
                    </Text>
                    <Box
                      as={motion.span}
                      color="text-neon-aqua"
                      weight="semibold"
                      font="mono"
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                      animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
                      transition={{ duration: 0.5, delay: 0.8 }}
                    >
                      +18
                    </Box>
                  </Box>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '9px' }} 
                    color="text-white" 
                    opacity={0.5} 
                    block
                  >
                    Contributing
                  </Text>
                </Box>
              </Box>
            </Box>
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}