import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import Link from 'next/link'
import { ChevronRight } from 'lucide-react'
import { AgentPricePanel } from './AgentPricePanel'
import { ImagePlaceholder } from '@/components/shared/ImagePlaceholder'
import { getAgentProduct, getAgentProducts } from '@/lib/server-products'
import type { AgentProduct } from '@/types'

export async function generateStaticParams() {
  const agents = await getAgentProducts()
  return agents.map((agent) => ({ slug: agent.slug }))
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params
  const agent = await getAgentProduct(slug)
  return { title: agent ? `${agent.title} · 智能体产品` : '智能体产品' }
}

export default async function AgentDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const agent = await getAgentProduct(slug)
  if (!agent) notFound()

  return (
    <section className="min-h-[calc(100vh-70px)] bg-[#f7f9fc] py-10 md:min-h-[calc(100vh-106px)] md:py-12">
      <div className="mx-auto max-w-[1280px] px-6">
        <nav className="mb-8 flex flex-wrap items-center gap-2 text-sm text-muted">
          <Link href="/" className="hover:text-brand">首页</Link>
          <ChevronRight className="h-4 w-4 text-soft" />
          <Link href="/agents" className="hover:text-brand">智能体产品</Link>
          <ChevronRight className="h-4 w-4 text-soft" />
          <span className="font-bold text-ink">{agent.title}</span>
        </nav>

        <div className="grid gap-8 lg:grid-cols-[1fr_360px] lg:items-start">
          <main className="overflow-hidden rounded-[4px] border border-line bg-white shadow-[0_22px_58px_rgba(15,23,42,0.06)]">
            <div className="grid gap-6 border-b border-line p-6 md:grid-cols-[220px_1fr] md:p-8">
              {agent.coverUrl ? (
                <div
                  className="aspect-square rounded-[4px] bg-cover bg-center"
                  style={{ backgroundImage: `url(${agent.coverUrl})` }}
                />
              ) : (
                <ImagePlaceholder label={`暂无智能体封面：${agent.title}`} className="aspect-square rounded-[4px]" />
              )}
              <div>
                <h1 className="text-[32px] font-extrabold leading-tight text-ink md:text-[42px]">{agent.title}</h1>
                <p className="mt-5 max-w-[760px] text-base leading-8 text-text-body">{agent.summary}</p>
              </div>
            </div>

            <div className="p-6 md:p-8">
              <div className="text-sm font-extrabold text-brand">产品说明</div>
              <p className="mt-4 text-sm leading-8 text-text-body">{agent.detailDescription}</p>
            </div>
            <div className="border-t border-line p-6 md:p-8">
              <div className="text-sm font-extrabold text-brand">交付说明</div>
              <p className="mt-4 text-sm leading-8 text-text-body">{agent.deliveryNote}</p>
            </div>
          </main>

          <aside className="lg:sticky lg:top-[112px]">
            <AgentPricePanel agent={agent as AgentProduct} />
          </aside>
        </div>
      </div>
    </section>
  )
}
