import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { getForumProfile } from '@/lib/forum'
import { PageShell } from '@/components/PageShell'

export const dynamic = 'force-dynamic'

export default async function ForumProfilePage({
  params,
}: {
  params: Promise<{ locale: string; username: string }>
}) {
  const { locale, username } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Forum')
  const p = await getForumProfile(decodeURIComponent(username))

  const title = (
    <>
      {p.username}
      {p.status && (
        <span className="second-yellow small-font"> [{p.status === 'admin' ? t('roleAdmin') : t('roleGm')}]</span>
      )}
    </>
  )

  return (
    <PageShell title={title}>
      <div className="box-content">
        <div className="body-box-content">
          <p>
            <Link href="/forum">← {t('backToForum')}</Link>
          </p>
          <br />
          <table className="max-center-table info-box-light">
            <tbody>
              <tr>
                <td className="centered separate">
                  <span className="second-brown">{t('posts')}</span>
                  <br />
                  <span className="yellow-info big-font">{p.postCount}</span>
                </td>
                <td className="centered separate">
                  <span className="second-brown">{t('topics')}</span>
                  <br />
                  <span className="yellow-info big-font">{p.topicCount}</span>
                </td>
                <td className="centered separate">
                  <span className="second-brown">{t('memberSince')}</span>
                  <br />
                  <span className="yellow-info">
                    {p.joindate ? new Date(p.joindate).toLocaleDateString(locale) : '—'}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>

          {p.recentTopics.length > 0 && (
            <>
              <div className="title-content-h3">
                <h3 className="big-font">{t('recentTopics')}</h3>
              </div>
              <table className="max-center-table">
                <tbody>
                  {p.recentTopics.map((topic) => (
                    <tr key={topic.id} className="team-center-table-tr">
                      <td className="lefted separate">
                        <Link href={`/forum/topic/${topic.id}`} className="yellow-info">
                          {topic.name}
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </>
          )}
        </div>
      </div>
    </PageShell>
  )
}