import React, { useState, useEffect } from 'react';
import { 
  Box, 
  Button, 
  Typography, 
  Table, 
  TableBody, 
  TableCell, 
  TableContainer, 
  TableHead, 
  TableRow, 
  Paper 
} from '@mui/material';

// Функции для создания тестовых ошибок
const createTestError = (message: string) => {
  const error = new Error(message);
  (error as any).__forceSend = true;
  throw error;
};

const createReactComponentError = (message: string) => {
  const error = new Error(message);
  (error as any).__forceSend = true;
  throw error;
};

/**
 * Простая страница отладки системы обработки ошибок
 * Активируется по Ctrl+Shift+F
 */
const Debug: React.FC = () => {
  const [isVisible, setIsVisible] = useState(false);
  

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.ctrlKey && event.shiftKey && event.code === 'KeyF') {
        event.preventDefault();
        setIsVisible(!isVisible);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isVisible]);

  if (!isVisible) {
    return null;
  }

  const errorTests = [
    {
      description: 'Простая ошибка',
      action: () => {
        createTestError('Тестовая ошибка отладки');
      }
    },
    {
      description: 'React ошибка компонента',
      action: () => {
        createReactComponentError('Тестовая ошибка React компонента');
      }
    },
    {
      description: 'Прямая ошибка в обработчике',
      action: () => {
        const error = new Error('Прямая ошибка в компоненте');
        (error as any).__forceSend = true;
        throw error;
      }
    },
    {
      description: 'Ошибка с длинным стеком',
      action: () => {
        const deepError = new Error('Глубокая ошибка с длинным стеком');
        deepError.stack = 'Error: Глубокая ошибка\n    at level1 (debug.ts:10)\n    at level2 (debug.ts:15)\n    at level3 (debug.ts:20)\n    at level4 (debug.ts:25)';
        (deepError as any).__forceSend = true;
        throw deepError;
      }
    },
    {
      description: 'Ошибка с undefined',
      action: () => {
        const obj: any = null;
        try {
          obj.nonExistentMethod();
        } catch (error) {
          (error as any).__forceSend = true;
          throw error;
        }
      }
    }
  ];

  return (
    <Box sx={{ 
      position: 'fixed', 
      top: 0, 
      left: 0, 
      right: 0, 
      bottom: 0, 
      bgcolor: 'rgba(0,0,0,0.9)', 
      zIndex: 9999,
      p: 4,
      overflow: 'auto'
    }}>
      <Box sx={{ maxWidth: 800, mx: 'auto', bgcolor: 'background.paper', p: 3, borderRadius: 2 }}>
        <Typography variant="h4" gutterBottom>
          🛠️ Отладка ошибок
        </Typography>
        
        <Typography variant="body2" sx={{ mb: 3, color: 'text.secondary' }}>
          Ctrl+Shift+F для закрытия
        </Typography>

        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Описание ошибки</TableCell>
                <TableCell align="right">Действие</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {errorTests.map((test, index) => (
                <TableRow key={index}>
                  <TableCell>{test.description}</TableCell>
                  <TableCell align="right">
                    <Button 
                      variant="contained" 
                      color="error" 
                      size="small"
                      onClick={test.action}
                    >
                      Вызвать
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </Box>
  );
};

export default Debug; 