/* global React, Icon, CoinIcon, t */

function TopNav({ page, setPage, auth }) {
  const links = [
    { id: 'home', label: t('nav.home') },
    { id: 'games', label: t('nav.games') },
    { id: 'news', label: t('nav.news') },
    { id: 'referral', label: t('nav.referral') },
    { id: 'profile', label: t('nav.profile') },
    { id: 'rewards', label: t('nav.rewards') },
  ];
  const xpPct = auth.level ? ((auth.xp % 100) / 100) * 100 : 0;
  const isGuest = auth.name === '';

  return (
    <nav className="topnav" aria-label="Primary">
      <div className="topnav__inner">
        <a className="brand" onClick={(e) => { e.preventDefault(); setPage('home'); }} href="#home">
          <span className="brand__dot" />
          SHASTEGAMES
        </a>

        <div className="navlinks">
          {links
            .filter((l) => !['profile', 'rewards'].includes(l.id) || !isGuest)
            .map((l) => (
              <a
                key={l.id}
                href={`#${l.id}`}
                onClick={(e) => { e.preventDefault(); setPage(l.id); }}
                className={`navlink ${page === l.id ? 'navlink--active' : ''}`}
              >
                {l.label}
              </a>
            ))}
          <a
            href="#webnovel"
            onClick={(e) => { e.preventDefault(); setPage('webnovel'); }}
            className={`navlink ${page === 'webnovel' ? 'navlink--active' : ''}`}
          >
            {t('nav.webnovel')}
          </a>
        </div>

        <div className="hud">
          {!isGuest && (
            <React.Fragment>
              <div className="chip chip--coin" title="ShasteCoins">
                <CoinIcon size={16} />
                <span className="chip__num">{auth.coins.toLocaleString()}</span>
              </div>
              <div className="chip chip--xp xpchip" title={`Level ${auth.level} · ${auth.xp} XP`}>
                <span className="xpchip__lvl">LV {auth.level}</span>
                <div className="xpchip__bar">
                  <div className="xpchip__fill" style={{ width: `${xpPct}%` }} />
                </div>
              </div>
            </React.Fragment>
          )}
          {isGuest ? (
            <button className="avatar-btn avatar-btn--guest" onClick={() => setPage('login')}>{t('action.login')}</button>
          ) : auth.supporter !== 'none' ? (
            <div className="supporter-ring">
              <button className="avatar-btn" onClick={() => setPage('profile')}>
                <span className="avatar-btn__av">{auth.name[0]}</span>
                {auth.name}
              </button>
            </div>
          ) : (
            <button className="avatar-btn" onClick={() => setPage('profile')}>
              <span className="avatar-btn__av">{auth.name[0]}</span>
              {auth.name}
            </button>
          )}
        </div>
      </div>
    </nav>
  );
}

function SideNav({ page, setPage, auth }) {
  const main = [
    { id: 'home', label: t('nav.hub'), icon: 'home' },
    { id: 'games', label: t('nav.games'), icon: 'games' },
    { id: 'news', label: t('nav.news'), icon: 'news' },
    { id: 'roadmap', label: t('nav.roadmap'), icon: 'roadmap' },
  ];
  const me = [
    { id: 'profile', label: t('nav.profile'), icon: 'user' },
    { id: 'rewards', label: t('nav.rewards'), icon: 'trophy' },
    { id: 'referral', label: t('nav.referral'), icon: 'gift' },
  ];
  const other = [
    { id: 'webnovel', label: t('nav.webnovel'), icon: 'book' },
    { id: 'support', label: t('nav.patreon'), icon: 'heart' },
    { id: 'discord', label: t('nav.discord'), icon: 'discord', href: 'https://discord.gg/shaste', external: true },
  ];

  const item = (l) => {
    if (l.external) {
      return (
        <a
          key={l.id}
          href={l.href}
          target="_blank"
          rel="noopener noreferrer"
          className="sidenav__item"
        >
          <Icon name={l.icon} size={16} /> {l.label}
        </a>
      );
    }
    return (
      <a
        key={l.id}
        href={`#${l.id}`}
        onClick={(e) => { e.preventDefault(); setPage(l.id); }}
        className={`sidenav__item ${page === l.id ? 'sidenav__item--active' : ''}`}
      >
        <Icon name={l.icon} size={16} /> {l.label}
      </a>
    );
  };

  const isGuest = auth.name === '';
  return (
    <aside className="sidenav" aria-label="Navigation">
      <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); setPage('home'); }}>
        <span className="brand__dot" /> SHASTEGAMES
      </a>
      <div className="sidenav__group">
        <div className="sidenav__label">{t('nav.hub')}</div>
        {main.map(item)}
      </div>
      <div className="sidenav__group">
        <div className="sidenav__label">{t('nav.account')}</div>
        {me.map(item)}
      </div>
      <div className="sidenav__group">
        <div className="sidenav__label">{t('nav.more')}</div>
        {other.map(item)}
      </div>
      <div className="sidenav__footer">
        {isGuest ? (
          <button className="btn btn--primary btn--full" onClick={() => setPage('login')}>{t('action.login')}</button>
        ) : (
          <div className="upsell upsell--referral">
            <div className="upsell__ic"><CoinIcon size={16} /></div>
            <div>
              <p className="upsell__ttl" style={{ fontSize: 12 }}>{t('profile.coins_pill', { n: auth.coins.toLocaleString() })}</p>
              <p className="upsell__sub" style={{ fontSize: 11 }}>Lv {auth.level} · {auth.xp} XP</p>
            </div>
          </div>
        )}
      </div>
    </aside>
  );
}

Object.assign(window, { TopNav, SideNav });