import { getTranslations, setRequestLocale } from 'next-intl/server'
import { getNoticias, getServerStatus, type Noticia, type ServerStatus } from '@/lib/home'

// SSR por petición: los datos se leen DIRECTAMENTE de MySQL desde el servidor Next.
export const dynamic = 'force-dynamic'

async function getData(): Promise<{ noticias: Noticia[]; status: ServerStatus | null }> {
  const [news, status] = await Promise.allSettled([getNoticias(), getServerStatus()])
  return {
    noticias: news.status === 'fulfilled' ? news.value : [],
    status: status.status === 'fulfilled' ? status.value : null,
  }
}

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Home')
  const { noticias, status } = await getData()

  return (
    <main className="mx-auto max-w-3xl px-4 py-8">
      <h1 className="text-3xl font-bold text-amber-500">{t('brand')}</h1>

      <section className="my-6 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
        <h2 className="mb-3 text-lg font-semibold">{t('serverStatus')}</h2>
        {status ? (
          <ul className="space-y-1 text-sm">
            <li>
              {t('server')}: <span className="text-amber-400">{status.server_name ?? '—'}</span> ({status.expansion})
            </li>
            <li>
              {t('onlineCharacters')}: {status.online_characters}
            </li>
            <li>
              {t('login')}:{' '}
              <span className={status.status === 'Online' ? 'text-green-400' : 'text-red-400'}>{status.status}</span>
            </li>
            <li>
              {t('address')}: {status.address ?? '—'}
            </li>
          </ul>
        ) : (
          <p>{t('notAvailable')}</p>
        )}
      </section>

      <section>
        <h2 className="mb-3 text-lg font-semibold">{t('news')}</h2>
        {noticias.length === 0 ? (
          <p className="text-amber-200/70">{t('noNews')}</p>
        ) : (
          noticias.map((n) => (
            <article key={n.id} className="mb-4 border-b border-amber-900/60 pb-4">
              <h3 className="text-xl font-semibold">{n.titulo}</h3>
              {n.fecha && <small className="text-amber-200/60">{new Date(n.fecha).toLocaleString(locale)}</small>}
              <div className="prose prose-invert mt-2 max-w-none" dangerouslySetInnerHTML={{ __html: n.contenido }} />
              {n.enlace && (
                <p className="mt-2">
                  {t('link')}:{' '}
                  <a className="text-sky-400 underline" href={n.enlace} target="_blank" rel="noopener noreferrer">
                    {t('here')}
                  </a>
                </p>
              )}
            </article>
          ))
        )}
      </section>
    </main>
  )
}