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

export const dynamic = 'force-dynamic'

export default async function ForumIndexPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Forum')
  const categories = await getForumIndex(locale)

  return (
    <PageShell title={t('title')}>
      <div className="box-content">
        <div className="body-box-content">
          <ForumSearchBox />
          {categories.length === 0 ? (
            <p className="second-brown centered">{t('noForums')}</p>
          ) : (
            categories.map((cat) => (
              <div key={cat.id}>
                <div className="title-content-h3">
                  <h3 className="big-font">{cat.name}</h3>
                </div>
                <table className="max-center-table">
                  <tbody>
                    {cat.forums.map((f) => (
                      <tr key={f.id} className="team-center-table-tr">
                        <td className="lefted separate">
                          <Link href={`/forum/${f.id}`} className="yellow-info">
                            {f.name}
                          </Link>
                          {f.description && <p className="second-brown small-font">{f.description}</p>}
                        </td>
                        <td className="real-info-box no-wrap-td">
                          <span className="second-brown small-font">
                            {f.topic_count} {t('topics')} · {f.post_count} {t('posts')}
                          </span>
                          {f.last_topic_id && (
                            <p className="small-font">
                              <Link href={`/forum/topic/${f.last_topic_id}`}>{f.last_topic_name}</Link>{' '}
                              <span className="third-brown">
                                {t('by')} {f.last_topic_poster}
                              </span>
                            </p>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
                <br />
              </div>
            ))
          )}
        </div>
      </div>
    </PageShell>
  )
}