import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { Box, Button, HStack, Switch, Text } from '@chakra-ui/react';
import web from '@/resources/icon/pages/weclome/web.svg';
import githubIcon from '@/resources/icon/pages/weclome/github.svg';
import FadeInWrapper from '@/components/system/layout/FadeInWrapper';
import MotionCard from '@/components/ui/MotionCard';
import ConfigTool from '@/libs/config/ConfigTool';
import Notification from '@/libs/system/Notification';

const navItems = [
  { label: '面板', path: '/dashboard' },
  { label: '网络扫描', path: '/dashboard/scan' },
  { label: '交换机设备', path: '/dashboard/devices' },
  { label: '交换机配置', path: '/dashboard/config' },
  { label: '流量监控', path: '/dashboard/watch' },
];

/**
 * 导航栏&github按钮组件
 * @returns {JSX.Element}
 * @constructor
 */
const GithubTransitionCard = () => {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  const isDashboard = pathname.startsWith('/dashboard');
  const [showNavButtons, setShowNavButtons] = useState(false);
  const [testMode, setTestMode] = useState(false);

  useEffect(() => {
    setShowNavButtons(false);
    const timer = setTimeout(() => {
      if (isDashboard) setShowNavButtons(true);
    }, 400);
    return () => clearTimeout(timer);
  }, [isDashboard]);

  useEffect(() => {
    const config = ConfigTool.load();
    setTestMode(config.testMode);
  }, []);

  const handleTestModeToggle = (checked) => {
    console.log(`切换测试模式..`);
    setTestMode(checked);
    const config = ConfigTool.load();
    ConfigTool.save({ ...config, testMode: checked });
    let mode = checked ? '调试模式' : '常规模式';
    Notification.success({
      title: `成功切换至${mode}!`,
    });
  };

  const MotionBox = motion(Box);
  return (
    <AnimatePresence mode={'wait'}>
      <MotionBox
        key={isDashboard ? 'dashboard' : 'welcome'}
        initial={{ opacity: 0, height: 'auto', width: isDashboard ? 200 : 'auto' }}
        animate={{
          opacity: 1,
          height: isDashboard ? 64 : 'auto',
          width: isDashboard ? '100%' : 'fit-content',
        }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.4, ease: 'easeInOut' }}
        style={{
          position: 'fixed',
          top: 10,
          left: isDashboard ? 0 : 'auto',
          right: isDashboard ? 0 : 16,
          zIndex: 999,
          padding: isDashboard ? '0 16px' : 0,
        }}
      >
        <FadeInWrapper delay={0.1} yOffset={-10}>
          <MotionCard
            icon={isDashboard ? web : githubIcon}
            text={isDashboard ? '控制台导航栏' : 'Github'}
            hasBlurBackground
            onClick={() => {
              if (!isDashboard) {
                window.open('https://github.com/Jerryplusy/AI-powered-switches', '_blank');
              }
            }}
            justifyContent={isDashboard ? 'flex-start' : 'center'}
            alignItems={'center'}
            flexDirection={'row'}
            w={'100%'}
            px={isDashboard ? 4 : 3}
            py={isDashboard ? 3 : 2}
            disableHover={isDashboard}
          >
            {isDashboard && showNavButtons && (
              <>
                <HStack spacing={4} ml={'auto'}>
                  {navItems.map((item) => (
                    <Button
                      key={item.path}
                      size={'sm'}
                      variant={'ghost'}
                      color={'white'}
                      _hover={{
                        color: 'teal.300',
                        background: 'transparent',
                      }}
                      onClick={(e) => {
                        e.stopPropagation();
                        navigate(item.path);
                      }}
                    >
                      {item.label}
                    </Button>
                  ))}
                  <HStack spacing={4} ml={'right'}>
                    <Text fontSize={'sm'} color={'white'}>
                      {'调试模式'}
                    </Text>
                    <Switch.Root
                      size={'sm'}
                      checked={testMode}
                      onCheckedChange={(details) => handleTestModeToggle(details.checked)}
                      colorPalette={'teal'}
                      zIndex={100}
                    >
                      <Switch.HiddenInput />
                      <Switch.Control>
                        <Switch.Thumb />
                      </Switch.Control>
                    </Switch.Root>
                  </HStack>
                </HStack>
              </>
            )}
          </MotionCard>
        </FadeInWrapper>
      </MotionBox>
    </AnimatePresence>
  );
};
// TODO 解决组件重复渲染问题
export default GithubTransitionCard;
