import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
import { getPayload } from 'payload'
import { headers } from 'next/headers'
import configPromise from '@payload-config'
import Link from 'next/link'
import VerifyActions from './verify-actions'
import '../styles/email-verification.css'

export const dynamic = 'force-dynamic'
export const metadata = { title: 'تأكيد البريد الإلكتروني' }

type Props = { searchParams: Promise<{ invalid?: string }> }

/* Email verification step — design from email-verification.html. The account
   was created; the user either clicks the emailed link (real SMTP at deploy)
   or proceeds to onboarding via the CTA. */
export default async function VerifyEmailPage({ searchParams }: Props) {
  const { invalid } = await searchParams
  let email: string | null = null
  let verified = false
  let userId: number | null = null
  try {
    const payload = await getPayload({ config: configPromise })
    const { user } = await payload.auth({ headers: await headers() })
    if (user) {
      email = user.email
      verified = !!user.emailVerified
      userId = Number(user.id)
    }
  } catch {
    /* no db / no session — page still renders */
  }

  return (
    <div id="site" className="site-page page-verify-email">
      <Topnav />
      <main id="content" className="verification">
        <section className="container" data-od-id="email-verification">
          <div className="card">
            <p className="eyebrow">الخطوة التالية · تأكيد البريد</p>
            <h1 data-od-id="verification-title">افتح بريدك لتفعيل الحساب.</h1>
            <p className="lead">أرسلنا رابط التأكيد إلى:<strong className="email" id="signupEmail">{email ?? 'بريدك الإلكتروني'}</strong></p>
            {invalid === '1' && (
              <p className="status" role="alert">رابط التأكيد غير صالح أو استُخدم من قبل. اطلب رسالة جديدة.</p>
            )}
            {verified && (
              <p className="status" role="status">بريدك الإلكتروني مؤكَّد بالفعل ✓ — تابع إلى الإعداد.</p>
            )}
            <ol className="steps" aria-label="خطوات تأكيد البريد">
              <li><span className="step-num">01</span><span>افتح رسالة أنور بآي في صندوق الوارد.</span></li>
              <li><span className="step-num">02</span><span>اضغط رابط تأكيد البريد الإلكتروني داخل الرسالة.</span></li>
              <li><span className="step-num">03</span><span>افحص مجلد الرسائل غير المرغوبة (Spam).</span></li>
              <li><span className="step-num">04</span><span>عد هنا لإعداد حسابك ومسارك الأول.</span></li>
            </ol>
            <VerifyActions verified={verified} email={email} userId={userId} />
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}