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

export const metadata: Metadata = { title: 'Changelogs' }

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 }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const commits = await getCommits(50)

  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          <div className="title-content">
            <h1>Changelogs</h1>
          </div>
          <div className="box-content">
            <div className="body-box-content">
              {commits.length === 0 ? (
                <p className="centered">No se pudieron cargar los cambios en este momento.</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>
                  ))}
                  <p className="centered third-brown">
                    <i>* Mostrando los últimos 50 cambios</i>
                  </p>
                  <br />
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}