import React from 'react';

import { MessageSquare } from 'lucide-react';

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

import { BaseItem } from './BaseItem';

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

interface TextItemProps {
  step: SemanticStep;
  preview: string;
  onClick: () => void;
  isExpanded: boolean;
  /** Timestamp for display */
  timestamp?: Date;
  /** Optional local search query for inline highlighting */
  searchQueryOverride?: string;
  /** Optional stable item id for search highlighting */
  markdownItemId?: string;
  /** 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,
  timestamp,
  searchQueryOverride,
  markdownItemId,
  highlightClasses,
  highlightStyle,
  notificationDotColor,
}) => {
  const fullContent = step.content.outputText ?? preview;
  const summary = searchQueryOverride
    ? highlightQueryInText(preview, searchQueryOverride, `${markdownItemId ?? step.id}:summary`, {
        forceAllActive: true,
      })
    : preview;

  // 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={summary}
      tokenCount={tokenCount}
      timestamp={timestamp}
      onClick={onClick}
      isExpanded={isExpanded}
      highlightClasses={highlightClasses}
      highlightStyle={highlightStyle}
      notificationDotColor={notificationDotColor}
    >
      <MarkdownViewer
        content={fullContent}
        maxHeight="max-h-96"
        copyable
        itemId={markdownItemId}
        searchQueryOverride={searchQueryOverride}
      />
    </BaseItem>
  );
};