import { Paper, Typography, Box } from '@mui/material';
import { CheckCircle, Error } from '@mui/icons-material';
import type { VerificationResult } from '../utils/verification';

interface ResultsPanelProps {
  result: VerificationResult | null;
  isVerifying: boolean;
}

const ResultsPanel: React.FC<ResultsPanelProps> = ({ result, isVerifying }) => {
  if (isVerifying) {
    return (
      <Box
        sx={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography color="text.secondary">Verifying...</Typography>
      </Box>
    );
  }

  if (!result) {
    return (
      <Box
        sx={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography color="text.secondary">
          Enter proof content to see verification results
        </Typography>
      </Box>
    );
  }

  return (
    <Box sx={{ height: '100%', overflow: 'auto', p: 2 }}>
      <Paper
        elevation={0}
        sx={{
          p: 3,
          backgroundColor: result.success ? '#e8f5e9' : '#ffebee',
          border: `2px solid ${result.success ? '#4caf50' : '#f44336'}`,
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
          {result.success ? (
            <CheckCircle sx={{ color: '#4caf50', mr: 1, fontSize: 32 }} />
          ) : (
            <Error sx={{ color: '#f44336', mr: 1, fontSize: 32 }} />
          )}
          <Typography
            variant="h6"
            sx={{ color: result.success ? '#2e7d32' : '#c62828' }}
          >
            {result.message}
          </Typography>
        </Box>
        {result.error && (
          <Box
            sx={{
              mt: 2,
              p: 2,
              backgroundColor: 'rgba(0, 0, 0, 0.05)',
              borderRadius: 1,
            }}
          >
            <Typography
              component="pre"
              sx={{
                fontFamily: 'monospace',
                fontSize: '13px',
                whiteSpace: 'pre-wrap',
                wordBreak: 'break-word',
                margin: 0,
                color: '#c62828',
              }}
            >
              {result.error}
            </Typography>
          </Box>
        )}
      </Paper>
    </Box>
  );
};

export default ResultsPanel;