import Link from 'next/link'
import { notFound } from 'next/navigation'
import { serverGet } from '@/lib/api'
import type { Product } from '@/lib/types'
import { ldJson } from '@/lib/format'
import { ProductGallery } from '@/components/ProductGallery'
import { ProductBuyBox } from '@/components/ProductBuyBox'
import { ProductRow } from '@/components/ProductRow'
import type { Paginated } from '@/lib/types'

async function getProduct(id: string): Promise<Product | null> {
  try {
    const r = await serverGet<{ data: Product } | Product>(`/products/${id}`, 300)
    return (r as { data?: Product }).data ?? (r as Product)
  } catch { return null }
}

async function getRelated(p: Product): Promise<Product[]> {
  const catId = p.category?.id
  if (!catId) return []
  try {
    const r = await serverGet<Paginated<Product>>(`/products?category_id=${catId}&per_page=12`, 300)
    return (r.data ?? []).filter((x) => x.id !== p.id).slice(0, 10)
  } catch { return [] }
}

export async function generateMetadata({ params }: { params: { id: string } }) {
  const p = await getProduct(params.id)
  if (!p) return { title: 'Product' }
  const desc = p.description?.slice(0, 155) || `Buy ${p.name} online at Fitorza.`
  const img = p.images?.[0]
  return {
    title: p.name,
    description: desc,
    alternates: { canonical: `/product/${params.id}` },
    openGraph: {
      title: p.name,
      description: desc,
      type: 'website',
      url: `/product/${params.id}`,
      images: img ? [{ url: img }] : undefined,
    },
    twitter: { card: 'summary_large_image', title: p.name, description: desc, images: img ? [img] : undefined },
  }
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const p = await getProduct(params.id)
  if (!p) notFound()
  const related = await getRelated(p)

  const SITE = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
  const priceNum = typeof p.price === 'string' ? parseFloat(p.price) : p.price
  const variantPrices = (p.variants ?? [])
    .map((v) => (v.price != null ? (typeof v.price === 'string' ? parseFloat(v.price) : v.price) : NaN))
    .filter((n) => isFinite(n))
  const seller = p.tenant?.name ? { '@type': 'Organization', name: p.tenant.name } : { '@type': 'Organization', name: 'Fitorza' }
  const availability = (p.stock ?? 0) > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock'
  const offers = variantPrices.length > 1
    ? {
        '@type': 'AggregateOffer',
        priceCurrency: 'PKR',
        lowPrice: Math.min(...variantPrices),
        highPrice: Math.max(...variantPrices),
        offerCount: variantPrices.length,
        availability,
        seller,
      }
    : {
        '@type': 'Offer',
        url: `${SITE}/product/${params.id}`,
        priceCurrency: 'PKR',
        price: isFinite(priceNum) ? priceNum : 0,
        availability,
        seller,
      }
  const productLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: p.name,
    description: p.description || `Buy ${p.name} online at Fitorza.`,
    image: p.images?.length ? p.images : undefined,
    brand: p.brand ? { '@type': 'Brand', name: p.brand } : undefined,
    category: p.category?.name,
    ...(p.rating && p.reviews_count ? {
      aggregateRating: { '@type': 'AggregateRating', ratingValue: p.rating, reviewCount: p.reviews_count },
    } : {}),
    offers,
  }
  const breadcrumbLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Home', item: SITE },
      ...(p.category?.name ? [{ '@type': 'ListItem', position: 2, name: p.category.name, item: `${SITE}/category/${p.category.slug ?? p.category.id}` }] : []),
      { '@type': 'ListItem', position: p.category?.name ? 3 : 2, name: p.name, item: `${SITE}/product/${params.id}` },
    ],
  }

  return (
    <div className="container-x py-6">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJson(productLd) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJson(breadcrumbLd) }} />
      <nav className="mb-4 text-xs text-muted">
        <Link href="/">Home</Link> / {p.category?.name && <><Link href={`/category/${p.category.slug ?? p.category.id}`}>{p.category.name}</Link> / </>}
        <span className="text-ink">{p.name}</span>
      </nav>

      <div className="grid gap-8 md:grid-cols-2">
        <ProductGallery images={p.images ?? []} name={p.name} />

        <div>
          {p.brand && <div className="eyebrow text-brand">{p.brand}</div>}
          <h1 className="mt-1 text-xl font-medium leading-tight text-ink sm:text-[1.4rem]">{p.name}</h1>

          {(p.rating && p.reviews_count) ? (
            <div className="mt-2 flex items-center gap-1.5 text-sm">
              <span className="text-amber-500" aria-hidden>{'★'.repeat(Math.round(p.rating))}{'☆'.repeat(5 - Math.round(p.rating))}</span>
              <span className="font-semibold text-ink">{Number(p.rating).toFixed(1)}</span>
              <span className="text-muted">({p.reviews_count} reviews)</span>
            </div>
          ) : null}

          <div className="mt-3 flex flex-wrap gap-2">
            {p.prescription_required ? <span className="tag tag-rx">Prescription required</span> : p.is_otc ? <span className="tag tag-otc">OTC</span> : null}
            {p.dosage_form && <span className="tag bg-soft text-muted">{p.dosage_form}</span>}
            {p.pack_size && <span className="tag bg-soft text-muted">{p.pack_size}</span>}
          </div>

          <ProductBuyBox product={p} />

          {(p.manufacturer || p.dosage_form || p.pack_size) && (
            <dl className="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 border-t border-hair pt-5 text-sm">
              {p.manufacturer && <><dt className="text-muted">Manufacturer</dt><dd className="font-medium text-ink">{p.manufacturer}</dd></>}
              {p.dosage_form && <><dt className="text-muted">Form</dt><dd className="font-medium text-ink">{p.dosage_form}</dd></>}
              {p.pack_size && <><dt className="text-muted">Pack size</dt><dd className="font-medium text-ink">{p.pack_size}</dd></>}
              {p.category?.name && <><dt className="text-muted">Category</dt><dd className="font-medium text-ink"><Link href={`/category/${p.category.slug ?? p.category.id}`} className="hover:text-brand">{p.category.name}</Link></dd></>}
            </dl>
          )}
        </div>
      </div>

      {p.description && (
        <div className="mt-10 border-t border-hair pt-8">
          <h2 className="h-section mb-3">Description</h2>
          <p className="max-w-3xl whitespace-pre-line text-sm leading-relaxed text-muted">{p.description}</p>
        </div>
      )}

      {p.attributes && typeof p.attributes === 'object' && Object.keys(p.attributes).length > 0 && (
        <div className="mt-8 border-t border-hair pt-8">
          <h2 className="h-section mb-3">Specifications</h2>
          <dl className="grid max-w-3xl grid-cols-1 gap-x-8 gap-y-2 sm:grid-cols-2">
            {Object.entries(p.attributes).map(([k, v]) => (
              <div key={k} className="flex justify-between border-b border-hair/60 py-1.5 text-sm">
                <dt className="capitalize text-muted">{k.replace(/_/g, ' ')}</dt>
                <dd className="font-medium text-ink">{String(v)}</dd>
              </div>
            ))}
          </dl>
        </div>
      )}

      {related.length > 0 && (
        <div className="mt-6">
          <ProductRow title="Related products" products={related} viewAllHref={p.category ? `/category/${p.category.slug ?? p.category.id}` : '/categories'} />
        </div>
      )}
    </div>
  )
}