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

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) {
        // 记录详细的错误日志
        logger.error('ErrorBoundary', 'Component Error Caught', error, {
            componentStack: errorInfo.componentStack,
            errorName: error.name,
            errorMessage: error.message,
            environment: process.env.NODE_ENV,
            stack: error.stack
        });

        // 保存错误信息到 state
        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>
                                    {process.env.NODE_ENV === 'development'
                                        ? '组件渲染时发生错误，请查看下方详情和控制台日志。'
                                        : '页面加载时发生了未预期的错误，请尝试刷新页面。'}
                                </AlertDescription>
                            </Box>
                        </Alert>

                        {/* 开发环境显示详细错误信息 */}
                        {process.env.NODE_ENV === 'development' && this.state.error && (
                            <Box
                                w="100%"
                                bg="red.50"
                                p={4}
                                borderRadius="lg"
                                fontSize="sm"
                                overflow="auto"
                                maxH="400px"
                                border="1px"
                                borderColor="red.200"
                            >
                                <Box fontWeight="bold" mb={2} color="red.700">错误详情:</Box>
                                <Box as="pre" whiteSpace="pre-wrap" color="red.900" fontSize="xs">
                                    <Box fontWeight="bold" mb={1}>{this.state.error.name}: {this.state.error.message}</Box>
                                    {this.state.error.stack && (
                                        <Box mt={2} color="gray.700">{this.state.error.stack}</Box>
                                    )}
                                    {this.state.errorInfo && this.state.errorInfo.componentStack && (
                                        <>
                                            <Box fontWeight="bold" mt={3} mb={1} color="red.700">组件堆栈:</Box>
                                            <Box color="gray.700">{this.state.errorInfo.componentStack}</Box>
                                        </>
                                    )}
                                </Box>
                            </Box>
                        )}

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

        return this.props.children;
    }
}

export default ErrorBoundary;