/* ============================================================
   quests-hub.jsx — раздел «Квесты»: единая точка входа для всех
   игровых курсов (300 задач по ИИ / Design Quest / Unity Quest).
   Каждый курс — независимая подсистема (свой store в localStorage,
   свои файлы в aiquests/ designquest/ unityquest/); хаб только
   переключает, какая из них видна, и ничего не хранит сам, кроме
   того, какая вкладка была открыта последней.
   Регистрирует window.Screens.quests (пункт меню NAV «Квесты»).
   ============================================================ */
const React = window.React;
const { useState } = React;

const QUEST_PACKS = [
  { id: "ai", label: "300 задач по ИИ", icon: "swords" },
  { id: "design", label: "Design Quest", icon: "grid" },
  { id: "unity", label: "Unity Quest", icon: "bolt" },
  { id: "words", label: "Английские слова", icon: "book" },
];

function QuestsHub(props) {
  const [tab, setTab] = useState(() => {
    try { return localStorage.getItem("planer-quests-tab") || "ai"; } catch (e) { return "ai"; }
  });
  const setTabPersist = (id) => {
    setTab(id);
    try { localStorage.setItem("planer-quests-tab", id); } catch (e) {}
  };

  const Screen = { ai: window.Screens.questsAi, design: window.Screens.questsDesign, unity: window.Screens.questsUnity, words: window.Screens.questsWords }[tab];

  return (
    <div>
      <div className="toolbar" style={{ marginBottom: "var(--s-5)" }}>
        <div className="seg">
          {QUEST_PACKS.map((p) => (
            <button key={p.id} className={"seg__btn" + (tab === p.id ? " seg__btn--on" : "")} onClick={() => setTabPersist(p.id)}>
              <window.Icon name={p.icon} size={14} />{p.label}
            </button>
          ))}
        </div>
      </div>
      {Screen ? <Screen {...props} /> : <div className="empty">Курс не найден.</div>}
    </div>
  );
}

window.Screens = Object.assign(window.Screens || {}, { quests: QuestsHub });