/* ============================================================
   aiquests/aiquests-screens.jsx — единственный экран «Игровые курсы».
   Регистрирует window.Screens.quests.
   props из шелла: { nav, tweaks }
   ============================================================ */
const React = window.React;
const { useState } = React;

function currentActIdx(s) {
  const acts = window.AIQActs;
  for (let i = 0; i < acts.length; i++) {
    if (window.AIQLookup.actStats(s, acts[i]).done < acts[i].quests.length) return i;
  }
  return acts.length - 1;
}

function QuestScreen({ nav, tweaks }) {
  const QIcon = window.QIcon;
  const s = window.useAIQ();
  const L = window.AIQLookup;
  const acts = window.AIQActs;
  const view = (tweaks && tweaks.aiqView) || "chronicle";
  const [openAct, setOpenAct] = useState(currentActIdx(s));
  const [openQuest, setOpenQuest] = useState(null);

  const doneTotal = Object.keys(s.done).length;
  const level = currentActIdx(s) + 1;
  const { rank } = L.rankFor(s.xp);
  const earned = {}; s.trophies.forEach((t) => { earned[t.id] = t.at; });

  const clickQuest = (q) => {
    if (s.done[q.id]) { setOpenQuest(q); return; }
    if (!L.unlocked(s, q)) {
      if (window.pushToast) window.pushToast({ id: Date.now(), text: "Закрыто. Сначала квест №" + (q.num - 1), pts: 0 });
      return;
    }
    setOpenQuest(q);
  };

  return (
    <div className="page page--wide screen-enter" data-screen-label="Игровые курсы">
      <div className="page-head">
        <div className="page-head__titles">
          <span className="eyebrow-mono">Игровые курсы · «300 задач по ИИ»</span>
          <h1 className="page-title">Хроники Повелителя Нейросетей</h1>
        </div>
        <div className="page-actions"><window.AIQStreak streak={s.streak} compact /></div>
      </div>

      <div className="aiq-hero">
        <window.AIQLevelDial level={level} />
        <div className="aiq-hero__main">
          <window.AIQXPBar xp={s.xp} />
          <div className="aiq-hero__row">
            <window.AIQStreak streak={s.streak} />
            <div className="aiq-hero__stat"><span className="aiq-hero__num">{doneTotal}</span><span className="e-label">из {L.totalQuests} квестов</span></div>
            <div className="aiq-hero__stat"><span className="aiq-hero__num">{s.trophies.length}</span><span className="e-label">из {window.AIQTrophies.length} достижений</span></div>
          </div>
        </div>
      </div>

      <window.SectionRule kicker="обновляются ежедневно">Квесты дня</window.SectionRule>
      <div className="aiq-daily">
        {window.AIQDaily.map((d) => {
          const prog = L.dailyProgress(s, d);
          const full = prog >= d.target;
          const claimed = s.day.claimed.includes(d.id);
          return (
            <div key={d.id} className={"aiq-day" + (claimed ? " aiq-day--claimed" : full ? " aiq-day--ready" : "")}>
              <div className="aiq-day__top"><QIcon name="target" size={16} /><span className="aiq-day__label">{d.label}</span><span className="aiq-day__bonus mono">+{d.bonus}</span></div>
              <div className="aiq-day__bar"><i style={{ width: (prog / d.target) * 100 + "%" }} /></div>
              <div className="aiq-day__foot">
                <span className="mono">{prog} / {d.target}</span>
                {claimed ? <window.AIQStamp label="Получено" /> : full ?
                  <button className="aiq-btn aiq-btn--signal aiq-btn--sm" onClick={() => window.AIQActions.claimDaily(d.id)}>Забрать</button> :
                  <span className="e-label" style={{ color: "var(--text-faint)" }}>в процессе</span>}
              </div>
            </div>
          );
        })}
      </div>

      <window.SectionRule kicker={acts.length + " актов · " + L.totalQuests + " квестов"}>Хроника похода</window.SectionRule>
      <div className="aiq-book">
        {acts.map((act, i) => {
          const st = L.actStats(s, act);
          const done = st.done === st.total;
          const isOpen = openAct === i;
          return (
            <div key={act.roman} className={"aiq-chapter" + (isOpen ? " aiq-chapter--open" : "") + (done ? " aiq-chapter--done" : "")}>
              <button className="aiq-chapter__head" onClick={() => setOpenAct(isOpen ? -1 : i)}>
                <span className="aiq-chapter__roman">{act.roman}</span>
                <span className="aiq-chapter__title">{act.title}</span>
                <span className="aiq-chapter__meta mono">{st.done}/{st.total} · {act.xp} XP/квест</span>
                {done && <QIcon name="crown" size={16} color="var(--signal)" />}
                <QIcon name="chevron" size={16} style={{ transform: isOpen ? "rotate(180deg)" : "none", transition: "transform 120ms" }} />
              </button>
              <div className="aiq-chapter__bar"><i style={{ width: (st.done / st.total) * 100 + "%" }} /></div>
              {isOpen && (
                <div className="aiq-chapter__body">
                  {act.quests.map((q) => {
                    const isDone = !!s.done[q.id];
                    const unlocked = L.unlocked(s, q);
                    const stt = isDone ? "done" : unlocked ? "open" : "locked";
                    return (
                      <div key={q.id} className={"aiq-quest aiq-quest--" + stt + (q.boss ? " aiq-quest--boss" : "")} onClick={() => clickQuest(q)}>
                        <span className="aiq-quest__num mono">{q.num}</span>
                        <span className="aiq-quest__badge">
                          {stt === "locked" ? <QIcon name="lock" size={14} /> : stt === "done" ? <QIcon name="check" size={14} /> : <QIcon name={q.boss ? "swords" : "scroll"} size={14} />}
                        </span>
                        <span className="aiq-quest__title">{q.title}</span>
                        <span className="aiq-quest__xp mono">{q.xp} XP</span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <window.SectionRule kicker={s.trophies.length + " / " + window.AIQTrophies.length}>Зал достижений</window.SectionRule>
      <div className="aiq-trophies">
        {window.AIQTrophies.map((t) => <window.AIQTrophy key={t.id} def={t} earned={!!earned[t.id]} date={earned[t.id]} />)}
      </div>

      {openQuest && (
        <div className="aiq-overlay" onClick={() => setOpenQuest(null)}>
          <div className="aiq-modal" onClick={(e) => e.stopPropagation()}>
            <div className="aiq-modal__bar">
              <span className="e-label">Акт {openQuest.actRoman} · Квест №{openQuest.num} · {openQuest.xp} XP</span>
              <button className="aiq-modal__x" onClick={() => setOpenQuest(null)}><QIcon name="close" size={16} /></button>
            </div>
            <div className="aiq-modal__body">
              {openQuest.boss && <div className="aiq-quiz__kicker mono">ИСПЫТАНИЕ АКТА</div>}
              <h2 className="aiq-modal__title">{openQuest.title}</h2>
              <p className="aiq-modal__desc">{openQuest.desc}</p>
              {s.done[openQuest.id] ? (
                <div className="row-3" style={{ gap: "var(--s-3)", alignItems: "center" }}>
                  <window.AIQStamp label="Закрыт" />
                  <button className="aiq-btn" onClick={() => { window.AIQActions.toggleQuest(openQuest.id); setOpenQuest(null); }}>Снять отметку</button>
                </div>
              ) : (
                <button className="aiq-btn aiq-btn--ink" onClick={() => { window.AIQActions.toggleQuest(openQuest.id); setOpenQuest(null); }}>
                  <QIcon name="check" size={14} /> Отметить выполненным · +{openQuest.xp} XP
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.Screens = Object.assign(window.Screens || {}, { questsAi: QuestScreen });