// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

/**
 * @file ChatSystemMessage.tsx
 * @input Uses React, StyleX, theme tokens
 * @output Exports ChatSystemMessage component and ChatSystemMessageProps
 * @position Centered system/notice message in a chat thread
 *
 * Renders centered, muted system messages like "conversation started",
 * date separators, or status updates. Not a sender message — no avatar,
 * no bubble, no alignment. Think of it as the chat equivalent of a banner
 * or status line.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Chat/index.ts (exports)
 * - /apps/storybook/stories/Chat.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/ChatSystemMessage/ (block examples)
 */
import type { ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, typeScaleVars, fontWeightVars, typographyVars } from "../theme/tokens.stylex.js";
import { mergeProps } from "../utils/index.js";
import { Divider } from "../Divider/index.js";
import type { BaseProps } from "../BaseProps.js";
import { themeProps } from "../utils/themeProps.js";
export type ChatSystemMessageVariant = 'default' | 'divider';
export interface ChatSystemMessageProps extends BaseProps<HTMLDivElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLDivElement>;

  /**
   * System message content — text or any ReactNode.
   */
  children: ReactNode;

  /**
   * Visual variant.
   * - 'default': plain centered text
   * - 'divider': text with horizontal lines on each side (date separator style)
   * @default 'default'
   */
  variant?: ChatSystemMessageVariant;

  /**
   * Optional icon rendered before the text.
   * Accepts any ReactNode — typically an Icon.
   */
  icon?: ReactNode;
}

// =============================================================================
// Styles
// =============================================================================

const styles = {
  root: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kOIVth: "x1txdalj",
    k8WAf4: "xu0wf1k",
    kMv6JI: "x9ynric",
    kGuDYH: "x141an7d",
    k63SB2: "x1sodnla",
    kMwMTN: "xv1l7n4",
    k9WMMc: "x2b8uid",
    $$css: true as const
  },
  dividerWrap: {
    kzqmXN: "xh8yej3",
    $$css: true as const
  }
};

// =============================================================================
// Component
// =============================================================================

/**
 * Centered system message for chat threads.
 *
 * Use for non-sender content: date separators, "conversation started",
 * "user joined", status changes. Supports a divider variant with horizontal
 * lines on each side of the text.
 *
 * @example
 * ```
 * <ChatSystemMessage>Conversation started</ChatSystemMessage>
 * <ChatSystemMessage variant="divider">Today</ChatSystemMessage>
 * <ChatSystemMessage variant="divider">March 15, 2026</ChatSystemMessage>
 * ```
 */
export function ChatSystemMessage({
  children,
  variant = 'default',
  icon,
  xstyle,
  className,
  style: styleProp,
  ref,
  ...rest
}: ChatSystemMessageProps) {
  if (variant === 'divider') {
    return <div ref={ref} {...mergeProps(themeProps('chat-system-message', {
      variant
    }), stylex.props(styles.dividerWrap, xstyle), className, styleProp)} {...rest} role="status">
        <Divider label={children} />
      </div>;
  }
  return <div ref={ref} {...mergeProps(themeProps('chat-system-message', {
    variant
  }), stylex.props(styles.root, xstyle), className, styleProp)} {...rest} role="status">
      <span className="x3nfvp2 x6s0dn4 x1s4dlld x2lah0s xuxw1ft">
        {icon != null && <span className="x3nfvp2 x6s0dn4 x2lah0s">{icon}</span>}
        {children}
      </span>
    </div>;
}
ChatSystemMessage.displayName = 'ChatSystemMessage';