import Grid from "@mui/material/Grid";
import * as React from "react";
import {Card, CardContent} from "@mui/material";
import {useUser} from "../../../hooks/useUser";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Divider from "@mui/material/Divider";
import Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import {Trophy} from "@phosphor-icons/react";

// Компонент таймера (упрощённый)
const CountdownTimer = ({targetDate}) => {
    const [timeLeft, setTimeLeft] = React.useState({});

    React.useEffect(() => {
        const updateTimer = () => {
            const now = new Date().getTime();
            const distance = new Date(targetDate).getTime() - now;

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            setTimeLeft({days, hours, minutes, seconds});
        };

        const interval = setInterval(updateTimer, 1000);
        updateTimer();

        return () => clearInterval(interval);
    }, [targetDate]);


    return (
        <Typography variant="h6" color="error" sx={{fontWeight: 'bold'}}>
            До старта: {timeLeft.days}д {timeLeft.hours}ч {timeLeft.minutes}м {timeLeft.seconds}с
        </Typography>
    );
};


// Основной компонент приветственного блока
const HomePageContent = () => {
    const {user} = useUser();

    // Данные чемпионатов (можно подтянуть из API/state)
    const championships = [
        {
            title: 'SWC Зимний чемпионат 2025–2026',
            stage: '2‑й этап',
            date: '08.02.2026',
            link: '/swc-registration',
            icon: <Trophy fontSize="large"/>,
        },
        {
            title: 'Honda Winter Cup 2026',
            stage: '1‑й этап',
            date: '31.01.2026',
            link: '/hwc-info',
            icon: <Trophy fontSize="large"/>,
        },
        {
            title: 'Кубок Покровска 2026 (онлайн)',
            stage: '1‑й этап',
            date: '01.02.2026',
            link: '/pokrovsk-sim',
            icon: <Trophy fontSize="large"/>,
        },
    ];

    // Результаты последнего этапа
    const results = {
        Юниоры: ['Пупкин Петя', 'Иванов Ваня', 'Кот Кирилл'],
        Взрослые: ['Пупкин Петя', 'Иванов Ваня', 'Кот Кирилл'],
        Богатыри: ['Пупкин Петя', 'Иванов Ваня', 'Кот Кирилл'],
        '35+': ['Пупкин Петя', 'Иванов Ваня', 'Кот Кирилл'],
    };


    // Спонсоры (макеты URL)
    const sponsors = [
        {name: 'Минеральная вода Ульянка', logo: '/sponsors/ulyanka.png'},
        {name: 'Gosha Racing Team', logo: '/sponsors/gosha.png'},
        {name: 'Diff', logo: '/sponsors/diff.png'},
    ];


    return (
        <Container maxWidth="xl" sx={{py: 3}}>
            {/* 1. Приветствие */}
            <Typography variant="h4" gutterBottom>
                Добро пожаловать на платформу «КартХолл»!
            </Typography>
            <Typography variant="h6" color="text.secondary" gutterBottom sx={{mb: 4}}>
                Ваш гид по гоночным чемпионатам, этапам и онлайн‑соревнованиям.
            </Typography>

            {/* 2. Карточки анонсов */}
            <Grid container spacing={4} sx={{mb: 6}}>
                {championships.map((champ, index) => (
                    <Grid item xs={12} sm={6} md={4} key={index}>
                        <Card variant="outlined" sx={{
                            height: '100%',
                            transition: 'transform 0.2s',
                            '&:hover': {transform: 'scale(1.02)'}
                        }}>
                            <CardContent>
                                <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
                                    {champ.icon}
                                    <Typography variant="h6" sx={{ml: 1}}>
                                        {champ.title}
                                    </Typography>
                                </Box>
                                <Typography color="text.secondary" sx={{mb: 1}}>
                                    {champ.stage} — {champ.date}
                                </Typography>
                                <Button
                                    variant="contained"
                                    color="primary"
                                    href={champ.link}
                                    sx={{mt: 2}}
                                >
                                    Подробнее
                                </Button>
                            </CardContent>
                        </Card>
                    </Grid>
                ))}
            </Grid>

            {/* 3. Быстрые действия */}
            <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 2, mb: 6}}>
                <Button variant="contained" color="secondary" href="/register">
                    Зарегистрироваться на этап
                </Button>
                <Button variant="outlined" href="/calendar">
                    Посмотреть календарь всех этапов
                </Button>
                <Button variant="outlined" href="/rules">
                    Правила гонок
                </Button>
            </Box>

            {/* 4. Спонсоры */}
            <Box sx={{display: 'flex', overflowX: 'auto', py: 2, gap: 3, mb: 4}}>
                {sponsors.map((sponsor, idx) => (
                    <Avatar
                        key={idx}
                        src={sponsor.logo}
                        alt={sponsor.name}
                        sx={{width: 300, height: 150, borderRadius: '8px'}}
                    />
                ))}
            </Box>
            <Typography variant="caption" color="text.secondary" sx={{mb: 4}}>
                Наши партнёры: поддержка чемпионатов и призов
            </Typography>

            {/* 5. Прокат */}
            <Box sx={{textAlign: 'center', mb: 6}}>
                <Typography variant="h5" sx={{mb: 2}}>
                    Не гоняешь? Попробуй прокат!
                </Typography>
                <Typography color="text.secondary" sx={{mb: 3}}>
                    Ощутите адреналин за рулём прокатного карта. Доступно ежедневно с 10:00 до 22:00.
                </Typography>
                <Button variant="contained" color="success" href="/rent">
                    Забронировать карта
                </Button>
            </Box>

            {/* 6. Таймер до ближайшего этапа (Honda Winter Cup) */}
            <Box sx={{textAlign: 'center', mb: 6}}>
                <Typography variant="h5" sx={{mb: 2}}>
                    Следующий этап стартует уже:
                </Typography>
                <CountdownTimer targetDate="2026-01-31T14:00:00"/>
            </Box>

            {/* 7. Результаты последнего этапа */}
            <Box sx={{mb: 6}}>
                <Typography variant="h5" sx={{mb: 3}}>
                    Итоги 1‑го этапа SWC (18.01.2026)
                </Typography>
                {Object.entries(results).map(([category, winners]) => (
                    <Box key={category} sx={{mb: 2}}>
                        <Typography variant="subtitle1" color="primary">
                            {category}:
                        </Typography>
                        <Typography color="text.secondary">
                            1 место: {winners[0]}, 2 место: {winners[1]}, 3 место: {winners[2]}
                        </Typography>
                    </Box>
                ))}
                <Button
                    variant="outlined"
                    href="/stages"
                    sx={{mt: 3}}
                >
                    Все результаты
                </Button>
            </Box>

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

    // return (
    //     <Paper sx={{flexGrow: 1, p: 1}}>
    //         <Box sx={{mb: 3, p: 2}}>
    //             <Typography variant="h3" component="div" sx={{flexGrow: 1}}>
    //                 Добро пожаловать на платформу «КартХолл»!
    //             </Typography>
    //             <Typography variant="h6" component="div" sx={{flexGrow: 1, mt: 1}}>
    //                 Ваш гид по гоночным чемпионатам, этапам и онлайн‑соревнованиям.
    //             </Typography>
    //         </Box>
    //
    //         <Box sx={{p: 2}}>
    //
    //             <Grid spacing={1} rowSpacing={1}>
    //                 {anounce.map((item, index) => {
    //                     return (
    //                         // Карточка анонса
    //                         <Grid size={3}>
    //                             <Paper sx={{p: 2, mb: 1}}>
    //                                 <Stack>
    //                                     <Typography variant="h5">{item.championship}</Typography>
    //                                 </Stack>
    //                                 <CardMedia
    //                                     sx={{
    //                                         loading: "eager",
    //                                         borderRadius: 2
    //                                     }}
    //                                     // onClick={() => handleSelect(row)}
    //                                     component="img"
    //                                     alt={item.name}
    //                                     height="300"
    //
    //                                     image={item.photo}
    //                                 />
    //                                 <CardContent sx={{pb: 0, pl: 2, pt: 0}}>
    //                                     <Typography variant="h6"
    //                                                 mt={2}>{item.name} - {item.message} </Typography>
    //                                     <Typography> </Typography>
    //                                     {/*<CocktailDescription row={row}/>*/}
    //                                 </CardContent>
    //                                 <CardActions>
    //                                     <Button variant="contained" color="primary" component="div"
    //                                         // onClick={() => cocktailClient.drinkCocktail(row.id, createSuccess, createError)}
    //                                     >
    //                                         <LocalBarIcon fontSize='small'/> Регистрация
    //                                     </Button>
    //                                 </CardActions>
    //                             </Paper>
    //                         </Grid>
    //                     )
    //                 })}
    //             </Grid>
    //         </Box>
    //
    //         <Card sx={{p: 2, mt: 3}}>
    //             {/*todo: под вопросом*/}
    //             <Typography variant={'h6'}>Быстрые действия</Typography>
    //             <Stack direction={"row"} spacing={2} sx={{justifyContent: 'center', alignItems: 'center'}}>
    //                 <Button variant={"contained"} size={"large"}>
    //                     Зарегистрироваться на этап
    //                 </Button>
    //                 <Button variant={"contained"} size={"large"}>
    //                     Посмотреть календарь этапов
    //                 </Button>
    //             </Stack>
    //         </Card>
    //
    //         <Box sx={{p: 2, my: 3}}>
    //             <Stack direction={'row'} sx={{my: 1}}>
    //                 {
    //                     sponsors.map((item) => {
    //                         return (
    //                             <Card sx={{m:1}}>
    //                                 <CardMedia
    //                                     sx={{
    //                                         loading: "eager",
    //                                         borderRadius: 2
    //                                     }}
    //                                     // onClick={() => handleSelect(row)}
    //                                     component="img"
    //                                     alt={item.alt}
    //                                     height="60"
    //
    //                                     image={item.photo}
    //                                 />
    //                             </Card>
    //                         )
    //                     })
    //                 }
    //             </Stack>
    //             <Typography variant={'h5'}>Наши партнёры: поддержка чемпионатов и призов</Typography>
    //         </Box>
    //
    //
    //
    //
    //         <Fab sx={{
    //             alpha: '30%',
    //             position: 'sticky',
    //             left: 'calc(100% - 16px)',
    //             bottom: '16px',
    //             color: 'common.white',
    //             bgcolor: blue[600],
    //             '&:hover': {
    //                 bgcolor: blue[600],
    //             },
    //         }}
    //              onClick={() => window.window.scrollTo(0, 0)}
    //              aria-label='Expand'
    //              color='inherit'>
    //             <UpIcon/>
    //         </Fab>
    //     </Paper>
    // );
}

export default HomePageContent;