import React, { useState } from 'react';
import {
  Box,
  Button,
  Card,
  CardContent,
  Container,
  FormControl,
  Grid,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  Tab,
  Tabs,
  Typography,
} from '@mui/material';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { Line, Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// Регистрация компонентов ChartJS
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend
);

// Данные о времени отклика (мс)
const responseTimeData = {
  labels: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
  datasets: [
    {
      label: 'До оптимизации',
      data: [165, 170, 172, 168, 182, 190, 178, 175, 172, 178, 185],
      borderColor: '#f44336',
      backgroundColor: 'rgba(244, 67, 54, 0.1)',
      tension: 0.4,
    },
    {
      label: 'После оптимизации',
      data: [132, 128, 125, 130, 133, 140, 138, 135, 130, 128, 124],
      borderColor: '#4caf50',
      backgroundColor: 'rgba(76, 175, 80, 0.1)',
      tension: 0.4,
    },
  ],
};

// Данные об использовании ресурсов
const resourceUsageData = {
  labels: ['ЦП', 'Память', 'Сеть', 'Хранилище'],
  datasets: [
    {
      label: 'До оптимизации',
      data: [48, 320, 75, 55],
      backgroundColor: 'rgba(244, 67, 54, 0.7)',
    },
    {
      label: 'После оптимизации',
      data: [32, 256, 60, 45],
      backgroundColor: 'rgba(76, 175, 80, 0.7)',
    },
  ],
};

// Данные о холодном старте (мс)
const coldStartData = {
  labels: ['API Gateway', 'Обработка данных', 'Работа с БД', 'Обработка изображений'],
  datasets: [
    {
      label: 'До оптимизации',
      data: [420, 380, 350, 480],
      backgroundColor: 'rgba(244, 67, 54, 0.7)',
    },
    {
      label: 'После оптимизации',
      data: [320, 280, 260, 350],
      backgroundColor: 'rgba(76, 175, 80, 0.7)',
    },
  ],
};

// Данные о пропускной способности (запросов/сек)
const throughputData = {
  labels: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
  datasets: [
    {
      label: 'До оптимизации',
      data: [60, 62, 58, 55, 57, 52, 50, 48, 45, 43, 40],
      borderColor: '#f44336',
      backgroundColor: 'rgba(244, 67, 54, 0.1)',
      tension: 0.4,
    },
    {
      label: 'После оптимизации',
      data: [70, 75, 78, 82, 85, 83, 80, 78, 75, 72, 70],
      borderColor: '#4caf50',
      backgroundColor: 'rgba(76, 175, 80, 0.1)',
      tension: 0.4,
    },
  ],
};

// Общие опции для графиков
const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'top',
    },
  },
};

function ResultsPage() {
  const [tabValue, setTabValue] = useState(0);
  const [platform, setPlatform] = useState('yandex');
  const [timeRange, setTimeRange] = useState('week');

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };

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

        <Grid container spacing={3} sx={{ mb: 4 }}>
          <Grid item xs={12} md={6}>
            <FormControl fullWidth>
              <InputLabel>Облачная платформа</InputLabel>
              <Select
                value={platform}
                label="Облачная платформа"
                onChange={(e) => setPlatform(e.target.value)}
              >
                <MenuItem value="yandex">Яндекс Облако</MenuItem>
                <MenuItem value="sber">SberCloud</MenuItem>
                <MenuItem value="mail">Mail.ru Cloud Solutions</MenuItem>
                <MenuItem value="selectel">Selectel</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12} md={6}>
            <FormControl fullWidth>
              <InputLabel>Временной диапазон</InputLabel>
              <Select
                value={timeRange}
                label="Временной диапазон"
                onChange={(e) => setTimeRange(e.target.value)}
              >
                <MenuItem value="day">Последний день</MenuItem>
                <MenuItem value="week">Последняя неделя</MenuItem>
                <MenuItem value="month">Последний месяц</MenuItem>
                <MenuItem value="custom">Пользовательский</MenuItem>
              </Select>
            </FormControl>
          </Grid>
        </Grid>

        <Paper sx={{ mb: 4 }}>
          <Tabs
            value={tabValue}
            onChange={handleTabChange}
            sx={{ borderBottom: 1, borderColor: 'divider' }}
            centered
          >
            <Tab label="Время отклика" />
            <Tab label="Использование ресурсов" />
            <Tab label="Холодный старт" />
            <Tab label="Пропускная способность" />
          </Tabs>
          <Box sx={{ p: 3 }}>
            {tabValue === 0 && (
              <Box>
                <Typography variant="h6" gutterBottom>
                  Время отклика (мс) при различных уровнях нагрузки
                </Typography>
                <Typography variant="body2" paragraph>
                  График показывает сравнение времени отклика до и после оптимизации при увеличении
                  нагрузки от 0 до 100%. Наблюдается снижение времени отклика на 23% после оптимизации.
                </Typography>
                <Box sx={{ height: 400 }}>
                  <Line options={chartOptions} data={responseTimeData} />
                </Box>
              </Box>
            )}
            {tabValue === 1 && (
              <Box>
                <Typography variant="h6" gutterBottom>
                  Использование ресурсов
                </Typography>
                <Typography variant="body2" paragraph>
                  График сравнивает использование различных ресурсов до и после оптимизации.
                  Значения для ЦП указаны в процентах, для памяти - в МБ, для сети и хранилища - в МБ/сек.
                </Typography>
                <Box sx={{ height: 400 }}>
                  <Bar options={chartOptions} data={resourceUsageData} />
                </Box>
              </Box>
            )}
            {tabValue === 2 && (
              <Box>
                <Typography variant="h6" gutterBottom>
                  Время холодного старта (мс)
                </Typography>
                <Typography variant="body2" paragraph>
                  График показывает время холодного старта для различных типов функций до и после оптимизации.
                  Среднее снижение составило 27%.
                </Typography>
                <Box sx={{ height: 400 }}>
                  <Bar options={chartOptions} data={coldStartData} />
                </Box>
              </Box>
            )}
            {tabValue === 3 && (
              <Box>
                <Typography variant="h6" gutterBottom>
                  Пропускная способность (запросов/сек)
                </Typography>
                <Typography variant="body2" paragraph>
                  График показывает сравнение пропускной способности до и после оптимизации при увеличении
                  нагрузки от 0 до 100%. Наблюдается увеличение пропускной способности на 65%.
                </Typography>
                <Box sx={{ height: 400 }}>
                  <Line options={chartOptions} data={throughputData} />
                </Box>
              </Box>
            )}
          </Box>
        </Paper>

        <Grid container spacing={3}>
          <Grid item xs={12} md={6} sx={{ display: 'flex' }}>
            <Card sx={{ width: '100%', height: '100%' }}>
              <CardContent sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                <Typography variant="h6" gutterBottom>
                  Сводка улучшений
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2">Время отклика:</Typography>
                  <Typography variant="body2" color="success.main">-23%</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2">Использование ЦП:</Typography>
                  <Typography variant="body2" color="success.main">-33%</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2">Использование памяти:</Typography>
                  <Typography variant="body2" color="success.main">-20%</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                  <Typography variant="body2">Время холодного старта:</Typography>
                  <Typography variant="body2" color="success.main">-27%</Typography>
                </Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Typography variant="body2">Пропускная способность:</Typography>
                  <Typography variant="body2" color="success.main">+65%</Typography>
                </Box>
                <Box sx={{ flexGrow: 1 }} />
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} md={6} sx={{ display: 'flex' }}>
            <Card sx={{ width: '100%', height: '100%' }}>
              <CardContent sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                <Typography variant="h6" gutterBottom>
                  Детали теста
                </Typography>
                <Typography variant="body2">
                  <strong>Платформа:</strong> Яндекс Облако
                </Typography>
                <Typography variant="body2">
                  <strong>Сценарий:</strong> API Gateway
                </Typography>
                <Typography variant="body2">
                  <strong>Дата запуска:</strong> 12.05.2024
                </Typography>
                <Typography variant="body2">
                  <strong>Кол-во итераций:</strong> 100
                </Typography>
                <Typography variant="body2">
                  <strong>Одновременных запросов:</strong> 10
                </Typography>
                <Typography variant="body2">
                  <strong>Примененные оптимизации:</strong> Кэширование, оптимизация пакета зависимостей, предварительный разогрев
                </Typography>
                <Box sx={{ flexGrow: 1 }} />
                <Button
                  variant="outlined"
                  startIcon={<FileDownloadIcon />}
                  sx={{ mt: 2 }}
                >
                  Экспорт отчета
                </Button>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </Container>
  );
}

export default ResultsPage; 