import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { BookOpen, Layers, LayoutGrid, ArrowRight } from 'lucide-react'
import { stats } from '@/data'

const features = [
  {
    icon: LayoutGrid,
    title: '49过程矩阵',
    description: '全景展示5大过程组与10大知识领域的49个过程',
    link: '/process-matrix',
    color: 'from-emerald-500 to-teal-500',
    count: stats.processCount,
  },
  {
    icon: BookOpen,
    title: '知识领域',
    description: '按10大知识领域浏览49个项目管理过程',
    link: '/knowledge-areas',
    color: 'from-indigo-500 to-purple-500',
    count: stats.knowledgeAreaCount,
  },
  {
    icon: Layers,
    title: '过程组',
    description: '按5大过程组分类查看项目管理流程',
    link: '/process-groups',
    color: 'from-blue-500 to-cyan-500',
    count: stats.processGroupCount,
  },
]

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

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
    },
  },
}

export function HomePage() {
  return (
    <div className="space-y-8">
      {/* 欢迎区域 */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-8 text-white"
      >
        <div className="relative z-10">
          <h1 className="text-3xl font-bold mb-2">欢迎使用 ITTOView</h1>
          <p className="text-lg text-white/80 mb-6">
            PMP项目管理ITTO可视化学习平台，助您高效掌握49个项目管理过程
          </p>
          <div className="flex flex-wrap gap-4">
            <Link
              to="/knowledge-areas"
              className="inline-flex items-center gap-2 px-6 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-white/90 transition-colors"
            >
              开始浏览
              <ArrowRight size={18} />
            </Link>
            <Link
              to="/process-matrix"
              className="inline-flex items-center gap-2 px-6 py-3 bg-white/20 text-white rounded-lg font-medium hover:bg-white/30 transition-colors"
            >
              查看过程矩阵
            </Link>
          </div>
        </div>
        {/* 装饰背景 */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2" />
        <div className="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2" />
      </motion.div>

      {/* 统计卡片 */}
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid grid-cols-2 md:grid-cols-3 gap-4"
      >
        {[
          { label: '知识领域', value: stats.knowledgeAreaCount, color: 'text-indigo-600' },
          { label: '过程组', value: stats.processGroupCount, color: 'text-blue-600' },
          { label: '项目过程', value: stats.processCount, color: 'text-emerald-600' },
        ].map((stat) => (
          <motion.div
            key={stat.label}
            variants={itemVariants}
            className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-gray-100 dark:border-gray-700"
          >
            <div className={`text-3xl font-bold ${stat.color}`}>{stat.value}</div>
            <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">{stat.label}</div>
          </motion.div>
        ))}
      </motion.div>

      {/* 功能入口 */}
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid md:grid-cols-2 xl:grid-cols-4 gap-6"
      >
        {features.map((feature) => {
          const Icon = feature.icon
          return (
            <motion.div key={feature.title} variants={itemVariants}>
              <Link
                to={feature.link}
                className="group block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600 transition-all h-full"
              >
                <div className="flex items-start gap-4">
                  <div className={`flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br ${feature.color} text-white`}>
                    <Icon size={24} />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                        {feature.title}
                      </h3>
                      {feature.count !== null && (
                        <span className="text-sm text-gray-500 dark:text-gray-400">
                          {feature.count} 项
                        </span>
                      )}
                    </div>
                    <p className="text-gray-500 dark:text-gray-400 mt-1">
                      {feature.description}
                    </p>
                  </div>
                </div>
                <div className="mt-4 flex items-center text-indigo-600 dark:text-indigo-400 text-sm font-medium">
                  进入查看
                  <ArrowRight
                    size={16}
                    className="ml-1 group-hover:translate-x-1 transition-transform"
                  />
                </div>
              </Link>
            </motion.div>
          )
        })}
      </motion.div>
    </div>
  )
}
