frontend/src/App.jsx

import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import {
  AlertTriangle,
  ChevronDown,
  Download,
  MessageSquarePlus,
  Share2,
  RefreshCw,
  Search,
  Send,
  Settings,
  Square,
  Trash2,
} from 'lucide-react'

const STORAGE_PERSONA = 'askjerry_extra_persona'
const CONTEXT_WINDOW = 8192
const MAX_REPLY_TOKENS = 4096
const SUMMARIZE_THRESHOLD = 0.55

const DEFAULT_EXTRA_PERSONA = `You are Tawish Jerry Huaute, a Chumash man who spent 14+ years at Microsoft as a Senior Field Technical Account Manager starting in 1994. You grew up in Pomona, California. Your grandfather Semu Huaute (1908–2004) was a legendary Chumash medicine man, activist, and founder of the Red Wind Foundation who participated in the 1969 Alcatraz occupation. You are a member of Native Americans at Microsoft, mentoring Indigenous youth in tech careers.
Your core beliefs: "Don't let an opportunity pass you by. You need to invest in yourself." Keep learning, seize chances, and build your value through education and hands-on experience. You are proud of your Chumash heritage and see it as inseparable from your professional identity — not a contradiction.
Your tone is direct, warm, unpretentious, and encouraging. You speak from lived experience, not theory. You naturally mentor younger people, especially Native youth who may not see representation in tech. You know enterprise IT deeply — deployment, troubleshooting, account management, customer relationships, Microsoft technologies. You don't lead with credentials; you lead with real talk.
When discussing heritage, speak with quiet pride about your family and Chumash culture. When giving career advice, be practical and honest — you believe in people but expect them to put in the work.`

function initialExtraPersona() {
  try {
    const s = sessionStorage.getItem(STORAGE_PERSONA)
    if (s !== null) return s
  } catch { /* */ }
  return DEFAULT_EXTRA_PERSONA
}

function estimateTokens(text) {
  return Math.max(1, Math.ceil((text || '').length / 4))
}

function estimateMessagesTokens(msgs, systemPrompt, summary) {
  let total = estimateTokens(systemPrompt) + 4
  if (summary) total += estimateTokens(summary) + 8
  for (const m of msgs) total += estimateTokens(m.content) + 4
  return total
}

function parseSseBuffer(buf, onEvent) {
  const normalized = buf.replace(/\r\n/g, '\n')
  const idx = normalized.lastIndexOf('\n')
  if (idx === -1) return normalized
  const complete = normalized.slice(0, idx + 1)
  const remainder = normalized.slice(idx + 1)
  for (const line of complete.split('\n')) {
    if (!line.startsWith('data: ')) continue
    const raw = line.slice(6).trim()
    if (raw === '[DONE]') { onEvent({ type: 'done' }); continue }
    if (!raw) continue
    try { onEvent(JSON.parse(raw)) } catch { /* */ }
  }
  return remainder
}

function appendTokenContent(acc, ev) {
  if (ev.type !== 'token' || ev.content == null) return acc
  let piece = ev.content
  if (Array.isArray(piece)) {
    piece = piece.map((p) => (typeof p === 'string' ? p : p?.text ?? '')).join('')
  } else if (typeof piece !== 'string') {
    piece = String(piece)
  }
  return piece ? acc + piece : acc
}

function AssistantSearchBar({ content, show }) {
  const [open, setOpen] = useState(false)
  const [draft, setDraft] = useState('')
  const [loading, setLoading] = useState(false)
  const [copied, setCopied] = useState(false)
  const [placement, setPlacement] = useState('below')
  const [popoverStyle, setPopoverStyle] = useState(null)
  const wrapRef = useRef(null)

  const measurePopoverPosition = useCallback(() => {
    if (!open) {
      setPopoverStyle(null)
      return
    }
    const bubble = wrapRef.current?.closest('.aj-bubble-wrap')
    if (!bubble) return
    const br = bubble.getBoundingClientRect()
    const vw = window.visualViewport?.width ?? window.innerWidth
    const margin = 12
    const gap = 8
    const popoverW = Math.min(360, vw - margin * 2)
    const spaceRight = vw - br.right - margin
    const canPlaceRight = spaceRight >= popoverW + gap

    const vh = window.visualViewport?.height ?? window.innerHeight
    let style
    if (canPlaceRight) {
      setPlacement('right')
      const w = Math.min(popoverW, vw - br.right - gap - margin)
      style = { position: 'fixed', visibility: 'visible', bottom: vh - br.bottom, left: br.right + gap, width: w }
    } else {
      setPlacement('below')
      const w = Math.min(br.width, popoverW, vw - 2 * margin)
      const left = Math.max(margin, Math.min(br.left, vw - w - margin))
      style = { position: 'fixed', visibility: 'visible', top: br.bottom + gap, left, width: w }
    }
    setPopoverStyle(style)
  }, [open])

  useLayoutEffect(() => {
    measurePopoverPosition()
  }, [open, loading, draft, measurePopoverPosition])

  useEffect(() => {
    if (!open) return
    const onMove = () => measurePopoverPosition()
    window.addEventListener('resize', onMove)
    window.addEventListener('scroll', onMove, true)
    return () => {
      window.removeEventListener('resize', onMove)
      window.removeEventListener('scroll', onMove, true)
    }
  }, [open, measurePopoverPosition])

  useEffect(() => {
    if (!open) return
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false)
    }
    document.addEventListener('mousedown', onDoc)
    return () => document.removeEventListener('mousedown', onDoc)
  }, [open])

  const openPanel = async () => {
    if (open) {
      setOpen(false)
      return
    }
    setOpen(true)
    setCopied(false)
    setLoading(true)
    setDraft('')
    const text = (content || '').toString().slice(0, 4000)
    try {
      const res = await fetch('/api/search-references', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ statement: text }),
      })
      const data = await res.json().catch(() => ({}))
      const q = (data.search_query || '').trim() || text.slice(0, 100)
      setDraft(`Provide citations for ${q}`)
    } catch {
      setDraft(`Provide citations for ${text.slice(0, 100)}`)
    } finally {
      setLoading(false)
    }
  }

  const copyDraft = () => {
    navigator.clipboard.writeText(draft).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }).catch(() => {})
  }

  const openPerplexity = () => {
    window.open(`https://www.perplexity.ai/?q=${encodeURIComponent(draft)}`, '_blank', 'noopener,noreferrer')
  }

  const openWebSearch = () => {
    window.open(`https://www.google.com/search?q=${encodeURIComponent(draft)}`, '_blank', 'noopener,noreferrer')
  }

  if (!show || !(content || '').trim()) return null

  return (
    <div className="aj-msg-search-anchor" ref={wrapRef}>
      <div className="aj-msg-search-wrap">
        <button
          type="button"
          className="aj-msg-search-btn"
          onClick={openPanel}
          title="Search"
        >
          <Search size={14} aria-hidden />
        </button>
      </div>
      {open && (
        <div
          className={`aj-msg-search-popover aj-msg-search-popover--${placement}`}
          style={popoverStyle ?? undefined}
          role="dialog"
          aria-label="Web search for citations and resources"
        >
          <div className="aj-msg-search-popover-head">
            <span>Web search for citations and resources</span>
            <button type="button" className="aj-msg-search-close" onClick={() => setOpen(false)} aria-label="Close">
              ×
            </button>
          </div>
          {loading ? (
            <div className="aj-msg-search-loading">Generating search query…</div>
          ) : (
            <>
              <textarea
                className="aj-msg-search-input"
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                rows={3}
                aria-label="Edit search query"
              />
              <div className="aj-msg-search-actions">
                <button type="button" className="aj-btn primary aj-msg-search-action" onClick={openPerplexity}>
                  Open in Perplexity
                </button>
                <button type="button" className="aj-btn aj-msg-search-action" onClick={copyDraft}>
                  {copied ? 'Copied!' : 'Copy'}
                </button>
                <button type="button" className="aj-btn aj-msg-search-action" onClick={openWebSearch}>
                  Search
                </button>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  )
}

function AssistantBubbleContent({ content }) {
  return (
    <div className="aj-bubble-md">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          a: ({ href, children, ...rest }) => (
            <a href={href} target="_blank" rel="noopener noreferrer" {...rest}>
              {children}
            </a>
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
}

export default function App() {
  const [optionsOpen, setOptionsOpen] = useState(false)
  const [shareOpen, setShareOpen] = useState(false)
  const [exportOpen, setExportOpen] = useState(false)
  const [extraPersona, setExtraPersona] = useState(initialExtraPersona)
  const [messages, setMessages] = useState([])
  const [input, setInput] = useState('')
  const [streaming, setStreaming] = useState(false)
  const [summary, setSummary] = useState(null)
  const [summarizing, setSummarizing] = useState(false)
  const [contextOverflow, setContextOverflow] = useState(null)
  const [hideTypingCursor, setHideTypingCursor] = useState(false)
  const [showJumpToBottom, setShowJumpToBottom] = useState(false)
  const abortRef = useRef(null)
  const streamingAssistantRowRef = useRef(null)
  const didScrollForStreamRef = useRef(false)
  const chatScrollRef = useRef(null)
  const optionsRef = useRef(null)
  const shareRef = useRef(null)
  const exportRef = useRef(null)
  const composerRef = useRef(null)
  const lastUserRowRef = useRef(null)

  useEffect(() => {
    const el = document.documentElement
    if (hideTypingCursor) el.classList.add('aj-hide-pointer')
    else el.classList.remove('aj-hide-pointer')
    return () => {
      el.classList.remove('aj-hide-pointer')
    }
  }, [hideTypingCursor])

  useEffect(() => {
    if (!hideTypingCursor) return
    const show = () => setHideTypingCursor(false)
    window.addEventListener('mousemove', show, { passive: true })
    return () => window.removeEventListener('mousemove', show)
  }, [hideTypingCursor])

  const updateJumpToBottomVisibility = useCallback(() => {
    const el = chatScrollRef.current
    if (!el) return
    const { scrollHeight, clientHeight, scrollTop } = el
    const canScroll = scrollHeight > clientHeight + 2
    const atBottom = scrollTop + clientHeight >= scrollHeight - 48
    setShowJumpToBottom(canScroll && !atBottom)
  }, [])

  useLayoutEffect(() => {
    updateJumpToBottomVisibility()
  }, [messages, updateJumpToBottomVisibility])

  useLayoutEffect(() => {
    if (!streaming) {
      didScrollForStreamRef.current = false
      return
    }
    if (didScrollForStreamRef.current) return
    const doScroll = () => {
      const container = chatScrollRef.current
      const target = lastUserRowRef.current || streamingAssistantRowRef.current
      if (!container || !target) return false
      const canScroll = container.scrollHeight > container.clientHeight + 2
      if (!canScroll) return false
      const offset = target.offsetTop - container.offsetTop
      container.scrollTop = offset
      const delta = Math.abs(
        target.getBoundingClientRect().top - container.getBoundingClientRect().top,
      )
      if (delta < 12) didScrollForStreamRef.current = true
      updateJumpToBottomVisibility()
      return true
    }
    if (doScroll()) return undefined
    const id = requestAnimationFrame(() => {
      if (!didScrollForStreamRef.current) doScroll()
    })
    return () => cancelAnimationFrame(id)
  }, [streaming, messages, updateJumpToBottomVisibility])

  useEffect(() => {
    const el = chatScrollRef.current
    if (!el) return
    const onScroll = () => updateJumpToBottomVisibility()
    el.addEventListener('scroll', onScroll, { passive: true })
    window.addEventListener('resize', onScroll)
    return () => {
      el.removeEventListener('scroll', onScroll)
      window.removeEventListener('resize', onScroll)
    }
  }, [updateJumpToBottomVisibility])

  const scrollToLatestQuestion = useCallback(() => {
    const container = chatScrollRef.current
    if (!container) return
    const userRow = lastUserRowRef.current
    if (userRow) {
      const offset = userRow.offsetTop - container.offsetTop
      container.scrollTo({ top: offset, behavior: 'smooth' })
    } else {
      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
    }
    requestAnimationFrame(() => {
      updateJumpToBottomVisibility()
      composerRef.current?.focus()
    })
  }, [updateJumpToBottomVisibility])

  const adjustComposerHeight = useCallback(() => {
    const el = composerRef.current
    if (!el) return
    const maxPx = window.innerHeight * 0.5
    el.style.height = 'auto'
    const sh = el.scrollHeight
    if (sh <= maxPx) {
      el.style.height = `${sh}px`
      el.style.overflowY = 'hidden'
    } else {
      el.style.height = `${maxPx}px`
      el.style.overflowY = 'auto'
    }
  }, [])

  useLayoutEffect(() => {
    adjustComposerHeight()
  }, [input, adjustComposerHeight])

  useEffect(() => {
    const onResize = () => adjustComposerHeight()
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [adjustComposerHeight])

  useEffect(() => {
    try { sessionStorage.setItem(STORAGE_PERSONA, extraPersona) } catch { /* */ }
  }, [extraPersona])

  useEffect(() => {
    if (!optionsOpen) return
    const onDown = (e) => {
      if (optionsRef.current && !optionsRef.current.contains(e.target)) setOptionsOpen(false)
    }
    const onKey = (e) => { if (e.key === 'Escape') setOptionsOpen(false) }
    document.addEventListener('mousedown', onDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [optionsOpen])

  useEffect(() => {
    if (!shareOpen) return
    const onDown = (e) => {
      if (shareRef.current && !shareRef.current.contains(e.target)) setShareOpen(false)
    }
    const onKey = (e) => { if (e.key === 'Escape') setShareOpen(false) }
    document.addEventListener('mousedown', onDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [shareOpen])

  useEffect(() => {
    if (!exportOpen) return
    const onDown = (e) => {
      if (exportRef.current && !exportRef.current.contains(e.target)) setExportOpen(false)
    }
    const onKey = (e) => { if (e.key === 'Escape') setExportOpen(false) }
    document.addEventListener('mousedown', onDown)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onDown)
      document.removeEventListener('keydown', onKey)
    }
  }, [exportOpen])

  const buildSystemPrompt = useCallback(() => {
    const base =
      'You are AI Jerry, a cybersecurity-focused assistant running on the BrainForge Security model. ' +
      'You give clear, practical guidance; you distinguish facts from speculation; you flag risks and ' +
      'compliance considerations when relevant. You are friendly and professional.'
    const extra = (extraPersona || '').trim()
    return extra ? `${base}\n\nAdditional instructions from the user:\n${extra}` : base
  }, [extraPersona])

  const triggerBackgroundSummarize = useCallback(
    async (allMessages) => {
      const sys = buildSystemPrompt()
      const est = estimateMessagesTokens(
        allMessages.map(({ role, content }) => ({ role, content })),
        sys,
        null,
      )
      const inputBudget = CONTEXT_WINDOW - MAX_REPLY_TOKENS
      const ratio = est / inputBudget
      if (ratio < SUMMARIZE_THRESHOLD) return

      setSummarizing(true)
      try {
        const res = await fetch('/api/chat/summarize', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: allMessages.map(({ role, content }) => ({ role, content })),
            extra_persona: extraPersona,
          }),
        })
        if (!res.ok) return
        const data = await res.json()
        if (data.summary) {
          setSummary(data.summary)
        }
      } catch {
        /* silent — summarization is best-effort */
      } finally {
        setSummarizing(false)
      }
    },
    [buildSystemPrompt, extraPersona],
  )

  const buildApiPayload = useCallback(
    (rawMsgs) => {
      if (!summary) {
        return { messages: rawMsgs, summary: null }
      }
      const sys = buildSystemPrompt()
      const fullEst = estimateMessagesTokens(rawMsgs, sys, null)
      const inputBudget = CONTEXT_WINDOW - MAX_REPLY_TOKENS
      if (fullEst < inputBudget * 0.7) {
        return { messages: rawMsgs, summary: null }
      }
      const KEEP_RECENT = 4
      const recent = rawMsgs.slice(-KEEP_RECENT)
      return { messages: recent, summary }
    },
    [summary, buildSystemPrompt],
  )

  const runStream = useCallback(
    async (rawApiMsgs) => {
      const ac = new AbortController()
      abortRef.current = ac
      setStreaming(true)
      setContextOverflow(null)
      let acc = ''

      const { messages: apiMsgs, summary: useSummary } = buildApiPayload(rawApiMsgs)

      try {
        const res = await fetch('/api/chat/stream', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: apiMsgs,
            extra_persona: extraPersona,
            summary: useSummary || undefined,
          }),
          signal: ac.signal,
        })
        if (!res.ok) {
          const t = await res.text()
          throw new Error(t || res.statusText)
        }
        const reader = res.body.getReader()
        const decoder = new TextDecoder()
        let buffer = ''
        const handleEv = (ev) => {
          if (ev.type === 'context_overflow') {
            setContextOverflow({
              detail: ev.detail || 'The conversation is too long for the model context window.',
              inputTokens: ev.input_tokens,
              contextWindow: ev.context_window || CONTEXT_WINDOW,
            })
            return
          }
          if (ev.type === 'token') {
            const nextAcc = appendTokenContent(acc, ev)
            if (nextAcc !== acc) {
              acc = nextAcc
              setMessages((prev) => {
                const next = [...prev]
                const last = next[next.length - 1]
                if (last?.role === 'assistant') {
                  next[next.length - 1] = { ...last, content: acc }
                }
                return next
              })
            }
          }
          if (ev.type === 'error') {
            const detail = ev.detail || ''
            if (/context.length|max_tokens.*too large|too many tokens/i.test(detail)) {
              setContextOverflow({ detail })
            } else {
              throw new Error(detail || 'Stream error')
            }
          }
        }
        while (true) {
          const { done, value } = await reader.read()
          if (done) break
          buffer += decoder.decode(value, { stream: true })
          buffer = parseSseBuffer(buffer, handleEv)
        }
        if (buffer.trim()) {
          parseSseBuffer(`${buffer}\n`, handleEv)
        }
        if (!acc.trim() && !contextOverflow) {
          setMessages((prev) => {
            const next = [...prev]
            const last = next[next.length - 1]
            if (last?.role === 'assistant' && !last.content.trim()) {
              next[next.length - 1] = {
                role: 'assistant',
                content: '[No response] The stream finished with no text.',
              }
            }
            return next
          })
        }
      } catch (e) {
        if (e.name === 'AbortError') {
          setMessages((prev) => {
            const next = [...prev]
            const last = next[next.length - 1]
            if (last?.role === 'assistant' && !last.content.trim()) next.pop()
            return next
          })
        } else {
          setMessages((prev) => {
            const next = [...prev]
            const last = next[next.length - 1]
            if (last?.role === 'assistant') {
              next[next.length - 1] = {
                ...last,
                content: (last.content ? `${last.content}\n\n` : '') + `[Error] ${e.message}`,
              }
            } else {
              next.push({ role: 'assistant', content: `[Error] ${e.message}` })
            }
            return next
          })
        }
      } finally {
        setStreaming(false)
        abortRef.current = null
      }
    },
    [extraPersona, buildApiPayload, contextOverflow],
  )

  useEffect(() => {
    if (streaming || messages.length < 4) return
    const last = messages[messages.length - 1]
    if (last.role !== 'assistant' || !last.content.trim()) return
    triggerBackgroundSummarize(messages)
  }, [streaming, messages, triggerBackgroundSummarize])

  const handleNewChat = () => {
    abortRef.current?.abort()
    setMessages([])
    setInput('')
    setSummary(null)
    setContextOverflow(null)
  }

  const handleStop = () => { abortRef.current?.abort() }

  const handleRefresh = () => {
    if (streaming) return
    let base = [...messages]
    if (base.length && base[base.length - 1].role === 'assistant') base = base.slice(0, -1)
    if (!base.length || base[base.length - 1].role !== 'user') return
    const apiMsgs = base.map(({ role, content }) => ({ role, content }))
    setMessages([...base, { role: 'assistant', content: '' }])
    setContextOverflow(null)
    runStream(apiMsgs)
  }

  const handleSend = () => {
    const text = input.trim()
    if (!text || streaming) return
    setHideTypingCursor(false)
    const userMsg = { role: 'user', content: text }
    const apiMsgs = [...messages, userMsg].map(({ role, content }) => ({ role, content }))
    setMessages([...messages, userMsg, { role: 'assistant', content: '' }])
    setInput('')
    setContextOverflow(null)
    runStream(apiMsgs)
  }

  const handleOverflowRetry = () => {
    setContextOverflow(null)
    setMessages((prev) => {
      const next = [...prev]
      const last = next[next.length - 1]
      if (last?.role === 'assistant' && !last.content.trim()) next.pop()
      return next
    })
  }

  const handleOverflowClear = () => {
    setContextOverflow(null)
    setMessages([])
    setSummary(null)
  }

  const handleOverflowSummarize = async () => {
    setContextOverflow(null)
    setSummarizing(true)
    try {
      const res = await fetch('/api/chat/summarize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: messages.map(({ role, content }) => ({ role, content })),
          extra_persona: extraPersona,
        }),
      })
      if (res.ok) {
        const data = await res.json()
        if (data.summary) {
          setSummary(data.summary)
          setMessages([])
          return
        }
      }
      setMessages([])
      setSummary(null)
    } catch {
      setMessages([])
      setSummary(null)
    } finally {
      setSummarizing(false)
    }
  }

  const onKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
  }

  const buildExportText = useCallback(() => {
    if (!messages.length) return ''
    const lines = messages.map((m) => {
      const label = m.role === 'user' ? 'You' : 'AI Jerry'
      return `${label}:\n${m.content}\n`
    })
    return `Ask Jerry — Chat Export\n${new Date().toLocaleString()}\n${'─'.repeat(40)}\n\n${lines.join('\n')}`
  }, [messages])

  const buildExportMarkdown = useCallback(() => {
    if (!messages.length) return ''
    const ts = new Date().toLocaleString()
    const header = `# Ask Jerry — Chat Export\n\n_Exported: ${ts}_\n\n---\n\n`
    const blocks = messages.map((m) => {
      const heading = m.role === 'user' ? '### You' : '### AI Jerry'
      return `${heading}\n\n${m.content}`
    })
    return header + blocks.join('\n\n---\n\n')
  }, [messages])

  const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text)
    } catch {
      const ta = document.createElement('textarea')
      ta.value = text
      ta.setAttribute('readonly', '')
      ta.style.position = 'fixed'
      ta.style.left = '-9999px'
      document.body.appendChild(ta)
      ta.select()
      try {
        document.execCommand('copy')
      } finally {
        document.body.removeChild(ta)
      }
    }
  }

  const handleExportDownload = (format) => {
    const text = format === 'md' ? buildExportMarkdown() : buildExportText()
    if (!text) return
    const mime =
      format === 'md' ? 'text/markdown;charset=utf-8' : 'text/plain;charset=utf-8'
    const ext = format === 'md' ? 'md' : 'txt'
    const blob = new Blob([text], { type: mime })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `ask-jerry-chat-${Date.now()}.${ext}`
    a.click()
    URL.revokeObjectURL(url)
    setExportOpen(false)
  }

  const handleShareCopyClipboard = async () => {
    const text = buildExportText()
    if (!text) return
    await copyToClipboard(text)
    setShareOpen(false)
  }

  const handleShareEmail = () => {
    const text = buildExportText()
    if (!text) return
    const subject = encodeURIComponent('Ask Jerry chat')
    const body = encodeURIComponent(text.length > 16000 ? `${text.slice(0, 16000)}\n\n… (truncated)` : text)
    const a = document.createElement('a')
    a.href = `mailto:?subject=${subject}&body=${body}`
    a.rel = 'noopener noreferrer'
    a.click()
    setShareOpen(false)
  }

  const handleShareLinkedIn = async () => {
    const text = buildExportText()
    if (!text) return
    await copyToClipboard(text)
    window.open('https://www.linkedin.com/feed/?shareActive=true', '_blank', 'noopener,noreferrer')
    setShareOpen(false)
  }

  const handleShareFacebook = async () => {
    const text = buildExportText()
    if (!text) return
    await copyToClipboard(text)
    const quote = encodeURIComponent(text.slice(0, 2000))
    const fb = `https://www.facebook.com/sharer/sharer.php?quote=${quote}`
    if (fb.length > 2048) {
      window.open('https://www.facebook.com/', '_blank', 'noopener,noreferrer')
    } else {
      window.open(fb, '_blank', 'noopener,noreferrer')
    }
    setShareOpen(false)
  }

  const inputBudget = CONTEXT_WINDOW - MAX_REPLY_TOKENS
  const currentTokens = estimateMessagesTokens(
    messages.map(({ role, content }) => ({ role, content })),
    buildSystemPrompt(),
    summary && messages.length > 4 ? summary : null,
  )
  const usagePct = Math.min(100, Math.round((currentTokens / inputBudget) * 100))
  return (
    <div className="aj-app">
      <header className="aj-header">
        <a
          className="aj-header-brand-link"
          href="https://www.neon.ai/"
          target="_blank"
          rel="noopener noreferrer"
          title="Neon.ai"
        >
          <img src="/neon-logo.png" alt="Neon.ai" className="aj-header-logo" />
          <span className="aj-header-brand-name">Neon.ai</span>
        </a>
        <div className="aj-header-title-wrap">
          <h1 className="aj-header-title">Ask Jerry About Cyber Security</h1>
        </div>
        <div className="aj-options-wrap" ref={optionsRef}>
          {streaming && (
            <button
              type="button"
              className="aj-btn danger"
              onClick={handleStop}
              title="Stop"
              aria-label="Stop"
            >
              <Square size={16} aria-hidden />
            </button>
          )}
          <button
            type="button"
            className="aj-btn"
            onClick={handleRefresh}
            disabled={streaming || messages.length === 0}
            title="Refresh"
            aria-label="Refresh"
          >
            <RefreshCw size={16} aria-hidden />
          </button>
          <button
            type="button"
            className="aj-btn"
            onClick={handleNewChat}
            title="New chat"
            aria-label="New chat"
          >
            <MessageSquarePlus size={16} aria-hidden />
          </button>
          <button
            type="button"
            className="aj-btn"
            onClick={() => setOptionsOpen((o) => !o)}
            aria-expanded={optionsOpen}
            aria-haspopup="dialog"
            aria-controls="aj-options-panel"
            title="Options"
            aria-label="Options"
          >
            <Settings size={16} aria-hidden />
          </button>
          {optionsOpen && (
            <div id="aj-options-panel" className="aj-options-panel" role="dialog" aria-label="Options" onMouseDown={(e) => e.stopPropagation()}>
              <label className="aj-field">
                <span>Additional persona instructions</span>
                <textarea
                  value={extraPersona}
                  onChange={(e) => setExtraPersona(e.target.value)}
                  placeholder="Optional — style, tone, domain focus… The assistant stays AI Jerry."
                  rows={10}
                  disabled={streaming}
                />
              </label>
              <p className="aj-options-hint">
                Merged into the system prompt for this session. The chat label remains <strong>AI Jerry</strong>.
              </p>
            </div>
          )}
        </div>
      </header>

      {messages.length > 0 && (
        <div className="aj-context-bar">
          <div className="aj-context-meter">
            <div className="aj-context-fill" style={{ width: `${usagePct}%` }} data-hot={usagePct > 80 ? '' : undefined} />
          </div>
          <span className="aj-context-label">
            Context: ~{currentTokens.toLocaleString()} / {inputBudget.toLocaleString()} tokens ({usagePct}%)
            {summary && ' · chat history is being summarized'}
            {summarizing && ' · summarizing…'}
          </span>
        </div>
      )}

      <div className="aj-chat-wrap">
        <div className="aj-messages" ref={chatScrollRef}>
          {messages.length === 0 && !summary && (
            <p className="aj-sub" style={{ textAlign: 'center', marginTop: 24 }}>
              Message AI Jerry to begin.
            </p>
          )}
          {messages.length === 0 && summary && (
            <div className="aj-summary-banner">
              <p><strong>Continuing from a summary of your previous conversation.</strong></p>
              <p className="aj-summary-text">{summary}</p>
            </div>
          )}
          {(() => {
            const lastUserIdx = messages.reduce((acc, msg, idx) => msg.role === 'user' ? idx : acc, -1)
            return messages.map((m, i) => {
              const isUser = m.role === 'user'
              const rowRef =
                i === lastUserIdx
                  ? lastUserRowRef
                  : i === messages.length - 1 && m.role === 'assistant'
                    ? streamingAssistantRowRef
                    : undefined
              return (
                <div
                  key={i}
                  ref={rowRef}
                  className={`aj-msg-row ${isUser ? 'user' : ''}`}
                >
                {!isUser && <div className="aj-shape" aria-hidden />}
                <div className="aj-bubble-wrap">
                  <div className="aj-bubble-name">{isUser ? 'You' : 'AI Jerry'}</div>
                  <div className={`aj-bubble ${!isUser ? 'aj-bubble--assistant-md' : ''}`}>
                    {isUser ? (
                      m.content
                    ) : (
                      <>
                        {m.content ? <AssistantBubbleContent content={m.content} /> : null}
                        {streaming && i === messages.length - 1 && !m.content && (
                          <span className="aj-typing" />
                        )}
                      </>
                    )}
                  </div>
                  {!isUser && (
                    <AssistantSearchBar
                      content={m.content}
                      show={!(streaming && i === messages.length - 1)}
                    />
                  )}
                </div>
                </div>
              )
            })
          })()}
        </div>

        {contextOverflow && (
          <div className="aj-overflow-banner">
            <div className="aj-overflow-icon"><AlertTriangle size={22} /></div>
            <div className="aj-overflow-body">
              <p className="aj-overflow-title">Context window exceeded</p>
              <p className="aj-overflow-detail">
                The conversation history is too long for this model's {CONTEXT_WINDOW.toLocaleString()}-token context window.
              </p>
              <div className="aj-overflow-actions">
                <button type="button" className="aj-btn" onClick={handleOverflowRetry}>
                  <RefreshCw size={14} aria-hidden />
                  Try again (shorter request)
                </button>
                <button type="button" className="aj-btn" onClick={handleOverflowClear}>
                  <Trash2 size={14} aria-hidden />
                  Clear chat &amp; start fresh
                </button>
                <button type="button" className="aj-btn primary" onClick={handleOverflowSummarize} disabled={summarizing}>
                  <MessageSquarePlus size={14} aria-hidden />
                  {summarizing ? 'Summarizing…' : 'New chat with summary'}
                </button>
              </div>
            </div>
          </div>
        )}

        <div className="aj-composer">
          <div className="aj-composer-inner">
            <textarea
              ref={composerRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onInput={(e) => {
                const ne = e.nativeEvent
                if (ne.inputType?.startsWith('insert') || (ne.data != null && ne.data !== '')) {
                  setHideTypingCursor(true)
                }
              }}
              onKeyDown={onKeyDown}
              placeholder="Ask Jerry about cybersecurity…"
              rows={1}
              disabled={streaming || !!contextOverflow}
            />
            <button
              type="button"
              className="aj-btn primary"
              onClick={handleSend}
              disabled={streaming || !input.trim() || !!contextOverflow}
              title="Send"
            >
              <Send size={18} aria-hidden />
            </button>
            <div className="aj-share-wrap" ref={exportRef}>
              <button
                type="button"
                className="aj-btn"
                onClick={() => {
                  setExportOpen((o) => !o)
                  setShareOpen(false)
                }}
                disabled={!messages.length || streaming}
                title="Export chat"
                aria-expanded={exportOpen}
                aria-haspopup="menu"
                aria-controls="aj-export-panel"
              >
                <Download size={18} aria-hidden />
              </button>
              {exportOpen && (
                <div
                  id="aj-export-panel"
                  className="aj-share-panel"
                  role="menu"
                  aria-label="Export format"
                  onMouseDown={(e) => e.stopPropagation()}
                >
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={() => handleExportDownload('md')}
                  >
                    Markdown (.md)
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={() => handleExportDownload('txt')}
                  >
                    Plain text (.txt)
                  </button>
                </div>
              )}
            </div>
            <div className="aj-share-wrap" ref={shareRef}>
              <button
                type="button"
                className="aj-btn"
                onClick={() => {
                  setShareOpen((o) => !o)
                  setExportOpen(false)
                }}
                disabled={!messages.length || streaming}
                title="Share chat"
                aria-expanded={shareOpen}
                aria-haspopup="menu"
                aria-controls="aj-share-panel"
              >
                <Share2 size={18} aria-hidden />
              </button>
              {shareOpen && (
                <div
                  id="aj-share-panel"
                  className="aj-share-panel"
                  role="menu"
                  aria-label="Share chat"
                  onMouseDown={(e) => e.stopPropagation()}
                >
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareLinkedIn}
                  >
                    LinkedIn
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareFacebook}
                  >
                    Facebook
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareEmail}
                  >
                    Email
                  </button>
                  <button
                    type="button"
                    className="aj-share-item"
                    role="menuitem"
                    onClick={handleShareCopyClipboard}
                  >
                    Copy to clipboard
                  </button>
                  <p className="aj-share-hint">
                    LinkedIn and Facebook copy the conversation to your clipboard, then open the site so you can paste into a post.
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>

        {showJumpToBottom && (
          <button
            type="button"
            className="aj-jump-bottom-btn"
            onClick={scrollToLatestQuestion}
            title="Jump to latest question"
            aria-label="Jump to latest question"
          >
            <ChevronDown size={22} aria-hidden />
          </button>
        )}
      </div>
    </div>
  )
}