/**
 * 工件详情页面
 * 显示工件被哪些过程使用（作为输入或输出）
 */
import { useParams, Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ArrowLeft, FileInput, FileOutput, ArrowRight } from 'lucide-react'
import { artifactMap, getArtifactUsage, knowledgeAreaMap } from '@/data'

export function ArtifactDetailPage() {
  const { id } = useParams()
  const artifact = id ? artifactMap.get(id) : null
  const usage = id ? getArtifactUsage(id) : { asInput: [], asOutput: [] }

  if (!artifact) {
    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-blue-500 text-white">
            <FileInput size={24} />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
              {artifact.name}
            </h1>
            <p className="text-gray-500 dark:text-gray-400">{artifact.nameEn}</p>
          </div>
        </div>
        {artifact.description && (
          <p className="mt-4 text-gray-600 dark:text-gray-300">{artifact.description}</p>
        )}
        <div className="mt-4">
          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
            {artifact.category}
          </span>
        </div>
      </motion.div>

      {/* 作为输出的过程 */}
      {usage.asOutput.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-emerald-50 dark:bg-emerald-900/20">
            <FileOutput size={20} className="text-emerald-600 dark:text-emerald-400" />
            <h2 className="font-semibold text-gray-900 dark:text-white">
              产出此工件的过程（{usage.asOutput.length}）
            </h2>
          </div>
          <ul className="divide-y divide-gray-100 dark:divide-gray-700">
            {usage.asOutput.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>
      )}

      {/* 作为输入的过程 */}
      {usage.asInput.length > 0 && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          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-blue-50 dark:bg-blue-900/20">
            <FileInput size={20} className="text-blue-600 dark:text-blue-400" />
            <h2 className="font-semibold text-gray-900 dark:text-white">
              使用此工件作为输入的过程（{usage.asInput.length}）
            </h2>
          </div>
          <ul className="divide-y divide-gray-100 dark:divide-gray-700">
            {usage.asInput.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>
      )}
    </div>
  )
}
