'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';

export function LeagueDiscoveryMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [isMobile, setIsMobile] = useState(false);

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

  const leagues = [
    {
      name: 'Championship Series',
      carClass: 'GT3',
      region: 'EU',
      skill: '2.5k iRating',
      drivers: 48,
      schedule: 'Wed 20:00 CET',
      rating: 4.8,
      icon: '🏁'
    },
    {
      name: 'Touring Car Challenge',
      carClass: 'TCR',
      region: 'NA',
      skill: 'Open skill',
      drivers: 32,
      schedule: 'Sat 18:00 EST',
      rating: 4.6,
      icon: '🏎️'
    }
  ];

  if (isMobile) {
    return (
      <Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
        <Box mb={3}>
          <Box h="4" w="40" bg="bg-white/10" rounded="sm" mb={3} />
          <Box display="flex" gap={2} flexWrap="wrap">
            {['Game', 'Region'].map((filter) => (
              <Box
                key={filter}
                h="6"
                px={3}
                bg="bg-charcoal-outline"
                border
                borderColor="border-primary-blue/30"
                rounded="full"
                display="flex"
                alignItems="center"
              >
                <Box h="1.5" w="10" bg="bg-white/10" rounded="sm" />
              </Box>
            ))}
          </Box>
        </Box>

        <Stack gap={3}>
          {leagues.map((league) => (
            <Box
              key={league.name}
              bg="bg-iron-gray/80"
              border
              borderColor="border-charcoal-outline"
              rounded="lg"
              p={3}
            >
              <Box display="flex" alignItems="start" justifyContent="between" mb={2}>
                <Box display="flex" alignItems="center" gap={2}>
                  <Box h="10" w="10" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center">
                    <Text size="xl">{league.icon}</Text>
                  </Box>
                  <Box>
                    <Box h="3" w="32" bg="bg-white/10" rounded="sm" mb={1} />
                    <Box display="flex" gap={1}>
                      <Box as="span" px={1.5} py={0.5} bg="bg-primary-blue/20" rounded="sm">
                        <Text size="xs" color="text-primary-blue">{league.carClass}</Text>
                      </Box>
                      <Box as="span" px={1.5} py={0.5} bg="bg-neon-aqua/20" rounded="sm">
                        <Text size="xs" color="text-neon-aqua">{league.region}</Text>
                      </Box>
                    </Box>
                  </Box>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
                <Box display="flex" alignItems="center" gap={2}>
                  <Text size="xs" color="text-gray-400">{league.drivers} drivers</Text>
                  <Text size="xs" color="text-gray-400">•</Text>
                  <Text size="xs" color="text-gray-400">{league.schedule}</Text>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" justifyContent="between">
                <Box display="flex" alignItems="center" gap={1}>
                  {[...Array(5)].map((_, i) => (
                    <Box
                      as="svg"
                      key={i}
                      w="3"
                      h="3"
                      color={i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      className="fill-current"
                      viewBox="0 0 20 20"
                    >
                      {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </Box>
                  ))}
                </Box>
                
                <Box as="button" px={2} py={1} bg="bg-primary-blue" rounded="sm">
                  <Text size="xs" color="text-white">Join</Text>
                </Box>
              </Box>
            </Box>
          ))}
        </Stack>
      </Box>
    );
  }

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
    }
  };

  const cardVariants = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
    }
  };

  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={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
        animate={{ opacity: 1, y: 0 }}
        mb={{ base: 1.5, sm: 3, md: 4, lg: 6 }}
      >
        <Box h={{ base: 3, sm: 4, md: 5, lg: 6 }} w={{ base: 32, sm: 40, md: 52 }} bg="bg-white/10" rounded="sm" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} />
        
        <Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }} flexWrap="wrap">
          {['Game', 'Region', 'Skill'].map((filter, i) => (
            <Box
              key={filter}
              as={motion.div}
              initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: shouldReduceMotion ? 0 : i * 0.1 }}
              h={{ base: 5, sm: 6, md: 7, lg: 8 }}
              px={{ base: 2, sm: 3, md: 4 }}
              bg="bg-charcoal-outline"
              border
              borderColor="border-primary-blue/30"
              rounded="full"
              display="flex"
              alignItems="center"
            >
              <Box h={{ base: 1, sm: 1.5, md: 2 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-white/10" rounded="sm" />
            </Box>
          ))}
        </Box>
      </Box>

      <Box
        as={motion.div}
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
          {leagues.map((league, index) => (
            <Box
              key={league.name}
              as={motion.div}
              variants={cardVariants}
              onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
              onHoverEnd={() => setHoveredIndex(null)}
              whileHover={shouldReduceMotion ? {} : {
                scale: 1.02,
                y: -4,
                transition: { duration: 0.2 }
              }}
              bg="bg-iron-gray/80"
              border
              borderColor="border-charcoal-outline"
              rounded="lg"
              p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
              // eslint-disable-next-line gridpilot-rules/component-classification
              className="backdrop-blur-sm"
            >
              <Box display="flex" alignItems="start" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3 }}>
                <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                  <Box h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_12px_rgba(25,140,255,0.2)">
                    <Text size={{ base: 'base', sm: 'lg', md: 'xl', lg: '2xl' }}>{league.icon}</Text>
                  </Box>
                  <Box>
                    <Box h={{ base: 2.5, sm: 3, md: 4 }} w={{ base: 28, sm: 32, md: 40 }} bg="bg-white/10" rounded="sm" mb={{ base: 1, sm: 1.5, md: 2 }} />
                    <Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
                      <Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-primary-blue/20" rounded="sm">
                        <Text 
                          // eslint-disable-next-line gridpilot-rules/component-classification
                          style={{ fontSize: '10px' }} 
                          color="text-primary-blue"
                        >
                          {league.carClass}
                        </Text>
                      </Box>
                      <Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-neon-aqua/20" rounded="sm">
                        <Text 
                          // eslint-disable-next-line gridpilot-rules/component-classification
                          style={{ fontSize: '10px' }} 
                          color="text-neon-aqua"
                        >
                          {league.region}
                        </Text>
                      </Box>
                      <Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-charcoal-outline" rounded="sm">
                        <Text 
                          // eslint-disable-next-line gridpilot-rules/component-classification
                          style={{ fontSize: '10px' }} 
                          color="text-gray-400"
                        >
                          {league.skill}
                        </Text>
                      </Box>
                    </Box>
                  </Box>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3 }}>
                <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
                  <Box display="flex" alignItems="center" gap={1}>
                    <Box as="svg" w={{ base: 2.5, sm: 3, md: 4 }} h={{ base: 2.5, sm: 3, md: 4 }} color="text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </Box>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-gray-400"
                    >
                      {league.drivers} drivers
                    </Text>
                  </Box>
                  <Box display="flex" alignItems="center" gap={1}>
                    <Box as="svg" w={{ base: 2.5, sm: 3, md: 4 }} h={{ base: 2.5, sm: 3, md: 4 }} color="text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </Box>
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }} 
                      color="text-gray-400"
                    >
                      {league.schedule}
                    </Text>
                  </Box>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" justifyContent="between">
                <Box display="flex" alignItems="center" gap={1}>
                  {[...Array(5)].map((_, i) => (
                    <Box
                      as={motion.svg}
                      key={i}
                      w={{ base: 2.5, sm: 3, md: 4 }}
                      h={{ base: 2.5, sm: 3, md: 4 }}
                      color={i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      className="fill-current"
                      viewBox="0 0 20 20"
                      animate={hoveredIndex === index && !shouldReduceMotion ? {
                        scale: [1, 1.2, 1],
                        transition: { delay: i * 0.05, duration: 0.3 }
                      } : {}}
                    >
                      {/* eslint-disable-next-line gridpilot-rules/component-classification */}
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </Box>
                  ))}
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-400" 
                    ml={1}
                  >
                    {league.rating}
                  </Text>
                </Box>
                
                <Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
                  <Box
                    as={motion.button}
                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                    px={{ base: 1.5, sm: 2, md: 3 }}
                    py={0.5}
                    bg="bg-primary-blue"
                    color="text-white"
                    rounded="sm"
                    transition
                    hoverBg="bg-primary-blue/80"
                  >
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                    >
                      Join
                    </Text>
                  </Box>
                  <Box
                    as={motion.button}
                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
                    whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
                    px={{ base: 1.5, sm: 2, md: 3 }}
                    py={0.5}
                    bg="bg-charcoal-outline"
                    color="text-gray-300"
                    rounded="sm"
                    transition
                    hoverBg="bg-charcoal-outline/80"
                  >
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                    >
                      View
                    </Text>
                  </Box>
                </Box>
              </Box>
            </Box>
          ))}
        </Stack>
      </Box>
    </Box>
  );
}