import React from 'react';

import { Brain } from 'lucide-react';

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

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

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

interface ThinkingItemProps {
  step: SemanticStep;
  preview: string;
  onClick: () => void;
  isExpanded: boolean;
  /** 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 ThinkingItem: React.FC<ThinkingItemProps> = ({
  step,
  preview,
  onClick,
  isExpanded,
  searchQueryOverride,
  markdownItemId,
  highlightClasses,
  highlightStyle,
  notificationDotColor,
}) => {
  const fullContent = step.content.thinkingText ?? preview;
  const truncatedPreview = truncateText(preview, 60);
  const summary = searchQueryOverride
    ? highlightQueryInText(truncatedPreview, searchQueryOverride, `${markdownItemId ?? step.id}:summary`, {
        forceAllActive: true,
      })
    : truncatedPreview;

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

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