import React from 'react'
import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/utils/cn'
import type { TaskArtifact } from '../../types'
import { UrlScriptPreview } from './UrlScriptPreview'
import { ShellExecutePreview } from './ShellExecutePreview'
import { WebSearchPreview } from './WebSearchPreview'
import { extractToolOutputArtifact, normalizeArtifactFileType } from './previewUtils'
import { ToolOutputArtifactPreview } from './ToolOutputArtifactPreview'

export interface ToolCallPreviewProps {
  /** 工具名称 */
  toolName?: string
  /** 原始事件参数（event.content.arguments） */
  eventArguments?: unknown
  /** 工具输入参数 */
  toolInput?: unknown
  /** 工具输出结果 */
  toolOutput?: unknown
  /** 自定义类名 */
  className?: string
  /** 主题 */
  theme?: string
}

function getBaseName(path?: string): string {
  if (!path) return ''
  const cleanPath = path.split(/[?#]/)[0]
  const segments = cleanPath.split('/').filter(Boolean)
  return segments[segments.length - 1] || ''
}

function extractArrayToolOutputArtifact(
  toolOutput: unknown,
  toolName?: string,
): TaskArtifact | null {
  if (!Array.isArray(toolOutput) || toolOutput.length === 0) {
    return null
  }

  const firstObject = toolOutput.find(
    item => item && typeof item === 'object' && !Array.isArray(item),
  ) as Record<string, unknown> | undefined

  if (!firstObject) {
    return null
  }

  const outputPathFields = ['image_path', 'path', 'file_path', 'file_url', 'url', 'download_url']
  const outputNameFields = ['file_name', 'name', 'title']
  const outputTypeFields = ['file_type', 'type', 'mime_type']

  const outputPath = outputPathFields.find(
    field => typeof firstObject[field] === 'string' && firstObject[field],
  )
  const pathValue = outputPath ? String(firstObject[outputPath]) : ''

  if (!pathValue) {
    return null
  }

  const outputName = outputNameFields.find(
    field => typeof firstObject[field] === 'string' && firstObject[field],
  )
  const fileName = outputName
    ? String(firstObject[outputName])
    : getBaseName(pathValue) || `${toolName || 'tool_output'}`

  const outputType = outputTypeFields.find(
    field => typeof firstObject[field] === 'string' && firstObject[field],
  )
  const fileType = normalizeArtifactFileType(
    outputType ? String(firstObject[outputType]) : '',
    fileName,
    pathValue,
  )

  return {
    path: pathValue,
    file_name: fileName,
    file_type: fileType,
    url: /^https?:\/\//.test(pathValue) ? pathValue : undefined,
  }
}

/**
 * 从工具输入/输出中提取代码内容
 */
function extractCodeFromData(data: unknown): string | null {
  if (!data || typeof data !== 'object') {
    return null
  }
  
  const obj = data as Record<string, unknown>
  
  // 常见的代码字段
  const codeFields = [
    'code',
    'script',
    'command',
    'cmd',
    'content',
    'source',
    'text',
    'body',
  ]
  
  for (const field of codeFields) {
    if (typeof obj[field] === 'string' && obj[field]) {
      return obj[field] as string
    }
  }
  
  return null
}

/**
 * 从工具输出中智能提取脚本 URL
 * 优先支持几种常见字段：url / script_url / file_url / download_url
 */
function extractScriptUrl(data: unknown): string | null {
  if (!data) return null

  // 纯字符串且是 URL
  if (typeof data === 'string') {
    return /^https?:\/\//.test(data) ? data : null
  }

  if (typeof data !== 'object' || data === null) return null

  const obj = data as Record<string, unknown>
  const urlLikeFields = ['script_url', 'url', 'file_url', 'download_url']

  for (const field of urlLikeFields) {
    const val = obj[field]
    if (typeof val === 'string' && /^https?:\/\//.test(val)) {
      return val
    }
  }

  return null
}

/**
 * 提取 event.content.arguments[0] 作为搜索词
 */
function extractFirstArgument(args: unknown): string | null {
  if (!args) return null

  let normalized: unknown[] = []

  if (Array.isArray(args)) {
    normalized = args
  } else if (typeof args === 'string') {
    try {
      const parsed = JSON.parse(args)
      if (Array.isArray(parsed)) {
        normalized = parsed
      } else {
        normalized = [args]
      }
    } catch {
      normalized = [args]
    }
  } else {
    return null
  }

  if (!normalized.length) return null

  const first = normalized[0]
  if (typeof first === 'string') return first
  if (typeof first === 'number' || typeof first === 'boolean') return String(first)
  return null
}

/**
 * 格式化数据为字符串，尝试保持原始格式
 */
function formatData(data: unknown, toolName?: string): string {
  // 如果是字符串，直接返回
  if (typeof data === 'string') {
    return data
  }
  
  // 如果是脚本执行类工具，尝试提取代码
  const isCodeExecutionTool = toolName && (
    toolName.includes('execute') ||
    toolName.includes('shell') ||
    toolName.includes('code') ||
    toolName.includes('script') ||
    toolName.includes('python') ||
    toolName.includes('javascript') ||
    toolName.includes('node') ||
    toolName.includes('bash')
  )
  
  if (isCodeExecutionTool) {
    const code = extractCodeFromData(data)
    if (code) {
      return code
    }
  }
  
  // 默认格式化为 JSON
  return JSON.stringify(data, null, 2)
}


/**
 * 将任意值拍平为 [key, displayValue][] 用于 table 渲染
 * - 对象：每个 key-value 一行
 * - 其他：单行 value
 */
function flattenToRows(data: unknown): Array<[string, string]> {
  if (!data) return []

  // 特殊处理：当只有 value 且它是 JSON 字符串时，优先解析并展开内部字段
  if (
    typeof data === 'object' &&
    data !== null &&
    !Array.isArray(data) &&
    'value' in (data as Record<string, unknown>)
  ) {
    const rawValue = (data as Record<string, unknown>).value
    if (typeof rawValue === 'string') {
      try {
        const parsed = JSON.parse(rawValue)
        // 解析成功且是对象/数组时，递归拍平内部结构
        if (parsed && typeof parsed === 'object') {
          return flattenToRows(parsed)
        }
      } catch {
        // 解析失败则继续按下面的逻辑处理
      }
    }
  }

  // 普通对象：按 key → value 展开
  if (typeof data === 'object' && data !== null && !Array.isArray(data)) {
    return Object.entries(data as Record<string, unknown>).map(([k, v]) => [
      k,
      typeof v === 'string' ? v : JSON.stringify(v, null, 2),
    ])
  }

  // 根就是 JSON 字符串：尝试解析并展开
  if (typeof data === 'string') {
    try {
      const parsed = JSON.parse(data)
      if (parsed && typeof parsed === 'object') {
        return flattenToRows(parsed)
      }
    } catch {
      // 不是合法 JSON，则按原始字符串展示
    }
  }

  const str = typeof data === 'string' ? data : JSON.stringify(data, null, 2)
  return [['value', str]]
}

function ToolLabel({ label, desc }: { label: string, desc: string }) {
  return <div className="flex items-baseline justify-between mb-4">
    <h2 className="text-[14px] font-bold text-muted-foreground uppercase tracking-[0.2em]">
      {label}
    </h2>
    <div className="mx-4 h-px flex-1 bg-border/80" />
    <span className="text-[11px] font-mono text-muted-foreground">
      {desc}
    </span>
  </div>
}

/**
 * 输入参数详情面板（参考设计稿样式）
 */
function InputPanel({ data }: { data: unknown }) {
  const rows = flattenToRows(data)
  if (!rows.length) return null

  const [first, ...rest] = rows
  const pairs: Array<Array<[string, string]>> = []

  for (let i = 0; i < rest.length; i += 2) {
    pairs.push(rest.slice(i, i + 2))
  }

  return (
    <div className="space-y-6">
      {/* 顶部标题行 */}
     <ToolLabel label="输入参数" desc={`${rows.length} keys`} />

      <div className="grid grid-cols-1 gap-y-6">
        {/* 首行：做成醒目的大块 */}
        {first && (
          <div className="group">
            <label className="mb-1.5 block text-[10px] font-bold uppercase tracking-wider text-muted-foreground transition-colors group-hover:text-primary">
              {first[0]}
            </label>
            <div className="rounded-lg border border-border bg-card/84 px-3 py-2.5 font-mono text-sm text-foreground transition-all group-hover:border-primary/40">
              {first[1]}
            </div>
          </div>
        )}

        {/* 后续参数，两列栅格，自动铺排 */}
        {pairs.map((rowGroup, idx) => (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" key={idx}>
            {rowGroup.map(([key, val]) => (
              <div className="group" key={key}>
                <label className="mb-1.5 block text-[10px] font-bold uppercase tracking-wider text-muted-foreground transition-colors group-hover:text-primary">
                  {key}
                </label>
                <div className="break-all font-mono text-sm text-foreground">
                  {val}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}

/**
 * 工具调用预览组件
 * - 输入参数：table 展示
 * - 输出结果：浅色主题代码块
 */
export function ToolCallPreview({
  toolName,
  eventArguments,
  toolInput,
  toolOutput,
  className,
}: ToolCallPreviewProps) {
  // info_search_web：复刻 Remix 的 WebSearch 展示逻辑（列表 + 可点击链接）
  if (toolName === 'info_search_web') {
    const searchQuery = extractFirstArgument(eventArguments)
    return (
      <WebSearchPreview
        results={toolOutput}
        searchQuery={searchQuery}
        className={className}
      />
    )
  }

  const outputCode = formatData(toolOutput, toolName)
  const outputArtifact = extractToolOutputArtifact({
    path: '',
    file_name: toolName || 'tool_output',
    file_type: 'tool_call',
    event_type: 'tool_call',
    tool_name: toolName,
    event_arguments: eventArguments,
    tool_input: toolInput,
    tool_output: toolOutput,
  }) ?? extractArrayToolOutputArtifact(toolOutput, toolName)

  if (outputArtifact) {
    return (
      <div className={cn('h-full overflow-hidden', className)}>
        <ToolOutputArtifactPreview artifact={outputArtifact} />
      </div>
    )
  }

  // 对脚本类工具，优先尝试用 UrlScriptPreview（复用 ShellExecutePreview 风格）
  const isScriptTool = !!toolName && toolName.toLowerCase().includes('script')
  const scriptUrl = isScriptTool ? extractScriptUrl(toolOutput) : null

  return (
    <div className={cn('flex flex-col h-full', className)}>
      <ScrollArea className="flex-1">
        <div className="p-6 space-y-8 mt-[50px]">
          {/* 工具名称 */}
          {toolName && (
            <div className="mb-6">
              <ToolLabel label="工具调用" desc={toolName} />
              <div className="inline-flex items-center rounded-md bg-primary/10 px-3 py-1.5 font-mono text-sm text-primary">
                {toolName}
              </div>
            </div>
          )}

          {/* 输入参数 - Table */}
          {toolInput != null && (
            <div>
              <InputPanel data={toolInput} />
            </div>
          )}

          {/* 输出结果 */}
          {toolOutput != null && (
            <div>
              <ToolLabel label="输出结果" desc="200 ok" />

              {/* 脚本工具 + 有 URL：用 UrlScriptPreview（内部再用 ShellExecutePreview） */}
              {!outputArtifact && scriptUrl && (
                <div className="rounded-lg border border-border overflow-hidden">
                  <UrlScriptPreview url={scriptUrl} title={toolName} />
                </div>
              )}

              {/* 其他情况：走原来的浅色代码高亮 */}
              {!scriptUrl && (
                <ShellExecutePreview output={outputCode} />
              )}
            </div>
          )}
        </div>
      </ScrollArea>
    </div>
  )
}

export default ToolCallPreview