import React from 'react';
import {
    Box,
    Alert,
    AlertIcon,
    AlertTitle,
    AlertDescription,
    Button,
    VStack,
    Container
} from '@chakra-ui/react';

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null, errorInfo: null };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        this.setState({
            error: error,
            errorInfo: errorInfo
        });
    }

    render() {
        if (this.state.hasError) {
            return (
                <Container maxW="lg" py={20}>
                    <VStack spacing={6}>
                        <Alert status="error" borderRadius="lg" p={6}>
                            <AlertIcon boxSize="24px" />
                            <Box>
                                <AlertTitle fontSize="lg" mb={2}>
                                    页面出现错误！
                                </AlertTitle>
                                <AlertDescription>
                                    页面加载时发生了未预期的错误，请尝试刷新页面。
                                </AlertDescription>
                            </Box>
                        </Alert>

                        {process.env.NODE_ENV === 'development' && (
                            <Box
                                w="100%"
                                bg="gray.50"
                                p={4}
                                borderRadius="lg"
                                fontSize="sm"
                                overflow="auto"
                                maxH="200px"
                            >
                                <Box fontWeight="bold" mb={2}>错误详情:</Box>
                                <Box as="pre" whiteSpace="pre-wrap">
                                    {this.state.error && this.state.error.toString()}
                                    {this.state.errorInfo.componentStack}
                                </Box>
                            </Box>
                        )}

                        <Button
                            colorScheme="blue"
                            onClick={() => window.location.reload()}
                        >
                            重新加载页面
                        </Button>
                    </VStack>
                </Container>
            );
        }

        return this.props.children;
    }
}

export