import type { Metadata } from 'next'
import { setRequestLocale } from 'next-intl/server'
import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getPointsHistory, getPointsBalances, type PointsMovement } from '@/lib/points-history'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'

export const dynamic = 'force-dynamic'

export const metadata: Metadata = { title: 'Historial de PD y PV' }

/** Fecha en formato DD-MM-YYYY HH:MM. */
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())}`
}

function methodClass(method: PointsMovement['method']): string {
  if (method === 'SumUp') return 'green-info'
  if (method === 'Stripe') return 'purple-info'
  return 'second-brown'
}

export default async function PointsHistoryPage({ 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 [movements, balances] = await Promise.all([
    getPointsHistory(session.accountId!),
    getPointsBalances(session.accountId!),
  ])

  return (
    <PageShell title="Historial de PD y PV">
      <ServiceBox>
        <br />
        <p>Aquí verás los consumos de PD y PV más recientes que ha tenido la cuenta.</p>
        <p>
          Con esta información podrás tener control de todo lo que has adquirido así como también chequear que toda la
          actividad sea normal.
        </p>
        <p>Si observas algún movimiento sospechoso, puedes contactar con el equipo de Nova WoW.</p>
        <br />
      </ServiceBox>

      <div className="box-content">
        <div className="title-box-content">
          <h2>Historial de PD y PV</h2>
        </div>
        <div className="body-box-content">
          <p className="centered">
            Saldo actual: <span className="yellow-info">{balances.dp} PD</span> ·{' '}
            <span className="purple-info">{balances.pv} PV</span>
          </p>
          <br />
          {movements.length === 0 ? (
            <table className="max-center-table-aligned2">
              <tbody>
                <tr>
                  <td>
                    <span>No hay movimientos</span>
                  </td>
                </tr>
              </tbody>
            </table>
          ) : (
            <table className="max-center-table-aligned2">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Concepto</th>
                  <th>Método</th>
                  <th>PD</th>
                  <th>PV</th>
                  <th>Importe</th>
                  <th>Estado</th>
                </tr>
              </thead>
              <tbody>
                {movements.map((m, i) => (
                  <tr key={i}>
                    <td>{fmt(m.date)}</td>
                    <td>{m.concept}</td>
                    <td className={methodClass(m.method)}>{m.method}</td>
                    <td className="yellow-info">{m.pd != null ? `+${m.pd}` : '—'}</td>
                    <td className="purple-info">{m.pv != null ? `+${m.pv}` : '—'}</td>
                    <td>{m.amount != null ? `${m.amount.toFixed(2)} €` : '—'}</td>
                    <td>{m.status}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </PageShell>
  )
}