'use client';

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

export function LeagueDiscoveryMockup() {
  const shouldReduceMotion = useReducedMotion();
  const [, 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 (
      <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
        <Stack mb={3}>
          <Stack h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
          <Stack display="flex" gap={2} flexWrap="wrap">
            {['Game', 'Region'].map((filter) => (
              <Stack
                key={filter}
                h="5"
                px={3}
                bg="panel-gray"
                border
                borderColor="primary-accent/30"
                rounded="none"
                display="flex"
                alignItems="center"
              >
                <Stack h="1" w="8" bg="white/10" rounded="none" />
              </Stack>
            ))}
          </Stack>
        </Stack>

        <Stack gap={2}>
          {leagues.map((league) => (
            <Stack
              key={league.name}
              bg="panel-gray/40"
              border
              borderColor="border-gray/50"
              rounded="none"
              p={3}
            >
              <Stack display="flex" alignItems="start" justifyContent="between" mb={2}>
                <Stack display="flex" alignItems="center" gap={2}>
                  <Stack h="10" w="10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center">
                    <Text size="xl">{league.icon}</Text>
                  </Stack>
                  <Stack>
                    <Stack h="1.5" w="32" bg="white/10" rounded="none" mb={1.5} />
                    <Stack display="flex" gap={1}>
                      <Stack as="span" px={1.5} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
                        <Text size="xs" color="text-primary-accent" weight="bold" font="mono">{league.carClass}</Text>
                      </Stack>
                    </Stack>
                  </Stack>
                </Stack>
              </Stack>

              <Stack display="flex" alignItems="center" justifyContent="between">
                <Text size="xs" color="text-gray-500" font="mono">{league.drivers} DRIVERS • {league.schedule.toUpperCase()}</Text>
                <Stack px={2} py={0.5} bg="primary-accent" rounded="none">
                  <Text size="xs" color="text-white" weight="bold">JOIN</Text>
                </Stack>
              </Stack>
            </Stack>
          ))}
        </Stack>
      </Stack>
    );
  }

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

  const cardVariants = {
    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
    visible: {
      opacity: 1,
      x: 0,
      transition: { duration: 0.4 }
    }
  };

  return (
    <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
      <Stack
        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 }}
      >
        <Stack h="2" w="48" bg="white/10" rounded="none" mb={4} />
        
        <Stack display="flex" gap={2} flexWrap="wrap">
          {['Game', 'Region', 'Skill'].map((filter, i) => (
            <Stack
              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="6"
              px={4}
              bg="panel-gray"
              border
              borderColor="primary-accent/30"
              rounded="none"
              display="flex"
              alignItems="center"
            >
              <Stack h="1" w="10" bg="white/10" rounded="none" />
            </Stack>
          ))}
        </Stack>
      </Stack>

      <Stack
        as={motion.div}
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <Stack gap={2}>
          {leagues.map((league, index) => (
            <Stack
              key={league.name}
              as={motion.div}
              variants={cardVariants}
              onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
              onHoverEnd={() => setHoveredIndex(null)}
              whileHover={shouldReduceMotion ? {} : {
                x: 4,
                borderColor: '#198CFF30',
                transition: { duration: 0.2 }
              }}
              bg="panel-gray/20"
              border
              borderColor="border-gray/50"
              rounded="none"
              p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
            >
              <Stack display="flex" alignItems="start" justifyContent="between" mb={3}>
                <Stack display="flex" alignItems="center" gap={3}>
                  <Stack h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center" className="relative">
                    <Text size={{ base: 'base', sm: 'lg', md: 'xl', lg: '2xl' }}>{league.icon}</Text>
                    <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
                  </Stack>
                  <Stack>
                    <Stack h="2" w="40" bg="white/10" rounded="none" mb={2} />
                    <Stack display="flex" gap={2}>
                      <Stack as="span" px={2} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
                        <Text 
                          // eslint-disable-next-line gridpilot-rules/component-classification
                          style={{ fontSize: '10px' }} 
                          color="text-primary-accent"
                          weight="bold"
                          font="mono"
                        >
                          {league.carClass}
                        </Text>
                      </Stack>
                      <Stack as="span" px={2} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
                        <Text 
                          // eslint-disable-next-line gridpilot-rules/component-classification
                          style={{ fontSize: '10px' }} 
                          color="text-telemetry-aqua"
                          weight="bold"
                          font="mono"
                        >
                          {league.region}
                        </Text>
                      </Stack>
                    </Stack>
                  </Stack>
                </Stack>
              </Stack>

              <Stack display="flex" alignItems="center" justifyContent="between">
                <Stack display="flex" alignItems="center" gap={4}>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-500"
                    font="mono"
                    weight="bold"
                  >
                    {league.drivers} DRIVERS
                  </Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-500"
                    font="mono"
                    weight="bold"
                  >
                    {league.schedule.toUpperCase()}
                  </Text>
                </Stack>
                
                <Stack display="flex" gap={2}>
                  <Stack
                    as={motion.button}
                    whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
                    px={3}
                    py={1}
                    bg="primary-accent"
                    color="text-white"
                    rounded="none"
                  >
                    <Text 
                      // eslint-disable-next-line gridpilot-rules/component-classification
                      style={{ fontSize: '10px' }}
                      weight="bold"
                    >
                      JOIN
                    </Text>
                  </Stack>
                </Stack>
              </Stack>
            </Stack>
          ))}
        </Stack>
      </Stack>
    </Stack>
  );
}