anwar-pi-website/web/src/app/(frontend)/topics/[topic]/page.tsx

import type { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { headers } from 'next/headers'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { TOPICS, topicsFor, isTopic } from '@/lib/topics'
import { guidesLabel, minutesLabel, formatNumber, contentTypeLabel } from '@/lib/format'
import { freeEarlyAccess } from '@/lib/launch'
import Topnav from '@/components/topnav'
import Footer from '@/components/footer'

type Args = { params: Promise<{ topic: string }> }

type HubPost = {
  id: number
  title: string
  slug: string
  dek: string
  access: 'free' | 'vip'
  category: string
  level: string
  readingMinutes: number
  views: number
  cover?: { url?: string | null } | number | null
  contentType?: string | null
}

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'

export async function generateMetadata({ params }: Args): Promise<Metadata> {
  const { topic } = await params
  if (!isTopic(topic)) return { title: 'أنور بآي' }
  const meta = TOPICS.find(t => t.key === topic)
  return {
    title: `${meta?.label} — مسار`,
    description: `كل أدلة مسار ${meta?.label} في أنور بآي: ${meta?.hint}. أدلة عملية بالعربية بخطوات قابلة للتطبيق.`,
    alternates: { canonical: `/topics/${topic}` },
  }
}

export default async function TopicPage({ params }: Args) {
  const { topic } = await params
  if (!isTopic(topic)) notFound()
  const meta = TOPICS.find(t => t.key === topic)!

  const payload = await getPayload({ config: configPromise })
  const [res, auth] = await Promise.all([
    payload.find({
      collection: 'posts',
      where: { status: { equals: 'published' } },
      depth: 1,
      limit: 200,
      sort: '-publishedAt',
      select: {
        title: true, slug: true, dek: true, access: true, category: true, level: true,
        readingMinutes: true, views: true, cover: true, contentType: true,
      },
    }),
    payload.auth({ headers: await headers() }),
  ])
  const role = (auth.user?.role as string) || null
  // Topic membership is derived (category + level), same rule as the library/home.
  const posts = (res.docs as unknown as (HubPost & { likes?: number })[]).filter(post => topicsFor(post).includes(topic))
  const totalMinutes = posts.reduce((sum, post) => sum + (post.readingMinutes ?? 0), 0)

  return (
    <div id="site" className="site-page v2 page-topic">
      {/* L-09: Breadcrumb structured data mirrors the visible trail. */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'BreadcrumbList',
            itemListElement: [
              { '@type': 'ListItem', position: 1, name: 'الرئيسية', item: SITE_URL },
              { '@type': 'ListItem', position: 2, name: meta.label, item: `${SITE_URL}/topics/${topic}` },
            ],
          }),
        }}
      />
      <Topnav viewer={auth.user ? { email: String(auth.user.email) } : null} />
      <main id="content">
        <section className="topic-hero">
          <div className="wrap narrow">
            <p className="crumbs" dir="rtl"><Link href="/">الرئيسية</Link> <span aria-hidden="true">/</span> <span>{meta.label}</span></p>
            <h1>{meta.label}</h1>
            <p className="topic-hint">{meta.hint} · {guidesLabel(posts.length)} · {minutesLabel(totalMinutes)} قراءة</p>
          </div>
        </section>

        <section className="topic-list" aria-label={`أدلة ${meta.label}`}>
          <div className="wrap narrow">
            {posts.length === 0 && (
              <p className="muted">لا أدلة منشورة في هذا المسار بعد. تابعنا للقادم قريباً.</p>
            )}
            <div className="lib-grid">
              {posts.map(post => {
                const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
                const locked = post.access === 'vip' && role !== 'vip' && role !== 'admin' && !freeEarlyAccess()
                return (
                  <article className="post guide-card" key={post.id}>
                    {coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
                    <div className="guide-card-body">
                      <p className="meta-row">
                        <span>{post.category}</span>
                        {contentTypeLabel(post.contentType) && <span className="badge">{contentTypeLabel(post.contentType)}</span>}
                        <span>{minutesLabel(post.readingMinutes)}</span>
                        <span>{post.level}</span>
                      </p>
                      <h2 className="guide-card-title"><Link href={`/posts/${post.slug}`}>{post.title}</Link></h2>
                      <p className="guide-card-dek">{post.dek}</p>
                      <div className="guide-card-foot">
                        <span className={`badge ${post.access === 'vip' ? 'badge-vip' : 'badge-free'}`}>{post.access === 'free' ? 'مجاني' : 'للأعضاء'}</span>
                        {post.views != null && <span className="engagement">{formatNumber(post.views)} قراءة</span>}
                        {locked && <span className="badge badge-vip">يتطلب عضوية</span>}
                      </div>
                    </div>
                  </article>
                )
              })}
            </div>
            <p className="topic-other">
              مسارات أخرى:{' '}
              {TOPICS.filter(t => t.key !== topic).map((t, i) => (
                <span key={t.key}>{i > 0 && ' · '}<Link href={`/topics/${t.key}`}>{t.label}</Link></span>
              ))}
            </p>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}