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

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

function DesignQuestScreen({ nav, tweaks }) {
  const DQIcon = window.DQIcon;
  const s = window.useDQ();
  const L = window.DQLookup;
  const acts = window.DQActs;
  const [openAct, setOpenAct] = useState(dqCurrentActIdx(s));
  const [openQuest, setOpenQuest] = useState(null);
  const [rulesOpen, setRulesOpen] = useState(false);

  const doneTotal = Object.keys(s.done).length;
  const level = dqCurrentActIdx(s) + 1;
  const earned = {}; s.trophies.forEach((t) => { earned[t.id] = t.at; });
  const earnedSecret = {}; s.secrets.forEach((t) => { earnedSecret[t.id] = t.at; });

  const clickQuest = (q) => {
    if (s.done[q.id]) { setOpenQuest(q); return; }
    if (!L.unlocked(s, q)) {
      const prevAct = acts.find((a) => a.roman === q.actRoman);
      const idx = acts.indexOf(prevAct);
      if (window.pushToast) window.pushToast({ id: Date.now(), text: "Закрыто. Сначала победи босса Акта " + acts[idx - 1].roman, pts: 0 });
      return;
    }
    setOpenQuest(q);
  };

  return (
    <div className="page page--wide screen-enter" data-screen-label="Design Quest">
      <div className="page-head">
        <div className="page-head__titles">
          <span className="eyebrow-mono">Игровые курсы · «Design Quest: 100 испытаний»</span>
          <h1 className="page-title">Путь Архимага Сеток</h1>
        </div>
        <div className="page-actions"><window.DQStreak streak={s.streak} compact /></div>
      </div>

      <div className="dq-hero">
        <window.DQLevelDial level={level} />
        <div className="dq-hero__main">
          <window.DQXPBar xp={s.xp} />
          <div className="dq-hero__row">
            <window.DQStreak streak={s.streak} />
            <div className="dq-hero__stat"><span className="dq-hero__num">{doneTotal}</span><span className="e-label">из {L.totalQuests} задач</span></div>
            <div className="dq-hero__stat"><span className="dq-hero__num">{s.trophies.length + s.secrets.length}</span><span className="e-label">из {window.DQTrophies.length + window.DQSecrets.length} достижений</span></div>
          </div>
        </div>
      </div>

      <div className="dq-rules">
        <button className="dq-rules__head" onClick={() => setRulesOpen((v) => !v)}>
          <DQIcon name="scroll" size={16} />
          <span>Правила выживания в квесте</span>
          <DQIcon name="chevron" size={16} style={{ marginLeft: "auto", transform: rulesOpen ? "rotate(180deg)" : "none", transition: "transform 120ms" }} />
        </button>
        {rulesOpen && (
          <ol className="dq-rules__list">
            {window.DQRules.map((r, i) => <li key={i}>{r}</li>)}
          </ol>
        )}
      </div>

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

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

      <window.SectionRule kicker={s.secrets.length + " / " + window.DQSecrets.length}>Секретные достижения</window.SectionRule>
      <div className="dq-trophies">
        {window.DQSecrets.map((t) => (
          <window.DQSecretCard key={t.id} def={t} earned={!!earnedSecret[t.id]} date={earnedSecret[t.id]}
            onClaim={() => window.DQActions.claimSecret(t.id)} />
        ))}
      </div>

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

window.Screens = Object.assign(window.Screens || {}, { questsDesign: DesignQuestScreen });