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

export default async function AgentDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const agent = await prisma.agent.findUnique({
    where: { slug },
    include: { category: true },
  })

  if (!agent) {
    notFound()
  }

  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>
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-6xl mx-auto px-6 py-12">
        <Link href="/agents" className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 mb-8">
          ← 返回智能体列表
        </Link>

        <div className="bg-white rounded-2xl p-8 border border-gray-200">
          <div className="flex items-start gap-6 mb-8">
            <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center text-4xl flex-shrink-0">
              {agent.icon || "🤖"}
            </div>
            <div className="flex-1">
              <h1 className="text-3xl font-bold text-gray-900 mb-2">{agent.name}</h1>
              {agent.category && (
                <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium rounded-full">
                  {agent.category.name}
                </span>
              )}
            </div>
          </div>

          <div className="prose max-w-none mb-8">
            <p className="text-gray-600 leading-relaxed">{agent.description}</p>
          </div>

          {agent.features && (
            <div className="mb-8">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">功能特性</h3>
              <div className="flex flex-wrap gap-2">
                {agent.features.split(",").map((feature, index) => (
                  <span key={index} className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">
                    {feature.trim()}
                  </span>
                ))}
              </div>
            </div>
          )}

          <div className="flex items-center gap-4 pt-6 border-t border-gray-200">
            <Link
              href={`/agents/${agent.slug}/chat`}
              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium"
            >
              立即使用
            </Link>
            <div className="text-sm text-gray-500">
              使用次数: <span className="font-semibold text-gray-900">{agent.usageCount}</span>
            </div>
            <div className="text-sm text-gray-500">
              状态: <span className={`font-medium ${agent.status === "active" ? "text-green-600" : "text-gray-600"}`}>
                {agent.status === "active" ? "运行中" : agent.status}
              </span>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}