import React from 'react';
import {
    Box,
    Button,
    Card,
    CardActions,
    CardContent,
    Container,
    Grid,
    IconButton,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableRow,
    Tooltip,
    Typography,
} from '@mui/material';
import {Add as AddIcon, Edit as EditIcon, Visibility as VisibilityIcon} from '@mui/icons-material';
import Divider from "@mui/material/Divider";

// Данные чемпионатов (можно заменить на API-запрос)
const CHAMPIONSHIPS = [
    {
        id: 1,
        title: 'SWC Зимний чемпионат 2025–2026',
        season: 'Зима 2025–2026',
        stages: 5,
        status: 'Идёт',
        classes: ['Юниоры', 'Взрослые', 'Богатыри', '35+'],
        startDate: '18.01.2026',
        endDate: '08.03.2026',
    },
    {
        id: 2,
        title: 'Honda Winter Cup 2026',
        season: 'Зима 2026',
        stages: 3,
        status: 'Регистрация открыта',
        classes: ['Pro', 'Amateur'],
        startDate: '31.01.2026',
        endDate: '28.02.2026',
    },
    {
        id: 3,
        title: 'Кубок Покровска 2026 (онлайн)',
        season: '2026',
        stages: 4,
        status: 'Предрегистрация',
        classes: ['Симулятор A', 'Симулятор B'],
        startDate: '01.02.2026',
        endDate: '25.03.2026',
    },
];

const ChampionshipsPage = () => {
    return (
        <Container maxWidth="xl" sx={{py: 6}}>
            {/* Заголовок и кнопка создания */}
            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4}}>
                <Typography variant="h4">
                    Все чемпионаты
                </Typography>
                <Button
                    variant="contained"
                    size={'small'}
                    color="primary"
                    startIcon={<AddIcon/>}
                    href="/championships/create"
                    sx={{px: 3}}
                >
                    Создать чемпионат
                </Button>
            </Box>


            {/* Список чемпионатов */}
            <Grid container spacing={4}>
                {CHAMPIONSHIPS.map((champ) => (
                    <Grid item xs={12} sm={6} md={4} key={champ.id}>
                        <Card variant="outlined" sx={{
                            height: '100%',
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'space-between', // Растягивает содержимое, прижимает actions вниз
                            transition: 'transform 0.2s',
                            '&:hover': { transform: 'scale(1.02)'
                            }}}>
                            <CardContent>
                                <Box
                                    sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 2}}>
                                    <Box>
                                        <Typography variant="h6">
                                            {champ.title}
                                        </Typography>
                                        <Tooltip title={champ.status}>
                                            <Typography
                                                variant="caption"
                                                sx={{
                                                    backgroundColor: champ.status === 'Идёт' ? 'warning.main' :
                                                        champ.status === 'Регистрация открыта' ? 'success.main' : 'info.main',
                                                    color: 'white',
                                                    px: 1,
                                                    borderRadius: 1,
                                                    whiteSpace: 'nowrap'
                                                }}
                                            >
                                                {champ.status}
                                            </Typography>
                                        </Tooltip>
                                        <Typography variant="subtitle2" color="text.secondary">
                                            {champ.season}
                                        </Typography>
                                    </Box>

                                </Box>

                                {/* Таблица с основными данными */}
                                <Table size="small" sx={{mt: 2}}>
                                    <TableBody>
                                        <TableRow>
                                            <TableCell variant="head">Этапы</TableCell>
                                            <TableCell>{champ.stages}</TableCell>
                                        </TableRow>
                                        <TableRow>
                                            <TableCell variant="head">Классы</TableCell>
                                            <TableCell>
                                                {champ.classes.join(', ')}
                                            </TableCell>
                                        </TableRow>
                                        <TableRow>
                                            <TableCell variant="head">Начало</TableCell>
                                            <TableCell>{champ.startDate}</TableCell>
                                        </TableRow>
                                        <TableRow>
                                            <TableCell variant="head">Конец</TableCell>
                                            <TableCell>{champ.endDate}</TableCell>
                                        </TableRow>
                                    </TableBody>
                                </Table>
                            </CardContent>
                            <CardActions sx={{ justifyContent: 'flex-end', p: 2 }}>
                                {/* Действия */}
                                <Box sx={{display: 'flex', gap: 1}}>
                                    <IconButton
                                        component="a"
                                        href={`/championships/${champ.id}`}
                                        size="small"
                                        color="primary"
                                        title="Посмотреть детали"
                                    >
                                        <VisibilityIcon fontSize="small"/>
                                    </IconButton>
                                    <IconButton
                                        component="a"
                                        href={`/championships/${champ.id}/edit`}
                                        size="small"
                                        color="secondary"
                                        title="Редактировать"
                                    >
                                        <EditIcon fontSize="small"/>
                                    </IconButton>
                                </Box>
                            </CardActions>
                        </Card>
                    </Grid>
                ))}
            </Grid>

            {/* Сообщение, если чемпионатов нет */}
            {CHAMPIONSHIPS.length === 0 && (
                <Paper sx={{textAlign: 'center', py: 8}}>
                    <Typography color="text.secondary">
                        Пока нет ни одного чемпионата. Создайте первый!
                    </Typography>
                    <Button
                        variant="outlined"
                        sx={{mt: 2}}
                        href="/championships/create"
                    >
                        Создать чемпионат
                    </Button>
                </Paper>
            )}

            {/* Подвал */}
            <Divider sx={{my: 6}}/>
            <Typography variant="body2" color="text.secondary" align="center">
                © 2026 КартХолл. Управление чемпионатами.
            </Typography>
        </Container>
    );
};

export default ChampionshipsPage;
