'use client';

import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';

export function SimPlatformMockup() {
  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 cross-platform
  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">
        <Stack gap={3} w="full">
          {/* Active Platform - Clean */}
          <Box bg="bg-iron-gray/60" border borderWidth="2px" borderColor="border-primary-blue" rounded="xl" p={4} position="relative">
            <Box position="absolute" top="3" right="3">
              <Box w="2" h="2" rounded="full" bg="bg-performance-green" 
                // eslint-disable-next-line gridpilot-rules/component-classification
                className="animate-pulse" 
              />
            </Box>
            <Box display="flex" alignItems="center" gap={3}>
              <Box w="12" h="12" rounded="lg" bg="bg-primary-blue/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
                <Text size="2xl" weight="bold" color="text-primary-blue">iR</Text>
              </Box>
              <Box>
                <Text size="base" weight="semibold" color="text-white" block>iRacing</Text>
                <Text size="xs" color="text-performance-green" block>Active</Text>
              </Box>
            </Box>
          </Box>
          
          {/* Simple "more coming" indicator */}
          <Box bg="bg-iron-gray/30" rounded="xl" p={3} border borderColor="border-charcoal-outline/50">
            <Text size="xs" textAlign="center" color="text-slate-500" block>More platforms coming</Text>
          </Box>
        </Stack>
      </Box>
    );
  }

  // Desktop version
  return (
    <Box position="relative" fullWidth maxWidth="3xl" mx="auto">
      <Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} shadow="2xl">
        <Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
          <Box display="flex" alignItems="center" justifyContent="between" pb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderBottom borderColor="border-charcoal-outline">
            <Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-300">Platform Support</Text>
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              color="text-slate-500"
            >
              Active: 1 | Planned: 3
            </Text>
          </Box>
          
          <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
            {/* iRacing - Active */}
            <Box bg="bg-deep-graphite" border borderWidth="2px" borderColor="border-primary-blue" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} position="relative" overflow="hidden">
              <Box position="absolute" top={{ base: 1, sm: 1.5, md: 2 }} right={{ base: 1, sm: 1.5, md: 2 }}>
                <Box w={{ base: 1, sm: 1.5, md: 2 }} h={{ base: 1, sm: 1.5, md: 2 }} rounded="full" bg="bg-performance-green" 
                  // eslint-disable-next-line gridpilot-rules/component-classification
                  className="animate-pulse" 
                />
              </Box>
              <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-primary-blue/10" display="flex" alignItems="center" justifyContent="center">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-primary-blue">iR</Text>
                </Box>
                <Box>
                  <Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" block>iRacing</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-performance-green" 
                    block
                  >
                    Active
                  </Text>
                </Box>
              </Box>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-slate-400" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
              >
                Full integration
              </Text>
            </Box>

            {/* ACC - Future */}
            <Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
              <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">AC</Text>
                </Box>
                <Box>
                  <Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>ACC</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-slate-600" 
                    block
                  >
                    Planned
                  </Text>
                </Box>
              </Box>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-slate-600" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
              >
                Coming later
              </Text>
            </Box>

            {/* rFactor 2 - Future */}
            <Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
              <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">rF</Text>
                </Box>
                <Box>
                  <Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>rFactor 2</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-slate-600" 
                    block
                  >
                    Planned
                  </Text>
                </Box>
              </Box>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-slate-600" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
              >
                Coming later
              </Text>
            </Box>

            {/* LMU - Future */}
            <Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
              <Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">LM</Text>
                </Box>
                <Box>
                  <Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>Le Mans Ult.</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-slate-600" 
                    block
                  >
                    Planned
                  </Text>
                </Box>
              </Box>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-slate-600" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
              >
                Coming later
              </Text>
            </Box>
          </Box>

          <Box pt={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderTop borderColor="border-charcoal-outline">
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              color="text-slate-500" 
              textAlign="center" 
              block
            >
              Your identity stays with you across platforms
            </Text>
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}