import React from 'react';
import {
  Box,
  VStack,
  HStack,
  Text,
  Button,
  Link,
  Icon,
  Divider,
  useColorModeValue,
  Badge,
} from '@chakra-ui/react';
import {
  FiExternalLink,
  FiSettings,
  FiUsers,
  FiFileText,
  FiVideo,
  FiImage,
  FiCalendar,
  FiTag,
  FiShoppingCart,
  FiMail,
} from 'react-icons/fi';

interface AdminLink {
  label: string;
  url: string;
  icon: any;
  description?: string;
  badge?: string;
}

interface ContextualAdminLinksProps {
  elementName: string;
}

const ContextualAdminLinks: React.FC<ContextualAdminLinksProps> = ({ elementName }) => {
  const bgColor = useColorModeValue('blue.50', 'blue.900');
  const borderColor = useColorModeValue('blue.200', 'blue.700');

  const getLinksForElement = (element: string): AdminLink[] => {
    const links: Record<string, AdminLink[]> = {
      hero: [
        { label: 'Manage Articles', url: '/admin/articles', icon: FiFileText, description: 'Edit featured articles' },
        { label: 'Upload Images', url: '/admin/media', icon: FiImage, description: 'Manage hero images' },
      ],
      news: [
        { label: 'Manage Articles', url: '/admin/articles', icon: FiFileText, description: 'Create and edit news' },
        { label: 'Categories', url: '/admin/categories', icon: FiTag, description: 'Organize article categories' },
        { label: 'Article Settings', url: '/admin/settings/articles', icon: FiSettings, description: 'Configure display options' },
      ],
      matches: [
        { label: 'Manage Matches', url: '/admin/matches', icon: FiCalendar, description: 'Schedule and edit matches' },
        { label: 'Match Settings', url: '/admin/settings/matches', icon: FiSettings, description: 'Configure match display' },
      ],
      table: [
        { label: 'Update Table', url: '/admin/table', icon: FiSettings, description: 'Refresh league standings' },
        { label: 'Team Settings', url: '/admin/settings/team', icon: FiSettings },
      ],
      team: [
        { label: 'Manage Players', url: '/admin/team/players', icon: FiUsers, description: 'Add and edit players' },
        { label: 'Team Settings', url: '/admin/settings/team', icon: FiSettings, description: 'Configure team display' },
      ],
      videos: [
        { label: 'Manage Videos', url: '/admin/videos', icon: FiVideo, description: 'Add YouTube videos' },
        { label: 'Video Settings', url: '/admin/settings/videos', icon: FiSettings, description: 'Configure video player' },
      ],
      gallery: [
        { label: 'Gallery Settings', url: '/admin/settings/gallery', icon: FiImage, description: 'Set gallery URL' },
      ],
      merch: [
        { label: 'Fanshop Settings', url: '/admin/settings/fanshop', icon: FiShoppingCart, description: 'Configure merchandise' },
      ],
      newsletter: [
        { label: 'Newsletter Settings', url: '/admin/settings/newsletter', icon: FiMail, description: 'Email configuration' },
        { label: 'Subscribers', url: '/admin/newsletter/subscribers', icon: FiUsers, description: 'View subscribers' },
      ],
      sponsors: [
        { label: 'Manage Sponsors', url: '/admin/sponsors', icon: FiImage, description: 'Add and edit sponsors' },
      ],
    };

    return links[element] || [
      { label: 'Admin Dashboard', url: '/admin', icon: FiSettings, description: 'Go to admin panel' },
    ];
  };

  const links = getLinksForElement(elementName);

  return (
    <Box>
      <VStack align="stretch" spacing={3}>
        <HStack>
          <Icon as={FiExternalLink} color="blue.500" />
          <Text fontSize="xs" fontWeight="bold" color="gray.500" textTransform="uppercase">
            Quick Admin Links
          </Text>
        </HStack>

        <Box
          p={3}
          borderRadius="md"
          bg={bgColor}
          border="1px"
          borderColor={borderColor}
        >
          <VStack align="stretch" spacing={2} divider={<Divider />}>
            {links.map((link, index) => (
              <Link
                key={index}
                href={link.url}
                _hover={{ textDecoration: 'none' }}
                isExternal
              >
                <HStack
                  p={2}
                  borderRadius="md"
                  transition="all 0.2s"
                  _hover={{
                    bg: useColorModeValue('white', 'gray.800'),
                    transform: 'translateX(4px)',
                  }}
                  justify="space-between"
                >
                  <HStack spacing={3} flex={1}>
                    <Icon as={link.icon} boxSize={4} color="blue.500" />
                    <VStack align="start" spacing={0} flex={1}>
                      <Text fontSize="sm" fontWeight="medium">
                        {link.label}
                      </Text>
                      {link.description && (
                        <Text fontSize="xs" color="gray.500">
                          {link.description}
                        </Text>
                      )}
                    </VStack>
                  </HStack>
                  
                  {link.badge && (
                    <Badge colorScheme="green" fontSize="xs">
                      {link.badge}
                    </Badge>
                  )}
                  
                  <Icon as={FiExternalLink} boxSize={3} color="gray.400" />
                </HStack>
              </Link>
            ))}
          </VStack>
        </Box>

        <Text fontSize="xs" color="gray.500" textAlign="center">
          💡 These links help you manage content for this section
        </Text>
      </VStack>
    </Box>
  );
};

export default ContextualAdminLinks;
