'use client'

import { useEffect, useRef, useMemo, useState, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { useThread, parseAttachments } from '@standardagents/react'
import type {
  AttachmentRef,
  GroupedThreadMessage,
  Message,
  StatusMessage,
  SubagentBlockMessage,
  SubagentGroupBlockMessage,
  WorkMessage,
} from '@standardagents/react'
import { apiUrl } from '../lib/api'
import { Markdown } from './Markdown'

function isWorkMessage(msg: GroupedThreadMessage): msg is WorkMessage {
  return 'type' in msg && msg.type === 'workblock'
}

function isSubagentBlock(msg: GroupedThreadMessage): msg is SubagentBlockMessage {
  return 'type' in msg && msg.type === 'subagent_block'
}

function isSubagentGroup(msg: GroupedThreadMessage): msg is SubagentGroupBlockMessage {
  return 'type' in msg && msg.type === 'subagent_group_block'
}

function isStatusMessage(msg: GroupedThreadMessage): msg is StatusMessage {
  return 'type' in msg && msg.type === 'status'
}

function isChatMessage(msg: GroupedThreadMessage): msg is Message {
  return !('type' in msg)
}

// Type for OpenAI-style multipart content
interface TextContent {
  type: 'text'
  text: string
}

interface ImageUrlContent {
  type: 'image_url'
  image_url: {
    url: string
    detail?: 'low' | 'high' | 'auto'
  }
}

type ContentPart = TextContent | ImageUrlContent

// Parse message content - handles both string and multipart array formats
function parseMessageContent(content: string | null): { text: string | null; images: string[] } {
  if (!content) return { text: null, images: [] }

  // Try to parse as JSON array (multipart content - OpenAI format)
  try {
    const parsed = JSON.parse(content)
    if (Array.isArray(parsed)) {
      const texts: string[] = []
      const images: string[] = []

      for (const part of parsed as ContentPart[]) {
        if (part.type === 'text' && 'text' in part) {
          texts.push(part.text)
        } else if (part.type === 'image_url' && 'image_url' in part) {
          images.push(part.image_url.url)
        }
      }

      return {
        text: texts.length > 0 ? texts.join('\n') : null,
        images
      }
    }
  } catch {
    // Not JSON, continue with text parsing
  }

  // Check for inline base64 images or image URLs in the text
  const images: string[] = []
  let textContent = content

  // Extract markdown images: ![alt](url)
  const markdownImageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g
  let match
  while ((match = markdownImageRegex.exec(content)) !== null) {
    images.push(match[2])
  }
  // Remove markdown images from text
  textContent = textContent.replace(markdownImageRegex, '')

  // Extract standalone image URLs (common image extensions)
  const imageUrlRegex = /(?:^|\s)(https?:\/\/[^\s]+\.(?:png|jpg|jpeg|gif|webp|svg)(?:\?[^\s]*)?)/gi
  while ((match = imageUrlRegex.exec(content)) !== null) {
    if (!images.includes(match[1])) {
      images.push(match[1])
    }
  }

  // Extract base64 data URLs
  const base64Regex = /(data:image\/[^;]+;base64,[^\s]+)/g
  while ((match = base64Regex.exec(content)) !== null) {
    images.push(match[1])
  }

  // Clean up text - trim excess whitespace from removed images
  textContent = textContent.replace(/\n{3,}/g, '\n\n').trim()

  return {
    text: textContent || null,
    images
  }
}

// Icon components for workblocks
function CheckIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
    </svg>
  )
}

function ErrorIcon({ className }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
    </svg>
  )
}

function SpinnerIcon({ className }: { className?: string }) {
  return (
    <svg className={`animate-spin ${className}`} fill="none" viewBox="0 0 24 24">
      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
    </svg>
  )
}

// Action icons for message actions (smooth outline style)
function CopyIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  )
}

function TrashIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 6h18" />
      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
    </svg>
  )
}

function formatToolName(name: string | undefined): string {
  if (!name) return 'Running tool'
  // Convert snake_case or camelCase to Title Case
  return name
    .replace(/_/g, ' ')
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/\b\w/g, c => c.toUpperCase())
}

// Get status indicator for a work item
function WorkItemStatus({ status }: { status: 'pending' | 'success' | 'error' | null | undefined }) {
  if (status === 'success') {
    return <CheckIcon className="w-3.5 h-3.5 text-emerald-500" />
  }
  if (status === 'error') {
    return <ErrorIcon className="w-3.5 h-3.5 text-red-500" />
  }
  return <SpinnerIcon className="w-3.5 h-3.5 text-[var(--text-secondary)]" />
}

// Chevron icon for collapse/expand
function ChevronIcon({ className, expanded }: { className?: string; expanded: boolean }) {
  return (
    <svg
      className={`${className} transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M9 18l6-6-6-6" />
    </svg>
  )
}

// Workblock component
function Workblock({ workblock, isLast, threadLoading }: { workblock: WorkMessage; isLast?: boolean; threadLoading?: boolean }) {
  const [isExpanded, setIsExpanded] = useState(false)
  const { text } = parseMessageContent(workblock.content)

  // Group work items by tool_call_id to pair calls with results
  const toolCalls = workblock.workItems.filter(item => item.type === 'tool_call')
  const toolResults = workblock.workItems.filter(item => item.type === 'tool_result')

  // The SDK marks a workblock completed once the assistant message carrying
  // the tool calls is saved; a call without a result is still executing
  // while the run is live.
  const isPending = workblock.status === 'pending'
    || (!!threadLoading && toolCalls.some(item => item.status === 'pending'))

  // Count completed vs total and check for errors
  const completedCount = toolCalls.filter(item => item.status === 'success' || item.status === 'error').length
  const errorCount = toolCalls.filter(item => item.status === 'error').length
  const totalCount = toolCalls.length
  const hasErrors = errorCount > 0

  // Get most recent info for the badge (last tool result or last tool call name)
  const lastResult = toolResults[toolResults.length - 1]
  const lastToolCall = toolCalls[toolCalls.length - 1]
  const badgeText = lastResult?.content
    ? (lastResult.content.length > 40 ? lastResult.content.slice(0, 40) + '...' : lastResult.content)
    : lastToolCall?.name
      ? formatToolName(lastToolCall.name)
      : null

  // Determine status label and color
  const statusLabel = isPending ? 'Working' : hasErrors ? 'Completed with errors' : 'Completed'
  const statusColor = isPending ? 'text-violet-500' : hasErrors ? 'text-amber-500' : 'text-emerald-500'

  // Show loader if this is the last workblock and thread is still loading
  const showLoader = isLast && threadLoading && !isPending

  return (
    <div className="animate-fade-in">
      {/* Workblock panel */}
      <div className={`bg-[var(--bg-tertiary)] border border-[var(--border-primary)] rounded-xl overflow-hidden max-w-[85%] ${isPending ? 'workblock-shimmer' : ''}`}>
        {/* Header - clickable to toggle */}
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="w-full px-3 py-2 bg-[var(--bg-hover)] flex items-center gap-2 hover:bg-[var(--bg-tertiary)] transition-colors text-left"
        >
          <ChevronIcon className="w-3.5 h-3.5 text-[var(--text-tertiary)]" expanded={isExpanded} />
          <span className={`text-xs font-medium uppercase tracking-wide ${statusColor}`}>
            {statusLabel}
          </span>
          {(isPending || showLoader) && (
            <SpinnerIcon className="w-3 h-3 text-violet-500" />
          )}
          {/* Badge with most recent info when collapsed */}
          {!isExpanded && badgeText && (
            <span className="ml-auto text-xs text-[var(--text-tertiary)] bg-[var(--bg-secondary)] px-2 py-0.5 rounded truncate max-w-[200px]">
              {badgeText}
            </span>
          )}
          {isExpanded && totalCount > 1 && (
            <span className="ml-auto text-xs text-[var(--text-tertiary)]">
              {completedCount}/{totalCount}
            </span>
          )}
        </button>

        {/* Collapsible content */}
        {isExpanded && (
          <>
            {/* Text content (thinking/reasoning) inside the workblock */}
            {text && text.trim() && (
              <div className="px-3 py-2.5 border-t border-[var(--border-primary)] bg-[var(--bg-secondary)]">
                <p className="text-sm text-[var(--text-secondary)] italic whitespace-pre-wrap break-words">
                  {text.trim()}
                </p>
              </div>
            )}

            {/* Tool calls list */}
            <div className="divide-y divide-[var(--border-primary)] border-t border-[var(--border-primary)]">
              {toolCalls.map((item, index) => (
                <div
                  key={item.id}
                  className="px-3 py-2.5 flex items-center gap-3 animate-slide-in"
                  style={{ animationDelay: `${index * 50}ms` }}
                >
                  <WorkItemStatus status={item.status} />
                  <span className="text-sm text-[var(--text-primary)]">
                    {formatToolName(item.name)}
                  </span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  )
}

// Image attachment component
function ImageAttachment({ url, name, width, height, onLoad }: { url: string; name?: string; width?: number; height?: number; onLoad?: () => void }) {
  // Use aspect-ratio to reserve space and prevent layout shift
  const style: React.CSSProperties = {}
  if (width && height) {
    style.aspectRatio = `${width} / ${height}`
    // Cap the width to max-w-sm (384px) while maintaining aspect ratio
    style.width = Math.min(width, 384)
  }

  return (
    <div
      className="rounded-lg overflow-hidden max-w-sm bg-[var(--bg-hover)]"
      style={style}
    >
      <img
        src={url}
        alt={name || 'Attached image'}
        className="w-full h-full object-cover cursor-pointer hover:opacity-90 transition-opacity"
        onClick={() => window.open(url, '_blank')}
        onLoad={onLoad}
      />
    </div>
  )
}

// File attachment component (for non-image files)
function FileAttachment({ name, url }: { name: string; url: string }) {
  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--bg-hover)] hover:bg-[var(--bg-active)] transition-colors"
    >
      <svg className="w-4 h-4 text-[var(--text-secondary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
      </svg>
      <span className="text-sm text-[var(--text-primary)] truncate max-w-[200px]">{name}</span>
    </a>
  )
}

// Optimistic previews come from the SDK; committed files are served from the
// thread filesystem (same-origin, so the session cookie authorizes the image).
function getAttachmentUrl(threadId: string, attachment: AttachmentRef): string {
  if (attachment.localPreviewUrl) return attachment.localPreviewUrl
  const cleanPath = attachment.path.replace(/^\/+/, '')
  return apiUrl(`/api/threads/${threadId}/fs/${cleanPath}`)
}

function AttachmentList({ attachments, threadId, onImageLoad }: { attachments: AttachmentRef[]; threadId: string; onImageLoad?: () => void }) {
  const imageAttachments = attachments.filter(a => a.mimeType.startsWith('image/'))
  const otherAttachments = attachments.filter(a => !a.mimeType.startsWith('image/'))

  return (
    <div className="space-y-2">
      {imageAttachments.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {imageAttachments.map((attachment) => (
            <ImageAttachment
              key={attachment.id}
              url={getAttachmentUrl(threadId, attachment)}
              name={attachment.name}
              width={attachment.width}
              height={attachment.height}
              onLoad={onImageLoad}
            />
          ))}
        </div>
      )}

      {otherAttachments.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {otherAttachments.map((attachment) => (
            <FileAttachment
              key={attachment.id}
              name={attachment.name}
              url={getAttachmentUrl(threadId, attachment)}
            />
          ))}
        </div>
      )}
    </div>
  )
}

function MessageActions({ message }: { message: Message }) {
  const { deleteMessage } = useThread()
  const [copied, setCopied] = useState(false)
  const [showDeleteWarning, setShowDeleteWarning] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)

  const handleCopy = useCallback(async () => {
    const { text } = parseMessageContent(message.content)
    if (text) {
      await navigator.clipboard.writeText(text)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }, [message.content])

  const confirmDelete = useCallback(async () => {
    setShowDeleteWarning(false)
    setIsDeleting(true)
    try {
      // The SDK removes the message locally; the live stream confirms it.
      await deleteMessage(message.id)
    } catch (error) {
      console.error('Failed to delete message:', error)
    } finally {
      setIsDeleting(false)
    }
  }, [deleteMessage, message.id])

  const iconClass = "w-[18px] h-[18px]"
  const buttonClass = "p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors disabled:opacity-50"

  return (
    <div className="flex items-center gap-1 mt-2">
      <button
        onClick={handleCopy}
        className={buttonClass}
        title={copied ? 'Copied!' : 'Copy'}
      >
        {copied ? (
          <CheckIcon className={`${iconClass} text-emerald-500`} />
        ) : (
          <CopyIcon className={iconClass} />
        )}
      </button>

      <button
        onClick={() => setShowDeleteWarning(true)}
        disabled={isDeleting}
        className={buttonClass}
        title="Delete"
      >
        {isDeleting ? (
          <SpinnerIcon className={iconClass} />
        ) : (
          <TrashIcon className={iconClass} />
        )}
      </button>

      {showDeleteWarning && createPortal(
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="bg-[var(--bg-elevated)] border border-[var(--border-primary)] rounded-xl p-4 max-w-sm mx-4 shadow-xl">
            <h3 className="text-[var(--text-primary)] font-medium mb-2">Delete Message</h3>
            <p className="text-sm text-[var(--text-secondary)] mb-4">
              Are you sure you want to delete this message? This action cannot be undone.
            </p>
            <div className="flex gap-2 justify-end">
              <button
                onClick={() => setShowDeleteWarning(false)}
                className="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={confirmDelete}
                className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors"
              >
                Delete
              </button>
            </div>
          </div>
        </div>,
        document.body
      )}
    </div>
  )
}

function MessageBubble({ message, threadId, onImageLoad }: { message: Message; threadId: string; onImageLoad?: () => void }) {
  const isUser = message.role === 'user'
  const { text, images: inlineImages } = parseMessageContent(message.content)
  const attachments = parseAttachments(message)
  const hasAttachments = attachments.length > 0

  return (
    <div className={`animate-fade-in ${isUser ? 'flex flex-col items-end' : ''}`}>
      {isUser && hasAttachments && (
        <div className="mb-2 max-w-[85%]">
          <AttachmentList attachments={attachments} threadId={threadId} onImageLoad={onImageLoad} />
        </div>
      )}

      {isUser ? (
        <div className="inline-block max-w-[85%] px-4 py-3 rounded-2xl rounded-br-md bg-[var(--bg-tertiary)] text-[var(--text-primary)]">
          {text && (
            <div className="whitespace-pre-wrap break-words text-[15px] leading-relaxed">
              {text}
            </div>
          )}

          {inlineImages.length > 0 && (
            <div className={`${text ? 'mt-2' : ''} space-y-2`}>
              {inlineImages.map((url, index) => (
                <ImageAttachment key={index} url={url} onLoad={onImageLoad} />
              ))}
            </div>
          )}
        </div>
      ) : (
        <div className="max-w-[85%] text-[var(--text-primary)]">
          {text && (
            <Markdown className="text-[15px] leading-relaxed" streaming={message.status === 'pending'}>
              {text}
            </Markdown>
          )}

          {inlineImages.length > 0 && (
            <div className={`${text ? 'mt-2' : ''} space-y-2`}>
              {inlineImages.map((url, index) => (
                <ImageAttachment key={index} url={url} onLoad={onImageLoad} />
              ))}
            </div>
          )}

          {hasAttachments && (
            <div className="mt-2">
              <AttachmentList attachments={attachments} threadId={threadId} onImageLoad={onImageLoad} />
            </div>
          )}

          {message.status !== 'pending' && <MessageActions message={message} />}
        </div>
      )}
    </div>
  )
}

/**
 * Subagent registry status, read the way the builder UI reads it: no status
 * yet means the child is still working; `idle`/`terminated` mean it settled.
 */
function subagentStatusLabel(status: string | null | undefined): { label: string; color: string; active: boolean } {
  switch ((status || 'running').toLowerCase()) {
    case 'pending':
    case 'queued':
      return { label: 'Queued', color: 'text-[var(--text-tertiary)]', active: true }
    case 'awaiting_human':
      return { label: 'Needs input', color: 'text-amber-500', active: false }
    case 'failed':
    case 'error':
      return { label: 'Failed', color: 'text-red-500', active: false }
    case 'idle':
    case 'terminated':
      return { label: 'Done', color: 'text-emerald-500', active: false }
    default:
      return { label: 'Running', color: 'text-violet-500', active: true }
  }
}

function subagentTitle(block: SubagentBlockMessage): string {
  return block.subagent_thread_name
    || block.subagent_title
    || block.subagent_relationship
    || block.subagent_name
    || 'Subagent'
}

// A subagent's conversation, collapsed into a card inside the parent thread.
function SubagentBlock({ block, threadId }: { block: SubagentBlockMessage; threadId: string }) {
  const [isExpanded, setIsExpanded] = useState(false)
  const { label, color, active } = subagentStatusLabel(block.subagent_status)
  const visible = block.messages.filter(m => (m.role === 'user' || m.role === 'assistant') && m.content)
  const lastText = [...visible].reverse().find(m => m.role === 'assistant')
  const preview = lastText ? parseMessageContent(lastText.content).text : null

  return (
    <div className={`bg-[var(--bg-tertiary)] border border-[var(--border-primary)] rounded-xl overflow-hidden ${active ? 'workblock-shimmer' : ''}`}>
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full px-3 py-2 bg-[var(--bg-hover)] flex items-center gap-2 hover:bg-[var(--bg-tertiary)] transition-colors text-left"
      >
        <ChevronIcon className="w-3.5 h-3.5 text-[var(--text-tertiary)] shrink-0" expanded={isExpanded} />
        <span className="text-sm font-medium text-[var(--text-primary)] truncate">{subagentTitle(block)}</span>
        <span className={`text-xs font-medium uppercase tracking-wide shrink-0 ${color}`}>{label}</span>
        {active && <SpinnerIcon className="w-3 h-3 text-violet-500 shrink-0" />}
        {!isExpanded && preview && (
          <span className="ml-auto text-xs text-[var(--text-tertiary)] truncate max-w-[240px]">{preview}</span>
        )}
      </button>
      {isExpanded && (
        <div className="border-t border-[var(--border-primary)] bg-[var(--bg-secondary)] px-4 py-3 space-y-3 max-h-[420px] overflow-y-auto">
          {block.subagent_description && (
            <p className="text-xs text-[var(--text-tertiary)]">{block.subagent_description}</p>
          )}
          {visible.length === 0 ? (
            <p className="text-sm text-[var(--text-muted)] italic">No messages yet</p>
          ) : visible.map(m => (
            <div key={m.id} className="text-sm">
              <div className="text-[10px] uppercase tracking-wide text-[var(--text-muted)] mb-0.5">
                {m.silent ? 'Result' : m.role === 'user' ? 'Task' : 'Response'}
              </div>
              <Markdown className="text-[13px] leading-relaxed text-[var(--text-secondary)]">
                {parseMessageContent(m.content).text || ''}
              </Markdown>
              {parseAttachments(m).length > 0 && (
                <div className="mt-2">
                  <AttachmentList attachments={parseAttachments(m)} threadId={threadId} />
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

function SubagentGroup({ group, threadId }: { group: SubagentGroupBlockMessage; threadId: string }) {
  const running = group.subagents.filter(b => subagentStatusLabel(b.subagent_status).active).length
  return (
    <div className="space-y-2">
      <div className="text-xs text-[var(--text-tertiary)]">
        {group.subagents.length} subagents{running > 0 ? ` · ${running} running` : ''}
      </div>
      {group.subagents.map(block => (
        <SubagentBlock key={block.id} block={block} threadId={threadId} />
      ))}
    </div>
  )
}

/**
 * Files produced during the run (tool results such as generate_image, and
 * silent runtime messages that carry an asset) belong in the conversation,
 * not hidden inside a collapsed workblock. Each path is shown once, at its
 * first appearance.
 */
function useSurfacedAttachments(messages: GroupedThreadMessage[]): Map<string, AttachmentRef[]> {
  const { messages: rawMessages } = useThread()
  return useMemo(() => {
    const byToolCall = new Map<string, AttachmentRef[]>()
    for (const m of rawMessages) {
      if (m.role === 'tool' && m.tool_call_id) {
        const refs = parseAttachments(m)
        if (refs.length > 0) byToolCall.set(m.tool_call_id, refs)
      }
    }

    const seen = new Set<string>()
    const surfaced = new Map<string, AttachmentRef[]>()
    const take = (id: string, refs: AttachmentRef[]) => {
      const fresh = refs.filter(ref => !seen.has(ref.path))
      fresh.forEach(ref => seen.add(ref.path))
      if (fresh.length > 0) surfaced.set(id, fresh)
    }

    for (const msg of messages) {
      if (isWorkMessage(msg)) {
        take(msg.id, msg.workItems.flatMap(item =>
          item.type === 'tool_result' && item.tool_call_id ? byToolCall.get(item.tool_call_id) ?? [] : []
        ))
      } else if (isChatMessage(msg)) {
        const refs = parseAttachments(msg)
        if (msg.silent) {
          take(msg.id, refs)
        } else {
          // Visible messages render their own attachments.
          refs.forEach(ref => seen.add(ref.path))
        }
      }
    }
    return surfaced
  }, [messages, rawMessages])
}

// Runtime lifecycle markers (stops, subagent starts) — informational, not chat.
function StatusLine({ status }: { status: StatusMessage }) {
  return (
    <div className="flex items-center gap-3 text-xs text-[var(--text-muted)]">
      <div className="h-px flex-1 bg-[var(--border-primary)]" />
      <span className="shrink-0">{status.content}</span>
      <div className="h-px flex-1 bg-[var(--border-primary)]" />
    </div>
  )
}

function ThinkingIndicator() {
  return (
    <div className="animate-fade-in">
      <div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
        <SpinnerIcon className="w-4 h-4" />
        <span>Thinking...</span>
      </div>
    </div>
  )
}

function RunFailed({ reason }: { reason?: string | null }) {
  return (
    <div className="px-4 py-3 rounded-xl border border-red-500/20 bg-red-500/10 text-sm text-red-400">
      The agent stopped with an error{reason ? ` (${reason})` : ''}. Send another message to try again.
    </div>
  )
}

export function MessageList() {
  const { groupedMessages: messages, loading, threadId, runStatus } = useThread()
  const surfacedAttachments = useSurfacedAttachments(messages)
  const bottomRef = useRef<HTMLDivElement>(null)

  const scrollToBottom = useCallback(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [])

  useEffect(() => {
    scrollToBottom()
  }, [messages, runStatus, scrollToBottom])

  // Run status is pushed by the runtime (snapshot on connect, then each change).
  const isRunning = runStatus?.state === 'running'
  const somethingStreaming = useMemo(() => messages.some(m =>
    (isWorkMessage(m) && m.status === 'pending')
    || (isChatMessage(m) && m.role === 'assistant' && m.status === 'pending' && !!m.content)
  ), [messages])

  if (messages.length === 0 && !loading && !isRunning) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <p className="text-[var(--text-muted)] text-sm">Send a message to start the conversation</p>
      </div>
    )
  }

  return (
    <div className="py-6 px-4 space-y-6">
      {messages.map((msg, index) => {
        const surfaced = surfacedAttachments.get(msg.id)
        const surfacedList = surfaced && (
          <div className="max-w-[85%] mt-3 animate-fade-in">
            <AttachmentList attachments={surfaced} threadId={threadId} onImageLoad={scrollToBottom} />
          </div>
        )
        if (isWorkMessage(msg)) {
          return (
            <div key={msg.id}>
              <Workblock workblock={msg} isLast={index === messages.length - 1} threadLoading={isRunning} />
              {surfacedList}
            </div>
          )
        }
        if (isSubagentBlock(msg)) {
          return <div key={msg.id} className="animate-fade-in max-w-[85%]"><SubagentBlock block={msg} threadId={threadId} /></div>
        }
        if (isSubagentGroup(msg)) {
          return <div key={msg.id} className="animate-fade-in max-w-[85%]"><SubagentGroup group={msg} threadId={threadId} /></div>
        }
        if (isStatusMessage(msg)) {
          return <StatusLine key={msg.id} status={msg} />
        }
        // Silent messages stay hidden except for any files they carry.
        if (msg.silent) {
          return surfacedList ? <div key={msg.id}>{surfacedList}</div> : null
        }
        // Tool messages are shown in workblocks; system messages are not chat.
        if (msg.role === 'system' || msg.role === 'tool') {
          return null
        }
        return <MessageBubble key={msg.id} message={msg} threadId={threadId} onImageLoad={scrollToBottom} />
      })}

      {isRunning && !somethingStreaming && <ThinkingIndicator />}
      {runStatus?.state === 'failed' && <RunFailed reason={runStatus.reason} />}

      <div ref={bottomRef} className="h-4" />
    </div>
  )
}