import React, { useMemo, useState } from 'react'
import { ChevronRight, Folder, FolderOpen, X } from 'lucide-react'
import { cn } from '@/utils/cn'
import type { TaskArtifact } from '../types'
import { getFileIconConfig } from '../utils/fileIcons'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'

export interface ArtifactListProps {
  artifacts: TaskArtifact[]
  onClick?: (artifact: TaskArtifact) => void
  onClose?: () => void
  selected?: TaskArtifact | null
  className?: string
}

function getFileTypeLabel(artifact: TaskArtifact) {
  const raw =
    artifact.file_type ||
    artifact.file_name.split('.').pop() ||
    artifact.path?.split('.').pop() ||
    ''

  const ext = raw.toLowerCase()

  if (!ext) return '文件'

  switch (ext) {
    case 'py':
      return 'Python 脚本'
    case 'html':
      return 'HTML 文档'
    case 'md':
    case 'markdown':
      return 'Markdown 文件'
    case 'png':
    case 'jpg':
    case 'jpeg':
    case 'gif':
    case 'webp':
      return '图片文件'
    case 'pdf':
      return 'PDF 文件'
    case 'csv':
      return 'CSV 文件'
    case 'ppt':
    case 'pptx':
      return '演示文稿'
    default:
      return `${ext.toUpperCase()} 文件`
  }
}

interface TreeNode {
  name: string
  path: string
  isFolder: boolean
  fileCount: number
  children?: TreeNode[]
  artifact?: TaskArtifact
}

type BuildNode = {
  name: string
  path: string
  isFolder: boolean
  fileCount: number
  children?: Record<string, BuildNode>
  artifact?: TaskArtifact
}

// 只要是 http/https 链接，一律视为「网页」，不在文件列表中展示
function isHttpUrlArtifact(artifact: TaskArtifact): boolean {
  const rawPath = artifact.path || artifact.file_name || ''
  return /^https?:\/\//.test(rawPath)
}

function buildFileTree(artifacts: TaskArtifact[]): TreeNode[] {
  const root: Record<string, BuildNode> = {}

  artifacts.forEach(artifact => {
    const fullPath = artifact.path || artifact.file_name

    // 对于 http/https URL，去掉协议和域名部分，只使用路径来构建「目录」
    let normalizedPath = fullPath
    if (fullPath.startsWith('http://') || fullPath.startsWith('https://')) {
      try {
        const url = new URL(fullPath)
        normalizedPath = url.pathname && url.pathname !== '/' ? url.pathname : url.hostname
      } catch {
        // 如果 URL 解析失败，退回原始 fullPath
        normalizedPath = fullPath
      }
    }

    const parts = normalizedPath.split('/').filter(Boolean)
    let cur = root
    let curPath = ''

    parts.forEach((part, i) => {
      curPath = curPath ? `${curPath}/${part}` : part
      const isLast = i === parts.length - 1

      if (!cur[part]) {
        cur[part] = {
          name: part,
          path: curPath,
          isFolder: !isLast,
          fileCount: 0,
          children: isLast ? undefined : {},
          artifact: isLast ? artifact : undefined,
        }
      } else if (isLast) {
        cur[part].artifact = artifact
      }

      if (!isLast && cur[part].children) {
        cur = cur[part].children!
      }
    })
  })

  const toArr = (obj: Record<string, BuildNode>): TreeNode[] =>
    Object.values(obj)
      .map((n) => {
        const children = n.children ? toArr(n.children) : undefined
        const fileCount = n.isFolder
          ? (children || []).reduce((sum, child) => sum + child.fileCount, 0)
          : 1

        return {
          name: n.name,
          path: n.path,
          isFolder: n.isFolder,
          fileCount,
          artifact: n.artifact,
          children,
        }
      })
      .sort((a, b) => {
        if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
        return a.name.localeCompare(b.name)
      })

  return toArr(root)
}

function isSelectedArtifact(node: TreeNode, selected?: TaskArtifact | null) {
  return !node.isFolder && !!node.artifact && selected?.path === node.artifact.path
}

interface TreeItemProps {
  node: TreeNode
  depth?: number
  collapsedPaths: Set<string>
  selected?: TaskArtifact | null
  onToggle: (path: string) => void
  onSelect?: (artifact: TaskArtifact) => void
}

function TreeItem({
  node,
  depth = 0,
  collapsedPaths,
  selected,
  onToggle,
  onSelect,
}: TreeItemProps) {
  const isFolder = node.isFolder
  const isExpanded = isFolder && !collapsedPaths.has(node.path)
  const selectedState = isSelectedArtifact(node, selected)

  const { icon: FileIcon, color } = isFolder
    ? { icon: isExpanded ? FolderOpen : Folder, color: 'text-primary' }
    : getFileIconConfig(
        node.artifact?.file_type || node.artifact?.file_name.split('.').pop() || '',
      )

  return (
    <div>
      <button
        type="button"
        onClick={() => {
          if (isFolder) {
            onToggle(node.path)
            return
          }

          if (node.artifact) {
            onSelect?.(node.artifact)
          }
        }}
        className={cn(
          'flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-4 text-left transition-colors',
          'hover:bg-accent/70',
          selectedState && 'bg-primary/10 text-primary dark:bg-primary/18 dark:text-primary-foreground',
        )}
        style={{ paddingLeft: `${depth * 16 + 8}px` }}
      >
        {isFolder && (<span className="flex h-4 w-4 shrink-0 items-center justify-center">
            <ChevronRight className={cn('h-4 w-4 text-muted-foreground transition-transform', isExpanded && 'rotate-90')} />
          </span>
        )}

        <FileIcon className={cn('h-4 w-4 shrink-0', color)} strokeWidth={1.8} />

        <span className="min-w-0 flex-1 truncate text-sm text-foreground">
          {node.name}
        </span>

        <span className="shrink-0 text-[10px] text-muted-foreground">
          {isFolder
            ? `${node.fileCount} 项`
            : node.artifact
              ? getFileTypeLabel(node.artifact)
              : '文件'}
        </span>
      </button>

      {isFolder && isExpanded && node.children?.length ? (
        <div className="ml-4 border-l border-border pl-2">
          {node.children.map(child => (
            <TreeItem
              key={child.path}
              node={child}
              depth={depth + 1}
              collapsedPaths={collapsedPaths}
              selected={selected}
              onToggle={onToggle}
              onSelect={onSelect}
            />
          ))}
        </div>
      ) : null}
    </div>
  )
}

function InnerArtifactList({ artifacts, onClick, onClose, selected, className }: ArtifactListProps) {
  const files = useMemo(
    () =>
      artifacts.filter(
        (a) =>
          a.event_type !== 'tool_call' &&
          !isHttpUrlArtifact(a),
      ),
    [artifacts],
  )
  const [collapsedPaths, setCollapsedPaths] = useState<Set<string>>(() => new Set())

  const tree = useMemo(
    () => buildFileTree(files),
    [files],
  )

  const fileCount = files.length

  if (fileCount === 0) {
    return (
      <div className={cn('flex items-center justify-center h-full text-sm text-muted-foreground', className)}>
        暂无文件
      </div>
    )
  }

  return (
    <div
      className={cn(
        'flex h-full bg-card overflow-hidden border border-border',
        className,
      )}
    >
      <main className="flex-1 flex min-w-0 flex-col">
        <header className="h-12 md:h-14 border-b border-border flex items-center justify-between px-4 md:px-6 bg-card">
          <div className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-accent-foreground">
              <FolderTreeIcon />
            </div>
            <div className="min-w-0">
              <div className="text-sm font-semibold text-foreground">文件树</div>
              <div className="text-xs text-muted-foreground">按目录结构查看产物</div>
            </div>
          </div>

          <div className="flex items-center gap-2 md:gap-3">
            {onClose && (
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7 rounded-lg text-muted-foreground hover:text-primary hover:bg-accent transition-all"
                onClick={onClose}
                title="关闭面板"
              >
                <X className="w-3.5 h-3.5" />
              </Button>
            )}
          </div>
        </header>

        <ScrollArea className="flex-1">
          <div className="px-2 py-4">
            {tree.map(node => (
              <TreeItem
                key={node.path}
                node={node}
                collapsedPaths={collapsedPaths}
                selected={selected}
                onToggle={(path) => {
                  setCollapsedPaths(prev => {
                    const next = new Set(prev)
                    if (next.has(path)) {
                      next.delete(path)
                    } else {
                      next.add(path)
                    }
                    return next
                  })
                }}
                onSelect={onClick}
              />
            ))}
          </div>
        </ScrollArea>

        <footer className="h-9 md:h-10 border-t border-border flex items-center px-4 md:px-6 text-[11px] text-muted-foreground bg-card">
          <span>{fileCount} 个文件</span>
        </footer>
      </main>
    </div>
  )
}

function FolderTreeIcon() {
  return (
    <div className="relative h-4 w-4">
      <div className="absolute left-0 top-0 h-1.5 w-1.5 rounded-sm bg-current opacity-70" />
      <div className="absolute left-0 top-2.5 h-1.5 w-1.5 rounded-sm bg-current opacity-70" />
      <div className="absolute left-2.5 top-1.25 h-1.5 w-1.5 rounded-sm bg-current" />
      <div className="absolute left-[3px] top-[3px] h-px w-[7px] bg-current opacity-50" />
      <div className="absolute left-[3px] top-[11px] h-px w-[7px] bg-current opacity-50" />
      <div className="absolute left-[9px] top-[6px] h-[5px] w-px bg-current opacity-50" />
    </div>
  )
}

export const ArtifactList = React.memo(InnerArtifactList)
export default ArtifactList