import React, { useState } from 'react';
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Container,
  Divider,
  FormControl,
  Grid,
  InputLabel,
  LinearProgress,
  MenuItem,
  Paper,
  Select,
  Stack,
  Step,
  StepLabel,
  Stepper,
  Switch,
  TextField,
  Typography,
  FormControlLabel,
} from '@mui/material';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import CodeIcon from '@mui/icons-material/Code';
import CloudIcon from '@mui/icons-material/Cloud';
import SettingsIcon from '@mui/icons-material/Settings';
import BugReportIcon from '@mui/icons-material/BugReport';

const testSteps = ['Настройка теста', 'Запуск тестов', 'Анализ результатов', 'Формирование рекомендаций'];

const cloudOptions = [
  { value: 'yandex', label: 'Яндекс Облако' },
  { value: 'sber', label: 'SberCloud' },
  { value: 'mail', label: 'Mail.ru Cloud Solutions' },
  { value: 'selectel', label: 'Selectel' },
];

const scenarioOptions = [
  { value: 'api', label: 'API Gateway' },
  { value: 'processing', label: 'Обработка данных' },
  { value: 'database', label: 'Работа с БД' },
  { value: 'images', label: 'Обработка изображений' },
  { value: 'custom', label: 'Пользовательский сценарий' },
];

function TestingPage() {
  const [activeStep, setActiveStep] = useState(0);
  const [cloud, setCloud] = useState('yandex');
  const [scenario, setScenario] = useState('api');
  const [iterations, setIterations] = useState(100);
  const [concurrency, setConcurrency] = useState(10);
  const [optimizationEnabled, setOptimizationEnabled] = useState(true);
  const [testRunning, setTestRunning] = useState(false);
  const [progress, setProgress] = useState(0);

  const handleStartTest = () => {
    setTestRunning(true);
    setActiveStep(1);
    
    // Симуляция прогресса
    const interval = setInterval(() => {
      setProgress((prevProgress) => {
        const newProgress = prevProgress + 5;
        if (newProgress >= 100) {
          clearInterval(interval);
          setTestRunning(false);
          setActiveStep(2);
          return 100;
        }
        return newProgress;
      });
    }, 500);
  };

  const handleReset = () => {
    setActiveStep(0);
    setProgress(0);
    setTestRunning(false);
  };

  return (
    <Container maxWidth="lg">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Тестирование Serverless-функций
        </Typography>
        <Typography variant="body1" paragraph>
          Настройте параметры и запустите тестирование функций на выбранной облачной платформе.
        </Typography>

        <Paper sx={{ p: 3, mb: 4 }}>
          <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
            {testSteps.map((label) => (
              <Step key={label}>
                <StepLabel>{label}</StepLabel>
              </Step>
            ))}
          </Stepper>

          {activeStep === 0 && (
            <Box>
              <Typography variant="h6" gutterBottom>
                Параметры тестирования
              </Typography>
              <Grid container spacing={3}>
                <Grid item xs={12} md={6}>
                  <FormControl fullWidth margin="normal">
                    <InputLabel>Облачная платформа</InputLabel>
                    <Select
                      value={cloud}
                      label="Облачная платформа"
                      onChange={(e) => setCloud(e.target.value)}
                    >
                      {cloudOptions.map((option) => (
                        <MenuItem key={option.value} value={option.value}>
                          {option.label}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>

                  <FormControl fullWidth margin="normal">
                    <InputLabel>Сценарий тестирования</InputLabel>
                    <Select
                      value={scenario}
                      label="Сценарий тестирования"
                      onChange={(e) => setScenario(e.target.value)}
                    >
                      {scenarioOptions.map((option) => (
                        <MenuItem key={option.value} value={option.value}>
                          {option.label}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>

                  <Grid container spacing={2} sx={{ mt: 1 }}>
                    <Grid item xs={6}>
                      <TextField
                        fullWidth
                        label="Кол-во итераций"
                        type="number"
                        value={iterations}
                        onChange={(e) => setIterations(Number(e.target.value))}
                      />
                    </Grid>
                    <Grid item xs={6}>
                      <TextField
                        fullWidth
                        label="Одновременные запросы"
                        type="number"
                        value={concurrency}
                        onChange={(e) => setConcurrency(Number(e.target.value))}
                      />
                    </Grid>
                  </Grid>

                  <FormControlLabel
                    control={
                      <Switch
                        checked={optimizationEnabled}
                        onChange={(e) => setOptimizationEnabled(e.target.checked)}
                      />
                    }
                    label="Применить оптимизацию"
                    sx={{ mt: 2 }}
                  />
                </Grid>

                <Grid item xs={12} md={6}>
                  <Card sx={{ mb: 2, bgcolor: '#f5f5f5' }}>
                    <CardContent>
                      <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
                        <CloudIcon color="primary" />
                        <Typography variant="subtitle1">
                          Информация о платформе
                        </Typography>
                      </Stack>
                      <Typography variant="body2">
                        Яндекс Облако - российская облачная платформа, предоставляющая
                        serverless-решения на базе отечественных технологий.
                      </Typography>
                      <Divider sx={{ my: 2 }} />
                      <Stack direction="row" spacing={1}>
                        <Chip label="4 региона" size="small" />
                        <Chip label="Python 3.10" size="small" />
                        <Chip label="Node.js 16" size="small" />
                      </Stack>
                    </CardContent>
                  </Card>

                  <Card sx={{ bgcolor: '#f5f5f5' }}>
                    <CardContent>
                      <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
                        <CodeIcon color="primary" />
                        <Typography variant="subtitle1">
                          Сценарий тестирования
                        </Typography>
                      </Stack>
                      <Typography variant="body2">
                        API Gateway - тестирование производительности функций, 
                        обрабатывающих HTTP-запросы через API Gateway. Измеряется время 
                        отклика, пропускная способность и стабильность работы.
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>

              <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
                <Button
                  variant="contained"
                  startIcon={<PlayArrowIcon />}
                  onClick={handleStartTest}
                  disabled={testRunning}
                >
                  Запустить тестирование
                </Button>
              </Box>
            </Box>
          )}

          {activeStep === 1 && (
            <Box>
              <Typography variant="h6" gutterBottom>
                Выполнение тестов
              </Typography>
              <LinearProgress variant="determinate" value={progress} sx={{ height: 10, mb: 2 }} />
              <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                Прогресс: {progress}% ({Math.floor(iterations * progress / 100)} из {iterations} итераций)
              </Typography>

              <Paper variant="outlined" sx={{ p: 2, mb: 3, bgcolor: '#f8f8f8' }}>
                <Typography variant="subtitle2" gutterBottom>
                  Лог выполнения:
                </Typography>
                <Box sx={{ maxHeight: '250px', overflow: 'auto', fontFamily: 'monospace', fontSize: '0.85rem' }}>
                  <Box sx={{ py: 0.5 }}>
                    <Typography variant="body2" component="span" color="text.secondary">[16:42:23]</Typography>
                    <Typography variant="body2" component="span"> Инициализация тестового окружения...</Typography>
                  </Box>
                  <Box sx={{ py: 0.5 }}>
                    <Typography variant="body2" component="span" color="text.secondary">[16:42:25]</Typography>
                    <Typography variant="body2" component="span"> Развёртывание тестовой функции в облаке Яндекс...</Typography>
                  </Box>
                  <Box sx={{ py: 0.5 }}>
                    <Typography variant="body2" component="span" color="text.secondary">[16:42:30]</Typography>
                    <Typography variant="body2" component="span"> Начало тестирования API Gateway...</Typography>
                  </Box>
                  <Box sx={{ py: 0.5 }}>
                    <Typography variant="body2" component="span" color="text.secondary">[16:42:35]</Typography>
                    <Typography variant="body2" component="span"> Выполнено 25 из {iterations} итераций...</Typography>
                  </Box>
                  <Box sx={{ py: 0.5 }}>
                    <Typography variant="body2" component="span" color="text.secondary">[16:42:40]</Typography>
                    <Typography variant="body2" component="span"> Сбор первичных метрик...</Typography>
                  </Box>
                </Box>
              </Paper>

              <Box sx={{ mt: 3, display: 'flex', justifyContent: 'space-between' }}>
                <Button variant="outlined" onClick={handleReset} disabled={progress < 100 && progress > 0}>
                  Отменить
                </Button>
                <Button variant="contained" disabled={progress < 100}>
                  Анализировать результаты
                </Button>
              </Box>
            </Box>
          )}

          {activeStep === 2 && (
            <Box>
              <Typography variant="h6" gutterBottom>
                Предварительные результаты
              </Typography>
              <Typography variant="body2" paragraph>
                Результаты тестирования доступны. Система автоматически проанализировала данные
                и подготовила рекомендации по оптимизации.
              </Typography>

              <Grid container spacing={3}>
                <Grid item xs={12} sm={6}>
                  <Card sx={{ mb: 2 }}>
                    <CardContent>
                      <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
                        <SettingsIcon color="primary" />
                        <Typography variant="subtitle1">
                          Метрики производительности
                        </Typography>
                      </Stack>
                      <Typography variant="body2">
                        <strong>Время ответа (P95):</strong> 124 мс
                      </Typography>
                      <Typography variant="body2">
                        <strong>Время холодного старта:</strong> 320 мс
                      </Typography>
                      <Typography variant="body2">
                        <strong>Пропускная способность:</strong> 82 TPS
                      </Typography>
                      <Typography variant="body2">
                        <strong>Использование ЦП:</strong> 32%
                      </Typography>
                      <Typography variant="body2">
                        <strong>Использование RAM:</strong> 256 МБ
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Card>
                    <CardContent>
                      <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
                        <BugReportIcon color="primary" />
                        <Typography variant="subtitle1">
                          Выявленные проблемы
                        </Typography>
                      </Stack>
                      <Typography variant="body2" sx={{ mb: 1 }}>
                        • Высокое время холодного старта
                      </Typography>
                      <Typography variant="body2" sx={{ mb: 1 }}>
                        • Избыточное потребление памяти
                      </Typography>
                      <Typography variant="body2" sx={{ mb: 1 }}>
                        • Неоптимальные HTTP-заголовки кэширования
                      </Typography>
                      <Typography variant="body2">
                        • Большой размер пакета развертывания
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              </Grid>

              <Box sx={{ mt: 3, display: 'flex', justifyContent: 'space-between' }}>
                <Button variant="outlined" onClick={handleReset}>
                  Новый тест
                </Button>
                <Button
                  variant="contained"
                  onClick={() => setActiveStep(3)}
                >
                  Просмотреть рекомендации
                </Button>
              </Box>
            </Box>
          )}

          {activeStep === 3 && (
            <Box>
              <Typography variant="h6" gutterBottom>
                Рекомендации по оптимизации
              </Typography>
              <Typography variant="body2" paragraph>
                На основе результатов тестирования система сформировала следующие рекомендации
                для оптимизации производительности функций.
              </Typography>

              <Card sx={{ mb: 3 }}>
                <CardContent>
                  <Typography variant="subtitle1" gutterBottom>
                    1. Оптимизация холодного старта
                  </Typography>
                  <Typography variant="body2" paragraph>
                    Время холодного старта составляет 320 мс, что превышает оптимальное значение.
                    Рекомендуется:
                  </Typography>
                  <Typography variant="body2" component="ul">
                    <li>Использовать функциональность предварительного разогрева</li>
                    <li>Уменьшить размер пакета развертывания с 45 МБ до 20 МБ</li>
                    <li>Оптимизировать импорты, исключив неиспользуемые зависимости</li>
                    <li>Внедрить механизм кэширования соединений с внешними сервисами</li>
                  </Typography>
                </CardContent>
              </Card>

              <Card sx={{ mb: 3 }}>
                <CardContent>
                  <Typography variant="subtitle1" gutterBottom>
                    2. Оптимизация использования памяти
                  </Typography>
                  <Typography variant="body2" paragraph>
                    Использование оперативной памяти составляет 256 МБ при пиковой нагрузке.
                    Рекомендуется:
                  </Typography>
                  <Typography variant="body2" component="ul">
                    <li>Оптимизировать алгоритмы обработки данных для снижения потребления памяти</li>
                    <li>Внедрить потоковую обработку вместо загрузки всего набора данных в память</li>
                    <li>Настроить конфигурацию выделения памяти в соответствии с требованиями функции</li>
                  </Typography>
                </CardContent>
              </Card>

              <Card>
                <CardContent>
                  <Typography variant="subtitle1" gutterBottom>
                    3. Оптимизация HTTP-взаимодействия
                  </Typography>
                  <Typography variant="body2" paragraph>
                    Время ответа составляет 124 мс (P95). Рекомендуется:
                  </Typography>
                  <Typography variant="body2" component="ul">
                    <li>Настроить правильные заголовки кэширования для статичных ответов</li>
                    <li>Использовать оптимизацию сжатия gzip/brotli для уменьшения объема передаваемых данных</li>
                    <li>Разделить функцию на несколько более специализированных для улучшения масштабирования</li>
                  </Typography>
                </CardContent>
              </Card>

              <Box sx={{ mt: 3, display: 'flex', justifyContent: 'space-between' }}>
                <Button variant="outlined" onClick={handleReset}>
                  Новый тест
                </Button>
                <Button
                  variant="contained"
                  onClick={() => console.log('Применение оптимизаций')}
                >
                  Применить оптимизации
                </Button>
              </Box>
            </Box>
          )}
        </Paper>
      </Box>
    </Container>
  );
}

export default TestingPage; 