NightSpire/web-next/app/[locale]/security-history/page.tsx

import type { Metadata } from 'next'
import { setRequestLocale } from 'next-intl/server'
import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getSecurityHistory } from '@/lib/security-history'
import { wowAccountLabel } from '@/lib/bnet'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'

export const dynamic = 'force-dynamic'

export const metadata: Metadata = { title: 'Historial de seguridad' }

/** Fecha en formato HH:MM:SS DD-MM-YYYY (como el diseño). */
function fmt(d: Date): string {
  const p = (n: number) => String(n).padStart(2, '0')
  return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())} ${p(d.getDate())}-${p(d.getMonth() + 1)}-${d.getFullYear()}`
}

/** Celda «Usuario»: cuenta de juego (WOW1) + cuenta Battle.net (email) debajo. */
function UserCell({ label, bnet }: { label: string; bnet: string }) {
  return (
    <td>
      <span>{label}</span>
      {bnet && (
        <>
          <br />
          <span className="second-brown small-font">{bnet}</span>
        </>
      )}
    </td>
  )
}

export default async function SecurityHistoryPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)

  const session = await getSession()
  if (!session.bnetId) redirect({ href: '/login', locale })
  if (!session.username) redirect({ href: '/select-account', locale })

  const bnetEmail = session.bnetEmail || ''
  const displayUser = wowAccountLabel(session.username || '') // «15#1» → «WOW1»
  const { activity, realm, web } = await getSecurityHistory(session.accountId!, displayUser, bnetEmail)

  return (
    <PageShell title="Historial de seguridad">
      <ServiceBox>
        <br />
        <p>Aquí verás información de actividad y conexiones de tu cuenta.</p>
        <p>Cada tabla tiene una explicación detallada de la información provista.</p>
        <p>
          Si desconoces algún tipo de actividad te recomendamos cambiar la contraseña de tu cuenta y del correo ligado a
          la misma.
        </p>
        <br />
        <p>
          <span>Historial de actividad</span>
        </p>
        <p>Muestra actividad de seguridad de la cuenta, como por ejemplo cambios de contraseña.</p>
        <br />
        <p>
          <span>Historial de conexiones (Reino)</span>
        </p>
        <p>
          Muestra un historial de conexiones al reino <u>sólo cuando la IP ha cambiado</u>. No es un historial de cada
          conexión.
        </p>
        <br />
        <p>
          <span>Historial de conexiones (Web)</span>
        </p>
        <p>Muestra un historial de cada conexión al sitio web.</p>
      </ServiceBox>

      {/* Historial de actividad */}
      <div className="box-content">
        <div className="title-box-content">
          <h2>Historial de actividad</h2>
        </div>
        <div className="body-box-content centered">
          {activity.length === 0 ? (
            <table className="max-center-table-aligned2">
              <tbody>
                <tr>
                  <td>
                    <span>No hay actividad</span>
                  </td>
                </tr>
              </tbody>
            </table>
          ) : (
            <table className="max-center-table-aligned2">
              <tbody>
                <tr>
                  <th>Usuario</th>
                  <th>Acción</th>
                  <th>IP</th>
                  <th>Fecha</th>
                </tr>
                {activity.map((a, i) => (
                  <tr key={i}>
                    <UserCell label={a.user} bnet={bnetEmail} />
                    <td>
                      <span>{a.action}</span>
                    </td>
                    <td className="long-td">
                      <span>{a.ip}</span>
                    </td>
                    <td>
                      <span>{fmt(a.date)}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Historial de conexiones (Reino) */}
      <div className="box-content">
        <div className="title-box-content">
          <h2>Historial de conexiones (Reino)</h2>
        </div>
        <div className="body-box-content centered">
          {realm.length === 0 ? (
            <table className="max-center-table-aligned">
              <tbody>
                <tr>
                  <td>
                    <span>No hay conexiones</span>
                  </td>
                </tr>
              </tbody>
            </table>
          ) : (
            <table className="max-center-table-aligned">
              <tbody>
                <tr>
                  <th>IP</th>
                  <th>Fecha</th>
                </tr>
                {realm.map((c, i) => (
                  <tr key={i}>
                    <td className="long-td">
                      <span>{c.ip}</span>
                    </td>
                    <td>
                      <span>{fmt(c.date)}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {/* Historial de conexiones (Web) */}
      <div className="box-content">
        <div className="title-box-content">
          <h2>Historial de conexiones (Web)</h2>
        </div>
        <div className="body-box-content centered">
          {web.length === 0 ? (
            <table className="max-center-table-aligned">
              <tbody>
                <tr>
                  <td>
                    <span>No hay conexiones</span>
                  </td>
                </tr>
              </tbody>
            </table>
          ) : (
            <table className="max-center-table-aligned">
              <tbody>
                <tr>
                  <th>Usuario</th>
                  <th>Estado</th>
                  <th>IP</th>
                  <th>Fecha</th>
                </tr>
                {web.map((c, i) => (
                  <tr key={i}>
                    <UserCell label={c.user} bnet={bnetEmail} />
                    <td>
                      <span className={c.status === 'Conexión exitosa' ? '' : 'red-info2'}>{c.status}</span>
                    </td>
                    <td className="long-td">
                      <span>{c.ip}</span>
                    </td>
                    <td>
                      <span>{fmt(c.date)}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </PageShell>
  )
}