import { useAppStore } from '@/stores/useAppStore'
import { Menu, Search, Sun, Moon, X, History } from 'lucide-react'
import { useState, useMemo, useRef, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { processes, artifacts, tools, knowledgeAreaMap } from '@/data'
import { ChangelogModal } from '@/components/ChangelogModal'

interface SearchResult {
  type: 'process' | 'artifact' | 'tool'
  id: string
  name: string
  nameEn: string
  extra?: string
  link: string
}

export function Header() {
  const sidebarOpen = useAppStore((s) => s.sidebarOpen)
  const toggleSidebar = useAppStore((s) => s.toggleSidebar)
  const darkMode = useAppStore((s) => s.darkMode)
  const toggleDarkMode = useAppStore((s) => s.toggleDarkMode)
  const searchQuery = useAppStore((s) => s.searchQuery)
  const setSearchQuery = useAppStore((s) => s.setSearchQuery)
  const [isSearchOpen, setIsSearchOpen] = useState(false)
  const [isChangelogOpen, setIsChangelogOpen] = useState(false)
  const searchRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const navigate = useNavigate()

  // 搜索结果
  const searchResults = useMemo<SearchResult[]>(() => {
    if (!searchQuery.trim()) return []

    const query = searchQuery.toLowerCase()
    const results: SearchResult[] = []

    // 搜索过程
    processes.forEach((p) => {
      if (
        p.name.toLowerCase().includes(query) ||
        p.nameEn.toLowerCase().includes(query) ||
        p.code.toLowerCase().includes(query)
      ) {
        const ka = knowledgeAreaMap.get(p.knowledgeAreaId)
        results.push({
          type: 'process',
          id: p.id,
          name: `${p.code} ${p.name}`,
          nameEn: p.nameEn,
          extra: ka?.name,
          link: `/process/${p.id}`,
        })
      }
    })

    // 搜索工件/文档
    artifacts.forEach((a) => {
      if (
        a.name.toLowerCase().includes(query) ||
        a.nameEn.toLowerCase().includes(query)
      ) {
        results.push({
          type: 'artifact',
          id: a.id,
          name: a.name,
          nameEn: a.nameEn,
          extra: '工件/文档',
          link: `/artifact/${a.id}`,
        })
      }
    })

    // 搜索工具与技术
    tools.forEach((t) => {
      if (
        t.name.toLowerCase().includes(query) ||
        t.nameEn.toLowerCase().includes(query)
      ) {
        results.push({
          type: 'tool',
          id: t.id,
          name: t.name,
          nameEn: t.nameEn,
          extra: '工具与技术',
          link: `/tool/${t.id}`,
        })
      }
    })

    return results.slice(0, 10) // 限制结果数量
  }, [searchQuery])

  // 点击外部关闭搜索
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setIsSearchOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  // 键盘快捷键
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
        event.preventDefault()
        setIsSearchOpen(true)
        inputRef.current?.focus()
      }
      if (event.key === 'Escape') {
        setIsSearchOpen(false)
      }
    }
    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [])

  const handleResultClick = (result: SearchResult) => {
    navigate(result.link)
    setIsSearchOpen(false)
  }

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'process':
        return 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300'
      case 'artifact':
        return 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
      case 'tool':
        return 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300'
      default:
        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
    }
  }

  const getTypeLabel = (type: string) => {
    switch (type) {
      case 'process':
        return '过程'
      case 'artifact':
        return '工件'
      case 'tool':
        return '工具'
      default:
        return type
    }
  }

  return (
    <header className={`
      sticky top-0 z-10 flex h-16 items-center justify-between gap-4
      border-b border-gray-200 dark:border-gray-700
      bg-white dark:bg-gray-800 px-4
      transition-all duration-300
      ${sidebarOpen ? 'lg:ml-64' : 'lg:ml-20'}
    `}>
      {/* 左侧：菜单按钮和搜索 */}
      <div className="flex items-center gap-4 flex-1">
        <button
          onClick={toggleSidebar}
          className="lg:hidden flex h-10 w-10 items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500"
          aria-label="切换菜单"
        >
          <Menu size={20} />
        </button>

        {/* 搜索框 */}
        <div ref={searchRef} className="relative flex-1 max-w-lg">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
          <input
            ref={inputRef}
            type="text"
            placeholder="搜索过程、输入、工具、输出..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value)
              setIsSearchOpen(true)
            }}
            onFocus={() => setIsSearchOpen(true)}
            onClick={() => setIsSearchOpen(true)}
            className="w-full h-10 pl-10 pr-20 rounded-lg border border-gray-200 dark:border-gray-600
                       bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white
                       placeholder-gray-400 dark:placeholder-gray-500
                       focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent
                       transition-colors"
          />
          {searchQuery && (
            <button
              onClick={() => {
                setSearchQuery('')
                inputRef.current?.focus()
              }}
              className="absolute right-12 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
            >
              <X size={16} />
            </button>
          )}
          <kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex
                          h-5 items-center gap-1 rounded border border-gray-200 dark:border-gray-600
                          bg-gray-100 dark:bg-gray-600 px-1.5 text-xs text-gray-500 dark:text-gray-400">
            ⌘K
          </kbd>

          {/* 搜索结果下拉 */}
          {isSearchOpen && searchQuery && (
            <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
              {searchResults.length > 0 ? (
                <ul className="max-h-96 overflow-y-auto">
                  {searchResults.map((result) => (
                    <li key={`${result.type}-${result.id}`}>
                      <button
                        onClick={() => handleResultClick(result)}
                        className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 text-left transition-colors"
                      >
                        <span className={`px-2 py-0.5 rounded text-xs font-medium ${getTypeColor(result.type)}`}>
                          {getTypeLabel(result.type)}
                        </span>
                        <div className="flex-1 min-w-0">
                          <div className="font-medium text-gray-900 dark:text-white truncate">
                            {result.name}
                          </div>
                          <div className="text-sm text-gray-500 dark:text-gray-400 truncate">
                            {result.nameEn}
                            {result.extra && ` · ${result.extra}`}
                          </div>
                        </div>
                      </button>
                    </li>
                  ))}
                </ul>
              ) : (
                <div className="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                  未找到匹配的结果
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* 右侧：操作按钮 */}
      <div className="flex items-center gap-2">
        {/* 更新日志 */}
        <button
          onClick={() => setIsChangelogOpen(true)}
          className="flex h-10 w-10 items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
          aria-label="查看更新日志"
          title="更新日志"
        >
          <History size={20} />
        </button>

        {/* 主题切换 */}
        <button
          onClick={toggleDarkMode}
          className="flex h-10 w-10 items-center justify-center rounded-lg
                     hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"
          aria-label="切换主题"
        >
          {darkMode ? <Sun size={20} /> : <Moon size={20} />}
        </button>
      </div>

      {/* 更新日志模态框 */}
      <ChangelogModal isOpen={isChangelogOpen} onClose={() => setIsChangelogOpen(false)} />
    </header>
  )
}
