'use client'

import { 
  MagnifyingGlass, 
  CheckCircle, 
  XCircle, 
  FilePlus,
  FolderPlus,
  Note,
  File,
  PaperPlaneTilt,
  CheckSquare,
  Warning,
  Trash,
  TestTube,
  ArrowSquareOut,
  Clock,
} from '@phosphor-icons/react'
import { MethodBadge } from '../../shared/method-badge'
import type { HTTPMethod } from '@/lib/api-docs/types'
import type { ToolCallDisplayProps, EndpointIndex, PrefillData } from './types'
import type { RequestValidationResult } from '@/lib/api-docs/agent/types'
import { getFileType } from '@/lib/api-docs/code-editor'

export function ToolCallDisplay({ tool, onNavigate, onNavigateToDocPage, onOpenFile }: ToolCallDisplayProps) {
  const { toolName, args, result, state } = tool
  
  // Helper to render clickable file name
  const ClickableFileName = ({ path, className = '' }: { path?: string; className?: string }) => {
    if (!path) return <span className="font-mono text-muted-foreground">unknown</span>
    const fileName = path.split('/').pop() || path
    return (
      <button
        onClick={() => onOpenFile?.(path)}
        className={`font-mono font-medium text-foreground hover:text-primary hover:underline cursor-pointer transition-colors ${className}`}
      >
        {fileName}
      </button>
    )
  }
  
  // Helper to handle search result click
  const handleResultClick = (item: { type: string; id: string }) => {
    if (item.type === 'endpoint') {
      onNavigate?.(item.id)
    } else if (item.type === 'doc') {
      onNavigateToDocPage?.(item.id)
    } else if (item.type === 'changelog') {
      onNavigateToDocPage?.(`changelog/${item.id}`)
    }
  }

  // Loading state - with subtle background
  if (state === 'pending') {
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <div className="size-3.5 rounded-full border-2 border-primary/30 border-t-primary animate-spin" />
        <span className="text-muted-foreground">
          {toolName === 'search' && 'Searching...'}
          {toolName === 'navigate' && 'Navigating...'}
          {toolName === 'search_endpoints' && 'Searching...'}
          {toolName === 'navigate_to_endpoint' && 'Navigating...'}
          {toolName === 'prefill_parameters' && 'Setting params...'}
          {toolName === 'get_endpoint_details' && 'Loading details...'}
          {toolName === 'check_request_validity' && 'Validating request...'}
          {toolName === 'send_request' && (
            <span className="flex items-center gap-1.5">
              <PaperPlaneTilt className="size-3.5 text-blue-500 animate-pulse" weight="fill" />
              Sending request...
            </span>
          )}
          {toolName === 'switch_to_notes' && 'Opening Notes...'}
          {toolName === 'switch_to_docs' && 'Opening Docs...'}
          {toolName === 'switch_to_api_client' && 'Opening API Client...'}
          {toolName === 'navigate_to_doc_section' && 'Navigating to section...'}
          {toolName === 'navigate_to_doc_page' && 'Navigating to page...'}
          {toolName === 'search_docs' && 'Searching documentation...'}
          {toolName === 'scroll_to_section' && 'Scrolling to section...'}
          {toolName === 'list_notes' && 'Checking existing files...'}
          {toolName === 'open_file' && `Opening ${(args.path as string)?.split('/').pop() || 'file'}...`}
          {toolName === 'create_folder' && `Creating folder ${args.path as string || ''}...`}
          {toolName === 'create_file' && `Creating ${(args.path as string)?.split('/').pop() || 'file'}...`}
          {toolName === 'write_file' && `Writing ${(args.path as string)?.split('/').pop() || 'file'}...`}
          {toolName === 'delete_file' && `Deleting ${(args.path as string)?.split('/').pop() || 'file'}...`}
          {toolName === 'delete_all_notes' && 'Deleting all notes...'}
        </span>
      </div>
    )
  }

  // Error state
  if (state === 'error') {
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
        <XCircle className="size-3.5 text-destructive" weight="fill" />
        <span className="text-destructive">Failed</span>
      </div>
    )
  }

  // === UNIFIED TOOLS ===
  
  // Unified search
  if (toolName === 'search') {
    const resultData = result as { results?: Array<{ type: string; id: string; title: string; method?: string; group?: string }>; message?: string } | undefined
    const results = resultData?.results || []
    
    if (results.length === 0) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <MagnifyingGlass className="size-3.5 text-muted-foreground" weight="bold" />
          <span className="text-muted-foreground">No results found</span>
        </div>
      )
    }
    
    if (results.length === 1) {
      const item = results[0]
      return (
        <button
          onClick={() => handleResultClick(item)}
          className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50 hover:bg-muted/80 hover:border-border transition-colors cursor-pointer w-full text-left"
        >
          <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
          <span className="text-muted-foreground">Found</span>
          {item.method && <MethodBadge method={item.method as HTTPMethod} size="sm" />}
          <span className="font-medium truncate">{item.title}</span>
        </button>
      )
    }
    
    return (
      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1.5">
          <MagnifyingGlass className="size-3.5" weight="bold" />
          <span>Found {results.length} results</span>
        </div>
        <div className="space-y-0.5 ml-5">
          {results.slice(0, 4).map((item, i) => (
            <button
              key={i}
              onClick={() => handleResultClick(item)}
              className="flex items-center gap-1.5 text-xs py-1 px-1.5 -ml-1.5 rounded text-muted-foreground hover:bg-muted/80 transition-colors cursor-pointer w-full text-left"
            >
              {item.type === 'endpoint' && item.method && (
                <MethodBadge method={item.method as HTTPMethod} size="sm" />
              )}
              {item.type === 'doc' && (
                <File className="size-3 text-purple-500" weight="fill" />
              )}
              {item.type === 'changelog' && (
                <Clock className="size-3 text-orange-500" weight="fill" />
              )}
              <span className="truncate font-medium text-foreground">{item.title}</span>
              {item.group && <span className="text-muted-foreground/60 text-[10px]">({item.group})</span>}
            </button>
          ))}
          {results.length > 4 && (
            <span className="text-[11px] text-muted-foreground">+{results.length - 4} more</span>
          )}
        </div>
      </div>
    )
  }
  
  // Unified navigate
  if (toolName === 'navigate') {
    const resultData = result as { success?: boolean; type?: string; title?: string; method?: string; message?: string } | undefined
    
    if (!resultData?.success) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <XCircle className="size-3.5 text-muted-foreground" />
          <span className="text-muted-foreground">{resultData?.message || 'Navigation failed'}</span>
        </div>
      )
    }
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
        <span className="text-muted-foreground">Opened</span>
        {resultData.method && <MethodBadge method={resultData.method as HTTPMethod} size="sm" />}
        {resultData.type === 'changelog' && <Clock className="size-3 text-orange-500" weight="fill" />}
        {resultData.type === 'doc' && <File className="size-3 text-purple-500" weight="fill" />}
        <span className="font-medium truncate">{resultData.title}</span>
      </div>
    )
  }

  // Navigate to endpoint
  if (toolName === 'navigate_to_endpoint') {
    const resultData = result as { success?: boolean; endpoint?: EndpointIndex; reason?: string } | undefined
    const endpoint = resultData?.endpoint
    
    if (!endpoint) return null
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
        <span className="text-muted-foreground">Opened</span>
        <MethodBadge method={endpoint.method as HTTPMethod} size="sm" />
        <span className="font-medium truncate">{endpoint.name}</span>
      </div>
    )
  }

  // Prefill parameters
  if (toolName === 'prefill_parameters') {
    const prefillData = (result as { params?: Array<{key: string; value: string}>; headers?: Array<{key: string; value: string}>; body?: string; pathVariables?: Array<{key: string; value: string}> }) || args as PrefillData
    const items: string[] = []
    if (prefillData.pathVariables?.length) items.push(`${prefillData.pathVariables.length} path vars`)
    if (prefillData.params?.length) items.push(`${prefillData.params.length} params`)
    if (prefillData.headers?.length) items.push(`${prefillData.headers.length} headers`)
    if (prefillData.body) items.push('body')
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
        <span className="text-muted-foreground">Set {items.join(', ')}</span>
      </div>
    )
  }

  // Search endpoints
  if (toolName === 'search_endpoints') {
    const results = result as EndpointIndex[] | undefined
    
    if (!results || results.length === 0) return null
    if (results.length === 1) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
          <span className="text-muted-foreground">Found</span>
          <MethodBadge method={results[0].method as HTTPMethod} size="sm" />
          <button 
            onClick={() => onNavigate?.(results[0].id)}
            className="font-medium truncate hover:underline"
          >
            {results[0].name}
          </button>
        </div>
      )
    }
    
    return (
      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1.5">
          <MagnifyingGlass className="size-3.5" weight="bold" />
          <span>Found {results.length} endpoints</span>
        </div>
        <div className="space-y-0.5 ml-5">
          {results.slice(0, 4).map((ep) => (
            <button
              key={ep.id}
              onClick={() => onNavigate?.(ep.id)}
              className="flex items-center gap-1.5 text-xs py-0.5 hover:text-foreground transition-colors text-muted-foreground"
            >
              <MethodBadge method={ep.method as HTTPMethod} size="sm" />
              <span className="truncate">{ep.name}</span>
            </button>
          ))}
          {results.length > 4 && (
            <span className="text-[11px] text-muted-foreground">+{results.length - 4} more</span>
          )}
        </div>
      </div>
    )
  }

  // Get endpoint details
  if (toolName === 'get_endpoint_details') {
    const endpoint = result as {
      id?: string
      name?: string
      method?: string
      path?: string
      description?: string | null
    } | undefined
    
    if (!endpoint) return null
    
    return (
      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <div className="flex items-center gap-2 text-xs">
          <MethodBadge method={(endpoint.method || 'GET') as HTTPMethod} size="sm" />
          <span className="font-medium">{endpoint.name}</span>
        </div>
        <code className="text-[11px] text-muted-foreground block truncate mt-0.5">{endpoint.path}</code>
      </div>
    )
  }

  // Switch to notes
  if (toolName === 'switch_to_notes') {
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <Note className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
        <span className="text-muted-foreground">Opened Notes workspace</span>
      </div>
    )
  }

  // Switch to docs
  if (toolName === 'switch_to_docs') {
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <File className="size-3.5 text-purple-600 dark:text-purple-500" weight="fill" />
        <span className="text-muted-foreground">Opened Docs</span>
      </div>
    )
  }

  // Switch to API client
  if (toolName === 'switch_to_api_client') {
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <TestTube className="size-3.5 text-blue-600 dark:text-blue-500" weight="fill" />
        <span className="text-muted-foreground">Opened API Client</span>
      </div>
    )
  }

  // Navigate to documentation section
  if (toolName === 'navigate_to_doc_section') {
    const sectionName = args.sectionName as string || 'section'
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <ArrowSquareOut className="size-3.5 text-purple-600 dark:text-purple-500" weight="fill" />
        <span className="text-muted-foreground">Navigated to <span className="font-medium text-foreground">{sectionName}</span></span>
      </div>
    )
  }

  // Navigate to documentation page
  if (toolName === 'navigate_to_doc_page') {
    const resultData = result as { success?: boolean; title?: string; slug?: string } | undefined
    const title = args.title as string || resultData?.title || 'page'
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <File className="size-3.5 text-purple-600 dark:text-purple-500" weight="fill" />
        <span className="text-muted-foreground">
          Opened <span className="font-medium text-foreground">{title}</span>
        </span>
      </div>
    )
  }

  // Search documentation pages
  if (toolName === 'search_docs') {
    const resultData = result as { results?: Array<{ title: string; slug: string; group: string }>; message?: string } | undefined
    const results = resultData?.results || []
    
    if (results.length === 0) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <MagnifyingGlass className="size-3.5 text-muted-foreground" weight="bold" />
          <span className="text-muted-foreground">No documentation pages found</span>
        </div>
      )
    }
    
    if (results.length === 1) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
          <span className="text-muted-foreground">Found</span>
          <span className="font-medium truncate">{results[0].title}</span>
          <span className="text-muted-foreground/60">in {results[0].group}</span>
        </div>
      )
    }
    
    return (
      <div className="py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1.5">
          <MagnifyingGlass className="size-3.5" weight="bold" />
          <span>Found {results.length} documentation pages</span>
        </div>
        <div className="space-y-0.5 ml-5">
          {results.slice(0, 4).map((doc, i) => (
            <div
              key={i}
              className="flex items-center gap-1.5 text-xs py-0.5 text-muted-foreground"
            >
              <File className="size-3 text-purple-500" weight="fill" />
              <span className="truncate font-medium text-foreground">{doc.title}</span>
              <span className="text-muted-foreground/60 text-[10px]">({doc.group})</span>
            </div>
          ))}
          {results.length > 4 && (
            <span className="text-[11px] text-muted-foreground">+{results.length - 4} more</span>
          )}
        </div>
      </div>
    )
  }

  // Scroll to section within page
  if (toolName === 'scroll_to_section') {
    const resultData = result as { success?: boolean; heading?: string; id?: string; message?: string } | undefined
    
    if (!resultData?.success) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <MagnifyingGlass className="size-3.5 text-muted-foreground" weight="bold" />
          <span className="text-muted-foreground">{resultData?.message || 'Section not found'}</span>
        </div>
      )
    }
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <ArrowSquareOut className="size-3.5 text-yellow-600 dark:text-yellow-500" weight="fill" />
        <span className="text-muted-foreground">
          Scrolled to <span className="font-medium text-foreground">{resultData.heading}</span>
        </span>
      </div>
    )
  }

  // List notes (check for existing files)
  if (toolName === 'list_notes') {
    const resultData = result as { success?: boolean; count?: number; files?: Array<{ path: string }>; message?: string } | undefined
    const count = resultData?.count ?? 0
    const files = resultData?.files ?? []
    
    // File type color mapping - matches notes-mode.tsx colors exactly
    const getFileColor = (path: string) => {
      const type = getFileType(path)
      const colorMap: Record<string, string> = {
        'javascript': 'text-yellow-400',
        'typescript': 'text-blue-400',
        'python': 'text-green-500',
        'go': 'text-cyan-400',
        'ruby': 'text-red-400',
        'php': 'text-purple-400',
        'shell': 'text-green-400',
        'markdown': 'text-blue-300',
        'mermaid': 'text-pink-400',
        'json': 'text-yellow-500',
        'yaml': 'text-red-300',
        'text': 'text-zinc-400',
      }
      return colorMap[type] || 'text-zinc-400'
    }
    
    return (
      <div className="text-xs py-2 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <div className="flex items-center gap-2 mb-1.5">
          <MagnifyingGlass className="size-3.5 text-violet-600 dark:text-violet-500 flex-shrink-0" weight="fill" />
          <span className="text-muted-foreground">
            {count > 0 ? `Found ${count} existing file${count !== 1 ? 's' : ''}` : 'No existing files found'}
          </span>
        </div>
        {count > 0 && files.length > 0 && (
          <div className="ml-5 space-y-1">
            {files.slice(0, 5).map((f, i) => {
              const fileName = f.path.split('/').pop() || f.path
              const folder = f.path.includes('/') ? f.path.split('/').slice(0, -1).join('/') + '/' : ''
              return (
                <button
                  key={i}
                  onClick={() => onOpenFile?.(f.path)}
                  className="flex items-center gap-1.5 hover:bg-muted/50 rounded px-1 -mx-1 py-0.5 transition-colors text-left w-full"
                >
                  <File className={`size-3.5 ${getFileColor(f.path)} flex-shrink-0`} weight="fill" />
                  {folder && <span className="text-muted-foreground/60">{folder}</span>}
                  <span className="font-mono text-foreground/80 hover:text-primary transition-colors">{fileName}</span>
                </button>
              )
            })}
            {files.length > 5 && (
              <div className="text-muted-foreground/60 italic pl-5">...and {files.length - 5} more</div>
            )}
          </div>
        )}
      </div>
    )
  }

  // Open existing file
  if (toolName === 'open_file') {
    const path = args.path as string
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <File className="size-3.5 text-blue-600 dark:text-blue-500" weight="fill" />
        <span className="text-muted-foreground">Opened </span>
        <ClickableFileName path={path} />
      </div>
    )
  }

  // Create folder
  if (toolName === 'create_folder') {
    const resultData = result as { success?: boolean; path?: string; description?: string } | undefined
    const path = args.path as string || resultData?.path
    const description = args.description as string || resultData?.description
    
    return (
      <div className="flex items-start gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <FolderPlus className="size-3.5 text-amber-600 dark:text-amber-500 mt-0.5 flex-shrink-0" weight="fill" />
        <div>
          <span className="text-muted-foreground">Created folder </span>
          <span className="font-mono font-medium text-foreground">{path}</span>
          {description && (
            <p className="text-muted-foreground mt-0.5">{description}</p>
          )}
        </div>
      </div>
    )
  }
  
  // Create file (empty)
  if (toolName === 'create_file') {
    const resultData = result as { success?: boolean; path?: string; description?: string } | undefined
    const path = args.path as string || resultData?.path
    const description = args.description as string || resultData?.description
    
    return (
      <div className="flex items-start gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <FilePlus className="size-3.5 text-blue-600 dark:text-blue-500 mt-0.5 flex-shrink-0" weight="fill" />
        <div>
          <span className="text-muted-foreground">Created </span>
          <ClickableFileName path={path} />
          {description && (
            <p className="text-muted-foreground mt-0.5">{description}</p>
          )}
        </div>
      </div>
    )
  }

  // Write file (content)
  if (toolName === 'write_file') {
    const resultData = result as { success?: boolean; path?: string } | undefined
    const path = args.path as string || resultData?.path
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <CheckCircle className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
        <span className="text-muted-foreground">Wrote </span>
        <ClickableFileName path={path} />
      </div>
    )
  }

  // Delete file
  if (toolName === 'delete_file') {
    const resultData = result as { success?: boolean; path?: string; reason?: string; error?: string } | undefined
    const path = args.path as string || resultData?.path
    const reason = args.reason as string || resultData?.reason
    const fileName = path?.split('/').pop() || path
    
    if (resultData?.error) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
          <XCircle className="size-3.5 text-destructive" weight="fill" />
          <span className="text-destructive">Failed to delete: {resultData.error}</span>
        </div>
      )
    }
    
    return (
      <div className="flex items-start gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
        <Trash className="size-3.5 text-red-600 dark:text-red-500 mt-0.5 flex-shrink-0" weight="fill" />
        <div>
          <span className="text-muted-foreground">Deleted </span>
          <span className="font-mono font-medium text-foreground">{fileName}</span>
          {reason && (
            <p className="text-muted-foreground mt-0.5">{reason}</p>
          )}
        </div>
      </div>
    )
  }

  // Delete all notes
  if (toolName === 'delete_all_notes') {
    const resultData = result as { success?: boolean; deletedCount?: number; files?: string[]; message?: string; error?: string } | undefined
    
    if (resultData?.error) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
          <XCircle className="size-3.5 text-destructive" weight="fill" />
          <span className="text-destructive">{resultData.error}</span>
        </div>
      )
    }
    
    const count = resultData?.deletedCount ?? 0
    const files = resultData?.files ?? []
    
    // File type color mapping - matches notes-mode.tsx colors exactly
    const getFileColor = (path: string) => {
      const type = getFileType(path)
      const colorMap: Record<string, string> = {
        'javascript': 'text-yellow-400',
        'typescript': 'text-blue-400',
        'python': 'text-green-500',
        'go': 'text-cyan-400',
        'ruby': 'text-red-400',
        'php': 'text-purple-400',
        'shell': 'text-green-400',
        'markdown': 'text-blue-300',
        'mermaid': 'text-pink-400',
        'json': 'text-yellow-500',
        'yaml': 'text-red-300',
        'text': 'text-zinc-400',
      }
      return colorMap[type] || 'text-zinc-400'
    }
    
    if (count === 0) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50">
          <Trash className="size-3.5 text-muted-foreground" />
          <span className="text-muted-foreground">No notes to delete</span>
        </div>
      )
    }
    
    const displayFiles = files.slice(0, 5)
    const remainingCount = files.length - displayFiles.length
    
    return (
      <div className="text-xs py-2 px-2.5 rounded-md bg-red-500/5 border border-red-500/20">
        <div className="flex items-center gap-2 mb-2">
          <Trash className="size-3.5 text-red-600 dark:text-red-500" weight="fill" />
          <span className="font-medium text-red-700 dark:text-red-400">
            Deleted {count} file{count !== 1 ? 's' : ''}
          </span>
        </div>
        <div className="space-y-1 ml-5">
          {displayFiles.map((filePath, i) => {
            const fileName = filePath.split('/').pop() || filePath
            const folder = filePath.includes('/') ? filePath.split('/').slice(0, -1).join('/') + '/' : ''
            return (
              <div key={i} className="flex items-center gap-1.5">
                <File className={`size-3.5 ${getFileColor(filePath)}`} weight="fill" />
                <span className="text-muted-foreground/70">{folder}</span>
                <span className="font-mono text-foreground/80">{fileName}</span>
              </div>
            )
          })}
          {remainingCount > 0 && (
            <div className="text-muted-foreground/60 italic">
              ...and {remainingCount} more
            </div>
          )}
        </div>
      </div>
    )
  }

  // Check request validity
  if (toolName === 'check_request_validity') {
    const validation = result as RequestValidationResult | undefined
    
    if (!validation) return null
    
    const { isValid, validation: v } = validation
    const issues: string[] = []
    
    if (v?.pathParams?.missing?.length) issues.push(`path: ${v.pathParams.missing.join(', ')}`)
    if (v?.queryParams?.missing?.length) issues.push(`params: ${v.queryParams.missing.join(', ')}`)
    if (v?.body?.required && !v?.body?.hasContent) issues.push('body empty')
    if (v?.auth?.required && !v?.auth?.configured) issues.push('auth missing')
    
    if (isValid) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-green-500/10 border border-green-500/20">
          <CheckSquare className="size-3.5 text-green-600 dark:text-green-500" weight="fill" />
          <span className="text-green-700 dark:text-green-400">Ready to send</span>
        </div>
      )
    }
    
    return (
      <div className="py-1.5 px-2.5 rounded-md bg-amber-500/10 border border-amber-500/20">
        <div className="flex items-center gap-2 text-xs">
          <Warning className="size-3.5 text-amber-600 dark:text-amber-500" weight="fill" />
          <span className="text-amber-700 dark:text-amber-400">Missing: {issues.join(', ')}</span>
        </div>
      </div>
    )
  }

  // Send request
  if (toolName === 'send_request') {
    const response = result as { 
      success?: boolean
      message?: string
      error?: string
    } | undefined
    
    if (!response) return null
    
    const { success, error } = response
    
    if (error || !success) {
      return (
        <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-destructive/10 border border-destructive/20">
          <XCircle className="size-3.5 text-destructive" weight="fill" />
          <span className="text-destructive">{error || 'Request failed'}</span>
        </div>
      )
    }
    
    return (
      <div className="flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-blue-500/10 border border-blue-500/20">
        <PaperPlaneTilt className="size-3.5 text-blue-600 dark:text-blue-500" weight="fill" />
        <span className="text-blue-700 dark:text-blue-400">Request sent → check response viewer</span>
      </div>
    )
  }

  // Hide unknown tools
  return null
}
