import { css } from "@emotion/react";
import type { ReactNode } from "react";

import type { TextProps } from "@phoenix/components";
import { Text } from "@phoenix/components";

type AnnotationScoreTextProps = Omit<TextProps, "children" | "color"> & {
  /**
   * Whether the value represents a positive optimization result.
   * - true: renders in green (success color)
   * - false: renders in red (failure color)
   * - undefined/null: renders with inherited color
   */
  positiveOptimization?: boolean | null;
  children: ReactNode;
};

const directionCSS = css`
  // only apply padding and border radius if there is a direction
  &[data-direction] {
    padding: var(--global-dimension-size-25) var(--global-dimension-size-100);
    border-radius: var(--global-rounding-small);
  }
  &[data-direction="positive"] {
    color: var(--global-color-optimization-direction-positive);
    background-color: var(
      --global-color-background-optimization-direction-positive
    );
  }
  &[data-direction="negative"] {
    color: var(--global-color-optimization-direction-negative);
    background-color: var(
      --global-color-background-optimization-direction-negative
    );
  }
`;

/**
 * A Text component that colors its content based on optimization direction.
 *
 * Green for positive optimization (score above midpoint for MAXIMIZE, below for MINIMIZE).
 * Red for negative optimization.
 * Inherited color if optimization status cannot be determined.
 *
 * @example
 * ```tsx
 * <AnnotationScoreText positiveOptimization={true} fontFamily="mono">
 *   0.95
 * </AnnotationScoreText>
 * ```
 */
export function AnnotationScoreText({
  positiveOptimization,
  children,
  ...textProps
}: AnnotationScoreTextProps) {
  const direction =
    positiveOptimization === true
      ? "positive"
      : positiveOptimization === false
        ? "negative"
        : undefined;

  return (
    <Text {...textProps} data-direction={direction} css={directionCSS}>
      {children}
    </Text>
  );
}
