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

export const dynamic = 'force-dynamic'

// Grupos de servicios con su icono del sprite real (acc-icon <clase>).
type ToolItem = { href: string; icon: string; label: string; desc: string }

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)

  const groups: { title: string; items: ToolItem[] }[] = [
    {
      title: t('accountSettings'),
      items: [
        { href: '/change-password', icon: 'password-icon', label: t('svcChangePassword'), desc: t('svcChangePasswordDesc') },
        { href: '/change-email', icon: 'email-icon', label: t('svcChangeEmail'), desc: t('svcChangeEmailDesc') },
        { href: '/security-token', icon: 'token-icon', label: t('svcToken'), desc: t('svcTokenDesc') },
      ],
    },
    {
      title: t('servicesTitle'),
      items: [
        { href: '/rename', icon: 'rename-icon', label: t('svcRename'), desc: t('svcRenameDesc') },
        { href: '/customize', icon: 'customize-icon', label: t('svcCustomize'), desc: t('svcCustomizeDesc') },
        { href: '/change-race', icon: 'change-race-icon', label: t('svcChangeRace'), desc: t('svcChangeRaceDesc') },
        { href: '/change-faction', icon: 'change-faction-icon', label: t('svcChangeFaction'), desc: t('svcChangeFactionDesc') },
        { href: '/level-up', icon: 'level-up-icon', label: t('svcLevelUp'), desc: t('svcLevelUpDesc') },
        { href: '/gold', icon: 'gold-icon', label: t('svcGold'), desc: t('svcGoldDesc') },
        { href: '/transfer', icon: 'tranfer-char-icon', label: t('svcTransfer'), desc: t('svcTransferDesc') },
      ],
    },
    {
      title: t('utilitiesTitle'),
      items: [
        { href: '/revive', icon: 'revive-icon', label: t('svcRevive'), desc: t('svcReviveDesc') },
        { href: '/unstuck', icon: 'unstuck-icon', label: t('svcUnstuck'), desc: t('svcUnstuckDesc') },
      ],
    },
    {
      title: t('communityTitle'),
      items: [
        { href: '/vote-points', icon: 'vote-icon', label: t('svcVote'), desc: t('svcVoteDesc') },
        { href: '/recruit', icon: 'recruit-a-friend-icon', label: t('svcRecruit'), desc: t('svcRecruitDesc') },
        { href: '/battlepay', icon: 'store-icon', label: t('svcStore'), desc: t('svcStoreDesc') },
      ],
    },
  ]

  return (
    <PageShell title={t('title')}>
      {/* Información de la cuenta */}
      <div className="box-content">
        <div className="title-box-content centered">
          <h2>{t('infoTitle')}</h2>
        </div>
        <div className="body-box-content">
          <table className="max-center-table">
            <tbody>
              <tr>
                <td>{t('bnetAccount')}</td>
                <td className="real-info-box yellow-info">{data.bnetEmail}</td>
              </tr>
              <tr>
                <td>{t('gameAccount')}</td>
                <td className="real-info-box yellow-info">{data.gameAccount}</td>
              </tr>
              <tr>
                <td>{t('dp')}</td>
                <td className="real-info-box dp-color">{data.dp}</td>
              </tr>
              <tr>
                <td>{t('vp')}</td>
                <td className="real-info-box vp-color">{data.vp}</td>
              </tr>
              <tr>
                <td>{t('battlepayCredits')}</td>
                <td className="real-info-box yellow-info">{data.battlepayCredits}</td>
              </tr>
              <tr>
                <td>{t('securityToken')}</td>
                <td className="real-info-box">
                  {data.securityTokenDate ? (
                    <span className="green-info">
                      {t('requested')} — {new Date(data.securityTokenDate).toLocaleString(locale)}
                    </span>
                  ) : (
                    <span className="red-info2">{t('notRequested')}</span>
                  )}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Personajes */}
      <div className="box-content">
        <div className="title-box-content centered">
          <h2>{t('characters')}</h2>
        </div>
        <div className="body-box-content centered">
          {data.characters.length === 0 ? (
            <p className="second-brown">{t('noCharacters')}</p>
          ) : (
            data.characters.map((c) => (
              <div key={c.name} className={`char-box char-box-${c.classCss}`}>
                <div className="char-text">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img className="char-icon img-small-icon" src={c.imageUrl} alt={c.raceName} height={64} loading="lazy" />
                  <span className={`${c.classCss} big-font shadow`}>{c.name}</span>
                  <br />
                  <span className="second-brown shadow">
                    {t('level')} {c.level} · {c.raceName} {c.className}
                  </span>
                  <br />
                  <span className="second-brown shadow">📍 {c.zone}</span>
                  <br />
                  <span className="shadow">
                    {c.gold}
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img className="img-align" src="/nw-themes/nw-ryu/nw-images/nw-icons/money-gold.gif" alt="g" /> {c.silver}
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img className="img-align" src="/nw-themes/nw-ryu/nw-images/nw-icons/money-silver.webp" alt="s" /> {c.copper}
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img className="img-align" src="/nw-themes/nw-ryu/nw-images/nw-icons/money-copper.gif" alt="c" />
                  </span>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      {/* Utilidades y Herramientas */}
      <div className="box-content">
        <div className="title-box-content centered">
          <h2>{t('toolsTitle')}</h2>
        </div>
        <div className="body-box-content-account">
          {admin && (
            <Link href="/admin">
              <div className="tool-button">
                <div className="acc-icon store-icon"></div>
                <div className="tool-button-div">
                  <span className="yellow-info shadow">🛡️ {t('adminPanel')}</span>
                  <br />
                  <span className="second-brown shadow">{t('adminPanelDesc')}</span>
                </div>
              </div>
            </Link>
          )}
          {groups.map((g) => (
            <div key={g.title}>
              <div className="title-content-h3">
                <h3 className="big-font">{g.title}</h3>
              </div>
              <table className="max-center-table fixed-layout-table">
                <tbody>
                  {rows(g.items).map((pair, i) => (
                    <tr key={i}>
                      {pair.map((it) => (
                        <td key={it.href}>
                          <Link href={it.href}>
                            <div className="tool-button">
                              <div className={`acc-icon ${it.icon}`}></div>
                              <div className="tool-button-div">
                                <span className="first-brown shadow">{it.label}</span>
                                <br />
                                <span className="second-brown shadow">{it.desc}</span>
                              </div>
                            </div>
                          </Link>
                        </td>
                      ))}
                      {pair.length === 1 && <td />}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ))}
        </div>
      </div>
    </PageShell>
  )
}

// Agrupa los items de dos en dos (2 columnas, como el my-account de Django).
function rows<T>(items: T[]): T[][] {
  const out: T[][] = []
  for (let i = 0; i < items.length; i += 2) out.push(items.slice(i, i + 2))
  return out
}