import { getTranslations, setRequestLocale } from 'next-intl/server'
import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getGameAccounts } from '@/lib/auth'
import { wowAccountLabel } from '@/lib/bnet'
import { PageShell } from '@/components/PageShell'
import { SelectAccountForm } from './SelectAccountForm'

export const dynamic = 'force-dynamic'

export default async function SelectAccountPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('SelectAccount')

  const session = await getSession()
  if (!session.bnetId) redirect({ href: '/login', locale })

  // Etiqueta visible «15#1» → «WOW1» (mismo criterio que my-account/cabecera).
  const games = (await getGameAccounts(session.bnetId!)).map((g) => ({ ...g, label: wowAccountLabel(g.username) }))
  // Autoseleccionar si solo hay una
  if (games.length === 1) {
    // La selección real la hace el cliente/route; aquí mostramos el formulario igual,
    // pero con una sola opción es un clic. (La auto-selección en login ya cubre el caso común.)
  }

  return (
    <PageShell title={t('title')}>
      <div className="box-content">
        <div className="body-box-content centered">
          {session.bnetEmail && (
            <p>
              {t('loggedInAs')} <span className="yellow-info">{session.bnetEmail}</span>
            </p>
          )}
          {games.length > 0 ? (
            <>
              <p>{t('choose')}</p>
              <br />
              <SelectAccountForm accounts={games} />
            </>
          ) : (
            <p className="second-brown">{t('noAccounts')}</p>
          )}
        </div>
      </div>
    </PageShell>
  )
}