import type { Metadata } from 'next'
import { setRequestLocale, getTranslations } from 'next-intl/server'
import { getCommits } from '@/lib/changelog'
import { Pagination } from '@/components/Pagination'

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'Misc' })
  return { title: t('changelogs.title') }
}

function formatFecha(iso: string): string {
  if (!iso) return ''
  const d = new Date(iso)
  if (isNaN(d.getTime())) return iso
  return d.toLocaleString('es-ES', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

export default async function ChangelogsPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>
  searchParams: Promise<{ page?: string }>
}) {
  const { locale } = await params
  const sp = await searchParams
  const page = Math.max(1, Number(sp.page) || 1)
  setRequestLocale(locale)
  const t = await getTranslations('Misc')
  const { commits, totalPages } = await getCommits(page, 5)

  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>{t('changelogs.title')}</h1>
          </div>
          <div className="box-content">
            <div className="body-box-content">
              {commits.length === 0 ? (
                <p className="centered">{t('changelogs.loadError')}</p>
              ) : (
                <>
                  {commits.map((c) => (
                    <div key={c.sha} className="noticia-item">
                      <h3>{c.title}</h3>
                      <span className="date">{formatFecha(c.date)}</span>
                      <p className="third-brown small-font">
                        {c.author}
                        {' · '}
                        <a href={c.url} target="_blank" rel="noopener noreferrer">{c.shortSha}</a>
                      </p>
                      {c.body && (
                        <p className="noticia-contenido" style={{ whiteSpace: 'pre-line' }}>{c.body}</p>
                      )}
                      <br />
                      <hr />
                      <br />
                    </div>
                  ))}
                  <Pagination
                    page={page}
                    totalPages={totalPages}
                    hrefFor={(p) => (p === 1 ? '/changelogs' : `/changelogs?page=${p}`)}
                  />
                  <br />
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}