/**
 * KRA - Error Preview Component
 * Display error messages with stack trace
 */
import React from 'react';
import { Alert, Typography, Collapse } from 'antd';

const { Text, Paragraph } = Typography;
const { Panel } = Collapse;

interface ErrorPreviewProps {
  error?: string;
  stack?: string;
  method?: string;
  path?: string;
  showStack?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const ErrorPreview: React.FC<ErrorPreviewProps> = ({
  error,
  stack,
  method,
  path,
  showStack = true,
  className,
  style,
}) => {
  if (!error) return null;

  return (
    <div className={className} style={style}>
      <Alert
        type="error"
        message={
          <div>
            {method && path && (
              <Text type="secondary" style={{ marginRight: 8 }}>
                [{method}] {path}
              </Text>
            )}
            <Text strong>{error}</Text>
          </div>
        }
        description={
          showStack && stack ? (
            <Collapse ghost size="small">
              <Panel header="查看堆栈信息" key="stack">
                <Paragraph>
                  <pre style={{ 
                    margin: 0, 
                    fontSize: 12, 
                    whiteSpace: 'pre-wrap',
                    wordBreak: 'break-all',
                    maxHeight: 300,
                    overflow: 'auto',
                  }}>
                    {stack}
                  </pre>
                </Paragraph>
              </Panel>
            </Collapse>
          ) : undefined
        }
      />
    </div>
  );
};

export default ErrorPreview;
