import type { Metadata } from 'next'
import { setRequestLocale } from 'next-intl/server'
import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getGameCharacters } from '@/lib/characters'
import { QUEST_OPTIONS } from '@/lib/quest-tracker'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'
import { QuestTrackerForm } from '@/components/QuestTrackerForm'

export const dynamic = 'force-dynamic'

export const metadata: Metadata = { title: 'Rastreador de misiones' }

const QUEST_DB = 'https://wotlk.novawow.com'
const CLASS_GROUPS: { css: string; name: string }[] = [
  { css: 'warlock', name: 'Brujo' },
  { css: 'hunter', name: 'Cazador' },
  { css: 'shaman', name: 'Chamán' },
  { css: 'druid', name: 'Druida' },
  { css: 'warrior', name: 'Guerrero' },
  { css: 'paladin', name: 'Paladín' },
]

export default async function QuestCharacterPage({ 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!)
  const clientOptions = QUEST_OPTIONS.map((o) => ({
    key: o.key,
    classCss: o.classCss,
    label: o.label,
    minLevel: o.minLevel,
    hasData: o.quests.length > 0,
  }))

  return (
    <PageShell title="Rastreador de misiones">
      <ServiceBox>
        <br />
        <p>
          La herramienta <span>Rastreador de misiones</span> te permite ver el estado de misiones o cadenas de misiones
          importantes en tus personajes.
        </p>
        <br />
        <p>Opciones disponibles:</p>
        {CLASS_GROUPS.map((g) => {
          const opts = QUEST_OPTIONS.filter((o) => o.classCss === g.css)
          if (opts.length === 0) return null
          return (
            <div key={g.css}>
              <p className={g.css}>{g.name}</p>
              <ul>
                {opts.map((o) => (
                  <li key={o.key}>
                    {o.link ? (
                      <a
                        href={`${QUEST_DB}/?${o.link.type}=${o.link.id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="icontinyl"
                        style={
                          o.icon
                            ? {
                                paddingLeft: '18px',
                                background: `url("${QUEST_DB}/static/images/wow/icons/tiny/${o.icon}.gif") left center no-repeat`,
                              }
                            : undefined
                        }
                      >
                        {o.label}
                      </a>
                    ) : (
                      o.label
                    )}{' '}
                    a partir del nivel {o.minLevel}
                  </li>
                ))}
              </ul>
              <br />
            </div>
          )
        })}
        <p className="second-brown">Por reputación</p>
        <ul>
          <li>
            <a href={`${QUEST_DB}/?faction=1119`} target="_blank" rel="noopener noreferrer">Los Hijos de Hodir</a>: Cadena
            de misiones principal hasta interactuar con el intendente{' '}
            <a href={`${QUEST_DB}/?npc=32540`} target="_blank" rel="noopener noreferrer">Lillehoff</a>
          </li>
        </ul>
        <br />
        <p className="second-brown">Por misión específica</p>
        <ul>
          <li>A partir del nivel 10</li>
        </ul>
        <br />
        <p>Cómo buscar por misión específica:</p>
        <p>1) Visita nuestra <a href={QUEST_DB} target="_blank" rel="noopener noreferrer">base de datos</a>.</p>
        <p>2) Busca allí el nombre de la misión.</p>
        <p>3) Una vez que la hayas encontrado, su enlace se verá cómo &quot;<span className="second-brown">{QUEST_DB}/?quest=12843</span>&quot;</p>
        <p>4) Usa el número final del enlace en el campo ID de misión (Ejemplo del enlace anterior: 12843).</p>
        <br />
        <p>Al usar el botón BUSCAR MISIONES, podrás ver el estado de las misiones del personaje.</p>
        <br />
        <fieldset>
          <legend>NOTA</legend>
          <div className="separate2">
            <p>Se requiere que el personaje esté desconectado y cumpla con el mínimo de nivel de cada opción.</p>
            <p>Se puede repetir búsqueda de cadenas de misiones en un mismo personaje cada 1 hora.</p>
            <p>Se puede repetir búsqueda de cadenas de misiones de clase en un mismo personaje cada 30 minutos.</p>
            <p>Se puede repetir búsqueda de misión específica en un mismo personaje cada 10 minutos.</p>
          </div>
        </fieldset>

        <QuestTrackerForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss, level: c.level }))} options={clientOptions} />
      </ServiceBox>
    </PageShell>
  )
}