import { getTranslations, setRequestLocale } from 'next-intl/server'
import { redirect } from '@/i18n/navigation'
import { getSession } from '@/lib/session'
import { getAccountDashboard } from '@/lib/account'
import { isAdmin } from '@/lib/admin'
import { PageShell } from '@/components/PageShell'
import { AccountTools } from '@/components/AccountTools'

export const dynamic = 'force-dynamic'

const ICONS = '/nw-themes/nw-ryu/nw-images/nw-icons'

export default async function AccountPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Account')

  const session = await getSession()
  if (!session.bnetId) redirect({ href: '/login', locale })
  if (!session.username) redirect({ href: '/select-account', locale })

  const data = await getAccountDashboard(session)
  const admin = await isAdmin(session)

  return (
    <PageShell title={t('title')}>
      {/* Información: dos fieldsets como en Django */}
      <div className="box-content">
        <div className="title-box-content">
          <h2>{t('infoTitle')}</h2>
        </div>
        <div className="body-box-content">
          <fieldset className="account-fieldset">
            <legend>{t('basicData')}</legend>
            <div className="separate">
              <p>{t('bnetAccount')}: <span>{data.bnetEmail}</span></p>
              <p>{t('gameAccount')}: <span>{data.gameAccount}</span></p>
              <p>{t('regMail')}: <span>{data.regMail}</span></p>
              <p>{t('currentMail')}: <span>{data.email}</span></p>
              <p>{t('joindate')}: <span>{data.joindate}</span></p>
              <p>{t('lastIpWeb')}: <span>{data.lastIp}</span></p>
              <p>{t('lastIpServer')}: <span>{data.lastAttemptIp}</span></p>
            </div>
          </fieldset>

          <fieldset className="account-fieldset">
            <legend>{t('accountState')}</legend>
            <div className="separate">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src="/nw-themes/nw-ryu/nw-images/nw-ranks/1_Newbie.svg" className="nw-rank" alt="rank" title={`${t('level')} 1`} />
              <p>{t('dp')}: <span>{data.dp}</span></p>
              <p>{t('vp')}: <span>{data.vp}</span></p>
              <p>{t('battlepayCredits')}: <span>{data.battlepayCredits}</span></p>
              <p>
                {t('securityToken')}:{' '}
                <span>
                  {data.securityTokenDate
                    ? `${t('requested')} - ${new Date(data.securityTokenDate).toLocaleString(locale)}`
                    : t('notRequested')}
                </span>
              </p>
              {data.isBanned ? (
                <>
                  <p>{t('banned')}: <span>{t('yes')}</span></p>
                  <p>{t('banEnd')}: <span>{data.unbanDate}</span></p>
                </>
              ) : (
                <>
                  <p>{t('banned')}: <span>{t('no')}</span></p>
                  <p>{t('recruited')}: <span>{data.isRecruited ? t('yes') : t('no')}</span></p>
                  <p>{t('recruitedFriends')}: <span>{data.recruitedCount}</span></p>
                </>
              )}
            </div>
          </fieldset>
        </div>
      </div>

      {/* Mis personajes: rejilla con char-box como en Django */}
      {data.characters.length > 0 && (
        <div className="box-content">
          <div className="title-box-content">
            <h2>{t('characters')}</h2>
          </div>
          <div className="characters-grid body-box-content">
            {data.characters.map((c) => (
              <div className={`char-box char-box-${c.classCss}`} key={c.name}>
                <div className="char-text">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img className="img-small-icon char-icon" src={c.imageUrl} alt={c.name} height={64} loading="lazy" />
                  <p className={`${c.classCss} big-font`}>{c.name}</p>
                  <p><span>{t('level')} {c.level}</span></p>
                  <p className="second-brown">{c.zone}</p>
                  <p>
                    <span>
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      {c.gold}<img className="img-align" src={`${ICONS}/money-gold.gif`} width={10} alt="g" />{' '}
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      {c.silver}<img className="img-align" src={`${ICONS}/money-silver.webp`} width={10} alt="s" />{' '}
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      {c.copper}<img className="img-align" src={`${ICONS}/money-copper.gif`} width={10} alt="c" />
                    </span>
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Utilidades y Herramientas: paneles plegables como en Django */}
      <div className="box-content">
        <div className="title-box-content">
          <h2>{t('toolsTitle')}</h2>
        </div>
        <AccountTools isAdmin={admin} />
      </div>
    </PageShell>
  )
}