import React, { useState, useEffect } from 'react';
import {
    Container,
    Typography,
    Paper,
    Table,
    TableHead,
    TableRow,
    TableCell,
    TableBody,
    TableContainer,
    Select,
    MenuItem,
    InputLabel,
    FormControl,
    Box,
    Pagination,
    Divider, Chip
} from '@mui/material';
import { Sort as SortIcon } from '@mui/icons-material';

// Моковые данные этапов
const MOCK_STAGES = [
    {
        id: 1,
        title: 'SWC Зимний чемпионат',
        stage: '2‑й этап',
        date: '2026-02-08',
        class: 'Юниоры',
        status: 'Идёт',
    },
    {
        id: 2,
        title: 'Honda Winter Cup',
        stage: '1‑й этап',
        date: '2026-01-31',
        class: 'Pro',
        status: 'Регистрация открыта',
    },
    {
        id: 3,
        title: 'Кубок Покровска (онлайн)',
        stage: '1‑й этап',
        date: '2026-02-01',
        class: 'Симулятор A',
        status: 'Предрегистрация',
    },
    {
        id: 4,
        title: 'Гран-при Урала',
        stage: 'Финальный этап',
        date: '2026-03-15',
        class: 'Взрослые',
        status: 'Предрегистрация',
    },
    {
        id: 5,
        title: 'Открытый кубок Москвы',
        stage: 'Квалификационный раунд',
        date: '2026-01-20',
        class: 'Amateur',
        status: 'Завершено',
    },
    // Добавим ещё для демонстрации пагинации
    { id: 6, title: 'Этап 6', stage: 'Тест', date: '2026-04-01', class: 'Pro', status: 'Регистрация открыта' },
    { id: 7, title: 'Этап 7', stage: 'Тест', date: '2026-05-01', class: 'Юниоры', status: 'Идёт' },
    { id: 8, title: 'Этап 8', stage: 'Тест', date: '2026-06-01', class: 'Взрослые', status: 'Предрегистрация' },
];

const StagesPage = () => {
    const [page, setPage] = useState(1);
    const [rowsPerPage, setRowsPerPage] = useState(5);
    const [sortOrder, setSortOrder] = useState('asc');
    const [filteredStages, setFilteredStages] = useState([]);

    useEffect(() => {
        let sorted = [...MOCK_STAGES];
        sorted.sort((a, b) => {
            const dateA = new Date(a.date);
            const dateB = new Date(b.date);
            return sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
        });
        setFilteredStages(sorted);
    }, [sortOrder]);

    const handlePageChange = (event, newPage) => {
        setPage(newPage);
    };

    const handleRowsPerPageChange = (event) => {
        setRowsPerPage(Number(event.target.value));
        setPage(1);
    };

    const currentStages = filteredStages.slice(
        (page - 1) * rowsPerPage,
        page * rowsPerPage
    );

    // Обработчик клика по строке
    const handleRowClick = (stage) => {
        // Здесь можно:
        // - перенаправить на страницу этапа: navigate(`/stages/${stage.id}`)
        // - открыть модалку с деталями
        // - показать alert (пример ниже)
        alert(`
      Этап: ${stage.title}
      Дата: ${new Date(stage.date).toLocaleDateString('ru-RU')}
      Статус: ${stage.status}
      Описание: ${stage.description}
    `);
    };

    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            <Typography variant="h4" gutterBottom>
                Этапы соревнований
            </Typography>

            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
                <FormControl size="small">
                    <InputLabel>Сортировка</InputLabel>
                    <Select
                        value={sortOrder}
                        onChange={(e) => setSortOrder(e.target.value)}
                        startAdornment={<SortIcon sx={{ ml: 1 }} />}
                    >
                        <MenuItem value="asc">По возрастанию даты</MenuItem>
                        <MenuItem value="desc">По убыванию даты</MenuItem>
                    </Select>
                </FormControl>

                <FormControl size="small">
                    <InputLabel>Строк на странице</InputLabel>
                    <Select
                        value={rowsPerPage}
                        onChange={handleRowsPerPageChange}
                    >
                        <MenuItem value={5}>5</MenuItem>
                        <MenuItem value={10}>10</MenuItem>
                        <MenuItem value={20}>20</MenuItem>
                    </Select>
                </FormControl>
            </Box>

            <TableContainer component={Paper} variant="outlined">
                <Table aria-label="таблица этапов">
                    <TableHead>
                        <TableRow>
                            <TableCell>Название</TableCell>
                            <TableCell>Этап</TableCell>
                            <TableCell>Дата</TableCell>
                            <TableCell>Класс</TableCell>
                            <TableCell>Статус</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {currentStages.map((stage) => (
                            <TableRow
                                key={stage.id}
                                sx={{
                                    '&:hover': {
                                        backgroundColor: 'action.hover',
                                        cursor: 'pointer'
                                    }
                                }}
                                onClick={() => handleRowClick(stage)}
                            >
                                <TableCell>{stage.title}</TableCell>
                                <TableCell>{stage.stage}</TableCell>
                                <TableCell>
                                    {new Date(stage.date).toLocaleDateString('ru-RU')}
                                </TableCell>
                                <TableCell>{stage.class}</TableCell>
                                <TableCell>
                                    <Chip
                                        label={stage.status}
                                        size="small"
                                        color={
                                            stage.status === 'Идёт'
                                                ? 'warning'
                                                : stage.status === 'Регистрация открыта'
                                                    ? 'success'
                                                    : stage.status === 'Предрегистрация'
                                                        ? 'info'
                                                        : 'default'
                                        }
                                        sx={{
                                            backgroundColor:
                                                stage.status === 'Идёт'
                                                    ? 'warning.dark'
                                                    : stage.status === 'Регистрация открыта'
                                                        ? 'success.dark'
                                                        : stage.status === 'Предрегистрация'
                                                            ? 'info.dark'
                                                            : 'grey.300',
                                            color: 'white',
                                            fontSize: '0.8rem',
                                        }}
                                    />
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>

            <Box sx={{ mt: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Typography variant="body2" color="text.secondary">
                    Показано {currentStages.length} из {filteredStages.length} этапов
                </Typography>
                <Pagination
                    count={Math.ceil(filteredStages.length / rowsPerPage)}
                    page={page}
                    onChange={handlePageChange}
                    color="primary"
                    size="large"
                />
            </Box>

            <Divider sx={{ my: 4 }} />

            <Typography variant="body2" color="text.secondary" align="center">
                © 2026 КартХолл. Все права защищены.
            </Typography>
        </Container>
    );
};

export default StagesPage;
