import React from 'react';
import { Avatar, Box, Paper, Typography } from '@mui/material';
import { User } from '../../types/auth.types';

interface UserProfileProps {
  user: User;
}

function getGreeting(): string {
  const h = new Date().getHours();
  if (h >= 5  && h <= 10) return 'Guten Morgen';
  if (h >= 11 && h <= 13) return 'Mahlzeit';
  if (h >= 14 && h <= 16) return 'Guten Nachmittag';
  if (h >= 17 && h <= 21) return 'Guten Abend';
  return 'Gute Nacht';
}

const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  const firstName = user.given_name || user.name.split(' ')[0];
  const initials  = (user.given_name?.[0] || '') + (user.family_name?.[0] || '') || user.name?.[0] || '?';

  return (
    <Paper
      elevation={0}
      sx={{
        background: 'linear-gradient(135deg, #d32f2f 0%, #9a0007 100%)',
        color: 'white',
        borderRadius: 3,
        px: 3.5,
        py: 2,
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Avatar
          sx={{
            width: 44,
            height: 44,
            bgcolor: 'rgba(255,255,255,0.2)',
            fontSize: '1rem',
            fontWeight: 'bold',
            border: '2px solid rgba(255,255,255,0.3)',
          }}
        >
          {initials.toUpperCase()}
        </Avatar>
        <Box>
          <Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
            {getGreeting()}, {firstName}!
          </Typography>
          <Typography variant="body2" sx={{ opacity: 0.8, fontSize: '0.75rem' }}>
            {new Date().toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })}
          </Typography>
        </Box>
      </Box>
    </Paper>
  );
};

export default UserProfile;
