'use client';

import { Box, Container, Chip, Tooltip } 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 } from '@mui/icons-material';

interface AppShellProps {
  children: ReactNode;
}

export const AppShell = ({ children }: AppShellProps) => {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(max-width: 1024px)');
  const { isConnected, presence } = useWebSocket();

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

      {/* Connection Status & Presence Indicator */}
      <Box
        sx={{
          position: 'fixed',
          top: isMobile ? 8 : 16,
          right: isMobile ? 8 : 16,
          zIndex: 1200,
          display: 'flex',
          gap: 1,
        }}
      >
        <Tooltip title={isConnected ? 'Real-time sync active' : 'Real-time sync disconnected'}>
          <Chip
            icon={isConnected ? <Wifi /> : <WifiOff />}
            label={isConnected ? 'Live' : 'Offline'}
            size="small"
            color={isConnected ? 'success' : 'default'}
            sx={{
              fontWeight: 600,
              boxShadow: 1,
            }}
          />
        </Tooltip>

        {isConnected && presence.count > 1 && (
          <Tooltip title={`${presence.count} family members online`}>
            <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: isMobile ? 2 : 3,
          py: 3,
        }}
      >
        {children}
      </Container>

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