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

export const revalidate = 3600
export const metadata = {
  title: 'Brands',
  description: 'Shop authentic products from trusted health, pharmacy and wellness brands on Fitorza.',
  alternates: { canonical: '/brands' },
}

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

async function getBrands(): Promise<ApiBrand[]> {
  try {
    const r = await serverGet<ApiBrand[] | { data: ApiBrand[] }>('/brands', 3600)
    return Array.isArray(r) ? r : (r.data ?? [])
  } catch { return [] }
}

export default async function BrandsPage() {
  const brands = await getBrands()
  return (
    <div className="container-x py-10">
      <nav className="mb-2 text-xs text-muted"><Link href="/">Home</Link> / <span className="text-ink">Brands</span></nav>
      <h1 className="text-2xl font-extrabold">Brands</h1>
      <p className="mt-1 text-sm text-muted">Shop authentic products from trusted brands.</p>

      {brands.length === 0 ? (
        <div className="mt-8 card p-12 text-center text-muted">No brands listed yet.</div>
      ) : (
        <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6">
          {brands.map((b) => (
            <Link key={b.id} href={`/brands/${b.slug ?? b.id}`} className="card card-hover grid aspect-square place-items-center p-4">
              {b.logo ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={b.logo} alt={b.name} className="max-h-16 max-w-full object-contain" />
              ) : (
                <span className="text-center text-sm font-semibold text-ink">{b.name}</span>
              )}
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}