import { getPayload } from 'payload'
import { headers } from 'next/headers'
import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
import AccountSettingsClient from './client'
import { formatDate } from '@/lib/format'
import { billingEnabled } from '@/lib/launch'
import configPromise from '@payload-config'
import '../styles/account-settings.css'

export const dynamic = 'force-dynamic'
export const metadata = { title: 'إعدادات الحساب' }

export default async function AccountSettingsPage() {
  const payload = await getPayload({ config: configPromise })
  const { user } = await payload.auth({ headers: await headers() })

  return (
    <div id="site" className="site-page page-account-settings">
      <Topnav viewer={user} />
      {user ? (
        <main id="content">
          <section className="page-head" data-od-id="settings-header"><div className="container">
            <p className="crumb">حسابك في أنور بآي</p>
            <h1 data-od-id="settings-title">إعدادات الحساب</h1>
            <p className="sub"><bdi>{String(user.email)}</bdi> · عضو منذ {user.createdAt ? formatDate(String(user.createdAt)) : 'اليوم'}</p>
          </div></section>
          <section className="container settings-layout" data-od-id="settings-layout">
            <AccountSettingsClient
              email={String(user.email)}
              userId={Number(user.id)}
              fullName={(user.fullName as string) || ''}
              role={((user.role as string) || 'free')}
              billingEnabled={billingEnabled()}
            />
          </section>
        </main>
      ) : (
        <main id="content" className="gate">
          <section className="gate-card">
            <h1>سجّل الدخول لإدارة حسابك</h1>
            <p>من هنا تعدّل اسمك وكلمة المرور وتفضيلات الرسائل، وتدير عضويتك.</p>
            <div className="actions">
              <a className="btn btn-primary" href="/login?next=%2Faccount-settings">تسجيل الدخول</a>
              <a className="btn btn-quiet" href="/signup">إنشاء حساب مجاني</a>
            </div>
          </section>
        </main>
      )}
      <Footer />
    </div>
  )
}