import { Box, Heading, Text, VStack, HStack } from '@chakra-ui/react';
import DashboardCard from '@/components/pages/welcome/DashboardCard';
import FadeInWrapper from '@/components/system/layout/FadeInWrapper';
import { useState, useEffect } from 'react';
import ConnectionConfigModal from '@/components/pages/welcome/ConnectionConfigModal';
import ConfigureCard from '@/components/pages/welcome/ConfigureCard';
import ConfigTool from '@/libs/config/ConfigTool';

/**
 * 欢迎页面内容
 * @returns {JSX.Element}
 * @constructor
 */
const WelcomeContent = () => {
  const [showConfigModal, setShowConfigModal] = useState(false);
  const [isConfigured, setIsConfigured] = useState(false);
  //const [showAlert, setShowAlert] = useState(false);

  useEffect(() => {
    const saved = ConfigTool.load();
    if (saved) {
      setIsConfigured(true);
    }
  }, []);

  const handleSave = () => {
    setIsConfigured(true);
    //setShowAlert(false);
  };

  const handleConfigureClick = () => {
    if (!isConfigured) {
      //setShowAlert(true);
    }
    setShowConfigModal(true);
  };

  return (
    <>
      <VStack spacing={10} py={200} align={'center'} px={4}>
        <FadeInWrapper delay={0.2} yOffset={-5}>
          <Box textAlign={'center'}>
            <Heading size={'6xl'} fontWeight={'black'} color={'teal.300'}>
              智能网络交换机
              <br />
              管理系统
            </Heading>
          </Box>
        </FadeInWrapper>
        <FadeInWrapper delay={0.3} yOffset={-5}>
          <Box textAlign={'center'}>
            <Text mt={6} fontSize={'2xl'} color={'gray.300'}>
              助力大型网络交换机配置及网络流量管理，方便的管控网络，让网络配置不再困难
            </Text>
          </Box>
        </FadeInWrapper>

        <FadeInWrapper delay={0.4} yOffset={-5}>
          <HStack spacing={6}>
            <DashboardCard isConfigured={isConfigured} />
            <ConfigureCard onClick={handleConfigureClick} />
          </HStack>
        </FadeInWrapper>
      </VStack>

      <ConnectionConfigModal
        isOpen={showConfigModal}
        onClose={() => setShowConfigModal(false)}
        onSave={handleSave}
      />
    </>
  );
};

export default WelcomeContent;
