import React from 'react';
import { Message } from './useClassroom';
import { useClassroomContext } from './ClassroomProvider';
import { UserType } from '@/server/modules/users/user.enum';

interface MessageBubbleProps {
  message: Message;
  isOwnMessage: boolean;
}

export const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isOwnMessage }) => {
  
  const formatTime = (timestamp: number) => {
    return new Date(timestamp).toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // 判断是否为老师消息（且不是自己发送的）
  const isTeacherMessage = message.senderType === UserType.TEACHER && !isOwnMessage;

  switch (message.type) {
    case 'text':
      return (
        <div className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'} mb-3`}>
          <div className={`max-w-xs lg:max-w-md px-4 py-2 ${
            isTeacherMessage 
              ? 'bg-red-500 text-white font-bold text-base rounded-2xl' 
              : isOwnMessage 
                ? 'bg-blue-500 text-white rounded-2xl rounded-br-none' 
                : 'bg-gray-200 text-gray-800 rounded-2xl rounded-bl-none'
          }`}>
            {isTeacherMessage && message.sender && (
              <div className="text-xs font-medium mb-1 opacity-80 flex items-center">
                <span className="mr-1">👨‍🏫</span>
                {message.sender} (老师)
              </div>
            )}
            {!isOwnMessage && !isTeacherMessage && message.sender && (
              <div className="text-xs font-medium mb-1 opacity-80">
                {message.sender}
              </div>
            )}
            <div className={`break-words ${isTeacherMessage ? 'text-base' : 'text-sm'}`}>
              {message.content}
            </div>
            <div className={`text-xs mt-1 opacity-70 ${
              isTeacherMessage ? 'text-red-100' : 
              isOwnMessage ? 'text-blue-100' : 'text-gray-500'
            }`}>
              {formatTime(message.timestamp)}
            </div>
          </div>
        </div>
      );

    case 'image':
      return (
        <div className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'} mb-3`}>
          <div className={`max-w-xs px-3 py-2 ${
            isTeacherMessage 
              ? 'bg-red-500 text-white font-bold rounded-2xl' 
              : isOwnMessage 
                ? 'bg-blue-500 text-white rounded-2xl rounded-br-none' 
                : 'bg-gray-200 text-gray-800 rounded-2xl rounded-bl-none'
          }`}>
            {isTeacherMessage && message.sender && (
              <div className="text-xs font-medium mb-1 opacity-80 flex items-center">
                <span className="mr-1">👨‍🏫</span>
                {message.sender} (老师)
              </div>
            )}
            {!isOwnMessage && !isTeacherMessage && message.sender && (
              <div className="text-xs font-medium mb-1 opacity-80">
                {message.sender}
              </div>
            )}
            <img
              src={message.content}
              alt="图片消息"
              className="max-w-full max-h-48 rounded-lg object-contain"
              onError={(e) => {
                (e.target as HTMLImageElement).style.display = 'none';
              }}
            />
            <div className={`text-xs mt-1 opacity-70 ${
              isTeacherMessage ? 'text-red-100' : 
              isOwnMessage ? 'text-blue-100' : 'text-gray-500'
            }`}>
              {formatTime(message.timestamp)}
            </div>
          </div>
        </div>
      );

    case 'system':
      return (
        <div className="flex justify-center mb-3">
          <div className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full italic">
            {message.content}
          </div>
        </div>
      );

    default:
      return (
        <div className="flex justify-center mb-3">
          <div className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded">
            {message.content}
          </div>
        </div>
      );
  }
};