/* ============================================================
   unityquest/unityquest-screens.jsx — единственный экран «Unity Quest».
   Регистрирует window.Screens.questsUnity (хаб «Квесты» подключает
   этот экран сам — прямого пункта меню у него нет).
   props из шелла: { nav, tweaks }
   ============================================================ */
const React = window.React;
const { useState } = React;

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

function UnityQuestScreen({ nav, tweaks }) {
  const UQIcon = window.UQIcon;
  const s = window.useUQ();
  const L = window.UQLookup;
  const acts = window.UQActs;
  const [openAct, setOpenAct] = useState(uqCurrentActIdx(s));
  const [openQuest, setOpenQuest] = useState(null);

  const doneTotal = Object.keys(s.done).length;
  const { level, into, span } = L.levelFor(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: "Закрыто. Сначала одолей предыдущего босса.", pts: 0 });
      return;
    }
    setOpenQuest(q);
  };

  return (
    <div className="page page--wide screen-enter" data-screen-label="Unity Quest">
      <div className="page-head">
        <div className="page-head__titles">
          <span className="eyebrow-mono">Игровые курсы · «Unity Quest: Путь от Нуба до Мастера»</span>
          <h1 className="page-title">Путь от Нуба до Мастера</h1>
        </div>
        <div className="page-actions"><window.UQStreak streak={s.streak} compact /></div>
      </div>

      <div className="uq-hero">
        <window.UQLevelDial level={level} into={into} span={span} />
        <div className="uq-hero__main">
          <window.UQLevelBar xp={s.xp} />
          <div className="uq-hero__row">
            <window.UQStreak streak={s.streak} />
            <div className="uq-hero__stat"><span className="uq-hero__num">{doneTotal}</span><span className="e-label">из {L.totalQuests} квестов</span></div>
            <div className="uq-hero__stat"><span className="uq-hero__num">{s.trophies.length}</span><span className="e-label">из {window.UQTrophies.length} достижений</span></div>
          </div>
        </div>
      </div>

      <window.SectionRule kicker="обновляются ежедневно">Квесты дня</window.SectionRule>
      <div className="uq-daily">
        {window.UQDaily.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={"uq-day" + (claimed ? " uq-day--claimed" : full ? " uq-day--ready" : "")}>
              <div className="uq-day__top"><UQIcon name="target" size={16} /><span className="uq-day__label">{d.label}</span><span className="uq-day__bonus mono">+{d.bonus}</span></div>
              <div className="uq-day__bar"><i style={{ width: (prog / d.target) * 100 + "%" }} /></div>
              <div className="uq-day__foot">
                <span className="mono">{prog} / {d.target}</span>
                {claimed ? <window.UQStamp label="Получено" /> : full ?
                  <button className="uq-btn uq-btn--signal uq-btn--sm" onClick={() => window.UQActions.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="uq-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={"uq-chapter" + (isOpen ? " uq-chapter--open" : "") + (done ? " uq-chapter--done" : "")}>
              <button className="uq-chapter__head" onClick={() => setOpenAct(isOpen ? -1 : i)}>
                <span className="uq-chapter__roman">{act.roman}</span>
                <span className="uq-chapter__title">{act.title}</span>
                <span className="uq-chapter__meta mono">{st.done}/{st.total} · {st.xpGain}/{st.xpTotal} XP</span>
                {done && <UQIcon name="crown" size={16} color="var(--signal)" />}
                <UQIcon name="chevron" size={16} style={{ transform: isOpen ? "rotate(180deg)" : "none", transition: "transform 120ms" }} />
              </button>
              <div className="uq-chapter__bar"><i style={{ width: (st.done / st.total) * 100 + "%" }} /></div>
              {isOpen && (
                <div className="uq-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={"uq-quest uq-quest--" + stt + (q.boss ? " uq-quest--boss" : "")} onClick={() => clickQuest(q)}>
                        <span className="uq-quest__num mono">{q.num}</span>
                        <span className="uq-quest__badge">
                          {stt === "locked" ? <UQIcon name="lock" size={14} /> : stt === "done" ? <UQIcon name="check" size={14} /> : q.boss ? <UQIcon name="crown" size={14} /> : q.kind === "side" ? <UQIcon name="dice" size={14} /> : <UQIcon name="sword" size={13} />}
                        </span>
                        <span className="uq-quest__title">{q.title}</span>
                        <span className="uq-quest__xp mono">{q.xp} XP</span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>

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

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

window.Screens = Object.assign(window.Screens || {}, { questsUnity: UnityQuestScreen });