import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
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 (
    <div>
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-nw-border/50">
        <div className="mx-auto max-w-4xl px-4 py-16 text-center sm:py-24">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/brand/logo-long.webp" alt="Nova WoW" className="mx-auto mb-4 max-h-28 w-auto drop-shadow-[0_0_25px_rgba(215,150,2,0.35)]" />
          <p className="mb-3 text-sm font-semibold uppercase tracking-[0.3em] text-nw-gold/80">
            WotLK Classic 3.4.3
          </p>
          <h1 className="nw-heading text-4xl sm:text-5xl">Nova WoW</h1>
          <p className="mx-auto mt-5 max-w-2xl text-nw-muted">{t('tagline')}</p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Link href="/register" className="nw-btn">
              {t('ctaRegister')}
            </Link>
            <Link href="/forum" className="nw-btn-ghost">
              {t('ctaForum')}
            </Link>
          </div>
        </div>
      </section>

      <main className="mx-auto max-w-4xl px-4 py-10">
        <div className="grid gap-6 md:grid-cols-3">
          {/* Estado del servidor */}
          <aside className="nw-card md:col-span-1">
            <h2 className="mb-3 text-lg font-semibold text-nw-gold-light">{t('serverStatus')}</h2>
            {status ? (
              <ul className="space-y-2 text-sm">
                <li className="flex justify-between">
                  <span className="text-nw-muted">{t('server')}</span>
                  <span>
                    {status.server_name ?? '—'} <span className="text-nw-muted">({status.expansion})</span>
                  </span>
                </li>
                <li className="flex justify-between">
                  <span className="text-nw-muted">{t('onlineCharacters')}</span>
                  <span className="text-green-400">{status.online_characters}</span>
                </li>
                <li className="flex justify-between">
                  <span className="text-nw-muted">{t('login')}</span>
                  <span className={status.status === 'Online' ? 'text-green-400' : 'text-red-400'}>
                    {status.status}
                  </span>
                </li>
                <li className="flex justify-between">
                  <span className="text-nw-muted">{t('address')}</span>
                  <span className="text-nw-gold-light">{status.address ?? '—'}</span>
                </li>
              </ul>
            ) : (
              <p className="text-nw-muted">{t('notAvailable')}</p>
            )}
          </aside>

          {/* Noticias */}
          <section className="md:col-span-2">
            <h2 className="mb-4 text-xl font-semibold text-nw-gold-light">{t('news')}</h2>
            {noticias.length === 0 ? (
              <p className="text-nw-muted">{t('noNews')}</p>
            ) : (
              <div className="space-y-5">
                {noticias.map((n) => (
                  <article key={n.id} className="nw-card">
                    <h3 className="text-lg font-semibold">{n.titulo}</h3>
                    {n.fecha && (
                      <small className="text-nw-muted">{new Date(n.fecha).toLocaleString(locale)}</small>
                    )}
                    <div
                      className="prose prose-invert mt-3 max-w-none text-sm"
                      dangerouslySetInnerHTML={{ __html: n.contenido }}
                    />
                    {n.enlace && (
                      <p className="mt-3">
                        {t('link')}:{' '}
                        <a href={n.enlace} target="_blank" rel="noopener noreferrer" className="text-sky-400 underline">
                          {t('here')}
                        </a>
                      </p>
                    )}
                  </article>
                ))}
              </div>
            )}
          </section>
        </div>
      </main>
    </div>
  )
}