import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import LogoutIcon from '@mui/icons-material/Logout';
import { Outlet } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import { useProgress } from '../../hooks/useProgress';
import { XPDisplay } from '../common/XPDisplay';
import { HeartsDisplay } from '../common/HeartsDisplay';
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';

export function AppShell() {
  const { logout } = useAuth();
  const { progress } = useProgress();

  const stats = progress?.stats;

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <AppBar
        position="sticky"
        sx={{
          bgcolor: 'background.paper',
          backgroundImage: 'none',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}
        elevation={0}
      >
        <Toolbar sx={{ justifyContent: 'space-between' }}>
          <Typography
            variant="h6"
            sx={{
              fontWeight: 700,
              color: '#E8453C',
              letterSpacing: '0.05em',
            }}
          >
            AYOS
          </Typography>

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            {stats && (
              <>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                  <LocalFireDepartmentIcon
                    sx={{ color: '#FF9600', fontSize: 20 }}
                  />
                  <Typography
                    variant="body2"
                    sx={{ color: '#FF9600', fontWeight: 700 }}
                  >
                    {stats.streak_days}
                  </Typography>
                </Box>
                <XPDisplay xp={stats.xp} />
                <HeartsDisplay hearts={stats.hearts} />
              </>
            )}
            <IconButton
              onClick={logout}
              size="small"
              sx={{ color: 'text.secondary' }}
            >
              <LogoutIcon fontSize="small" />
            </IconButton>
          </Box>
        </Toolbar>
      </AppBar>

      <Box
        component="main"
        sx={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Outlet />
      </Box>
    </Box>
  );
}