import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getGameCharacters } from '@/lib/characters'
import { getRecruitRewards, getRecruitedLevel80Count } from '@/lib/recruit-claim'
import { PageShell } from '@/components/PageShell'
import { RecruitClaim } from '@/components/RecruitClaim'

export const dynamic = 'force-dynamic'

export default async function RecruitPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('RecruitClaim')
  const session = await getSession()

  const rewards = await getRecruitRewards(session.accountId ?? null)

  return (
    <PageShell title={t('title')}>
      <div className="box-content">
        <div className="body-box-content justified">
          <p>{t('intro')}</p>
          <br />
          {session.accountId ? (
            <RecruitClaim
              rewards={rewards}
              characters={(await getGameCharacters(session.accountId)).map((c) => c.name)}
              level80Count={await getRecruitedLevel80Count(session.accountId)}
            />
          ) : (
            <p className="centered">
              <Link href="/login">{t('loginToClaim')}</Link>
            </p>
          )}
        </div>
      </div>
    </PageShell>
  )
}