ai-portal/app/agents/page.tsx

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

function buildQueryString(params: Record<string, string>) {
  const sp = new URLSearchParams()
  Object.entries(params).forEach(([key, value]) => {
    if (value) sp.append(key, value)
  })
  const qs = sp.toString()
  return qs ? `?${qs}` : ""
}

export default async function AgentsPage({
  searchParams,
}: {
  searchParams: Promise<{ category?: string; q?: string; sort?: string; page?: string }>
}) {
  const params = await searchParams
  const { category, q, sort, page } = await searchParams
  const categoryId = category ? parseInt(category) : undefined
  const searchQuery = q || ""
  const sortBy = sort || ""
  const currentPage = page ? parseInt(page) : 1
  const pageSize = 9

  const where: any = {}
  if (categoryId) where.categoryId = categoryId
  if (searchQuery) {
    where.OR = [
      { name: { contains: searchQuery } },
      { description: { contains: searchQuery } },
    ]
  }

  let orderBy: any = { createdAt: "desc" }
  if (sortBy === "popular") orderBy = { usageCount: "desc" }

  const totalAgents = await prisma.agent.count({ where })
  const totalPages = Math.ceil(totalAgents / pageSize)

  const agents = await prisma.agent.findMany({
    where,
    include: { category: true },
    orderBy,
    skip: (currentPage - 1) * pageSize,
    take: pageSize,
  })

  const popularAgents = await prisma.agent.findMany({
    include: { category: true },
    orderBy: { usageCount: "desc" },
    take: 6,
  })

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

  const totalCategories = await prisma.category.count()

  const getPageUrl = (page: number) => {
    const params: Record<string, string> = {}
    if (categoryId) params.category = categoryId.toString()
    if (searchQuery) params.q = searchQuery
    if (sortBy) params.sort = sortBy
    if (page > 1) params.page = page.toString()
    return `/agents${buildQueryString(params)}`
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white border-b border-gray-200">
        <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-blue-600 font-medium">智能体广场</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">
        <div className="max-w-6xl mx-auto px-6 py-8">
          {/* 面包屑 */}
          <div className="flex items-center gap-2 mb-6 text-sm">
            <Link href="/" className="text-gray-500 hover:text-blue-600 transition">首页</Link>
            <span className="text-gray-400">/</span>
            <span className="text-gray-900 font-medium">智能体广场</span>
          </div>

          {/* 页面标题 */}
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">智能体广场</h1>
            <p className="text-gray-500">浏览并搜索公司发布的 AI 智能体应用，找到最适合您的智能助手</p>
          </div>

          {/* 统计信息 */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
              <div className="text-2xl font-bold text-blue-600 mb-1">{totalAgents}</div>
              <div className="text-sm text-gray-500">智能体总数</div>
            </div>
            <div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
              <div className="text-2xl font-bold text-green-600 mb-1">{totalCategories}</div>
              <div className="text-sm text-gray-500">分类数量</div>
            </div>
            <div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
              <div className="text-2xl font-bold text-purple-600 mb-1">5000+</div>
              <div className="text-sm text-gray-500">活跃用户</div>
            </div>
            <div className="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
              <div className="text-2xl font-bold text-orange-600 mb-1">98%</div>
              <div className="text-sm text-gray-500">用户满意度</div>
            </div>
          </div>

          {/* 搜索与筛选 */}
          <div className="bg-white rounded-2xl border border-gray-200 p-6 mb-8 shadow-sm">
            <h3 className="font-semibold text-gray-900 mb-4">搜索与筛选</h3>
            <form className="flex flex-wrap gap-4 items-center">
              <div className="flex-1 min-w-64 relative">
                <svg className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <input
                  name="q"
                  type="text"
                  defaultValue={searchQuery}
                  placeholder="搜索智能体名称或简介..."
                  className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                />
              </div>
              <select
                name="category"
                defaultValue={categoryId || ""}
                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">全部分类</option>
                {categories.map((cat) => (
                  <option key={cat.id} value={cat.id}>{cat.name}</option>
                ))}
              </select>
              <select
                name="sort"
                defaultValue={sortBy}
                className="px-4 py-3 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">默认排序</option>
                <option value="date">最新发布</option>
                <option value="popular">最受欢迎</option>
              </select>
              <button type="submit" className="px-6 py-3 bg-blue-600 text-white rounded-xl text-sm hover:bg-blue-700 transition">
                搜索
              </button>
              <Link href="/agents" className="px-4 py-3 bg-gray-100 text-gray-600 rounded-xl text-sm hover:bg-gray-200 transition">
                重置
              </Link>
            </form>
            <div className="flex flex-wrap gap-2 mt-4 pt-4 border-t border-gray-100">
              <span className="text-xs text-gray-400 self-center mr-2">快捷分类：</span>
              <Link href="/agents" className={`px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-white text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-all ${!categoryId ? "bg-blue-50 border-blue-400 text-blue-600" : ""}`}>
                全部
              </Link>
              {categories.map((cat) => (
                <Link
                  key={cat.id}
                  href={`/agents?category=${cat.id}`}
                  className={`px-3 py-1.5 rounded-full text-xs border border-gray-200 bg-white text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-all ${categoryId === cat.id ? "bg-blue-50 border-blue-400 text-blue-600" : ""}`}
                >
                  {cat.name}
                </Link>
              ))}
            </div>
          </div>

          {/* 热门推荐 */}
          {popularAgents.length > 0 && (
            <div className="mb-8">
              <h2 className="text-xl font-bold text-gray-900 mb-4">热门推荐</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                {popularAgents.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-between text-xs text-gray-400">
                      <span>使用 {agent.usageCount} 次</span>
                      <span className="text-blue-600 font-medium">查看详情 →</span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          )}

          {/* 智能体列表头部 */}
          <div className="mb-6 flex items-center justify-between">
            <h2 className="text-xl font-bold text-gray-900">智能体列表</h2>
            <span className="text-sm text-gray-500">显示 {totalAgents} 个智能体</span>
          </div>

          {/* 智能体列表 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {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-between text-xs text-gray-400">
                  <span>使用 {agent.usageCount} 次</span>
                  <span className={`font-medium ${agent.status === "active" ? "text-green-600" : "text-gray-600"}`}>
                    {agent.status === "active" ? "运行中" : agent.status}
                  </span>
                </div>
              </Link>
            ))}
          </div>

          {/* 空状态 */}
          {agents.length === 0 && (
            <div className="text-center py-24 bg-gray-50 rounded-2xl">
              <div className="text-7xl mb-6">🔍</div>
              <h3 className="text-xl font-medium text-gray-700 mb-3">未找到匹配的智能体</h3>
              <p className="text-gray-400 mb-6 max-w-md mx-auto">试试调整筛选条件或关键词，或者浏览我们的热门推荐</p>
              <Link href="/agents" className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition">
                重置筛选
              </Link>
            </div>
          )}

          {/* 分页 */}
          {totalPages > 1 && (
            <div className="flex items-center justify-between mt-8 px-2">
              <span className="text-sm text-gray-500">
                第 {currentPage} 页，共 {totalPages} 页
              </span>
              <div className="flex items-center gap-2">
                <Link
                  href={getPageUrl(currentPage - 1)}
                  className={`px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition ${currentPage <= 1 ? "opacity-40 cursor-not-allowed" : ""}`}
                >
                  上一页
                </Link>
                <div className="flex items-center gap-1">
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
                    <Link
                      key={pageNum}
                      href={getPageUrl(pageNum)}
                      className={`w-8 h-8 flex items-center justify-center text-sm rounded-lg transition ${currentPage === pageNum ? "bg-blue-600 text-white" : "hover:bg-gray-50 text-gray-600"}`}
                    >
                      {pageNum}
                    </Link>
                  ))}
                </div>
                <Link
                  href={getPageUrl(currentPage + 1)}
                  className={`px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition ${currentPage >= totalPages ? "opacity-40 cursor-not-allowed" : ""}`}
                >
                  下一页
                </Link>
              </div>
            </div>
          )}
        </div>
      </main>

      {/* 底部 */}
      <div className="border-t border-gray-200 py-8 mt-16">
        <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>
  )
}