/* RDR2RP UI Kit — плавающий виджет Discord (закреплён справа при скролле).
   Онлайн берётся из публичного widget.json сервера (нужно включить
   Server Widget в настройках Discord). При ошибке показываем виджет
   без счётчика, но со ссылкой-приглашением. */

const DISCORD_GUILD_ID = '1171846401194475540';
const DISCORD_WIDGET_URL = `https://discord.com/api/guilds/${DISCORD_GUILD_ID}/widget.json`;

function DiscordWidget() {
  const [data, setData] = React.useState(null);   // widget.json
  const [open, setOpen] = React.useState(true);    // раскрыт / свёрнут в пузырь

  // Тянем и периодически обновляем онлайн (каждые 60с).
  React.useEffect(() => {
    let alive = true;
    const load = () => {
      fetch(DISCORD_WIDGET_URL, { cache: 'no-store' })
        .then(r => { if (!r.ok) throw new Error('widget ' + r.status); return r.json(); })
        .then(d => { if (alive) setData(d); })
        .catch(() => {});
    };
    load();
    const t = setInterval(load, 60000);
    return () => { alive = false; clearInterval(t); };
  }, []);

  const invite = (data && data.instant_invite) || LINKS.discord;
  const online = data ? data.presence_count : null;

  // Свёрнутый вид — маленький пузырь в углу.
  if (!open) {
    return (
      <button className="dw-bubble" onClick={() => setOpen(true)} aria-label="Открыть Discord">
        <DiscordIcon size={24} />
        {online != null && <span className="dw-bubble-dot" title={online + ' онлайн'}></span>}
      </button>
    );
  }

  return (
    <aside className="dw" aria-label="Discord сервера">
      <button className="dw-collapse" onClick={() => setOpen(false)} aria-label="Свернуть">
        <Icon name="chevron-right" />
      </button>

      <div className="dw-head">
        <span className="dw-glyph"><DiscordIcon size={22} /></span>
        <div className="dw-head-txt">
          <b>{(data && data.name) || 'RDR 2 RP'}</b>
          {online != null && (
            <span className="dw-online"><i className="dw-dot"></i>{online.toLocaleString('ru-RU')} онлайн</span>
          )}
        </div>
      </div>

      <p className="dw-note">
        Для игры на сервере необходимо<br />подать заявку в Discord
      </p>

      <a className="dw-join btn btn-discord" href={invite} target="_blank" rel="noopener noreferrer">
        <DiscordIcon size={16} />Подать заявку
      </a>
    </aside>
  );
}

Object.assign(window, { DiscordWidget });