'use client';
import { FunctionComponent } from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import type { TicketMessage } from '@/services/tickets/types';

export interface MessageBubbleProps {
  message: TicketMessage;
  /** Translated author label (only shown for others' messages — mine is obvious). */
  authorLabel: string;
  /** Pre-formatted Shamsi time — the caller owns locale (shown once the message is sent). */
  timeLabel: string;
  /** "در حال ارسال…" — shown while an optimistic message is still sending (in place of the time). */
  sendingLabel: string;
}

/**
 * One message bubble in a ticket thread. **Mine vs theirs** drives side + color and **mirrors for RTL**
 * automatically (`justifyContent: flex-end` resolves to the inline-end — left in RTL). A pending optimistic
 * send shows the "sending" state in place of the timestamp; on a send **failure** the bubble is rolled back
 * by `usePostMessage` and the draft is retried from the composer (§3.5), so this bubble only ever renders the
 * sending/sent states. Purely presentational — the caller supplies the translated author/time strings. Never
 * renders any internal-note content or styling (there is no internal message in the user view — §5).
 * @component MessageBubble
 */
const MessageBubble: FunctionComponent<MessageBubbleProps> = ({ message, authorLabel, timeLabel, sendingLabel }) => {
  const isMine = message.isMine;
  const sending = message.sendStatus === 'sending';

  return (
    <Box
      data-testid="message-bubble"
      data-mine={isMine ? 'true' : 'false'}
      sx={{ display: 'flex', justifyContent: isMine ? 'flex-end' : 'flex-start', width: '100%' }}
    >
      <Stack
        sx={{
          maxWidth: '80%',
          px: 1.5,
          py: 1,
          borderRadius: 2,
          bgcolor: isMine ? 'var(--bal-primary)' : 'var(--bal-bg-paper)',
          color: isMine ? 'var(--bal-primary-contrast)' : 'var(--bal-text-primary)',
          border: isMine ? 'none' : '1px solid',
          borderColor: isMine ? undefined : 'divider',
          // Mine leans to the inline-end corner, theirs to the inline-start — a subtle "tail".
          borderStartEndRadius: isMine ? 4 : undefined,
          borderStartStartRadius: isMine ? undefined : 4,
          opacity: sending ? 0.75 : 1,
        }}
      >
        {!isMine ? (
          <Typography variant="caption" sx={{ fontWeight: 700, color: 'var(--bal-primary)', mb: 0.25 }}>
            {authorLabel}
          </Typography>
        ) : null}

        <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
          {message.body}
        </Typography>

        <Typography
          variant="caption"
          sx={{
            mt: 0.25,
            alignSelf: 'flex-end',
            opacity: isMine ? 0.8 : 1,
            color: isMine ? 'inherit' : 'var(--bal-text-secondary)',
            direction: 'ltr',
          }}
        >
          {sending ? sendingLabel : timeLabel}
        </Typography>
      </Stack>
    </Box>
  );
};

export default MessageBubble;
