// src/pages/UserPage.jsx
import React, { useState } from 'react';
import {
    Container,
    Typography,
    Tabs,
    Tab,
    Avatar,
    Box,
    Card,
    CardContent,
    List,
    ListItem,
    ListItemText,
    Divider,
    Button,
} from '@mui/material';
import { useParams } from 'react-router-dom';

const UserPage = () => {
    const { userId } = useParams();
    const [activeTab, setActiveTab] = useState(0);

    // Пример данных пользователя (в реальном проекте — из API)
    const user = {
        id: userId,
        name: 'Алексей Карпов',
        avatar: '/images/user-avatar.jpg',
        email: 'alex@kart-hall.ru',
        phone: '+7 (999) 123-45-67',
        joinDate: '2023-05-10',
        totalRaces: 24,
        bestTime: '01:23.450', // лучшее время на трассе
    };

    // История заездов
    const races = [
        { id: 1, event: 'Кубок KartHall 2024', date: '2024-08-15', time: '01:25.120', place: 3 },
        { id: 2, event: 'Ночной заезд', date: '2024-09-01', time: '01:24.890', place: 1 },
        // ...
    ];

    // Активные бронирования
    const bookings = [
        { id: 1, track: 'Картодром KartHall', date: '2024-10-10 18:00', status: 'подтверждено' },
        { id: 2, track: 'Виртуальная трасса "Формула У"', date: '2024-10-12 20:00', status: 'ожидает оплаты' },
    ];

    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            {/* Шапка профиля */}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 4 }}>
                <Avatar src={user.avatar} sx={{ width: 80, height: 80 }} />
                <Box>
                    <Typography variant="h5">{user.name}</Typography>
                    <Typography variant="body2" color="text.secondary">
                        Участник с {new Date(user.joinDate).toLocaleDateString('ru-RU')}
                    </Typography>
                </Box>
            </Box>

            {/* Вкладки */}
            <Tabs value={activeTab} onChange={(e, newValue) => setActiveTab(newValue)} sx={{ mb: 3 }}>
                <Tab label="Профиль" value={0} />
                <Tab label="Мои заезды" value={1} />
                <Tab label="Бронирования" value={2} />
                <Tab label="Настройки" value={3} />
            </Tabs>

            {/* Контент вкладок */}
            {activeTab === 0 && (
                <Card>
                    <CardContent>
                        <Typography variant="h6" gutterBottom>Личная информация</Typography>
                        <List>
                            <ListItem>
                                <ListItemText primary="Email" secondary={user.email} />
                            </ListItem>
                            <Divider />
                            <ListItem>
                                <ListItemText primary="Телефон" secondary={user.phone} />
                            </ListItem>
                            <Divider />
                            <ListItem>
                                <ListItemText
                                    primary="Всего заездов"
                                    secondary={user.totalRaces}
                                />
                            </ListItem>
                            <Divider />
                            <ListItem>
                                <ListItemText
                                    primary="Лучшее время"
                                    secondary={user.bestTime}
                                />
                            </ListItem>
                        </List>
                    </CardContent>
                </Card>
            )}

            {activeTab === 1 && (
                <Card>
                    <CardContent>
                        <Typography variant="h6" gutterBottom>История заездов</Typography>
                        <List>
                            {races.map((race) => (
                                <ListItem key={race.id} divider>
                                    <ListItemText
                                        primary={race.event}
                                        secondary={`Дата: ${race.date} | Время: ${race.time} | Место: ${race.place}`}
                                    />
                                </ListItem>
                            ))}
                        </List>
                    </CardContent>
                </Card>
            )}

            {activeTab === 2 && (
                <Card>
                    <CardContent>
                        <Typography variant="h6" gutterBottom>Мои бронирования</Typography>
                        <List>
                            {bookings.map((booking) => (
                                <ListItem key={booking.id} divider>
                                    <ListItemText
                                        primary={booking.track}
                                        secondary={`Дата: ${booking.date} | Статус: ${booking.status}`}
                                    />
                                    {booking.status === 'ожидает оплаты' && (
                                        <Button size="small" variant="outlined" color="warning">
                                            Оплатить
                                        </Button>
                                    )}
                                </ListItem>
                            ))}
                        </List>
                    </CardContent>
                </Card>
            )}

            {activeTab === 3 && (
                <Card>
                    <CardContent>
                        <Typography variant="h6" gutterBottom>Настройки профиля</Typography>
                        <List>
                            <ListItem>
                                <Button variant="outlined">Сменить пароль</Button>
                            </ListItem>
                            <Divider />
                            <ListItem>
                                <Button variant="outlined">Настроить уведомления</Button>
                            </ListItem>
                            <Divider />
                            <ListItem>
                                <Button variant="outlined" color="error">
                                    Удалить аккаунт
                                </Button>
                            </ListItem>
                        </List>
                    </CardContent>
                </Card>
            )}
        </Container>
    );
};

export default UserPage;
