// src/pages/ChampionshipPage.jsx
import React, { useState, useEffect } from 'react';
import {
    Container,
    Typography,
    Paper,
    Box,
    Button,
    Chip,
    Divider,
    Alert,
    CircularProgress
} from '@mui/material';
import { Launch as LaunchIcon, Download as DownloadIcon } from '@mui/icons-material';
import { useParams } from 'react-router-dom';

// Импортируем константы (из предыдущего файла)
import { MOCK_STAGES, STAGE_STATUSES } from '../../../data/constants';

const ChampionshipPage = () => {
    const { id } = useParams();
    const [championship, setChampionship] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);

    useEffect(() => {
        // Имитируем запрос на сервер
        const fetchChampionship = async () => {
            setLoading(true);
            setError(false);

            try {
                // В реальном проекте тут будет fetch(`/api/championships/${id}`)
                // Для примера фильтруем MOCK_STAGES по id этапа (упрощённо)
                const stagesForChampionship = MOCK_STAGES.filter(stage => stage.id === Number(id));

                if (stagesForChampionship.length === 0) {
                    setError(true);
                } else {
                    // Формируем данные чемпионата на основе первого подходящего этапа
                    const stage = stagesForChampionship[0];
                    setChampionship({
                        id: stage.id,
                        title: stage.title,
                        description: stage.description || 'Информация о чемпионате отсутствует.',
                        regulationsUrl: '/dummy-regulations.pdf', // Условный URL регламента
                        stages: MOCK_STAGES.filter(s => s.title === stage.title) // Все этапы этого чемпионата
                    });
                }
            } catch (err) {
                setError(true);
            } finally {
                setLoading(false);
            }
        };

        fetchChampionship();
    }, [id]);

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

    if (error || !championship) {
        return (
            <Container maxWidth="lg" sx={{ py: 4 }}>
                <Alert severity="error" sx={{ mb: 3 }}>
                    Чемпионат не найден или произошла ошибка при загрузке данных.
                </Alert>
                <Button variant="contained" onClick={() => window.history.back()}>
                    Вернуться назад
                </Button>
            </Container>
        );
    }

    // Сортируем этапы: сначала предстоящие (регистрация открыта / идёт), потом прошедшие
    const sortedStages = [...championship.stages].sort((a, b) => {
        const isAPast = a.status === STAGE_STATUSES.COMPLETED;
        const isBPast = b.status === STAGE_STATUSES.COMPLETED;
        if (isAPast && !isBPast) return 1;
        if (!isAPast && isBPast) return -1;
        return 0; // Сохраняем порядок для этапов одного типа
    });

    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            {/* Заголовок и основная информация */}
            <Typography variant="h4" gutterBottom>
                {championship.title}
            </Typography>

            <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
                {championship.description}
            </Typography>

            {/* Кнопка загрузки регламента */}
            <Button
                variant="outlined"
                startIcon={<DownloadIcon />}
                href={championship.regulationsUrl}
                target="_blank"
                rel="noopener noreferrer"
                sx={{ mb: 4 }}
            >
                Скачать регламент
            </Button>

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

            {/* Список этапов */}
            <Typography variant="h5" gutterBottom>Этапы чемпионата</Typography>


            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {sortedStages.map((stage) => (
                    <Paper
                        key={stage.id}
                        variant="outlined"
                        sx={{
                            p: 3,
                            '&:hover': { boxShadow: 3 },
                            transition: 'box-shadow 0.2s'
                        }}
                        onClick={() => window.location.replace("/stages/" + stage.id)}
                    >
                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
                            <Typography variant="subtitle1" fontWeight={600}>
                                {stage.stage}
                            </Typography>
                            <Chip
                                label={stage.status}
                                color={
                                    stage.status === STAGE_STATUSES.GOING
                                        ? 'warning'
                                        : stage.status === STAGE_STATUSES.REGISTRATION_OPEN
                                            ? 'success'
                                            : stage.status === STAGE_STATUSES.PRE_REGISTRATION
                                                ? 'info'
                                                : 'default'
                                }
                                sx={{
                                    backgroundColor:
                                        stage.status === STAGE_STATUSES.GOING
                                            ? 'warning.dark'
                                            : stage.status === STAGE_STATUSES.REGISTRATION_OPEN
                                                ? 'success.dark'
                                                : stage.status === STAGE_STATUSES.PRE_REGISTRATION
                                                    ? 'info.dark'
                                                    : 'grey.300',
                                    color: 'white',
                                    fontWeight: 500,
                                    fontSize: '0.8rem'
                                }}
                            />
                        </Box>

                        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                            {new Date(stage.date).toLocaleDateString('ru-RU', {
                                weekday: 'long',
                                day: 'numeric',
                                month: 'long',
                                year: 'numeric'
                            })}
                        </Typography>

                        <Typography variant="body2" sx={{ mb: 1 }}>
                            Место: {stage.location}
                        </Typography>

                        {stage.description && (
                            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                                {stage.description}
                            </Typography>
                        )}

                        {/* Бейджи вместо кнопок */}
                        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
                            {stage.status === STAGE_STATUSES.REGISTRATION_OPEN && (
                                <Chip
                                    label="Регистрация открыта"
                                    color="success"
                                    variant="outlined"
                                    icon={<LaunchIcon fontSize="small" />}
                                />
                            )}
                            {stage.status === STAGE_STATUSES.COMPLETED && (
                                <Chip
                                    label="Результаты"
                                    color="primary"
                                    variant="outlined"
                                    icon={<LaunchIcon fontSize="small" />}
                                />
                            )}
                            {(stage.status === STAGE_STATUSES.GOING ||
                                stage.status === STAGE_STATUSES.PRE_REGISTRATION) && (
                                <Chip
                                    label={
                                        stage.status === STAGE_STATUSES.GOING
                                            ? 'Идёт сейчас'
                                            : 'Предрегистрация'
                                    }
                                    color={stage.status === STAGE_STATUSES.GOING ? 'warning' : 'info'}
                                    variant="outlined"
                                />
                            )}
                        </Box>
                    </Paper>
                ))}
            </Box>

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

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

export default ChampionshipPage;
