import type { Metadata } from 'next'
import { setRequestLocale } from 'next-intl/server'
import { redirect, Link } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getSanctions, type Sanction } from '@/lib/ban-history'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'

export const dynamic = 'force-dynamic'

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

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

function StatusCell({ s }: { s: Sanction }) {
  return <span className={s.active ? 'red-info2' : 'green-info2'}>{s.status}</span>
}

/** Caja con la tabla de sanciones (baneos o muteos), o el vacío del diseño. */
function SanctionBox({
  title,
  emptyText,
  rows,
  showScope,
}: {
  title: string
  emptyText: string
  rows: Sanction[]
  showScope: boolean
}) {
  return (
    <div className="box-content">
      <div className="title-box-content">
        <h2>{title}</h2>
      </div>
      <div className="body-box-content info-box-light">
        {rows.length === 0 ? (
          <table className="max-center-table">
            <tbody>
              <tr>
                <td className="centered">
                  <span>{emptyText}</span>
                </td>
              </tr>
            </tbody>
          </table>
        ) : (
          <table className="max-center-table">
            <tbody>
              <tr>
                {showScope && <th>Alcance</th>}
                <th>Motivo</th>
                <th>Sancionado por</th>
                <th>Fecha</th>
                <th>Expira</th>
                <th>Estado</th>
              </tr>
              {rows.map((s, i) => (
                <tr key={i}>
                  {showScope && (
                    <td>
                      <span>{s.scope}</span>
                    </td>
                  )}
                  <td>
                    <span>{s.reason}</span>
                  </td>
                  <td>
                    <span>{s.by}</span>
                  </td>
                  <td>
                    <span>{fmt(s.date)}</span>
                  </td>
                  <td>
                    <span>{s.expires ? fmt(s.expires) : 'Permanente'}</span>
                  </td>
                  <td>
                    <StatusCell s={s} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  )
}

export default async function BanHistoryPage({ 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 { bans, mutes } = await getSanctions(session.accountId!, session.bnetId)

  return (
    <PageShell title="Historial de sanciones">
      <ServiceBox>
        <br />
        <p>Aquí podrás ver todas las sanciones que ha tenido la cuenta.</p>
        <p>
          Si tienes una sanción vigente, verás que su estado indica <span className="red-info2">Activo</span>.
        </p>
        <p>Para evitar que tu cuenta sea sancionada, recuerda respetar las normas de nuestro servidor.</p>
        <br />
        <div className="restore-item-table">
          <p>
            <i className="fas fa-exclamation-triangle"></i> <span>Importante:</span>
          </p>
          <p>
            Si tu cuenta aparece como sancionada o cerrada al intentar ingresar al reino, pero tu historial no tiene
            ninguna sanción activa, significa que has tenido un bloqueo automático temporal por demasiados intentos de
            inicio de sesión fallidos.
          </p>
          <p>
            Espera al menos 10 minutos para volver a intentar y asegúrate de usar nombre de cuenta y contraseña
            correctas.
          </p>
        </div>
        <br />
        <p>
          Para realizar un reclamo de sanción, por favor ingresa en nuestro <Link href="/forum">foro</Link> y visita la
          sección Reclamaciones.
        </p>
      </ServiceBox>

      <SanctionBox title="Historial de baneos" emptyText="No hay baneos" rows={bans} showScope />
      <SanctionBox title="Historial de muteos" emptyText="No hay muteos" rows={mutes} showScope={false} />
    </PageShell>
  )
}
