NightSpire/web-next/components/AccountTools.tsx

'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'

type Tool = { href: string; icon: string; label: string; desc: string }

/** Replica los paneles plegables «OPCIONES DE CUENTA / OPCIONES DE PERSONAJE»
 *  del my-account de Django (acordeón por click), con las herramientas ya
 *  implementadas en Next. */
export function AccountTools({ isAdmin }: { isAdmin: boolean }) {
  const t = useTranslations('Account')

  const accountTools: Tool[] = [
    { 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') },
    { href: '/recruit', icon: 'recruit-a-friend-icon', label: t('svcRecruit'), desc: t('svcRecruitDesc') },
    { href: '/vote-points', icon: 'vote-icon', label: t('svcVote'), desc: t('svcVoteDesc') },
  ]
  const characterTools: Tool[] = [
    { href: '/unstuck', icon: 'unstuck-icon', label: t('svcUnstuck'), desc: t('svcUnstuckDesc') },
    { href: '/revive', icon: 'revive-icon', label: t('svcRevive'), desc: t('svcReviveDesc') },
    { 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') },
    { href: '/battlepay', icon: 'store-icon', label: t('svcStore'), desc: t('svcStoreDesc') },
  ]

  return (
    <div className="body-box-content-account">
      {isAdmin && (
        <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>
      )}
      <Panel id="account-settings" arrow="fa-arrow-down-account" title={t('accountOptions')} tools={accountTools} />
      <Panel id="character-settings" arrow="fa-arrow-down-character" title={t('characterOptions')} tools={characterTools} />
    </div>
  )
}

function Panel({ id, arrow, title, tools }: { id: string; arrow: string; title: string; tools: Tool[] }) {
  const [open, setOpen] = useState(false)
  const rows: Tool[][] = []
  for (let i = 0; i < tools.length; i += 2) rows.push(tools.slice(i, i + 2))

  return (
    <>
      <div id={id} onClick={() => setOpen((v) => !v)}>
        {title} <i className={`fas fa-arrow-down ${arrow} ${open ? 'rotate' : 'rotate2'}`} />
      </div>
      <div id={`${id}-panel`} style={{ display: open ? 'block' : 'none' }}>
        <table className="max-center-table fixed-layout-table">
          <tbody>
            {rows.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>
        <br />
      </div>
    </>
  )
}