import type { Metadata } from 'next'
import { NoteLegend } from '@/components/NoteLegend'
import { getTranslations, 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 { wowheadIcon, wowheadUrl, wowheadData, wowheadWotlkHome, type WowheadType } from '@/lib/wowhead'
import { PageShell } from '@/components/PageShell'
import { ServiceBox } from '@/components/ServiceBox'
import { QuestTrackerForm } from '@/components/QuestTrackerForm'

export const dynamic = 'force-dynamic'

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'CharService' })
  return { title: t('quest.pageTitle') }
}

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 t = await getTranslations('CharService')

  const session = await getSession()
  if (!session.bnetId) redirect({ href: '/log-in', 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={t('quest.pageTitle')}>
      <ServiceBox>
        <br />
        <p>
          {t.rich('quest.intro', { s: (c) => <span>{c}</span> })}
        </p>
        <br />
        <p>{t('quest.optionsAvailable')}</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}>{t(`quest.className.${g.css}`)}</p>
              <ul>
                {opts.map((o) => (
                  <li key={o.key}>
                    {o.link ? (
                      <a
                        href={wowheadUrl(o.link.type as WowheadType, o.link.id, locale)}
                        data-wowhead={wowheadData(o.link.type as WowheadType, o.link.id, locale)}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="icontinyl"
                        style={
                          o.icon
                            ? {
                                paddingLeft: '18px',
                                background: `url("${wowheadIcon(o.icon, 'tiny')}") left center no-repeat`,
                              }
                            : undefined
                        }
                      >
                        {o.label}
                      </a>
                    ) : (
                      o.label
                    )}{' '}
                    {t('quest.fromLevel', { level: o.minLevel })}
                  </li>
                ))}
              </ul>
              <br />
            </div>
          )
        })}
        <p className="second-brown">{t('quest.byReputation')}</p>
        <ul>
          <li>
            {t.rich('quest.hodir', {
              hodir: (c) => <a href={wowheadUrl('faction', 1119, locale)} data-wowhead={wowheadData('faction', 1119, locale)} target="_blank" rel="noopener noreferrer">{c}</a>,
              lille: (c) => <a href={wowheadUrl('npc', 32540, locale)} data-wowhead={wowheadData('npc', 32540, locale)} target="_blank" rel="noopener noreferrer">{c}</a>,
            })}
          </li>
        </ul>
        <br />
        <p className="second-brown">{t('quest.bySpecific')}</p>
        <ul>
          <li>{t('quest.fromLevel10')}</li>
        </ul>
        <br />
        <p>{t('quest.howToSearch')}</p>
        <p>{t.rich('quest.step1', { link: (c) => <a href={wowheadWotlkHome(locale)} target="_blank" rel="noopener noreferrer">{c}</a> })}</p>
        <p>{t('quest.step2')}</p>
        <p>{t.rich('quest.step3', { url: wowheadWotlkHome(locale), s: (c) => <span className="second-brown">{c}</span> })}</p>
        <p>{t('quest.step4')}</p>
        <br />
        <p>{t('quest.searchButtonExplain')}</p>
        <br />
        <fieldset>
          <NoteLegend />
          <div className="separate2">
            <p>{t('quest.noteOffline')}</p>
            <p>{t('quest.noteChain1h')}</p>
            <p>{t('quest.noteClass30')}</p>
            <p>{t('quest.noteSpecific10')}</p>
          </div>
        </fieldset>

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