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

export const dynamic = 'force-dynamic'

export default async function ForumSearchPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>
  searchParams: Promise<{ q?: string }>
}) {
  const { locale } = await params
  setRequestLocale(locale)
  const { q } = await searchParams
  const query = (q ?? '').trim()
  const t = await getTranslations('Forum')

  const valid = query.length >= 2
  const results = valid ? await searchTopics(query, 0, 30) : []
  const total = valid ? await countSearchTopics(query) : 0

  return (
    <PageShell title={t('search')}>
      <div className="box-content">
        <div className="body-box-content">
          <p>
            <Link href="/forum">← {t('backToForum')}</Link>
          </p>
          <br />
          <ForumSearchBox initial={query} />

          {!valid ? (
            <p className="second-brown centered">{t('searchHint')}</p>
          ) : results.length === 0 ? (
            <p className="second-brown centered">{t('noResults', { query })}</p>
          ) : (
            <>
              <p className="second-brown">{t('resultsCount', { count: total, query })}</p>
              <table className="max-center-table">
                <tbody>
                  {results.map((r) => (
                    <tr key={r.id} className="team-center-table-tr">
                      <td className="lefted separate">
                        <Link href={`/forum/topic/${r.id}`} className="yellow-info">
                          {r.name}
                        </Link>
                        <p className="third-brown small-font">
                          {t('in')} <Link href={`/forum/${r.forum_id}`}>{r.forum_name}</Link> · {t('by')} {r.poster}
                        </p>
                      </td>
                      {r.updated_at && (
                        <td className="real-info-box no-wrap-td third-brown small-font">
                          {new Date(r.updated_at).toLocaleDateString(locale)}
                        </td>
                      )}
                    </tr>
                  ))}
                </tbody>
              </table>
            </>
          )}
        </div>
      </div>
    </PageShell>
  )
}