import { VoicePlaybackButton } from "./VoicePlaybackButton";

interface ChatBubbleProps {
  role: "user" | "character";
  text: string;
  characterId?: string;
  userId?: string;
}

// H-3 動作描寫標記渲染：把 ＊…＊ 標記以暮空紫小字呈現，與台詞區分。
function renderContent(text: string) {
  const parts = text.split(/(＊[^＊]+＊)/g).filter(Boolean);
  return parts.map((part, index) => {
    const match = part.match(/^＊([^＊]+)＊$/);
    if (match) {
      return (
        <span key={index} className="text-xs" style={{ color: "var(--violet)" }}>
          {match[1]}
        </span>
      );
    }
    return <span key={index}>{part}</span>;
  });
}

export function ChatBubble({ role, text, characterId, userId }: ChatBubbleProps) {
  const isUser = role === "user";
  return (
    <div className="flex max-w-[78%] flex-col" style={{ alignSelf: isUser ? "flex-end" : "flex-start", alignItems: isUser ? "flex-end" : "flex-start" }}>
      <div
        className="rounded-2xl px-3.5 py-2 text-sm leading-relaxed"
        style={
          isUser
            ? {
                background: "var(--accent-bright)",
                color: "#fff",
                borderBottomRightRadius: 4,
              }
            : {
                background: "var(--bg-soft)",
                border: "1px solid var(--line)",
                borderBottomLeftRadius: 4,
              }
        }
      >
        {renderContent(text)}
      </div>
      {/* P-6：語音播放介面只在角色訊息旁提供，使用者自己的訊息不需要播放。 */}
      {!isUser && characterId && userId && <VoicePlaybackButton characterId={characterId} userId={userId} text={text} />}
    </div>
  );
}