/**
 * 工具与技术详情页面
 * 显示工具被哪些过程使用
 */
import { useParams, Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ArrowLeft, Wrench, ArrowRight } from 'lucide-react'
import { toolMap, getToolUsage, knowledgeAreaMap } from '@/data'

export function ToolDetailPage() {
  const { id } = useParams()
  const tool = id ? toolMap.get(id) : null
  const usedByProcesses = id ? getToolUsage(id) : []

  if (!tool) {
    return (
      <div className="flex flex-col items-center justify-center py-20">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
          工具未找到
        </h1>
        <Link to="/" className="text-indigo-600 dark:text-indigo-400 hover:underline">
          返回首页
        </Link>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 返回按钮 */}
      <Link
        to="/"
        className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400"
      >
        <ArrowLeft size={16} />
        返回
      </Link>

      {/* 工具信息 */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-700"
      >
        <div className="flex items-center gap-4">
          <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-amber-500 text-white">
            <Wrench size={24} />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
              {tool.name}
            </h1>
            <p className="text-gray-500 dark:text-gray-400">{tool.nameEn}</p>
          </div>
        </div>
        {tool.description && (
          <p className="mt-4 text-gray-600 dark:text-gray-300">{tool.description}</p>
        )}
        <div className="mt-4 flex gap-2">
          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
            {tool.type}
          </span>
          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
            {tool.category}
          </span>
        </div>
      </motion.div>

      {/* 使用此工具的过程 */}
      {usedByProcesses.length > 0 && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden"
        >
          <div className="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-700 bg-amber-50 dark:bg-amber-900/20">
            <Wrench size={20} className="text-amber-600 dark:text-amber-400" />
            <h2 className="font-semibold text-gray-900 dark:text-white">
              使用此工具的过程（{usedByProcesses.length}）
            </h2>
          </div>
          <ul className="divide-y divide-gray-100 dark:divide-gray-700">
            {usedByProcesses.map((process) => {
              const ka = knowledgeAreaMap.get(process.knowledgeAreaId)
              return (
                <li key={process.id}>
                  <Link
                    to={`/process/${process.id}`}
                    className="flex items-center justify-between px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
                  >
                    <div className="flex items-center gap-4">
                      <div
                        className="flex h-10 w-10 items-center justify-center rounded-lg text-white font-medium"
                        style={{ backgroundColor: ka?.color }}
                      >
                        {process.code}
                      </div>
                      <div>
                        <div className="font-medium text-gray-900 dark:text-white">
                          {process.name}
                        </div>
                        <div className="text-sm text-gray-500 dark:text-gray-400">
                          {ka?.name}
                        </div>
                      </div>
                    </div>
                    <ArrowRight size={18} className="text-gray-400" />
                  </Link>
                </li>
              )
            })}
          </ul>
        </motion.div>
      )}

      {usedByProcesses.length === 0 && (
        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400">
          未找到相关过程
        </div>
      )}
    </div>
  )
}