import { getViewer } from '@/lib/viewer'
import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
import Link from 'next/link'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { TOPICS, topicsFor, INTEREST_MAP } from '@/lib/topics'
import { formatNumber, guidesLabel, minutesLabel, MEMBERSHIP_PRICE } from '@/lib/format'
import { freeEarlyAccess, accessLabel, LAUNCH_POLICY } from '@/lib/launch'

export const dynamic = 'force-dynamic'

/* Demo seed articles remain in the library, but never in the popular section. */
const DEMO_POST_SLUGS = ['first-arabic-agent', 'agent-loop-stop-condition', 'choosing-your-model', 'systematic-model-eval', 'simple-arabic-rag', 'vector-databases-in-practice', 'safe-agent-guardrails', 'agent-output-review-gates', 'indispensable-ai-tools', 'tool-pipelines-and-permissions', 'ai-in-your-business', 'prototype-to-production', 'article-agent-guide']

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

export default async function HomePage() {
  const viewer = await getViewer()
  const payload = await getPayload({ config: configPromise })
  const { docs: raw } = await 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, cover: true },
  })
  const docs = raw as unknown as Doc[]
  const freeCount = docs.filter(d => d.access === 'free').length

  // Hero personalization: matching the viewer's interest floats to the top,
  // level match ranks higher, ties keep the -publishedAt order. Anonymous
  // viewers get the plain newest-first list.
  const interestTopic = viewer?.interest ? INTEREST_MAP[viewer.interest] : undefined
  const score = (d: Doc) => {
    if (!interestTopic || !topicsFor(d).includes(interestTopic)) return 0
    return d.level === viewer?.level ? 2 : 1
  }
  const hero = docs
    .map((d, i) => ({ d, i, s: score(d) }))
    .sort((a, b) => b.s - a.s || a.i - b.i)
    .slice(0, 4)
    .map(({ d }) => d)
  const counts = Object.fromEntries(TOPICS.map(t => [t.key, docs.filter(d => topicsFor(d).includes(t.key)).length]))
  // Query the complete published collection, not just the 200 newest posts.
  // Read-count ties prefer the newest publication, then a stable slug order.
  const { docs: popular } = await payload.find({
    collection: 'posts',
    where: { and: [{ status: { equals: 'published' } }, { slug: { not_in: DEMO_POST_SLUGS } }] },
    depth: 1,
    limit: 6,
    sort: ['-views', '-publishedAt', 'slug'],
    select: { title: true, slug: true, dek: true, access: true, category: true, readingMinutes: true, cover: true, views: true },
  })
  const startHere = popular as unknown as Doc[]

  return (
    <div id="site" className="site-page v2 v2-home">
      {/* Organization structured data (home page only; WebSite LD lives in layout). */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Organization',
            name: 'أنور پآي',
            url: process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai',
            logo: `${process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'}/brand/icon-256.png`,
          }),
        }}
      />
      <Topnav viewer={viewer} />
      <main id="content">
        <section className="home-hero">
          <div className="wrap home-hero-grid">
            <div className="home-hero-copy">
              <p className="kicker">مكتبة عربية للذكاء الاصطناعي العملي</p>
              <h1>افهم الذكاء الاصطناعي، ثم ابنِ به.</h1>
              <p className="lede">محتوى عربي عملي عن الوكلاء والنماذج والأتمتة، يكتبه مهندسو بنية تحتية لمن يريد أن يشغّل شيئاً حقيقياً.</p>
              <div className="actions">
                <a className="btn btn-primary" href="/articles">ابدأ القراءة المجانية</a>
                <Link className="btn btn-quiet" href="/articles">تصفح المكتبة</Link>
              </div>
            </div>
            {hero.length > 0 && (
              <aside className="hero-panel" aria-labelledby="new-title">
                <h2 id="new-title">أحدث المحتوى</h2>
                <ul role="list">
                  {hero.map(d => {
                    const coverUrl = typeof d.cover === 'object' ? d.cover?.url ?? null : null
                    return (
                      <li key={d.id}>
                        <Link href={`/posts/${d.slug}`}>
                          {coverUrl && <img className="hero-panel-thumb" src={coverUrl} alt="" width={72} height={48} loading="lazy" />}
                          <span className="hero-panel-title">{d.title}</span>
                          <span className="meta-row"><span>{d.category}</span><span>{minutesLabel(d.readingMinutes)}</span><span className={d.access === 'vip' ? 'is-vip' : undefined}>{accessLabel(d.access)}</span></span>
                        </Link>
                      </li>
                    )
                  })}
                </ul>
                <Link className="text-link" href="/articles">كل المحتوى</Link>
              </aside>
            )}
          </div>
        </section>

        <section className="home-paths" id="topics" aria-labelledby="paths-title">
          <div className="wrap">
            <header className="section-head">
              <h2 id="paths-title">اختر مساراً حسب ما تريد بناءه</h2>
              <p>ينتمي كل عنصر محتوى إلى مسار، ويظهر محتوى المبتدئين أيضاً في الأساسيات.</p>
            </header>
            <ol className="paths" role="list">
              {TOPICS.map(topic => (
                <li key={topic.key}>
                  <Link href={`/topics/${topic.key}`} className="path">
                    <span className="path-name">{topic.label}</span>
                    <span className="path-hint">{topic.hint}</span>
                    <span className="path-count">{guidesLabel(counts[topic.key])}</span>
                  </Link>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {startHere.length > 0 && (
          <section className="home-start" aria-labelledby="start-title">
            <div className="wrap">
              <header className="section-head">
                <h2 id="start-title">الأكثر قراءة</h2>
                <Link className="text-link" href="/articles">كل المحتوى ({formatNumber(docs.length)})</Link>
              </header>
              <ul className="card-grid" role="list">
                {startHere.map(post => {
                  const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
                  return (
                    <li key={post.id}>
                      <article className="guide">
                        {coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
                        <p className="meta-row"><span className="cat">{post.category}</span><span>{minutesLabel(post.readingMinutes)}</span><span>{formatNumber(post.views ?? 0)} قراءة</span><span className={post.access === 'vip' ? 'is-vip' : undefined}>{accessLabel(post.access)}</span></p>
                        <h3><Link href={`/posts/${post.slug}`}>{post.title}</Link></h3>
                        <p className="guide-dek">{post.dek}</p>
                        <span className="guide-link" aria-hidden="true">اقرأ المحتوى</span>
                      </article>
                    </li>
                  )
                })}
              </ul>
            </div>
          </section>
        )}

        <section className="home-membership" id="membership" aria-labelledby="membership-title">
          <div className="wrap membership-panel">
            <div>
              <h2 id="membership-title">اقرأ مجاناً الآن؛ العضوية خطة مستقبلية.</h2>
              <p>{LAUNCH_POLICY.summary}</p>
            </div>
            <div className="membership-offer">
              {freeEarlyAccess() ? (
                <>
                  <p className="price price-early">وصول مبكر مجاني</p>
                  <p className="early-line">يمكنك قراءة المحتوى المنشور خلال الوصول المبكر دون بطاقة دفع.</p>
                </>
              ) : (
                <p className="price"><bdi dir="ltr">{MEMBERSHIP_PRICE}</bdi> <span>شهرياً، وتلغي متى شئت</span></p>
              )}
              <ul role="list">
                <li>{guidesLabel(docs.length - freeCount)} مصنفة للعضوية مستقبلاً ومفتوحة الآن</li>
                <li>قوالب وقوائم فحص قابلة للتنزيل</li>
                <li>القراءة دون حساب؛ التسجيل العام متوقف</li>
              </ul>
              <Link className="btn btn-primary" href="/subscription">تفاصيل الوصول المبكر</Link>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}