'use client';

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

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

  useEffect(() => {
    setIsMobile(window.innerWidth < 768);
  }, []);

  if (isMobile) {
    return (
      <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
        <Stack mb={3}>
          <Stack display="flex" alignItems="center" gap={2} pb={2} borderBottom borderColor="border-gray/30">
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              font="mono" 
              color="text-gray-600"
            >
              POS
            </Text>
            <Text size="xs" flexGrow={1} weight="bold" color="text-gray-500" className="uppercase tracking-widest">Driver</Text>
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              font="mono" 
              color="text-gray-600"
            >
              PTS
            </Text>
          </Stack>
        </Stack>

        <Stack gap={1}>
          {[1, 2, 3, 4, 5].map((i) => (
            <Stack
              key={i}
              display="flex"
              alignItems="center"
              gap={2}
              py={2}
              px={2}
              rounded="none"
              border
              bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
              borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
            >
              <Stack
                h="6"
                w="6"
                rounded="none"
                display="flex"
                alignItems="center"
                justifyContent="center"
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }}
                bg={i <= 3 ? 'primary-accent' : 'panel-gray'}
                color={i <= 3 ? 'text-white' : 'text-gray-500'}
                font="mono"
                weight="bold"
              >
                {i}
              </Stack>
              <Stack flexGrow={1} display="flex" alignItems="center" gap={2}>
                <Stack h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
              </Stack>
              <Stack position="relative" w="12" h="4" bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
                <Stack
                  position="absolute"
                  insetY="0"
                  left="0"
                  bg={i <= 3 ? 'primary-accent/40' : 'gray-700/40'}
                  // eslint-disable-next-line gridpilot-rules/component-classification
                  style={{ width: `${100 - (i - 1) * 15}%` }}
                />
                <Stack position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
                  <Text size="xs" font="mono" weight="bold" color="text-white">
                    {300 - i * 20}
                  </Text>
                </Stack>
              </Stack>
            </Stack>
          ))}
        </Stack>
      </Stack>
    );
  }

  const getRowAnimation = (i: number) => ({
    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -10 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        delay: shouldReduceMotion ? 0 : i * 0.05,
        duration: 0.3
      }
    }
  });

  return (
    <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
      <Stack mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
        <Text 
          // eslint-disable-next-line gridpilot-rules/component-classification
          style={{ fontSize: '10px' }} 
          color="text-gray-600" 
          mb={{ base: 1.5, sm: 2, md: 3 }} 
          block
          font="mono"
          uppercase
          className="tracking-widest"
        >
          Real-time standings updated after every race
        </Text>
        <Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-gray/30">
          <Text 
            // eslint-disable-next-line gridpilot-rules/component-classification
            style={{ fontSize: '10px' }} 
            font="mono" 
            color="text-gray-500"
          >
            POS
          </Text>
          <Text 
            // eslint-disable-next-line gridpilot-rules/component-classification
            style={{ fontSize: '10px' }} 
            flexGrow={1} 
            weight="bold" 
            color="text-gray-400"
            className="uppercase tracking-widest"
          >
            Driver
          </Text>
          <Text 
            // eslint-disable-next-line gridpilot-rules/component-classification
            style={{ fontSize: '10px' }} 
            font="mono" 
            color="text-gray-500" 
            className="hidden md:block uppercase tracking-widest"
          >
            Wins
          </Text>
          <Stack display="flex" alignItems="center" gap={1}>
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              font="mono" 
              color="text-gray-500"
              className="uppercase tracking-widest"
            >
              Points
            </Text>
          </Stack>
        </Stack>
      </Stack>

      <Stack gap={1}>
        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
          <Stack
            key={i}
            as={motion.div}
            variants={getRowAnimation(i)}
            initial="hidden"
            animate="visible"
            position="relative"
            display="flex"
            alignItems="center"
            gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
            py={{ base: 1.5, sm: 2, md: 2.5 }}
            px={{ base: 1.5, sm: 2, md: 3 }}
            rounded="none"
            border
            transition
            bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
            borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
            onHoverStart={() => !shouldReduceMotion && setHoveredRow(i)}
            onHoverEnd={() => setHoveredRow(null)}
            whileHover={shouldReduceMotion ? {} : {
              x: 4,
              borderColor: '#198CFF30',
              transition: { duration: 0.15 }
            }}
          >
            <Stack
              as={motion.div}
              h={{ base: 6, sm: 7 }}
              w={{ base: 6, sm: 7 }}
              rounded="none"
              display="flex"
              alignItems="center"
              justifyContent="center"
              weight="bold"
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '11px' }}
              bg={i <= 3 ? 'primary-accent' : 'panel-gray'}
              color={i <= 3 ? 'text-white' : 'text-gray-500'}
              font="mono"
            >
              {i}
            </Stack>
            <Stack flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
              <Stack h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
            </Stack>
            <Stack h="1" w={{ base: 10, sm: 12, md: 16 }} bg="white/5" rounded="none" 
              // eslint-disable-next-line gridpilot-rules/component-classification
              className="hidden md:block" 
            />
            <Stack position="relative">
              <AnimatedPoints
                points={300 - i * 20}
                position={i}
                shouldReduceMotion={shouldReduceMotion ?? false}
              />
            </Stack>
          </Stack>
        ))}
      </Stack>
    </Stack>
  );
}

function AnimatedPoints({
  points,
  position,
  shouldReduceMotion
}: {
  points: number;
  position: number;
  shouldReduceMotion: boolean;
}) {
  const motionValue = useMotionValue(0);
  const spring = useSpring(motionValue, { stiffness: 50, damping: 20 });

  useEffect(() => {
    if (shouldReduceMotion) {
      motionValue.set(points);
    } else {
      setTimeout(() => motionValue.set(points), 100 + position * 50);
    }
  }, [points, position, shouldReduceMotion, motionValue]);

  const percentage = (points / 300) * 100;

  return (
    <Stack position="relative" w={{ base: 12, sm: 16, md: 20, lg: 24 }} h={{ base: 4, sm: 5, md: 6 }} bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
      <Stack
        as={motion.div}
        position="absolute"
        insetY="0"
        left="0"
        bg={position <= 3 ? 'primary-accent/40' : 'gray-700/40'}
        initial={{ width: '0%' }}
        animate={{ width: `${percentage}%` }}
        transition={{ duration: shouldReduceMotion ? 0 : 0.8, ease: 'easeOut', delay: 0.1 + position * 0.05 }}
      />
      <Stack position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
        <Stack as={motion.span} 
          // eslint-disable-next-line gridpilot-rules/component-classification
          style={{ fontSize: '10px' }} 
          font="mono" 
          weight="bold" 
          color="text-white"
        >
          {shouldReduceMotion ? points : <motion.span>{spring}</motion.span>}
        </Stack>
      </Stack>
    </Stack>
  );
}