import React, { memo } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import { Check, DoneAll, Schedule, ErrorOutline } from '@mui/icons-material';
import { ChatMessage } from '../../types/chat';

interface ChatBubbleProps {
  message: ChatMessage;
  isOwnMessage: boolean;
  showAvatar?: boolean;
  avatar?: React.ReactNode;
}

const ChatBubble: React.FC<ChatBubbleProps> = ({
  message,
  isOwnMessage,
  showAvatar = false,
  avatar,
}) => {
  // Format timestamp for display
  const formatTime = (timestamp: string): string => {
    const date = new Date(timestamp);
    return date.toLocaleTimeString('de-DE', {
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  // Format full date for tooltip
  const formatFullDate = (timestamp: string): string => {
    const date = new Date(timestamp);
    return date.toLocaleString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  // Get status icon
  const getStatusIcon = () => {
    if (!isOwnMessage) return null;

    switch (message.status) {
      case 'sending':
        return <Schedule sx={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }} />;
      case 'sent':
        return <Check sx={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }} />;
      case 'delivered':
        return <DoneAll sx={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }} />;
      case 'read':
        return <DoneAll sx={{ fontSize: 14, color: '#90caf9' }} />;
      case 'failed':
        return <ErrorOutline sx={{ fontSize: 14, color: '#ffcdd2' }} />;
      default:
        return null;
    }
  };

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: isOwnMessage ? 'row-reverse' : 'row',
        alignItems: 'flex-end',
        mb: 0.5,
        px: 1,
      }}
    >
      {/* Avatar placeholder (for received messages) */}
      {!isOwnMessage && (
        <Box
          sx={{
            width: 28,
            height: 28,
            mr: 0.5,
            flexShrink: 0,
            visibility: showAvatar ? 'visible' : 'hidden',
          }}
        >
          {showAvatar && avatar}
        </Box>
      )}

      {/* Message bubble */}
      <Tooltip title={formatFullDate(message.timestamp)} placement={isOwnMessage ? 'left' : 'right'}>
        <Box
          sx={{
            maxWidth: '80%',
            backgroundColor: isOwnMessage ? '#1976d2' : '#f0f0f0',
            color: isOwnMessage ? '#ffffff' : '#000000',
            borderRadius: isOwnMessage
              ? '18px 18px 4px 18px'
              : '18px 18px 18px 4px',
            px: 1.5,
            py: 0.75,
            position: 'relative',
            wordBreak: 'break-word',
          }}
        >
          <Typography
            variant="body2"
            sx={{
              fontSize: '14px',
              lineHeight: 1.4,
              whiteSpace: 'pre-wrap',
            }}
          >
            {message.content}
          </Typography>

          {/* Time and status */}
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              gap: 0.5,
              mt: 0.25,
            }}
          >
            <Typography
              variant="caption"
              sx={{
                fontSize: '10px',
                color: isOwnMessage ? 'rgba(255,255,255,0.7)' : '#495057',
              }}
            >
              {formatTime(message.timestamp)}
            </Typography>
            {getStatusIcon()}
          </Box>
        </Box>
      </Tooltip>
    </Box>
  );
};

export default memo(ChatBubble);