import { Avatar, Typography } from 'antd';
import { UserOutlined } from '@ant-design/icons';

interface Props {
  senderRole: 'patient' | 'doctor' | 'system';
  senderName?: string;
  content: string;
  contentType?: string;
  createdAt: string;
}

const ROLE_CONFIG = {
  patient: { align: 'flex-start' as const, bg: '#f0f0f0', color: '#000' },
  doctor: { align: 'flex-end' as const, bg: '#1890ff', color: '#fff' },
  system: { align: 'center' as const, bg: '#fafafa', color: '#999' },
};

export function ChatBubble({
  senderRole,
  senderName,
  content,
  createdAt,
}: Props) {
  const cfg = ROLE_CONFIG[senderRole] ?? ROLE_CONFIG.system;

  if (senderRole === 'system') {
    return (
      <div style={{ textAlign: 'center', padding: '8px 0' }}>
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          {content}
        </Typography.Text>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', justifyContent: cfg.align, marginBottom: 12 }}>
      {senderRole === 'patient' && (
        <Avatar icon={<UserOutlined />} style={{ marginRight: 8, flexShrink: 0 }} />
      )}
      <div style={{ maxWidth: '70%' }}>
        {senderName && (
          <Typography.Text
            type="secondary"
            style={{ fontSize: 12, display: 'block', marginBottom: 2 }}
          >
            {senderName}
          </Typography.Text>
        )}
        <div
          style={{
            background: cfg.bg,
            color: cfg.color,
            padding: '8px 12px',
            borderRadius: 8,
            wordBreak: 'break-word',
          }}
        >
          <Typography.Paragraph
            style={{ margin: 0, color: 'inherit' }}
          >
            {content}
          </Typography.Paragraph>
        </div>
        <Typography.Text type="secondary" style={{ fontSize: 11 }}>
          {createdAt}
        </Typography.Text>
      </div>
      {senderRole === 'doctor' && (
        <Avatar icon={<UserOutlined />} style={{ marginLeft: 8, flexShrink: 0 }} />
      )}
    </div>
  );
}