import type { RowDataPacket } from 'mysql2'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { db, DB } from '@/lib/db'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'
import { SecurityTokenForm } from './SecurityTokenForm'

export const dynamic = 'force-dynamic'

export default async function SecurityTokenPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('SecurityToken')
  const session = await getSession()
  if (!session.bnetId) redirect({ href: '/login', locale })
  if (!session.username) redirect({ href: '/select-account', locale })

  let tokenDate: string | null = null
  try {
    const [rows] = await db(DB.default).query<RowDataPacket[]>(
      'SELECT created_at FROM home_securitytoken WHERE user_id = ? ORDER BY created_at DESC LIMIT 1',
      [session.accountId ?? 0],
    )
    if (rows[0]) tokenDate = new Date(rows[0].created_at).toISOString()
  } catch {
    /* ignore */
  }

  return (
    <PageShell title={t('title')}>
      <ServiceBox>
        <br />
        <p>{t.rich('info1', { b: (c) => <span>{c}</span> })}</p>
        <p>{t('info2')}</p>
        <br />
        <p>{t('info3')}</p>
        <p>{t('info4')}</p>
        <br />
        <p><span className="red-info2">{t('warning')}</span></p>
        <br />
        <fieldset>
          <legend>NOTA</legend>
          <div className="separate2">
            <p>{t('note')}</p>
          </div>
        </fieldset>

        <SecurityTokenForm initialDate={tokenDate} />
      </ServiceBox>
    </PageShell>
  )
}