'use client';

import { usePathname, useRouter } from 'next/navigation';
import { BottomNavigation as MuiBottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
import { Home, Celebration, Analytics, Person } from '@mui/icons-material';

export default function BottomNavigation() {
  const pathname = usePathname();
  const router = useRouter();

  // Determine current value based on pathname
  const getCurrentValue = () => {
    if (pathname === '/' || pathname === '/dashboard') return 'home';
    if (pathname.startsWith('/events')) return 'events';
    if (pathname.startsWith('/analytics')) return 'analytics';
    if (pathname.startsWith('/profile')) return 'profile';
    return 'home';
  };

  const value = getCurrentValue();

  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
    switch (newValue) {
      case 'home':
        router.push('/');
        break;
      case 'events':
        router.push('/events');
        break;
      case 'analytics':
        router.push('/analytics');
        break;
      case 'profile':
        router.push('/profile');
        break;
    }
  };

  return (
    <Paper
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: (theme) => theme.zIndex.drawer + 1,
        borderTop: '1px solid',
        borderColor: 'divider',
      }}
      elevation={3}
    >
      <MuiBottomNavigation
        value={value}
        onChange={handleChange}
        showLabels
        sx={{
          height: { xs: 56, sm: 64 },
          '& .MuiBottomNavigationAction-root': {
            minWidth: 'auto',
            px: 1,
          },
          '& .MuiBottomNavigationAction-label': {
            fontSize: { xs: '0.7rem', sm: '0.75rem' },
            fontWeight: 600,
            mt: 0.5,
          },
          '& .MuiBottomNavigationAction-root.Mui-selected': {
            color: 'primary.main',
          },
        }}
      >
        <BottomNavigationAction
          label="홈"
          value="home"
          icon={<Home />}
          sx={{
            '& .MuiSvgIcon-root': {
              fontSize: { xs: 24, sm: 28 },
            },
          }}
        />
        <BottomNavigationAction
          label="이벤트"
          value="events"
          icon={<Celebration />}
          sx={{
            '& .MuiSvgIcon-root': {
              fontSize: { xs: 24, sm: 28 },
            },
          }}
        />
        <BottomNavigationAction
          label="분석"
          value="analytics"
          icon={<Analytics />}
          sx={{
            '& .MuiSvgIcon-root': {
              fontSize: { xs: 24, sm: 28 },
            },
          }}
        />
        <BottomNavigationAction
          label="프로필"
          value="profile"
          icon={<Person />}
          sx={{
            '& .MuiSvgIcon-root': {
              fontSize: { xs: 24, sm: 28 },
            },
          }}
        />
      </MuiBottomNavigation>
    </Paper>
  );
}
