import { Link, useParams } from 'react-router-dom'
import { motion } from 'framer-motion'
import {
  ArrowRight,
  GitBranch,
  Handshake,
  Rocket,
  Target,
  Users,
  Workflow,
  AlertTriangle,
  BarChart3,
  CheckCircle2,
  Link2,
  SearchCheck,
} from 'lucide-react'
import { performanceDomains, performanceDomainMap } from '@/data/performance-domains'

const containerVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { staggerChildren: 0.03 } },
}

const itemVariants = {
  hidden: { opacity: 0, y: 10 },
  visible: { opacity: 1, y: 0 },
}

const iconMap = {
  PD01: Handshake,
  PD02: Users,
  PD03: GitBranch,
  PD04: Target,
  PD05: Workflow,
  PD06: Rocket,
  PD07: BarChart3,
  PD08: AlertTriangle,
} as const

export function PerformanceDomainsPage() {
  const { id } = useParams()
  const selectedDomain = id ? performanceDomainMap.get(id) : null

  if (selectedDomain?.detail) {
    const Icon = iconMap[selectedDomain.id as keyof typeof iconMap]
    const detail = selectedDomain.detail

    return (
      <div className="space-y-4">
        <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
          <Link to="/performance-domains" className="hover:text-indigo-600 dark:hover:text-indigo-400">绩效域</Link>
          <span>/</span>
          <span className="text-gray-900 dark:text-white">{selectedDomain.name}</span>
        </nav>

        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="rounded-xl p-4"
          style={{ backgroundColor: `${selectedDomain.color}15` }}
        >
          <div className="flex items-center gap-3">
            <div
              className="flex h-12 w-12 items-center justify-center rounded-lg text-white shrink-0"
              style={{ backgroundColor: selectedDomain.color }}
            >
              <Icon size={22} />
            </div>
            <div className="flex-1 min-w-0">
              <h1 className="text-xl font-bold text-gray-900 dark:text-white">{selectedDomain.name}</h1>
              <p className="text-sm text-gray-500 dark:text-gray-400">{selectedDomain.nameEn}</p>
            </div>
          </div>
        </motion.div>

        <div className="grid gap-4 xl:grid-cols-2">
          <motion.section
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
          >
            <div className="mb-3 flex items-center gap-2">
              <CheckCircle2 size={18} className="text-emerald-500" />
              <h2 className="text-base font-semibold text-gray-900 dark:text-white">预期目标</h2>
            </div>
            <div className="space-y-3">
              {detail.expectedGoals.map((goal, index) => (
                <div key={goal} className="flex gap-3">
                  <div
                    className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium text-white"
                    style={{ backgroundColor: selectedDomain.color }}
                  >
                    {index + 1}
                  </div>
                  <p className="text-sm text-gray-700 dark:text-gray-300">{goal}</p>
                </div>
              ))}
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.05 }}
            className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
          >
            <div className="mb-3 flex items-center gap-2">
              <Target size={18} className="text-amber-500" />
              <h2 className="text-base font-semibold text-gray-900 dark:text-white">绩效要点</h2>
            </div>
            <div className="space-y-3">
              {detail.keyPoints.map((point, index) => (
                <div key={index} className="rounded-lg bg-gray-50 dark:bg-gray-700/40 px-3 py-2 text-sm text-gray-700 dark:text-gray-300">
                  {point}
                </div>
              ))}
            </div>
          </motion.section>
        </div>

        <motion.section
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
        >
          <div className="mb-3 flex items-center gap-2">
            <Link2 size={18} className="text-indigo-500" />
            <h2 className="text-base font-semibold text-gray-900 dark:text-white">与其他绩效域的相互作用</h2>
          </div>
          <div className="space-y-3">
            {detail.interactions.map((item, index) => (
              <div key={index} className="flex gap-3">
                <div className="mt-1 h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: selectedDomain.color }} />
                <p className="text-sm text-gray-700 dark:text-gray-300">{item}</p>
              </div>
            ))}
          </div>
        </motion.section>

        <motion.section
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.15 }}
          className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
        >
          <div className="mb-3 flex items-center gap-2">
            <SearchCheck size={18} className="text-cyan-500" />
            <h2 className="text-base font-semibold text-gray-900 dark:text-white">检查方法</h2>
          </div>
          <div className="space-y-3">
            {detail.checks.map((check) => (
              <div key={check.goal} className="rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div className="px-4 py-3 text-sm font-semibold text-white" style={{ backgroundColor: selectedDomain.color }}>
                  {check.goal}
                </div>
                <div className="space-y-2 bg-gray-50 dark:bg-gray-900/40 px-4 py-3">
                  {check.indicators.map((indicator, index) => (
                    <div key={index} className="flex gap-3">
                      <div className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400" />
                      <p className="text-sm text-gray-700 dark:text-gray-300">{indicator}</p>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </motion.section>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">绩效域</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400">8大项目绩效域</p>
      </div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid md:grid-cols-2 gap-3"
      >
        {performanceDomains.map((domain, index) => {
          const Icon = iconMap[domain.id as keyof typeof iconMap]
          const canOpen = Boolean(domain.detail)

          return (
            <motion.div key={domain.id} variants={itemVariants}>
              {canOpen ? (
                <Link
                  to={`/performance-domains/${domain.id}`}
                  className="group flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md transition-all"
                  style={{ borderLeftWidth: 3, borderLeftColor: domain.color }}
                >
                  <div
                    className="flex h-10 w-10 items-center justify-center rounded-lg text-white shrink-0"
                    style={{ backgroundColor: domain.color }}
                  >
                    <Icon size={18} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-semibold text-gray-400 dark:text-gray-500">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                      <h3 className="font-semibold text-gray-900 dark:text-white text-sm truncate">{domain.name}</h3>
                    </div>
                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{domain.nameEn}</p>
                  </div>
                  <ArrowRight size={16} className="text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 group-hover:translate-x-0.5 transition-all shrink-0" />
                </Link>
              ) : (
                <div
                  className="flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700"
                  style={{ borderLeftWidth: 3, borderLeftColor: domain.color }}
                >
                  <div
                    className="flex h-10 w-10 items-center justify-center rounded-lg text-white shrink-0"
                    style={{ backgroundColor: domain.color }}
                  >
                    <Icon size={18} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-semibold text-gray-400 dark:text-gray-500">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                      <h3 className="font-semibold text-gray-900 dark:text-white text-sm truncate">{domain.name}</h3>
                    </div>
                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{domain.nameEn}</p>
                  </div>
                </div>
              )}
            </motion.div>
          )
        })}
      </motion.div>
    </div>
  )
}
