import { prisma } from "@/app/lib/prisma"
import Link from "next/link"
import Image from "next/image"

export default async function HomePage() {
  const agents = await prisma.agent.findMany({
    include: { category: true },
    take: 6,
  })

  const news = await prisma.news.findMany({
    where: { published: true },
    orderBy: { createdAt: "desc" },
    take: 3,
  })

  const categories = await prisma.category.findMany({
    include: { _count: { select: { agents: true } } },
  })

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <nav className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-sm">
        <div className="max-w-6xl mx-auto px-6 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">AI</span>
              </div>
              <span className="font-bold text-gray-900">冲浪智能体广场</span>
            </Link>
            <div className="flex items-center gap-6">
              <Link href="/" className="text-gray-600 hover:text-blue-600 transition">首页</Link>
              <Link href="/agents" className="text-gray-600 hover:text-blue-600 transition">智能体广场</Link>
              <Link href="/news" className="text-gray-600 hover:text-blue-600 transition">新闻动态</Link>
              <Link
                href="/admin/login"
                className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition"
              >
                登录
              </Link>
            </div>
          </div>
        </div>
      </nav>

      <main className="pt-16">
        {/* Hero 区域 */}
        <section className="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-20">
          <div className="max-w-6xl mx-auto px-6">
            <div className="flex flex-col lg:flex-row items-center gap-8">
              <div className="lg:w-1/2 space-y-6">
                <h1 className="text-4xl md:text-5xl font-bold">
                  探索 AI 智能体的<br />无限可能
                </h1>
                <p className="text-lg text-white/90 leading-relaxed">
                  江苏冲浪软件科技有限公司打造的智能体广场，为您提供全方位的 AI 智能体服务，
                  助力企业数字化转型，提升个人工作效率。
                </p>
                <div className="flex flex-wrap gap-4">
                  <Link
                    href="/agents"
                    className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition"
                  >
                    浏览智能体
                  </Link>
                  <Link
                    href="#features"
                    className="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition"
                  >
                    了解更多
                  </Link>
                </div>
              </div>
              <div className="lg:w-1/2">
                <div className="bg-white p-6 rounded-2xl shadow-2xl">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white">
                      🤖
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">智能客服助手</h3>
                      <p className="text-xs text-gray-500">24/7 在线</p>
                    </div>
                  </div>
                  <div className="space-y-4 mb-4">
                    <div className="flex gap-3">
                      <div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
                        👤
                      </div>
                      <div className="bg-gray-100 rounded-lg p-3 max-w-[80%]">
                        <p className="text-sm text-gray-800">你好，我想了解一下智能客服助手的功能</p>
                      </div>
                    </div>
                    <div className="flex gap-3 justify-end">
                      <div className="bg-blue-50 rounded-lg p-3 max-w-[80%]">
                        <p className="text-sm text-gray-800">您好！智能客服助手支持多轮对话、知识库查询、工单提交等功能，24小时在线为您服务。</p>
                      </div>
                      <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white flex-shrink-0">
                        🤖
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 热门智能体 */}
        <section className="py-16 bg-white">
          <div className="max-w-6xl mx-auto px-6">
            <div className="text-center mb-10">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">热门智能体</h2>
              <p className="text-gray-500">为您推荐最受欢迎的智能体应用</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {agents.map((agent) => (
                <Link
                  key={agent.id}
                  href={`/agents/${agent.slug}`}
                  className="bg-white rounded-2xl border border-gray-200 p-5 hover:border-blue-300 shadow-sm hover:shadow-md transition-all duration-300"
                >
                  <div className="flex items-center gap-4 mb-4">
                    <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-3xl flex-shrink-0">
                      {agent.icon || "🤖"}
                    </div>
                    <div className="min-w-0">
                      <h3 className="font-semibold text-gray-900 truncate">{agent.name}</h3>
                      {agent.category && (
                        <span className="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-600">
                          {agent.category.name}
                        </span>
                      )}
                    </div>
                  </div>
                  <p className="text-gray-500 text-sm leading-relaxed mb-4">{agent.description}</p>
                  <div className="flex items-center justify-end">
                    <span className="text-blue-600 font-medium hover:underline transition-colors">查看详情 →</span>
                  </div>
                </Link>
              ))}
            </div>
            <div className="text-center mt-10">
              <Link href="/agents" className="text-blue-600 font-medium hover:text-blue-700 transition">
                查看全部智能体 →
              </Link>
            </div>
          </div>
        </section>

        {/* 数字人应用 */}
        <section className="py-16 bg-gradient-to-br from-purple-50 to-pink-50">
          <div className="max-w-6xl mx-auto px-6">
            <div className="text-center mb-10">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">数字人应用</h2>
              <p className="text-gray-500">探索虚拟数字人角色，体验沉浸式智能交互</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {[
                { name: "小雅", avatar: "👩‍💼", category: "商务助手", color: "from-purple-500 to-pink-500" },
                { name: "书淇", avatar: "👩‍🎓", category: "教育导师", color: "from-blue-500 to-cyan-500" },
                { name: "樱桃", avatar: "👧", category: "生活陪伴", color: "from-pink-500 to-rose-500" },
              ].map((human) => (
                <Link
                  key={human.name}
                  href="/digital-humans"
                  className="bg-white rounded-2xl border border-gray-200 p-5 hover:border-purple-300 shadow-sm hover:shadow-md transition-all duration-300"
                >
                  <div className="flex items-center gap-4 mb-4">
                    <div className={`w-14 h-14 bg-gradient-to-br ${human.color} rounded-xl flex items-center justify-center text-3xl flex-shrink-0`}>
                      {human.avatar}
                    </div>
                    <div className="min-w-0">
                      <h3 className="font-semibold text-gray-900 truncate">{human.name}</h3>
                      <span className="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-600">
                        {human.category}
                      </span>
                    </div>
                  </div>
                  <p className="text-gray-500 text-sm leading-relaxed mb-4">
                    点击查看数字人详情，开启智能交互体验
                  </p>
                  <div className="flex items-center justify-end">
                    <span className="text-purple-600 font-medium hover:underline transition-colors">查看数字人库 →</span>
                  </div>
                </Link>
              ))}
            </div>
            <div className="text-center mt-10">
              <Link href="/digital-humans" className="inline-block bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition">
                查看全部数字人 →
              </Link>
            </div>
          </div>
        </section>

        {/* 智能分类与使用场景 */}
        <section id="features" className="py-16 bg-white rounded-3xl shadow-xl -mt-10 relative z-20">
          <div className="max-w-6xl mx-auto px-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">智能分类与使用场景</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {categories.map((category) => (
                <Link
                  key={category.id}
                  href={`/agents?category=${category.id}`}
                  className="bg-blue-50 rounded-2xl p-6 cursor-pointer hover:bg-blue-100 transition-colors"
                >
                  <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl">
                    {category.icon || "📊"}
                  </div>
                  <h3 className="font-semibold text-gray-900 text-center mb-2">{category.name}</h3>
                  <p className="text-xs text-gray-500 text-center mb-4">{category._count.agents}个智能体</p>
                  <p className="text-sm text-gray-600 text-center">{category.description || "智能应用场景"}</p>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* 前沿动态 */}
        <section className="py-16">
          <div className="max-w-6xl mx-auto px-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-8">前沿动态</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
              {news.map((item) => (
                <Link
                  key={item.id}
                  href={`/news/${item.id}`}
                  className="bg-white rounded-2xl border border-gray-200 overflow-hidden hover:border-blue-300 hover:shadow-md transition"
                >
                  <div className="h-36 bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center">
                    <span className="text-5xl">📰</span>
                  </div>
                  <div className="p-5">
                    <div className="flex items-center gap-2 mb-3">
                      <span className="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs font-medium rounded-full">
                        {item.type === "news" ? "新闻" : item.type}
                      </span>
                      <span className="text-xs text-gray-400">
                        {new Date(item.createdAt).toLocaleDateString("zh-CN")}
                      </span>
                    </div>
                    <h3 className="font-semibold text-gray-900 mb-2 leading-snug">{item.title}</h3>
                    <p className="text-gray-500 text-sm leading-relaxed">{item.content.substring(0, 100)}...</p>
                  </div>
                </Link>
              ))}
            </div>
            <div className="text-center mt-10">
              <Link href="/news" className="text-blue-600 font-medium hover:text-blue-700 transition">
                查看全部 →
              </Link>
            </div>
          </div>
        </section>
      </main>

      {/* 底部 */}
      <div className="border-t border-gray-200 py-8">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-7 h-7 bg-blue-600 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-xs">AI</span>
            </div>
            <span className="font-semibold text-gray-700 text-sm">江苏冲浪软件科技有限公司</span>
          </div>
          <div className="text-gray-400 text-sm text-center">
            © 2026 江苏冲浪软件科技有限公司 · AI 智能体广场
          </div>
          <div className="flex gap-4 text-xs text-gray-400">
            <a className="hover:text-gray-600 cursor-pointer transition">关于我们</a>
            <a className="hover:text-gray-600 cursor-pointer transition">隐私政策</a>
            <a className="hover:text-gray-600 cursor-pointer transition">联系我们</a>
          </div>
        </div>
      </div>
    </div>
  )
}