/**
 * Unified Message theme with shared base styles + variant-specific modifiers
 * Based on ChatMessage theme with additional action button styles
 */
const messageTheme = {
    // Shared base styles (apply to all variants)
    bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
    containerBaseStyle: "flex items-start gap-3 h-fit text-base",
    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
    // Variant-specific modifiers (only differences)
    variants: {
        sender: {
            containerModifier: "flex-row-reverse", // Reverse direction for right alignment
            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
                "rounded-tr-xs  " +
                // Dark mode - slightly darker gradient for better contrast
                " ",
            timestampModifier: "text-right pr-1",
        },
        receiver: {
            containerModifier: "", // Default direction (no modifier needed)
            bubbleStyle: " text-[var(--color-text-secondary)] rounded-tl-xs py-0 px-0 " +
                " " +
                // Dark mode - dark background with lighter text
                " " +
                "",
            timestampModifier: "text-left pl-1",
        },
        system: {
            containerModifier: "justify-center", // Center alignment
            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
                "text-sm border-none " +
                // Dark mode
                "",
            timestampModifier: "text-center",
        },
    },
    // Feature styles (streaming, actions)
    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-sm " +
        "dark:text-[var(--color-neutral-500)]",
    actionsContainerStyle: "flex items-start gap-3",
    // Status styles
    statusStyle: "flex items-center gap-1 text-xs mt-1",
    statusSending: "text-[var(--color-text-placeholder)] animate-pulse",
    statusSent: "text-[var(--color-text-placeholder)]",
    statusDelivered: "text-[var(--color-text-placeholder)]",
    statusRead: "text-[var(--color-primary)]",
    statusFailed: "text-[var(--color-danger)]",
    // Attachment styles
    attachmentContainerStyle: "flex flex-col gap-2 mt-2",
    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
    imageStyle: "rounded-lg overflow-hidden max-w-xs",
    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
    linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-sm max-w-xs",
    // Reactions styles
    reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-background-tertiary)]",
    reactionPillActiveStyle: "border-[var(--color-primary-200)] bg-[var(--color-primary-50)] text-[var(--color-primary)]",
    // Reply/quote styles
    replyStyle: "border-l-2 border-[var(--color-border)] pl-2.5 mb-2 text-xs text-[var(--color-text-muted)]",
    // Grouping styles
    dateDividerStyle: "flex items-center gap-3 text-xs text-[var(--color-text-muted)] select-none",
    senderNameStyle: "text-xs font-medium text-[var(--color-text-secondary)] mb-1 pl-1",
};

export { messageTheme };
