import Link from 'next/link'
import { serverGet } from '@/lib/api'
import { ProductGrid } from '@/components/ProductGrid'

export const revalidate = 600

interface ApiBrand { id: number; name: string; slug?: string | null; logo?: string | null }

async function getBrand(slug: string): Promise<ApiBrand | null> {
  try {
    const r = await serverGet<{ data: ApiBrand } | ApiBrand>(`/brands/${slug}`, 600)
    const b = (r as { data?: ApiBrand }).data ?? (r as ApiBrand)
    return b && (b.name) ? b : null
  } catch { return null }
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const b = await getBrand(params.slug)
  return {
    title: b?.name ?? 'Brand',
    description: `Shop authentic ${b?.name ?? ''} products at Fitorza.`,
    alternates: { canonical: `/brands/${params.slug}` },
  }
}

export default async function BrandPage({ params }: { params: { slug: string } }) {
  const b = await getBrand(params.slug)
  return (
    <div className="container-x py-8">
      <nav className="mb-2 text-xs text-muted"><Link href="/">Home</Link> / <Link href="/brands">Brands</Link> / <span className="text-ink">{b?.name ?? params.slug}</span></nav>
      <div className="mb-6 flex items-center gap-4">
        {b?.logo && (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={b.logo} alt={b.name} className="h-14 w-14 rounded-lg border border-hair object-contain p-1" />
        )}
        <div>
          <h1 className="text-2xl font-extrabold">{b?.name ?? params.slug}</h1>
          <p className="text-sm text-muted">Authentic products, verified sellers.</p>
        </div>
      </div>
      <ProductGrid baseQuery={`?brand_slug=${encodeURIComponent(params.slug)}`} />
    </div>
  )
}