maternal-app/maternal-web/components/layouts/AppShell/AppShell.tsx

'use client';

import { useState } from 'react';
import {
  Box,
  Container,
  Chip,
  Tooltip,
  IconButton,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  Avatar,
  Divider,
} from '@mui/material';
import { MobileNav } from '../MobileNav/MobileNav';
import { TabBar } from '../TabBar/TabBar';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { ReactNode } from 'react';
import { useWebSocket } from '@/hooks/useWebSocket';
import { Wifi, WifiOff, People, AccountCircle, Settings, ChildCare, Group, Logout } from '@mui/icons-material';
import { useTranslation } from '@/hooks/useTranslation';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth/AuthContext';

interface AppShellProps {
  children: ReactNode;
}

export const AppShell = ({ children }: AppShellProps) => {
  const { t } = useTranslation('common');
  const router = useRouter();
  const { user, logout } = useAuth();
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(max-width: 1024px)');
  const { isConnected, presence } = useWebSocket();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

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

  const handleLogout = async () => {
    handleMenuClose();
    await logout();
    router.push('/login');
  };

  return (
    <Box sx={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
      bgcolor: 'background.default',
      pb: { xs: '64px', md: 0 }, // Space for tab bar on mobile
    }}>
      {!isMobile && <MobileNav />}

      {/* Mobile Header Bar */}
      {isMobile && (
        <Box
          sx={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            height: 48,
            bgcolor: 'background.paper',
            borderBottom: '1px solid',
            borderColor: 'divider',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            px: 2,
            zIndex: 1200,
            boxShadow: 1,
          }}
        >
          {/* Connection Status & Presence Indicator */}
          <Box
            sx={{
              display: 'flex',
              gap: 1,
            }}
          >
            <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
              <Chip
                icon={isConnected ? <Wifi /> : <WifiOff />}
                label={isConnected ? t('connection.live') : t('connection.offline')}
                size="small"
                color={isConnected ? 'success' : 'default'}
                sx={{
                  fontWeight: 600,
                }}
              />
            </Tooltip>

            {isConnected && presence.count > 1 && (
              <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
                <Chip
                  icon={<People />}
                  label={presence.count}
                  size="small"
                  color="primary"
                  sx={{
                    fontWeight: 600,
                  }}
                />
              </Tooltip>
            )}
          </Box>

          {/* User Menu Button - Top Right */}
          <IconButton
            onClick={handleMenuOpen}
            size="small"
            aria-label="user menu"
            aria-controls={anchorEl ? 'user-menu' : undefined}
            aria-haspopup="true"
            aria-expanded={anchorEl ? 'true' : undefined}
          >
            <Avatar
              sx={{
                width: 32,
                height: 32,
                bgcolor: 'primary.main',
                fontSize: '0.875rem',
              }}
            >
              {user?.name?.charAt(0).toUpperCase() || 'U'}
            </Avatar>
          </IconButton>

          <Menu
            id="user-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleMenuClose}
            onClick={handleMenuClose}
            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
            sx={{
              mt: 1,
            }}
          >
            <MenuItem onClick={() => handleNavigate('/settings')}>
              <ListItemIcon>
                <Settings fontSize="small" />
              </ListItemIcon>
              <ListItemText>{t('navigation.settings')}</ListItemText>
            </MenuItem>
            <MenuItem onClick={() => handleNavigate('/children')}>
              <ListItemIcon>
                <ChildCare fontSize="small" />
              </ListItemIcon>
              <ListItemText>{t('navigation.children')}</ListItemText>
            </MenuItem>
            <MenuItem onClick={() => handleNavigate('/family')}>
              <ListItemIcon>
                <Group fontSize="small" />
              </ListItemIcon>
              <ListItemText>{t('navigation.family')}</ListItemText>
            </MenuItem>
            <Divider />
            <MenuItem onClick={handleLogout}>
              <ListItemIcon>
                <Logout fontSize="small" color="error" />
              </ListItemIcon>
              <ListItemText>{t('navigation.logout')}</ListItemText>
            </MenuItem>
          </Menu>
        </Box>
      )}

      {/* Connection Status & Presence Indicator - Desktop Only */}
      {!isMobile && (
        <Box
          sx={{
            position: 'fixed',
            top: 16,
            right: 16,
            zIndex: 1200,
            display: 'flex',
            gap: 1,
          }}
        >
          <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
            <Chip
              icon={isConnected ? <Wifi /> : <WifiOff />}
              label={isConnected ? t('connection.live') : t('connection.offline')}
              size="small"
              color={isConnected ? 'success' : 'default'}
              sx={{
                fontWeight: 600,
                boxShadow: 1,
              }}
            />
          </Tooltip>

          {isConnected && presence.count > 1 && (
            <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
              <Chip
                icon={<People />}
                label={presence.count}
                size="small"
                color="primary"
                sx={{
                  fontWeight: 600,
                  boxShadow: 1,
                }}
              />
            </Tooltip>
          )}
        </Box>
      )}

      <Container
        maxWidth={isTablet ? 'md' : 'lg'}
        sx={{
          flex: 1,
          px: { xs: 2, md: 3 },
          py: 3,
          pt: { xs: '64px', md: 3 }, // Add top padding for header bar on mobile
        }}
      >
        {children}
      </Container>

      {isMobile && <TabBar />}
    </Box>
  );
};