// ❌ Anti-Pattern — direct useState on every token
// This is what 95% of tutorials show

function ChatMessage() {
  const [text, setText] = useState('')

  useEffect(() => {
    const stream = startStream()
    stream.on('token', (token) => {
      setText(prev => prev + token)  // ← React schedules a re-render on EVERY token
    })
  }, [])

  return <ReactMarkdown>{text}</ReactMarkdown>  // ← Full AST parse on every render
}

// With 50 tokens/sec:
// 50 React re-renders/sec
// 50 full Markdown AST recalculations/sec
// Each AST parse: ~2–4ms on a mid-range device
// Total: 100–200ms/sec consumed just by Markdown parsing
// At 50 tokens/sec with 4ms parse: 200ms/sec = 12% of frame budget consumed
// Add syntax highlighting: 400ms/sec = 24% of frame budget → visible jank

// ✅ Off-React streaming store — decouples token ingestion from render
// file: apps/web/src/stores/StreamingMessageStore.ts

type Listener = () => void

export class StreamingMessageStore {
  private tokens: string[] = []
  private listeners = new Set<Listener>()
  private rafId: number | null = null

  // Called by the SSE client on every arriving token chunk
  // This runs OUTSIDE React — no re-renders triggered here
  appendToken(token: string): void {
    this.tokens.push(token)
    this.scheduleNotify()
  }

  // Coalesce notifications into animation frames
  // At 50 tokens/sec → 50 appendToken calls/sec → but only 60 notify calls/sec max
  private scheduleNotify(): void {
    if (this.rafId !== null) return // Already scheduled for this frame
    this.rafId = requestAnimationFrame(() => {
      this.rafId = null
      // Notify all React subscriptions that a new snapshot is available
      this.listeners.forEach(l => l())
    })
  }

  // useSyncExternalStore interface
  subscribe(listener: Listener): () => void {
    this.listeners.add(listener)
    return () => this.listeners.delete(listener)
  }

  // Returns a stable reference — only changes when tokens array changes
  getSnapshot(): readonly string[] {
    return this.tokens
  }

  reset(): void {
    this.tokens = []
    if (this.rafId !== null) {
      cancelAnimationFrame(this.rafId)
      this.rafId = null
    }
    this.listeners.forEach(l => l())
  }
}

// Singleton per message — created by the chat context, not React state
export const messageStore = new StreamingMessageStore()

// ✅ React hook wiring store to component
// file: apps/web/src/hooks/useStreamingTokens.ts

import { useSyncExternalStore } from 'react'
import { StreamingMessageStore } from '../stores/StreamingMessageStore'

export function useStreamingTokens(store: StreamingMessageStore): readonly string[] {
  // useSyncExternalStore is the only correct way to consume external stores in React 18+
  // It handles concurrent rendering, StrictMode double-invocation, and tearing
  return useSyncExternalStore(
    store.subscribe.bind(store),    // Subscription management
    store.getSnapshot.bind(store),  // Client snapshot
    store.getSnapshot.bind(store),  // Server snapshot (SSR safe)
  )
}

// ✅ Incremental Markdown renderer — processes only new tokens per frame
// file: apps/web/src/components/StreamingMarkdown.tsx

import { useRef, useMemo } from 'react'
import ReactMarkdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'

interface Props {
  tokens: readonly string[]
}

export function StreamingMarkdown({ tokens }: Props) {
  const prevLengthRef = useRef(0)
  const accumulatedRef = useRef('')

  // Only process tokens that are new since the last render
  if (tokens.length > prevLengthRef.current) {
    const newTokens = tokens.slice(prevLengthRef.current)
    accumulatedRef.current += newTokens.join('')
    prevLengthRef.current = tokens.length
  }

  const text = accumulatedRef.current

  return (
    <ReactMarkdown
      components={{
        code({ node, className, children, ...props }) {
          const match = /language-(\w+)/.exec(className || '')
          // Only syntax-highlight complete code blocks (not during streaming)
          const isComplete = !text.endsWith('```') && text.includes('```')
          if (match && isComplete) {
            return (
              <SyntaxHighlighter language={match[1]} PreTag="div">
                {String(children)}
              </SyntaxHighlighter>
            )
          }
          // During streaming: render as plain <code> to avoid parse overhead
          return <code className={className} {...props}>{children}</code>
        },
      }}
    >
      {text}
    </ReactMarkdown>
  )
}

// ✅ Blinking cursor using CSS only — zero JS cost during streaming
// file: apps/web/src/components/StreamingCursor.tsx

import styles from './StreamingCursor.module.css'

interface Props {
  isStreaming: boolean
}

export function StreamingCursor({ isStreaming }: Props) {
  if (!isStreaming) return null
  return <span className={styles.cursor} aria-hidden="true" />
}

/* StreamingCursor.module.css */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: var(--color-cyan, #58a6ff);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

// ✅ Full streaming chat component
// file: apps/web/src/features/chat/StreamingChatMessage.tsx

import { useEffect, useRef } from 'react'
import { useSyncExternalStore } from 'react'
import { StreamingMessageStore } from '../../stores/StreamingMessageStore'
import { StreamingMarkdown } from '../../components/StreamingMarkdown'
import { StreamingCursor } from '../../components/StreamingCursor'
import { fetchSSE } from '../../lib/sseClient'

interface Props {
  sessionId: string
  message: string
  history: ChatMessage[]
}

export function StreamingChatMessage({ sessionId, message, history }: Props) {
  const storeRef = useRef(new StreamingMessageStore())
  const abortRef = useRef<AbortController>()

  // useSyncExternalStore — the ONLY safe way to consume the external store in React 18+
  const tokens = useSyncExternalStore(
    storeRef.current.subscribe.bind(storeRef.current),
    storeRef.current.getSnapshot.bind(storeRef.current),
    storeRef.current.getSnapshot.bind(storeRef.current),
  )

  const isStreaming = tokens.length > 0 && !tokens.includes('[DONE]')

  useEffect(() => {
    const store = storeRef.current
    store.reset()
    abortRef.current = new AbortController()

    async function run() {
      for await (const event of fetchSSE(
        '/api/chat/stream',
        { message, history },
        abortRef.current!.signal,
      )) {
        const action = JSON.parse(event.data)
        if (action.type === 'text_reply') {
          store.appendToken(action.payload.content)
        }
      }
    }

    run().catch(console.error)
    return () => abortRef.current?.abort()
  }, [sessionId, message])

  return (
    <div className="message assistant">
      <StreamingMarkdown tokens={tokens} />
      <StreamingCursor isStreaming={isStreaming} />
    </div>
  )
}