import {Box, Chip, Paper, Typography} from "@mui/material";
import {Link} from "react-router-dom";
import React from "react";

const DesktopCalendarStageList = ({filteredStages, viewDate}) => {
    return (
        <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
            <Paper
                variant="outlined"
                sx={{
                    borderRadius: 2,
                    flexGrow: 1,
                    display: 'flex',
                    flexDirection: 'column',
                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                }}
            >
                <Box sx={{p: 3}}>
                    <Typography variant="h6" gutterBottom>
                        Этапы на{' '}
                        {viewDate.format('MMMM YYYY')}
                    </Typography>
                    {filteredStages.length === 0 ? (
                        <Typography color="text.secondary" sx={{my: 2}}>
                            Нет этапов в выбранном периоде
                        </Typography>
                    ) : (
                        filteredStages.map((stage) => (
                            <Link
                                to={`/stages/${stage.id}`}
                                style={{textDecoration: 'none'}}
                                key={stage.id}
                            >
                                <Box
                                    sx={{
                                        p: 2.5,
                                        borderRadius: 2,
                                        backgroundColor: 'action.hover',
                                        mb: 2,
                                        transition: 'all 0.2s ease',
                                        '&:hover': {
                                            backgroundColor: 'action.selected',
                                            transform: 'translateY(-2px)',
                                            boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
                                        },
                                    }}
                                >
                                    <Typography
                                        variant="subtitle1"
                                        fontWeight="bold"
                                        color="text.primary"
                                        noWrap
                                        sx={{mb: 0.5}}
                                    >
                                        {stage.title}
                                    </Typography>
                                    <Typography variant="body2" color="text.secondary" sx={{mb: 1}}>
                                        {stage.stage} · {stage.class}
                                    </Typography>
                                    <Box sx={{display: 'flex', gap: 1, flexWrap: 'wrap'}}>
                                        <Chip
                                            label={stage.status}
                                            size="small"
                                            color={
                                                stage.status === 'Идёт'
                                                    ? 'warning'
                                                    : stage.status === 'Регистрация открыта'
                                                        ? 'success'
                                                        : 'info'
                                            }
                                            sx={{
                                                backgroundColor:
                                                    stage.status === 'Идёт'
                                                        ? 'warning.dark'
                                                        : stage.status === 'Регистрация открыта'
                                                            ? 'success.dark'
                                                            : 'info.dark',
                                                color: 'white',
                                                fontWeight: 500,
                                                fontSize: '0.8rem',
                                            }}
                                        />
                                    </Box>
                                    <Typography
                                        variant="body2"
                                        color="text.secondary"
                                        sx={{mt: 1.5}}
                                    >
                                        {new Date(stage.date).toLocaleDateString('ru-RU', {
                                            day: 'numeric',
                                            month: 'long',
                                            weekday: 'short',
                                        })}
                                    </Typography>
                                </Box>
                            </Link>
                        ))
                    )}
                </Box>
            </Paper>
        </Box>
    )
}

export default DesktopCalendarStageList;

