'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Avatar,
  Box,
  Divider,
} from '@mui/material';
import {
  Menu as MenuIcon,
  Home,
  Timeline,
  Chat,
  Insights,
  Settings,
  ChildCare,
  Group,
  Logout,
} from '@mui/icons-material';
import { useTranslation } from '@/hooks/useTranslation';

export const MobileNav = () => {
  const { t } = useTranslation('common');
  const [drawerOpen, setDrawerOpen] = useState(false);
  const router = useRouter();

  const menuItems = [
    { label: t('navigation.dashboard'), icon: <Home />, path: '/' },
    { label: t('navigation.trackActivity'), icon: <Timeline />, path: '/track' },
    { label: t('navigation.ai'), icon: <Chat />, path: '/ai-assistant' },
    { label: t('navigation.insights'), icon: <Insights />, path: '/insights' },
    { label: t('navigation.children'), icon: <ChildCare />, path: '/children' },
    { label: t('navigation.family'), icon: <Group />, path: '/family' },
    { label: t('navigation.settings'), icon: <Settings />, path: '/settings' },
  ];

  const handleNavigate = (path: string) => {
    router.push(path);
    setDrawerOpen(false);
  };

  return (
    <>
      <AppBar position="static" elevation={1} sx={{ bgcolor: 'background.paper' }} component="header">
        <Toolbar component="nav" aria-label="Primary navigation">
          <IconButton
            edge="start"
            color="primary"
            aria-label="menu"
            onClick={() => setDrawerOpen(true)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: '#DB7093', fontWeight: 600 }}>
            {t('appName')}
          </Typography>
          <IconButton
            color="primary"
            aria-label="home"
            onClick={() => router.push('/')}
            sx={{ mr: 1 }}
          >
            <Home />
          </IconButton>
          <Avatar sx={{ bgcolor: 'primary.main' }} alt="User profile photo">U</Avatar>
        </Toolbar>
      </AppBar>

      <Drawer
        anchor="left"
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        aria-label="Mobile navigation menu"
      >
        <Box
          sx={{ width: 280 }}
          role="navigation"
          aria-label="Main menu"
        >
          <Box sx={{ p: 3, bgcolor: 'primary.light' }}>
            <Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }} alt="User profile photo">U</Avatar>
            <Typography variant="h6" fontWeight="600">User Name</Typography>
            <Typography variant="body2" color="text.secondary">user@example.com</Typography>
          </Box>

          <List>
            {menuItems.map((item) => (
              <ListItem key={item.path} disablePadding>
                <ListItemButton onClick={() => handleNavigate(item.path)}>
                  <ListItemIcon sx={{ color: 'primary.main' }}>
                    {item.icon}
                  </ListItemIcon>
                  <ListItemText primary={item.label} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>

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

          <List>
            <ListItem disablePadding>
              <ListItemButton onClick={() => handleNavigate('/logout')}>
                <ListItemIcon sx={{ color: 'error.main' }}>
                  <Logout />
                </ListItemIcon>
                <ListItemText primary={t('navigation.logout')} />
              </ListItemButton>
            </ListItem>
          </List>
        </Box>
      </Drawer>
    </>
  );
};