import {
  getPlayersData,
  CLASS_INFO,
  raceBig,
  classMedium,
  classChest,
  ALLIANCE_ICON,
  HORDE_ICON,
} from '@/lib/players'

/* eslint-disable @next/next/no-img-element */

export async function PlayersBoard() {
  const data = await getPlayersData()

  return (
    <>
      <div className="box-content">
        <div className="body-box-content centered">
          <p><i className="fas fa-exclamation-triangle"></i> La información de esta página se actualiza 1 vez al día automáticamente</p>
        </div>
      </div>

      {/* Personajes creados por clase */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>Personajes creados por clase</h2></div>
        <div className="body-box-content centered">
          <div className="show-players">
            {data.classStats.map((s) => (
              <div className="inline-div" key={s.id}>
                <table className="players-table">
                  <tbody>
                    <tr><td><img className="img-med-icon chest-medium" src={classChest(s.id)} alt={CLASS_INFO[s.id].label} /></td></tr>
                    <tr><td><span className={s.key}>Total: <span>{s.total}</span></span></td></tr>
                    <tr><td><hr /></td></tr>
                    <tr><td className="lefted"><img className="img-small-icon-m img-align" src={ALLIANCE_ICON} alt="Alianza" /> <span className={s.key}>Alianzas: <span>{s.alliance}</span></span></td></tr>
                    <tr><td className="lefted"><img className="img-small-icon-m img-align" src={HORDE_ICON} alt="Horda" /> <span className={s.key}>Hordas: <span>{s.horde}</span></span></td></tr>
                  </tbody>
                </table>
              </div>
            ))}
            <table className="max-center-table2">
              <tbody>
                <tr>
                  <td>Personajes totales: <span>{data.totals.total}</span></td>
                  <td><span className="alliance-color">Personajes alianzas:</span> <span>{data.totals.alliance}</span></td>
                  <td><span className="horde-color">Personajes hordas:</span> <span>{data.totals.horde}</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <br /><hr /><br />

      {/* Primeros del Reino - Nivel 80 */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>Primeros del Reino - Nivel 80</h2></div>
        <div className="body-box-content justified">
          {data.firsts.length === 0 ? (
            <p className="centered second-brown">Aún no hay personajes de nivel 80 registrados.</p>
          ) : (
            <table className="max-left-table2">
              <tbody>
                <tr>
                  <th>Logro</th>
                  <th>Personaje</th>
                  <th className="responsive-td">Fecha</th>
                </tr>
                {data.firsts.map((f, i) => (
                  <tr key={i}>
                    <td>
                      <img className="img-small-icon img-small-icon-h img-align" src={f.icon} alt="" />{' '}
                      <span className="yellow-info"><span className="yellow-info responsive-td">¡Primero del reino!</span><span className="yellow-info"> {f.label}</span></span>
                    </td>
                    <td className={`${f.classKey} big-font`}>{f.name}</td>
                    <td className="responsive-td"><span>{f.date}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      <br /><hr /><br />

      {/* Top de logros */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>Top de logros</h2></div>
        <div className="body-box-content centered">
          <p>Los 10 jugadores con más logros</p>
          <table className="char-center-table">
            <tbody>
              <tr>
                <th>Nombre</th>
                <th>Raza</th>
                <th>Clase</th>
                <th>Puntos de logros</th>
              </tr>
              {data.topAch.map((r, i) => (
                <tr key={i}>
                  <td className={`${r.classKey} big-font`}>{r.name}</td>
                  <td><img className="img-small-icon img-small-icon-h" src={raceBig(r.race, 0)} alt="" /></td>
                  <td><img className="img-small-icon img-small-icon-h" src={classMedium(r.class)} alt="" /></td>
                  <td><span>{r.value}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <br /><hr /><br />

      {/* Top de muertes con honor */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>Top de muertes con honor</h2></div>
        <div className="body-box-content centered">
          <p>Los 10 jugadores con más muertes con honor</p>
          <table className="char-center-table">
            <tbody>
              <tr>
                <th>Nombre</th>
                <th>Raza</th>
                <th>Clase</th>
                <th>Total de muertes</th>
                <th>Total de muertes hoy</th>
              </tr>
              {data.topHonor.map((r, i) => (
                <tr key={i}>
                  <td className={`${r.classKey} big-font`}>{r.name}</td>
                  <td><img className="img-small-icon img-small-icon-h" src={raceBig(r.race, 0)} alt="" /></td>
                  <td><img className="img-small-icon img-small-icon-h" src={classMedium(r.class)} alt="" /></td>
                  <td><span>{r.total}</span></td>
                  <td><span>{r.today}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}