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

'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useState } from 'react';
import { BottomNavigation, BottomNavigationAction, Paper, Fab, Box } from '@mui/material';
import {
  Home,
  Timeline,
  Insights,
  History,
  Mic,
} from '@mui/icons-material';
import { useTranslation } from '@/hooks/useTranslation';

export const TabBar = () => {
  const { t } = useTranslation('common');
  const router = useRouter();
  const pathname = usePathname();
  const [voiceOpen, setVoiceOpen] = useState(false);

  const tabs = [
    { label: t('navigation.home'), icon: <Home />, value: '/' },
    { label: t('navigation.track'), icon: <Timeline />, value: '/track' },
    { label: '', icon: null, value: 'voice' }, // Placeholder for center button
    { label: t('navigation.insights'), icon: <Insights />, value: '/insights' },
    { label: t('navigation.history'), icon: <History />, value: '/history' },
  ];

  return (
    <>
      <Paper
        component="nav"
        aria-label="Primary navigation"
        sx={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          zIndex: 1000,
        }}
        elevation={3}
      >
        <BottomNavigation
          value={pathname}
          onChange={(event, newValue) => {
            if (newValue !== 'voice') {
              router.push(newValue);
            }
          }}
          showLabels
          sx={{
            height: 64,
            '& .MuiBottomNavigationAction-root': {
              minWidth: 60,
              '&.Mui-selected': {
                color: 'primary.main',
              },
            },
          }}
        >
          {tabs.map((tab) => {
            if (tab.value === 'voice') {
              // Center voice button placeholder
              return (
                <Box
                  key="voice-placeholder"
                  sx={{
                    flex: 1,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                />
              );
            }
            return (
              <BottomNavigationAction
                key={tab.value}
                label={tab.label}
                icon={tab.icon}
                value={tab.value}
              />
            );
          })}
        </BottomNavigation>
      </Paper>

      {/* Voice Command Floating Button - Centered */}
      <Fab
        color="secondary"
        aria-label="voice command"
        onClick={() => {
          // Trigger voice command - will integrate with existing VoiceFloatingButton
          const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
          if (voiceButton) {
            voiceButton.click();
          }
        }}
        sx={{
          position: 'fixed',
          bottom: 40,
          left: '50%',
          transform: 'translateX(-50%)',
          zIndex: 1100,
          width: 56,
          height: 56,
          bgcolor: 'secondary.main',
          '&:hover': {
            bgcolor: 'secondary.dark',
          },
        }}
      >
        <Mic />
      </Fab>
    </>
  );
};