import { useState, useRef, useEffect } from 'react' import { ShikiHighlighter } from 'react-shiki' import 'react-shiki/css' import { CopyButton } from '../shared/CopyButton' type Props = { code: string language?: string maxLines?: number showLineNumbers?: boolean } /** * Custom warm-toned TextMate theme — uses VS Code-quality tokenization * while harmonizing with the app's cream/terra-cotta design system. */ const warmCodeTheme = { name: 'warm-code', type: 'dark' as const, fg: 'var(--color-code-fg)', bg: 'transparent', tokenColors: [ { scope: ['comment', 'punctuation.definition.comment'], settings: { foreground: 'var(--color-code-comment)', fontStyle: 'italic' } }, { scope: ['string', 'string.quoted', 'string.template', 'string.other.link'], settings: { foreground: 'var(--color-code-string)' } }, { scope: ['string.regexp'], settings: { foreground: 'var(--color-primary-container)' } }, { scope: ['keyword', 'keyword.control', 'storage', 'storage.type', 'storage.modifier'], settings: { foreground: 'var(--color-code-keyword)' } }, { scope: ['keyword.operator'], settings: { foreground: 'var(--color-code-keyword)' } }, { scope: ['entity.name.function', 'support.function'], settings: { foreground: 'var(--color-code-function)' } }, { scope: ['entity.name.type', 'support.type', 'support.class', 'entity.name.class', 'entity.other.inherited-class'], settings: { foreground: 'var(--color-code-type)' } }, { scope: ['entity.name.type.parameter'], settings: { foreground: 'var(--color-code-number)' } }, { scope: ['variable', 'variable.other', 'variable.other.readwrite'], settings: { foreground: 'var(--color-code-fg)' } }, { scope: ['variable.parameter'], settings: { foreground: 'var(--color-code-parameter)' } }, { scope: ['variable.other.property', 'support.type.property-name', 'meta.object-literal.key'], settings: { foreground: 'var(--color-code-property)' } }, { scope: ['variable.other.constant', 'variable.other.enummember'], settings: { foreground: 'var(--color-code-type)' } }, { scope: ['constant.numeric', 'constant.language'], settings: { foreground: 'var(--color-code-number)' } }, { scope: ['punctuation', 'meta.brace', 'meta.bracket'], settings: { foreground: 'var(--color-code-punctuation)' } }, { scope: ['entity.name.tag', 'punctuation.definition.tag'], settings: { foreground: 'var(--color-code-keyword)' } }, { scope: ['entity.other.attribute-name'], settings: { foreground: 'var(--color-code-property)' } }, { scope: ['meta.decorator', 'punctuation.decorator'], settings: { foreground: 'var(--color-code-type)' } }, { scope: ['markup.inserted', 'punctuation.definition.inserted'], settings: { foreground: 'var(--color-code-inserted)' } }, { scope: ['markup.deleted', 'punctuation.definition.deleted'], settings: { foreground: 'var(--color-code-deleted)' } }, { scope: ['markup.heading', 'entity.name.section'], settings: { foreground: 'var(--color-code-function)', fontStyle: 'bold' } }, { scope: ['markup.bold'], settings: { fontStyle: 'bold' } }, { scope: ['markup.italic'], settings: { fontStyle: 'italic' } }, ], } /** * Wraps ShikiHighlighter with a plain-text fallback so the code area * is never empty while the async WASM / language-grammar load is in-flight, * or if highlighting fails entirely. */ function CodeArea({ code, language, showLineNumbers }: { code: string; language?: string; showLineNumbers: boolean }) { const containerRef = useRef(null) const [loaded, setLoaded] = useState(false) useEffect(() => { // ShikiHighlighter renders `null` until the async highlight completes. // Watch for real content appearing via MutationObserver so we can hide // the plain-text fallback as soon as highlighted output is in the DOM. const el = containerRef.current if (!el) return const check = () => { const shikiContainer = el.querySelector('[data-testid="shiki-container"]') // shiki renders a

 element inside its container once highlighting is done
      if (shikiContainer?.querySelector('code')) {
        setLoaded(true)
      }
    }
    check()
    const observer = new MutationObserver(check)
    observer.observe(el, { childList: true, subtree: true })
    return () => observer.disconnect()
  }, [code, language])

  return (
    
      {/* Plain-text fallback shown until Shiki finishes highlighting */}
      {!loaded && (
                  {code}
        
      )}
      
        
          {code}
        
      
    
  )
}

export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = true }: Props) {
  const [expanded, setExpanded] = useState(false)

  const allLines = code.split('\n')
  const isTruncated = !expanded && allLines.length > maxLines
  const visibleCode = isTruncated ? allLines.slice(0, maxLines).join('\n') : code

  const effectiveShowLineNumbers = showLineNumbers && !!language && language !== 'text'
  const languageLabel = language || 'code'
  const lineCountLabel = `${allLines.length} ${allLines.length === 1 ? 'line' : 'lines'}`
  const showExpandToggle = allLines.length > maxLines

  return (
    
      {/* Header */}
      
        
          {languageLabel}
          {lineCountLabel}
        
        
      

      {/* Code area */}
      

      {/* Expand/collapse toggle */}
      {showExpandToggle && (
        
      )}
    
  )
}