// src/pages/StagePage.jsx
import React, { useState, useEffect } from 'react';
import {
    Container, Typography, Button, Paper, Box, Divider, Alert, Chip
} from '@mui/material';
import { Download as DownloadIcon } from '@mui/icons-material';
import { useParams } from 'react-router-dom';
import {MOCK_STAGES, STAGE_STATUSES} from '../../../data/constants';


const StagePage = () => {
    const { id } = useParams();
    const [stage, setStage] = useState(null);
    const [error, setError] = useState(false);

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

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

    if (!stage) {
        return null; // или спиннер
    }

    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            <Typography variant="h4" gutterBottom>{stage.title}</Typography>
            <Typography variant="h6" color="text.secondary" gutterBottom>
                {stage.stage}
            </Typography>

            <Paper sx={{ p: 4, mb: 4 }}>
                <Typography variant="h5" gutterBottom>Информация об этапе</Typography>
                <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
                    <Box>
                        <Typography variant="subtitle2" color="text.secondary">
                            Дата
                        </Typography>
                        <Typography>
                            {new Date(stage.date).toLocaleDateString('ru-RU', {
                                weekday: 'long',
                                day: 'numeric',
                                month: 'long',
                                year: 'numeric'
                            })}
                        </Typography>
                    </Box>
                    <Box>
                        <Typography variant="subtitle2" color="text.secondary">
                            Место проведения
                        </Typography>
                        <Typography>{stage.location}</Typography>
                    </Box>
                    <Box>
                        <Typography variant="subtitle2" color="text.secondary">
                            Класс
                        </Typography>
                        <Typography>{stage.class}</Typography>
                    </Box>
                    <Box>
                        <Typography variant="subtitle2" color="text.secondary">
                            Статус
                        </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>
                </Box>

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

                <Typography variant="body1" paragraph>
                    {stage.description}
                </Typography>

                {stage.registrationLink && (
                    <Button
                        variant="contained"
                        color="success"
                        href={stage.registrationLink}
                        target="_blank"
                        startIcon={<DownloadIcon />}
                        sx={{ mt: 2 }}
                    >
                        Перейти на регистрацию
                    </Button>
                )}
            </Paper>

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

export default StagePage;
