import React, { useState } from 'react';
import {
    Container,
    Typography,
    Box,
    Drawer,
    List,
    ListItem,
    ListItemText,
    Chip,
    Select,
    MenuItem,
    FormControl,
    InputLabel,
    Button,
    Divider,
    useMediaQuery,
    useTheme,
    Paper,
} from '@mui/material';
import { CalendarToday as CalendarIcon, FilterList as FilterIcon } from '@mui/icons-material';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import ruLocale from 'date-fns/locale/ru';

const CHAMPIONSHIP_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: 'Предрегистрация',
    },
];

const CalendarPage = () => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

    const [viewDate, setViewDate] = useState(new Date()); // Дата для отображения месяца
    const [selectedClass, setSelectedClass] = useState('Все');
    const [showFilters, setShowFilters] = useState(false);
    const [openDrawer, setOpenDrawer] = useState(false);

    // Фильтрованные этапы для текущего месяца/класса
    const filteredStages = CHAMPIONSHIP_STAGES.filter((stage) => {
        const stageDate = new Date(stage.date);
        const isSameMonth = stageDate.getMonth() === viewDate.getMonth();
        const isSameYear = stageDate.getFullYear() === viewDate.getFullYear();
        const classMatch = selectedClass === 'Все' || stage.class === selectedClass;
        return isSameMonth && isSameYear && classMatch;
    });

    // Группируем этапы по дате
    const stagesByDate = filteredStages.reduce((acc, stage) => {
        const dayKey = new Date(stage.date).toDateString();
        acc[dayKey] = acc[dayKey] || [];
        acc[dayKey].push(stage);
        return acc;
    }, {});

    // Содержимое drawer для мобильных
    const drawerContent = (
        <Box sx={{ p: 3, minWidth: 280 }}>
            <Typography variant="h6" gutterBottom>
                Этапы на {viewDate.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })}
            </Typography>
            {filteredStages.length === 0 ? (
                <Typography color="text.secondary" sx={{ mt: 2 }}>
                    Нет этапов в этот день
                </Typography>
            ) : (
                <List sx={{ mt: 2 }}>
                    {filteredStages.map((stage) => (
                        <ListItem key={stage.id} sx={{ mb: 1, borderBottom: '1px solid', borderColor: 'divider' }}>
                            <Box sx={{ flexGrow: 1 }}>
                                <Typography variant="subtitle1" fontWeight="bold">
                                    {stage.title}
                                </Typography>
                                <Typography variant="body2" color="text.secondary">
                                    {stage.stage} · {stage.class}
                                </Typography>
                                <Box sx={{ mt: 0.5 }}>
                                    <Chip
                                        label={stage.status}
                                        size="small"
                                        color={
                                            stage.status === 'Идёт'
                                                ? 'warning'
                                                : stage.status === 'Регистрация открыта'
                                                    ? 'success'
                                                    : 'info'
                                        }
                                        sx={{ fontSize: '0.8rem' }}
                                    />
                                </Box>
                            </Box>
                        </ListItem>
                    ))}
                </List>
            )}
        </Box>
    );

    return (
        <Container maxWidth={false} disableGutters sx={{ px: { xs: 1, sm: 3, md: 6 } }}>
            {/* Шапка */}
            <Box sx={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                mb: 4,
                flexWrap: 'wrap',
                gap: 2
            }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <CalendarIcon color="primary" />
                    <Typography variant="h4">Календарь чемпионатов</Typography>
                </Box>

                {/* Фильтры */}
                <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                    <Button
                        variant="outlined"
                        startIcon={<FilterIcon />}
                        onClick={() => setShowFilters(!showFilters)}
                        size="small"
                    >
                        Фильтры
                    </Button>
                    {showFilters && (
                        <FormControl size="small" sx={{ minWidth: 120 }}>
                            <InputLabel>Класс</InputLabel>
                            <Select value={selectedClass} onChange={(e) => setSelectedClass(e.target.value)}>
                                {['Все', 'Юниоры', 'Взрослые', 'Богатыри', '35+', 'Pro', 'Amateur', 'Симулятор A', 'Симулятор B'].map(
                                    (cls) => (
                                        <MenuItem key={cls} value={cls}>
                                            {cls}
                                        </MenuItem>
                                    )
                                )}
                            </Select>
                        </FormControl>
                    )}
                </Box>
            </Box>

            {/* Основной контент */}
            <Box sx={{
                display: 'grid',
                gridTemplateColumns: { xs: '1fr', md: '2fr 1fr' },
                gap: { xs: 0, md: 4 },
                width: '100%',
                maxWidth: 1400,
                mx: 'auto'
            }}>
                {/* Календарь */}
                <Paper variant="outlined" sx={{ borderRadius: 2, overflow: 'hidden', height: '100%' }}>
                    <LocalizationProvider dateAdapter={AdapterDateFns} locale={ruLocale}>
                        <DateCalendar
                            value={viewDate}
                            onChange={(newValue) => {
                                // Не меняем viewDate при клике на день — только навигация по месяцам
                                if (newValue.getMonth() !== viewDate.getMonth()) {
                                    setViewDate(newValue);
                                }
                            }}
                            showDaysOutsideCurrentMonth
                            skipDisabledDateSelection
                            sx={{
                                height: '100%',
                                '.MuiDayCalendar-dayButton': {
                                    minHeight: { xs: 80, sm: 100 },
                                    display: 'flex',
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    justifyContent: 'flex-start',
                                    p: 1,
                                },
                                '.MuiPickersDay-root': {
                                    fontSize: { xs: '1rem', sm: '1.1rem' },
                                },
                                // Подсветка дней с событиями
                                '&.MuiPickersDay-root[data-selected="true"]': {
                                    backgroundColor: 'primary.main',
                                    color: 'white',
                                },
                                '&.MuiPickersDay-root:has(.event-chip)': {
                                    border: '2px solid',
                                    borderColor: 'primary.main',
                                    '&:hover': {
                                        borderColor: 'primary.dark',
                                    }
                                }
                            }}
                            dayRenderer={(params) => {
                                const dayKey = params.day.toDateString();
                                const events = stagesByDate[dayKey] || [];


                                return (
                                    <Box sx={{ width: '100%', height: '100%' }}>
                                        <Typography
                                            variant="body2"
                                            sx={{
                                                fontWeight: 500,
                                                color: params.outsideCurrentMonth ? 'text.disabled' : 'inherit',
                                                textAlign: 'center',
                                            }}
                                        >
                                            {params.day.getDate()}
                                        </Typography>
                                        {events.length > 0 && (
                                            <Box
                                                sx={{
                                                    mt: 0.5,
                                                    display: 'flex',
                                                    flexWrap: 'wrap',
                                                    justifyContent: 'center',
                                                    gap: 0.25,
                                                }}
                                            >
                                                {events.map((event, idx) => (
                                                    <Chip
                                                        key={idx}
                                                        label={event.stage}
                                                        size="small"
                                                        className="event-chip" // Для CSS-селектора
                                                        color={
                                                            event.status === 'Идёт'
                                                                ? 'warning'
                                                                : event.status === 'Регистрация открыта'
                                                                    ? 'success'
                                                                    : 'info'
                                                        }
                                                        sx={{
                                                            backgroundColor:
                                                                event.status === 'Идёт'
                                                                    ? 'warning.dark'
                                                                    : event.status === 'Регистрация открыта'
                                                                        ? 'success.dark'
                                                                        : 'info.dark',
                                                            color: 'white',
                                                            fontSize: '0.65rem',
                                                            fontWeight: 500,
                                                            px: 0.3,
                                                            lineHeight: 1.1,
                                                        }}
                                                    />
                                                ))}
                                            </Box>
                                        )}
                                    </Box>
                                );
                            }}
                        />
                    </LocalizationProvider>
                </Paper>

                {/* Список этапов (только на десктопе) */}
                {!isMobile && (
                    <Box sx={{ overflowY: 'auto', maxHeight: 'calc(100vh - 200px)' }}>
                        <Paper variant="outlined" sx={{ borderRadius: 2 }}>
                            <Box sx={{ p: 3 }}>
                                <Typography variant="h6" gutterBottom>
                                    Этапы на {viewDate.toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' })}
                                </Typography>
                                {filteredStages.length === 0 ? (
                                    <Typography color="text.secondary" sx={{ mt: 2 }}>
                                        Нет этапов в выбранном периоде
                                    </Typography>
                                ) : (
                                    filteredStages.map((stage) => (
                                        <Box
                                            key={stage.id}
                                            sx={{
                                                p: 2.5,
                                                borderRadius: 2,
                                                backgroundColor: 'action.hover',
                                                mb: 2,
                                                '&:last-child': { mb: 0 },
                                            }}
                                        >
                                            <Typography
                                                variant="subtitle1"
                                                fontWeight="bold"
                                                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>
                                    ))
                                )}
                            </Box>
                        </Paper>
                    </Box>
                )}
            </Box>

            {/* Drawer для мобильных */}
            {isMobile && (
                <Drawer
                    anchor="bottom"
                    open={openDrawer}
                    onClose={() => setOpenDrawer(false)}
                    PaperProps={{ sx: { borderRadius: '16px 16px 0 0' } }}
                >
                    {drawerContent}
                </Drawer>
            )}

            {/* Кнопка для открытия drawer на мобильных */}
            {isMobile && filteredStages.length > 0 && (
                <Box sx={{ position: 'fixed', bottom: 16, right: 16 }}>
                    <Button
                        variant="contained"
                        color="primary"
                        size="large"
                        onClick={() => setOpenDrawer(true)}
                        startIcon={<CalendarIcon />}
                        sx={{
                            boxShadow: 3,
                            '&:hover': { boxShadow: 4 },
                            borderRadius: 24,
                        }}
                    >
                        Этапы на сегодня
                    </Button>
                </Box>
            )}

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

export default CalendarPage;
