"use client";
/**
 * MessageBubble 消息气泡（容器）
 *
 * 
 *
 * 组成（从左到右）：
 *   - AI：[Avatar] [Content] [占位 spacer]
 *   - 用户：[占位 spacer] [Content] [Avatar]
 */
import { useUserState } from "@/stores/user/user-context";

import { MessageAvatar } from "./message-avatar";
import { MessageContent } from "./message-content";
import styles from "./chat-area.module.css";

export interface MessageBubbleProps {
  messageId?: string;
  content: string;
  imageUrl?: string | null;
  imagePaywalled?: boolean;
  audioUrl?: string | null;
  isFromAI: boolean;
  locked?: boolean | null;
  lockReason?: string | null;
  lockedPrivate?: boolean | null;
  privateMessageHint?: string | null;
  onUnlockPrivateMessage?: () => void;
  onUnlockVoiceMessage?: () => void;
}

export function MessageBubble({
  messageId,
  content,
  imageUrl,
  imagePaywalled,
  audioUrl,
  isFromAI,
  locked,
  lockReason,
  lockedPrivate,
  privateMessageHint,
  onUnlockPrivateMessage,
  onUnlockVoiceMessage,
}: MessageBubbleProps) {
  const { avatarUrl } = useUserState();

  if (isFromAI) {
    return (
      <div className={styles.bubbleRowAi} aria-label="AI message">
        <MessageAvatar isFromAI={true} />
        <div style={{ width: 8 }} />
        <MessageContent
          content={content}
          imageUrl={imageUrl}
          imagePaywalled={imagePaywalled}
          audioUrl={audioUrl}
          messageId={messageId}
          isFromAI={true}
          locked={locked}
          lockReason={lockReason}
          lockedPrivate={lockedPrivate}
          privateMessageHint={privateMessageHint}
          onUnlockPrivateMessage={onUnlockPrivateMessage}
          onUnlockVoiceMessage={onUnlockVoiceMessage}
        />
        <div style={{ width: 43 }} /> {/* 占位：保持与头像宽度一致 */}
      </div>
    );
  }

  return (
    <div className={styles.bubbleRowUser} aria-label="User message">
      <div style={{ width: 43 }} /> {/* 占位 */}
      <MessageContent
        content={content}
        imageUrl={imageUrl}
        imagePaywalled={imagePaywalled}
        audioUrl={audioUrl}
        messageId={messageId}
        isFromAI={false}
        locked={locked}
        lockReason={lockReason}
        lockedPrivate={lockedPrivate}
        privateMessageHint={privateMessageHint}
        onUnlockPrivateMessage={onUnlockPrivateMessage}
        onUnlockVoiceMessage={onUnlockVoiceMessage}
      />
      <div style={{ width: 8 }} />
      <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />
    </div>
  );
}
