import { getTranslations, setRequestLocale } from 'next-intl/server'
import { getSession } from '@/lib/session'
import { getRealmName } from '@/lib/realm'
import { getVoteSitesForAccount } from '@/lib/vote'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'
import { VotePanel } from '@/components/VotePanel'

export const dynamic = 'force-dynamic'

export default async function VotePointsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Vote')
  const session = await getSession()
  const [realm, sites] = await Promise.all([getRealmName(), getVoteSitesForAccount(session.accountId ?? 0)])
  const sub = (s: string) => s.replaceAll('{server}', realm)
  const sections = t.raw('infoSections') as { h: string; lines: string[] }[]

  return (
    <PageShell title={t('title')}>
      <ServiceBox>
        <br />
        {sections.map((s, i) => (
          <div key={i}>
            <span>{sub(s.h)}</span>
            {s.lines.map((l, j) => (
              <p key={j}>{sub(l)}</p>
            ))}
            {i < sections.length - 1 && (
              <>
                <br />
                <hr />
                <br />
              </>
            )}
          </div>
        ))}
      </ServiceBox>

      <div className="box-content">
        <div className="title-box-content">
          <h2>{t('sitesTitle')}</h2>
        </div>
        <div className="body-box-content centered" id="vote-panel">
          <VotePanel sites={sites} canVote={Boolean(session.accountId)} />
        </div>
      </div>
    </PageShell>
  )
}