"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;
  isUnlockingMessage?: boolean;
  onUnlockPrivateMessage?: (messageId: string) => void;
  onUnlockVoiceMessage?: (messageId: string) => void;
}

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

  if (isFromAI) {
    return (
      <div
        className={styles.bubbleRowAi}
        data-chat-message-id={messageId}
        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}
          isUnlockingMessage={isUnlockingMessage}
          onUnlockPrivateMessage={onUnlockPrivateMessage}
          onUnlockVoiceMessage={onUnlockVoiceMessage}
        />
        <div style={{ width: 43 }} /> {/* 占位：保持与头像宽度一致 */}
      </div>
    );
  }

  return (
    <div
      className={styles.bubbleRowUser}
      data-chat-message-id={messageId}
      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}
        isUnlockingMessage={isUnlockingMessage}
        onUnlockPrivateMessage={onUnlockPrivateMessage}
        onUnlockVoiceMessage={onUnlockVoiceMessage}
      />
      <div style={{ width: 8 }} />
      <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />
    </div>
  );
}