import type { Metadata } from 'next'
import { setRequestLocale } from 'next-intl/server'
import { redirect, Link } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getGameCharacters } from '@/lib/characters'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'
import { TradePointsForm } from '@/components/TradePointsForm'

export const dynamic = 'force-dynamic'

export const metadata: Metadata = { title: 'Comercio de PD' }

export default async function TradePointsPage({ 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 chars = await getGameCharacters(session.accountId!)

  return (
    <PageShell title="Comercio de PD">
      <ServiceBox>
        <br />
        <p>
          La herramienta <span>Comercio de PD</span> permite comprar o vender PD a cambio de oro de una forma segura.
        </p>
        <br />
        <p>El sistema permite crear códigos de 1 solo uso que valdrán X cantidad de PD a cambio de X cantidad de oro.</p>
        <p>
          Los vendedores disponen de la sección VENTA para crear el código y los compradores disponen de la sección
          COMPRA para canjear dicho código.
        </p>
        <br />
        <div className="trade-information">
          <h2>Venta</h2>
          <p>1) Decide cuánto valdrá el código en PD.</p>
          <p>2) Decide por cuánto oro se podrá canjear.</p>
          <p>3) Escoge a qué personaje de la cuenta se enviará el oro cuando el código sea canjeado.</p>
          <p>4) Completa los datos con la contraseña y Token de Seguridad.</p>
          <p>5) Usa el botón CREAR CÓDIGO.</p>
          <p>6) Un recuadro aparecerá con los datos del Código creado con el ID que se debe usar para enviar a otro jugador.</p>
          <br />
        </div>
        <div className="trade-information">
          <h2>Compra</h2>
          <p>1) Ingresa ID del código que te ha dado otro jugador.</p>
          <p>2) Chequea el valor en PD y costo en oro con el botón CHEQUEAR CÓDIGO.</p>
          <p>3) Escoge de qué personaje de la cuenta se descontará el oro cuando el código sea canjeado.</p>
          <p>4) Completa los datos con la contraseña y Token de Seguridad.</p>
          <p>5) Usa el botón CANJEAR CÓDIGO.</p>
          <p>6) Un recuadro aparecerá con los datos del Código canjeado, PD recibidos y oro retirado del personaje seleccionado.</p>
        </div>
        <br />
        <br />
        <p>Cada código tiene una duración de 1 hora.</p>
        <p>Una vez canjeado el código:</p>
        <p>- Los PD serán retirados de la cuenta del creador del código y enviados a quien lo haya canjeado.</p>
        <p>- El oro será retirado y enviado por correo al creador.</p>
        <p>- La transacción quedará registrada en el Historial de PD y PV.</p>
        <br />
        <p>La cuenta de quien canjee el código será bloqueada por 5s como medida de seguridad si el trámite es exitoso.</p>
        <br />
        <p>
          Si aún no tienes Token de seguridad, puedes solicitarlo{' '}
          <Link href="/security-token" target="_blank">aquí</Link>.
        </p>
        <br />
        <fieldset>
          <legend>NOTA</legend>
          <div className="separate2">
            <p>
              Por favor, asegúrate de haber escrito todos los datos correctos ya que esta acción no es reversible una
              vez realizada.
            </p>
          </div>
        </fieldset>

        <TradePointsForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} />
      </ServiceBox>
    </PageShell>
  )
}
