NightSpire/web-next/app/[locale]/armory/character/[guid]/page.tsx

import { notFound } from 'next/navigation'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import {
  getCharacter,
  getCharacterEquipment,
  getCharacterCustomizations,
  getCharacterStats,
  getCharacterProfessions,
  getItemIcons,
  getAchievementPoints,
  getCharacterTalentGroups,
  getCharacterSpecs,
  getSpellIcons,
  getActivityPage,
  getAchievementOverview,
  getRaidProgress,
  getDungeonProgress,
  getRealmName,
  getQuestCount,
  getQuestPage,
  getQuestStatusCounts,
  getCharacterCollection,
  getReputations,
  getPvpRank,
  getCharacterArena,
  getPvpCurrency,
  getBattlegroundHistory,
} from '@/lib/armory'
import { raceName, className, classColor, factionOf, classPower, XP_FOR_LEVEL } from '@/lib/wow-data'
import { PageShell } from '@/components/PageShell'
import { ArmoryPaperdoll, type SheetItem } from '@/components/ArmoryPaperdoll'
import { wowheadIcon } from '@/lib/wowhead'
import { ArmoryTalentTab } from '@/components/ArmoryTalentTab'
import { ArmoryAchievements } from '@/components/ArmoryAchievements'
import { ArmoryRaids } from '@/components/ArmoryRaids'
import { ArmoryQuests } from '@/components/ArmoryQuests'
import { ArmoryTabs, type ArmoryTab } from '@/components/ArmoryTabs'
import { ArmoryReputations } from '@/components/ArmoryReputations'
import { ArmoryCollection } from '@/components/ArmoryCollection'
import { ArmoryPvpRank } from '@/components/ArmoryPvpRank'
import { ArmoryBattlegrounds } from '@/components/ArmoryBattlegrounds'

export const dynamic = 'force-dynamic'
const MAX_LEVEL = 80

export default async function CharacterPage({ params }: { params: Promise<{ locale: string; guid: string }> }) {
  const { locale, guid } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Armory')

  const id = Number(guid)
  const character = await getCharacter(id)
  if (!character) notFound()

  const [equipment, customizations, stats, professions, achievementPoints, talentGroups, specs, activityData, questCount] =
    await Promise.all([
      getCharacterEquipment(id, locale),
      getCharacterCustomizations(id),
      getCharacterStats(id),
      getCharacterProfessions(id, locale),
      getAchievementPoints(id),
      getCharacterTalentGroups(id, character.class, locale),
      getCharacterSpecs(id, character.class, locale),
      getActivityPage(id, locale, 1, 10, '', ''),
      getQuestCount(id),
    ])
  const [questData, mounts, pets, questCounts, reputations, pvpRankData, arena, pvpCurrency, bgHistory, achOverview, raidProgress, dungeonProgress, realmName] = await Promise.all([
    getQuestPage(id, locale, 1, 15, '', '', 'all'),
    getCharacterCollection(id, locale, 'mounts'),
    getCharacterCollection(id, locale, 'pets'),
    getQuestStatusCounts(id),
    getReputations(id, locale),
    getPvpRank(1, 30, ''),
    getCharacterArena(id),
    getPvpCurrency(id),
    getBattlegroundHistory(id),
    getAchievementOverview(id, factionOf(character.race), locale),
    getRaidProgress(id, locale),
    getDungeonProgress(id, locale),
    getRealmName(),
  ])
  const qGrand = questCounts.rewarded + questCounts.complete + questCounts.inprogress + questCounts.failed
  const icons = await getItemIcons(equipment.map((e) => e.entry))
  const spellIcons = await getSpellIcons(talentGroups.spellIds)

  const items: SheetItem[] = equipment.map((e) => ({
    slot: e.slot,
    entry: e.entry,
    name: e.name,
    quality: e.quality,
    itemLevel: e.itemLevel,
    inventoryType: e.inventoryType,
    displayId: e.displayId,
    transmogDisplayId: e.transmogDisplayId,
    ench: e.ench,
    gems: e.gems,
    icon: icons[e.entry] ?? null,
  }))

  const gear = equipment.filter((e) => e.slot !== 3 && e.slot !== 18 && e.itemLevel > 0)
  const avgItemLevel = gear.length ? Math.round(gear.reduce((s, e) => s + e.itemLevel, 0) / gear.length) : 0
  const faction = factionOf(character.race)
  const factionLabel = faction === 'alliance' ? t('alliance') : faction === 'horde' ? t('horde') : ''
  const power = classPower(character.class, locale)

  const xpNext = character.level < MAX_LEVEL ? XP_FOR_LEVEL[character.level] ?? 0 : 0
  const xpPct =
    character.level >= MAX_LEVEL ? 100 : xpNext > 0 ? Math.min(100, Math.round((character.xp / xpNext) * 100)) : 0

  const statRows = stats
    ? [
        { label: t('strength'), value: `${stats.strength}` },
        { label: t('agility'), value: `${stats.agility}` },
        { label: t('stamina'), value: `${stats.stamina}` },
        { label: t('intellect'), value: `${stats.intellect}` },
        { label: t('armor'), value: `${stats.armor}` },
        { label: t('attackPower'), value: `${stats.attackPower}` },
        { label: t('rangedAttackPower'), value: `${stats.rangedAttackPower}` },
        { label: t('spellPower'), value: `${stats.spellPower}` },
        { label: t('critChance'), value: `${stats.critPct.toFixed(2)}%` },
        { label: t('spellCrit'), value: `${stats.spellCritPct.toFixed(2)}%` },
        { label: t('dodge'), value: `${stats.dodgePct.toFixed(2)}%` },
        { label: t('parry'), value: `${stats.parryPct.toFixed(2)}%` },
        { label: t('block'), value: `${stats.blockPct.toFixed(2)}%` },
        { label: t('resilience'), value: `${stats.resilience}` },
      ]
    : []

  // ---- Pestaña Equipación: modelo + spec + stats/profesiones/PvP ----
  const equipTab = (
    <>
      <ArmoryPaperdoll
        race={character.race}
        gender={character.gender}
        customizations={customizations}
        items={items}
        health={character.health}
        power={character.power}
        powerLabel={power.label}
        powerColor={power.color}
        locale={locale}
        labels={{
          loading: t('modelLoading'),
          unavailable: t('modelUnavailable'),
          health: t('health'),
          itemLevel: t('itemLevel'),
          model: t('model3d'),
          list: t('equipment'),
        }}
      />

      {specs.primary && (
        <div className="armory-panel armory-spec-panel">
          <h2 className="armory-section-title">{t('specialization')}</h2>
          <div className="armory-specs">
            <div className="armory-spec-box active">
              <span
                className="armory-spec-box-icon"
                style={{ backgroundImage: `url(${wowheadIcon(specs.primary.icon, 'medium')})` }}
              />
              <div className="armory-spec-box-info">
                <div className="armory-spec-box-name">{specs.primary.name}</div>
                <div className="armory-spec-box-dist">{specs.primary.dist.join(' / ')}</div>
              </div>
            </div>
            <div className={`armory-spec-box ${specs.secondary ? '' : 'na'}`}>
              {specs.secondary ? (
                <>
                  <span
                    className="armory-spec-box-icon"
                    style={{ backgroundImage: `url(${wowheadIcon(specs.secondary.icon, 'medium')})` }}
                  />
                  <div className="armory-spec-box-info">
                    <div className="armory-spec-box-name">{specs.secondary.name}</div>
                    <div className="armory-spec-box-dist">{specs.secondary.dist.join(' / ')}</div>
                  </div>
                </>
              ) : (
                <span className="armory-spec-box-na">N/A</span>
              )}
            </div>
          </div>
        </div>
      )}

      <div className="armory-panels">
        <div className="armory-panel">
          <h2 className="armory-section-title">{t('stats')}</h2>
          {stats ? (
            <div className="armory-stats-grid">
              {statRows.map((r) => (
                <div className="armory-stat" key={r.label}>
                  <span className="armory-stat-label">{r.label}</span>
                  <span className="armory-stat-value">{r.value}</span>
                </div>
              ))}
            </div>
          ) : (
            <p className="armory-hint armory-stats-pending">{t('statsPending')}</p>
          )}
        </div>

        <div className="armory-panel">
          <h2 className="armory-section-title">{t('professions')}</h2>
          {professions.length ? (
            <div className="armory-prof-groups">
              {(['primary', 'secondary'] as const).map((kind) => {
                const list = professions.filter((p) => p.kind === kind)
                if (!list.length) return null
                return (
                  <div className="armory-prof-group" key={kind}>
                    <h3 className="armory-prof-grouptitle">
                      {kind === 'primary' ? t('primaryProfs') : t('secondaryProfs')}
                    </h3>
                    {list.map((p) => (
                      <div className="armory-prof-row" key={p.skill}>
                        <span
                          className="armory-prof-icon"
                          style={{ backgroundImage: `url(${wowheadIcon(p.icon, 'small')})` }}
                        />
                        <div className="armory-prof-body">
                          <div className="armory-prof-head">
                            <span className="armory-prof-name">
                              {p.name}
                              {p.rank ? <span className="armory-prof-rank"> · {p.rank}</span> : null}
                            </span>
                            <span className="armory-prof-value">
                              {p.value}
                              <span className="armory-prof-max"> / {p.max}</span>
                            </span>
                          </div>
                          <div className="armory-prof-bar">
                            <span style={{ width: `${Math.round((p.value / Math.max(1, p.max)) * 100)}%` }} />
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )
              })}
            </div>
          ) : (
            <p className="armory-hint">{t('noProfessions')}</p>
          )}
        </div>

      </div>
    </>
  )

  // ---- Pestaña PvP (sub-pestañas: Estadísticas + Rank mundo) ----
  const pvpStatsSub = (
    <div className="armory-panel">
      <div className="armory-pvp-tiles">
        <div className="armory-pvp-tile">
          <span className="armory-pvp-tile-num" style={{ color: '#ff5555' }}>
            {character.totalKills.toLocaleString(locale)}
          </span>
          <span className="armory-pvp-tile-lbl">{t('totalKills')}</span>
        </div>
        <div className="armory-pvp-tile">
          <span className="armory-pvp-tile-num" style={{ color: '#ff8888' }}>
            {character.todayKills.toLocaleString(locale)}
          </span>
          <span className="armory-pvp-tile-lbl">{t('todayKills')}</span>
        </div>
        <div className="armory-pvp-tile">
          <span className="armory-pvp-tile-num" style={{ color: '#e08a3a' }}>
            {character.yesterdayKills.toLocaleString(locale)}
          </span>
          <span className="armory-pvp-tile-lbl">{t('yesterdayKills')}</span>
        </div>
        <div className="armory-pvp-tile">
          <span className="armory-pvp-tile-num" style={{ color: '#ffd100' }}>
            {pvpCurrency.honor.toLocaleString(locale)}
          </span>
          <span className="armory-pvp-tile-lbl">{t('honorPoints')}</span>
        </div>
        <div className="armory-pvp-tile">
          <span className="armory-pvp-tile-num" style={{ color: '#9b59b6' }}>
            {pvpCurrency.arena.toLocaleString(locale)}
          </span>
          <span className="armory-pvp-tile-lbl">{t('arenaPoints')}</span>
        </div>
      </div>
    </div>
  )

  const arenaSub = (
    <div className="armory-panel">
      <div className="armory-arena">
        {arena.map((b) => {
          const losses = Math.max(0, b.seasonGames - b.seasonWins)
          const winRate = b.seasonGames ? Math.round((b.seasonWins / b.seasonGames) * 100) : 0
          return (
            <div className="armory-arena-card" key={b.slot}>
              <div className="armory-arena-bracket">{b.bracket}</div>
              <span className={`armory-arena-mode ${b.seasonGames > 0 ? 'rated' : 'none'}`}>
                {b.seasonGames > 0 ? t('arenaRated') : t('arenaUnrated')}
              </span>
              <div className="armory-arena-rating">{b.personalRating}</div>
              <div className="armory-arena-rating-lbl">{t('arenaRating')}</div>
              {b.seasonGames > 0 ? (
                <div className="armory-arena-rows">
                  <div className="armory-arena-row">
                    <span>{t('arenaSeason')}</span>
                    <span>
                      <b className="armory-arena-w">{b.seasonWins}</b> / <b className="armory-arena-l">{losses}</b> ·{' '}
                      {winRate}%
                    </span>
                  </div>
                  <div className="armory-arena-row">
                    <span>{t('arenaWeek')}</span>
                    <span>
                      {b.weekWins} / {Math.max(0, b.weekGames - b.weekWins)}
                    </span>
                  </div>
                  <div className="armory-arena-row">
                    <span>MMR</span>
                    <span>{b.mmr}</span>
                  </div>
                  {b.rank > 0 ? (
                    <div className="armory-arena-row">
                      <span>{t('arenaRank')}</span>
                      <span>#{b.rank}</span>
                    </div>
                  ) : null}
                </div>
              ) : (
                <div className="armory-arena-nogames">{t('arenaNoGames')}</div>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )

  const pvpTab = (
    <ArmoryTabs
      tabs={[
        { key: 'pvpstats', label: t('pvpStats'), icon: 'fas fa-skull', content: pvpStatsSub },
        { key: 'arena', label: t('arena'), icon: 'fas fa-shield-halved', content: arenaSub },
        {
          key: 'battlegrounds',
          label: t('battlegrounds'),
          icon: 'fas fa-flag-checkered',
          content: (
            <ArmoryBattlegrounds
              locale={locale}
              rows={bgHistory.rows}
              matches={bgHistory.matches}
              wins={bgHistory.wins}
              losses={bgHistory.losses}
              winRate={bgHistory.winRate}
              labels={{
                history: t('bgHistory'),
                desc: t('bgDesc'),
                matches: t('bgMatches'),
                wins: t('bgWins'),
                losses: t('bgLosses'),
                winRate: t('bgWinRate'),
                result: t('bgResult'),
                win: t('bgWin'),
                loss: t('bgLoss'),
                kb: t('bgKb'),
                hk: t('bgHk'),
                deaths: t('bgDeaths'),
                damage: t('bgDamage'),
                healing: t('bgHealing'),
                honor: t('bgHonor'),
                date: t('bgDate'),
                none: t('bgNone'),
                battleground: t('battlegrounds'),
              }}
            />
          ),
        },
        {
          key: 'pvprank',
          label: t('pvpRank'),
          icon: 'fas fa-trophy',
          content: (
            <ArmoryPvpRank
              locale={locale}
              initial={pvpRankData.entries}
              total={pvpRankData.total}
              pageSize={30}
              labels={{
                title: t('pvpRankTitle'),
                desc: t('pvpRankDesc'),
                search: t('searchPlayer'),
                empty: t('noPlayers'),
                character: t('rankPersonaje'),
                kills: t('rankKills'),
                playedTime: t('playedTime'),
              }}
            />
          ),
        },
      ]}
    />
  )

  const raidsTab = (
    <ArmoryRaids
      locale={locale}
      raids={raidProgress}
      labels={{
        bosses: t('raidBosses'),
        empty: t('raidNoData'),
        classic: t('expClassic'),
        tbc: t('expTbc'),
        wotlk: t('expWotlk'),
      }}
    />
  )

  const dungeonsTab = (
    <ArmoryRaids
      locale={locale}
      raids={dungeonProgress}
      labels={{
        bosses: t('raidBosses'),
        empty: t('raidNoData'),
        classic: t('expClassic'),
        tbc: t('expTbc'),
        wotlk: t('expWotlk'),
      }}
    />
  )

  // ---- Pestaña Talentos (toggle Primaria/Secundaria + árbol + glifos) ----
  const talentsTab = talentGroups.groups.length ? (
    <ArmoryTalentTab
      groups={talentGroups.groups}
      activeIndex={talentGroups.activeIndex}
      spellIcons={spellIcons}
      locale={locale}
      labels={{
        distribution: t('distribution'),
        glyphs: t('glyphs'),
        majorGlyphs: t('majorGlyphs'),
        minorGlyphs: t('minorGlyphs'),
        primary: t('primary'),
        secondary: t('secondary'),
        activeSpec: t('activeSpec'),
      }}
    />
  ) : (
    <div className="armory-panel">
      <p className="armory-hint">{t('noTalents')}</p>
    </div>
  )

  // ---- Pestaña Logros ----
  const logrosTab = (
    <ArmoryAchievements
      locale={locale}
      guid={id}
      categories={achOverview.categories}
      earnedPoints={achOverview.earnedPoints}
      totalCompleted={achOverview.totalCompleted}
      labels={{
        summary: t('achSummaryLine'),
        back: t('achBack'),
        reward: t('achReward'),
        empty: t('achEmptyCat'),
        of: t('achOf'),
        feats: t('achFeats'),
      }}
    />
  )

  const questsTab = (
    <div className="armory-panel armory-quests-panel">
      <ArmoryQuests
        guid={id}
        locale={locale}
        initial={questData.entries}
        total={questData.total}
        grandTotal={qGrand}
        pageSize={15}
        statuses={[
          { key: 'all', label: t('allStatuses'), count: qGrand },
          { key: 'inprogress', label: t('qsInProgress'), count: questCounts.inprogress },
          { key: 'complete', label: t('qsComplete'), count: questCounts.complete },
          { key: 'failed', label: t('qsFailed'), count: questCounts.failed },
          { key: 'rewarded', label: t('qsRewarded'), count: questCounts.rewarded },
        ]}
        badgeLabels={{
          rewarded: t('bRewarded'),
          complete: t('bComplete'),
          inprogress: t('bInProgress'),
          failed: t('bFailed'),
        }}
        labels={{
          filterId: t('filterId'),
          filterName: t('filterName'),
          empty: t('noQuests'),
          quest: t('quest'),
          statusCol: t('statusCol'),
          title: t('quests'),
          pageOf: '',
        }}
      />
    </div>
  )

  const mountsTab = (
    <ArmoryCollection
      items={mounts}
      locale={locale}
      pageSize={30}
      labels={{ title: t('mountsCollected', { n: mounts.length }), search: t('collSearch'), empty: t('noMounts') }}
    />
  )
  const petsTab = (
    <ArmoryCollection
      items={pets}
      locale={locale}
      pageSize={30}
      labels={{ title: t('petsCollected', { n: pets.length }), search: t('collSearch'), empty: t('noPets') }}
    />
  )

  const repsTab = (
    <ArmoryReputations
      reputations={reputations}
      pageSize={30}
      labels={{ title: t('reputations'), search: t('repSearch'), empty: t('noReps') }}
    />
  )

  const tabs: ArmoryTab[] = [
    { key: 'equip', label: t('tabEquip'), icon: 'fas fa-shield-alt', content: equipTab },
    {
      key: 'talents',
      label: t('talents'),
      icon: 'fas fa-tree',
      count: talentGroups.groups[talentGroups.activeIndex]?.total,
      content: talentsTab,
    },
    { key: 'achievements', label: t('achievements'), icon: 'fas fa-trophy', count: activityData.total, content: logrosTab },
    { key: 'raids', label: t('raids'), icon: 'fas fa-dragon', content: raidsTab },
    { key: 'dungeons', label: t('dungeons'), icon: 'fas fa-dungeon', content: dungeonsTab },
    { key: 'quests', label: t('quests'), icon: 'fas fa-scroll', count: questCount, content: questsTab },
    { key: 'reputations', label: t('reputations'), icon: 'fas fa-handshake', count: reputations.length, content: repsTab },
    { key: 'pvp', label: t('pvp'), icon: 'fas fa-khanda', content: pvpTab },
    { key: 'mounts', label: t('mounts'), icon: 'fas fa-horse', count: mounts.length, content: mountsTab },
    { key: 'pets', label: t('pets'), icon: 'fas fa-paw', count: pets.length, content: petsTab },
  ]

  return (
    <PageShell title={character.name}>
      <div className="main-wide">
        <p className="forum-path">
          <Link href="/armory">← {t('backToArmory')}</Link>
        </p>

        <div className="armory-sheet">
          <div className="armory-sheet-head">
            <h1 className="armory-char-name" style={{ color: classColor(character.class) }}>
              {character.name}
              {avgItemLevel > 0 ? (
                <span className="armory-char-ilvl">
                  {' '}
                  ({t('itemLevel')} {avgItemLevel})
                </span>
              ) : null}
            </h1>
            <div className="armory-char-sub">
              {t('level')} {character.level} · {raceName(character.race, locale)} ·{' '}
              <span style={{ color: classColor(character.class) }}>{className(character.class, locale)}</span>
            </div>
            <div className="armory-char-tags">
              {factionLabel && <span className={`armory-faction ${faction}`}>{factionLabel}</span>}
              <span className={`armory-status ${character.online ? 'online' : 'offline'}`}>
                {character.online ? t('online') : t('offline')}
              </span>
              {character.guildName && character.guildId && (
                <Link href={`/armory/guild/${character.guildId}`} className="armory-guild-tag">
                  &lt;{character.guildName}&gt;
                </Link>
              )}
              {realmName && <span className="armory-realm">{realmName}</span>}
              <span className="armory-achpoints" title={t('achievementPoints')}>
                <i className="fas fa-star" /> {achievementPoints.toLocaleString(locale)}
              </span>
            </div>
          </div>

          <div className="armory-xpbar">
            <div className="armory-xpbar-head">
              <span className="armory-xpbar-label">{t('level')}</span>
              <span className="armory-xpbar-value">
                {character.level >= MAX_LEVEL ? `${character.level} (MAX)` : character.level}
              </span>
            </div>
            <div className="armory-xpbar-track">
              <span style={{ width: `${xpPct}%` }} />
            </div>
          </div>

          <ArmoryTabs tabs={tabs} />
        </div>
      </div>
    </PageShell>
  )
}