import React from 'react';

import { MessageSquare } from 'lucide-react';

import { MarkdownViewer } from '../viewers';

import { BaseItem } from './BaseItem';
import { truncateText } from './baseItemHelpers';

import type { SemanticStep } from '@renderer/types/data';
import type { TriggerColor } from '@shared/constants/triggerColors';

interface TextItemProps {
  step: SemanticStep;
  preview: string;
  onClick: () => void;
  isExpanded: boolean;
  /** Additional classes for highlighting (e.g., error deep linking) */
  highlightClasses?: string;
  /** Inline styles for highlighting (used by custom hex colors) */
  highlightStyle?: React.CSSProperties;
  /** Notification dot color for custom triggers */
  notificationDotColor?: TriggerColor;
}

export const TextItem: React.FC<TextItemProps> = ({
  step,
  preview,
  onClick,
  isExpanded,
  highlightClasses,
  highlightStyle,
  notificationDotColor,
}) => {
  const fullContent = step.content.outputText ?? preview;
  const truncatedPreview = truncateText(preview, 60);

  // Get token count from step.tokens.output or step.content.tokenCount
  const tokenCount = step.tokens?.output ?? step.content.tokenCount ?? 0;

  return (
    <BaseItem
      icon={<MessageSquare className="size-4" />}
      label="Output"
      summary={truncatedPreview}
      tokenCount={tokenCount}
      onClick={onClick}
      isExpanded={isExpanded}
      highlightClasses={highlightClasses}
      highlightStyle={highlightStyle}
      notificationDotColor={notificationDotColor}
    >
      <MarkdownViewer content={fullContent} maxHeight="max-h-96" copyable />
    </BaseItem>
  );
};