import type { Metadata } from 'next'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'

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('expiredLink.pageTitle') }
}

/**
 * Enlace caducado — réplica del partial Django `partials/expired_link.html`,
 * al que se llega desde los correos de confirmación (cambio de correo, alta…).
 *
 * Con dos erratas del original SIN copiar: tenía un «No hay códigos de promoción
 * disponibles» de otra página, y el botón "Solicitar nuevo cambio de correo"
 * enlazaba a `expired-link`, o sea a sí misma. Aquí lleva a /change-email, que
 * es lo que pretendía.
 */
export default async function ExpiredLinkPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Misc')

  return (
    <PageShell title={t('expiredLink.pageTitle')}>
      <ServiceBox heading={t('expiredLink.pageTitle')}>
        <div className="centered">
          <br />
          {/* `display:block` a mano, como el resto de formularios: el tema deja
              `.alert-message` OCULTA para que la rellene y la revele el JS. Aquí
              el aviso es estático y sin esto no se ve NINGUNO — le pasa al
              original, que enseña esta página con el mensaje invisible. */}
          <div className="alert-message" style={{ display: 'block' }}>
            <span className="red-form-response">{t('expiredLink.message')}</span>
          </div>
          <br />
          <Link className="back-to-account" href="/change-email">
            {t('expiredLink.requestNew')}
          </Link>
        </div>
      </ServiceBox>
    </PageShell>
  )
}