import React, {useEffect, useState} from 'react';
import {
    Alert,
    Box,
    Button,
    Chip,
    CircularProgress,
    Container,
    Paper,
    Tab,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    Tabs,
    Typography
} from '@mui/material';
import {Download as DownloadIcon, Print as PrintIcon} from '@mui/icons-material';
import {useParams} from 'react-router-dom';
import {MOCK_STAGES, STAGE_STATUSES} from '../../../data/constants';
import StagesHeader from "../../../components/stages/StagesHeader";

const StagePage = () => {
    const {id} = useParams();
    const [stage, setStage] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    const [activeTab, setActiveTab] = useState('info'); // info | classes | events
    const [activeClassTab, setActiveClassTab] = useState(0);

    useEffect(() => {
        const foundStage = MOCK_STAGES.find(s => s.id === Number(id));
        if (foundStage) {
            setStage(foundStage);
            setLoading(false);
        } else {
            setError(true);
            setLoading(false);
        }
    }, [id]);

    if (loading) {
        return (
            <Container maxWidth="lg" sx={{py: 4, textAlign: 'center'}}>
                <CircularProgress/>
                <Typography sx={{mt: 2}}>Загрузка данных этапа...</Typography>
            </Container>
        );
    }

    if (error || !stage) {
        return (
            <Container maxWidth="lg" sx={{py: 4}}>
                <Alert severity="error" sx={{mb: 3}}>
                    Этап не найден.
                </Alert>
                <Button variant="contained" onClick={() => window.history.back()}>
                    Вернуться назад
                </Button>
            </Container>
        );
    }

    // Пример данных участников (в реальном проекте — из API)
    const participants = {
        'Юниоры': [
            {id: 1, name: 'Иван Петров', number: 12},
            {id: 2, name: 'Анна Сидорова', number: 7},
            // ...
        ],
        'Взрослые': [
            {id: 3, name: 'Сергей Иванов', number: 25},
            // резерв
            {id: 4, name: 'Алексей Козлов', number: 99, isReserve: true},
        ]
    };

    const maxParticipantsPerClass = 10;

    // Определяем сценарий
    const isRegistrationClosed = stage.status === STAGE_STATUSES.PRE_REGISTRATION;
    const isRegistrationOpen = stage.status === STAGE_STATUSES.REGISTRATION_OPEN;
    const isInProgress = stage.status === STAGE_STATUSES.GOING;
    const isCompleted = stage.status === STAGE_STATUSES.COMPLETED;


    return (
        <Container maxWidth="lg" sx={{py: 4}}>
            {/* Шапка этапа */}
            <StagesHeader stage={stage}/>

            {/* Табы навигации */}
            <Tabs
                value={activeTab}
                onChange={(e, newValue) => setActiveTab(newValue)}
                sx={{mb: 3}}
            >
                <Tab label="Информация" value="info"/>
                {(isRegistrationOpen || isInProgress || isCompleted) && (
                    <Tab label="Классы" value="classes"/>
                )}
                {(isInProgress || isCompleted) && <Tab label="События" value="events"/>}
            </Tabs>

            {/* Контент в зависимости от активного таба */}
            {activeTab === 'info' && (
                <Box>
                    <Typography variant="h5" gutterBottom>О этапе</Typography>
                    <Typography paragraph>
                        Здесь можно разместить подробную информацию о формате этапа, правилах,
                        требованиях к участникам и т.д.
                    </Typography>

                    {isRegistrationClosed && (
                        <Alert severity="info" sx={{my: 3}}>
                            Регистрация откроется позже. Следите за обновлениями!
                        </Alert>
                    )}

                    {isRegistrationOpen && stage.registrationLink && (
                        <Button
                            variant="contained"
                            color="success"
                            href={stage.registrationLink}
                            target="_blank"
                            startIcon={<DownloadIcon/>}
                            sx={{mt: 3}}
                        >
                            Зарегистрироваться на этап
                        </Button>
                    )}
                </Box>
            )}

            {activeTab === 'classes' && (
                <Box>
                    <Tabs
                        value={activeClassTab}
                        onChange={(e, newValue) => setActiveClassTab(newValue)}
                        variant="scrollable"
                    >
                        {Object.keys(participants).map((className, index) => (
                            <Tab key={className} label={className} value={index}/>
                        ))}
                    </Tabs>

                    {Object.entries(participants).map(
                        ([className, classParticipants], index) =>
                            index === activeClassTab && (
                                <Box key={className} sx={{mt: 3}}>
                                    <Typography variant="h6">{className}</Typography>
                                    <Table size="small">
                                        <TableHead>
                                            <TableRow>
                                                <TableCell>№</TableCell>
                                                <TableCell>Участник</TableCell>
                                            </TableRow>
                                        </TableHead>
                                        <TableBody>
                                            {classParticipants.map((p) => (
                                                <TableRow
                                                    key={p.id}
                                                    sx={{
                                                        backgroundColor: p.isReserve ? 'grey.100' : 'inherit'
                                                    }}
                                                >
                                                    <TableCell>{p.number}</TableCell>
                                                    <TableCell>
                                                        {
                                                            <TableCell>
                                                                {p.name}
                                                                {p.isReserve && (
                                                                    <Typography variant="caption" color="text.secondary"
                                                                                sx={{ml: 1}}>
                                                                        (резерв)
                                                                    </Typography>
                                                                )}
                                                            </TableCell>
                                                        }
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>

                                    {/* Индикатор заполненности класса */}
                                    <Box sx={{mt: 2, display: 'flex', alignItems: 'center', gap: 1}}>
                                        <Typography variant="body2" color="text.secondary">
                                            Зарегистрировано: {classParticipants.length} / {maxParticipantsPerClass}
                                        </Typography>
                                        {classParticipants.length >= maxParticipantsPerClass && (
                                            <Chip
                                                label="Набор закрыт"
                                                color="warning"
                                                size="small"
                                            />
                                        )}
                                    </Box>

                                    {/* Кнопка регистрации (только если открыт приём) */}
                                    {isRegistrationOpen && classParticipants.length < maxParticipantsPerClass && (
                                        <Button
                                            variant="outlined"
                                            startIcon={<DownloadIcon/>}
                                            sx={{mt: 2}}
                                            onClick={() => alert('Переход на форму регистрации')}
                                        >
                                            Зарегистрироваться в {className}
                                        </Button>
                                    )}
                                </Box>
                            ))
                    }
                </Box>
            )}

            {activeTab === 'events' && (
                <Box>
                    <Tabs
                        value={activeClassTab}
                        onChange={(e, newValue) => setActiveClassTab(newValue)}
                        variant="scrollable"
                    >
                        <Tab label="Список участников" value={0}/>
                        {stage.hasGeneralQualification ? (
                            <Tab label="Общая квалификация" value={1}/>
                        ) : (
                            Object.keys(participants).map((className, idx) => (
                                <Tab key={className} label={`Квалификация ${className}`} value={idx + 1}/>
                            ))
                        )}
                        {/* Гонки (по количеству из настроек этапа) */}
                        {[...Array(stage.raceCount || 1)].map((_, raceIdx) => (
                            <Tab
                                key={raceIdx}
                                label={`Гонка ${raceIdx + 1}`}
                                value={stage.hasGeneralQualification ? raceIdx + 2 : raceIdx + 1 + Object.keys(participants).length}
                            />
                        ))}
                    </Tabs>

                    {/* Контент вкладок событий */}
                    {activeClassTab === 0 && (
                        <Box sx={{mt: 3}}>
                            <Typography variant="h6">Список участников</Typography>
                            {/* Здесь можно повторить таблицу участников из вкладки "Классы" */}
                            <Table size="small">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>№</TableCell>
                                        <TableCell>Участник</TableCell>
                                        <TableCell>Класс</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {Object.entries(participants).flatMap(([className, classParticipants]) =>
                                        classParticipants.map(p => (
                                            <TableRow key={p.id}>
                                                <TableCell>{p.number}</TableCell>
                                                <TableCell>{p.name}</TableCell>
                                                <TableCell>{className}</TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </Box>
                    )}

                    {stage.hasGeneralQualification && activeClassTab === 1 && (
                        <Box sx={{mt: 3}}>
                            <Typography variant="h6">Общая квалификация</Typography>
                            <Typography paragraph>
                                Здесь отображаются результаты общей квалификации.
                            </Typography>
                            {/* Место для таблицы результатов */}
                        </Box>
                    )}

                    {!stage.hasGeneralQualification &&
                        activeClassTab > 0 &&
                        activeClassTab <= Object.keys(participants).length && (
                            <Box sx={{mt: 3}}>
                                <Typography variant="h6">
                                    Квалификация {Object.keys(participants)[activeClassTab - 1]}
                                </Typography>
                                <Typography paragraph>
                                    Результаты квалификации для выбранного класса.
                                </Typography>
                                {/* Место для таблицы результатов */}
                            </Box>
                        )}

                    {activeClassTab >= (stage.hasGeneralQualification ? 2 : Object.keys(participants).length + 1) && (
                        <Box sx={{mt: 3}}>
                            <Typography
                                variant="h6">Гонка {activeClassTab - (stage.hasGeneralQualification ? 1 : Object.keys(participants).length)}</Typography>
                            <Typography paragraph>
                                Результаты гонки.
                            </Typography>
                            {/* Место для таблицы результатов */}
                        </Box>
                    )}
                </Box>
            )}

            {/* Действия для завершённого этапа */}
            {isCompleted && (
                <Box sx={{mt: 4, textAlign: 'right'}}>
                    <Button
                        variant="contained"
                        startIcon={<PrintIcon/>}
                        onClick={() => window.print()}
                    >
                        Печать результатов
                    </Button>
                </Box>
            )}
        </Container>
    );
};

export default StagePage;

