import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  BottomNavigation,
  BottomNavigationAction,
  Paper,
} from '@mui/material';
import {
  Quiz as QuizIcon,
  ShoppingBag as ShopIcon,
  Person as PersonIcon,
  QrCodeScanner as QrIcon,
  AdminPanelSettings as AdminIcon,
} from '@mui/icons-material';
import { useAuth } from '../../context/AuthContext';

export const Navigation: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user, isAdmin } = useAuth();

  const getValue = () => {
    if (location.pathname === '/' || location.pathname === '/home') return 0;
    if (location.pathname.startsWith('/shop')) return 1;
    if (location.pathname.startsWith('/profile')) return 2;
    if (location.pathname.startsWith('/qr-scanner')) return 3;
    if (location.pathname.startsWith('/admin')) return 4;
    return 0;
  };

  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
    switch (newValue) {
      case 0:
        navigate('/home');
        break;
      case 1:
        navigate('/shop');
        break;
      case 2:
        navigate('/profile');
        break;
      case 3:
        navigate('/qr-scanner');
        break;
      case 4:
        navigate('/admin');
        break;
      default:
        navigate('/home');
    }
  };

  return (
    <Paper
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        backgroundColor: '#1A1A1A',
        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
        backdropFilter: 'blur(10px)',
        boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.3)',
      }}
      elevation={0}
    >
      <BottomNavigation
        value={getValue()}
        onChange={handleChange}
        sx={{
          backgroundColor: 'transparent',
          '& .Mui-selected': {
            color: '#FFD700',
          },
        }}
      >
        <BottomNavigationAction
          label="Викторины"
          icon={<QuizIcon />}
          sx={{
            color: '#B0B0B0',
            '&.Mui-selected': {
              color: '#FFD700',
            },
            '&:hover': {
              backgroundColor: 'rgba(255, 215, 0, 0.1)',
              transition: 'all 0.2s ease',
            },
          }}
        />
        <BottomNavigationAction
          label="Магазин"
          icon={<ShopIcon />}
          sx={{
            color: '#B0B0B0',
            '&.Mui-selected': {
              color: '#FFD700',
            },
            '&:hover': {
              backgroundColor: 'rgba(255, 215, 0, 0.1)',
              transition: 'all 0.2s ease',
            },
          }}
        />
        <BottomNavigationAction
          label="Профиль"
          icon={<PersonIcon />}
          sx={{
            color: '#B0B0B0',
            '&.Mui-selected': {
              color: '#FFD700',
            },
            '&:hover': {
              backgroundColor: 'rgba(255, 215, 0, 0.1)',
              transition: 'all 0.2s ease',
            },
          }}
        />
        <BottomNavigationAction
          label="Сканер"
          icon={<QrIcon />}
          sx={{
            color: '#B0B0B0',
            '&.Mui-selected': {
              color: '#FFD700',
            },
            '&:hover': {
              backgroundColor: 'rgba(255, 215, 0, 0.1)',
              transition: 'all 0.2s ease',
            },
          }}
        />
        {isAdmin && (
          <BottomNavigationAction
            label="Админ"
            icon={<AdminIcon />}
            sx={{
              color: '#B0B0B0',
              '&.Mui-selected': {
                color: '#FFD700',
              },
              '&:hover': {
                backgroundColor: 'rgba(255, 215, 0, 0.1)',
                transition: 'all 0.2s ease',
              },
            }}
          />
        )}
      </BottomNavigation>
    </Paper>
  );
};