/* Veridyne Learning Portal — Progress & Scores */

function ProgressPage() {
  const store = useStore();
  const [shareOpen, setShareOpen] = React.useState(false);
  const okta = trackProgress(store.completed, "okta-");
  const auth0 = trackProgress(store.completed, "auth0-");
  const overall = ((okta.done + auth0.done) / (okta.total + auth0.total)) * 100;
  const lvl = levelFor(store.xp.total);

  const TrackList = ({ track, mods, prog }) => (
    <div className="glass-card">
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
        <ProgressRing value={prog.pct} size={54} stroke={5} color={`var(${PRODUCT_META[track].varName})`} />
        <div>
          <h3 style={{ fontSize: "1.05em" }}>{PRODUCT_META[track].label} track</h3>
          <p style={{ fontSize: "0.8em", color: "var(--bone-50)" }}>{prog.done} of {prog.total} modules complete</p>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {mods.map((m) => {
          const done = store.completed.includes(m.id);
          return (
            <button key={m.id} onClick={() => navigate("module/" + m.id)}
              style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 4px", background: "none", border: "none", borderBottom: "1px solid rgba(229,221,208,0.06)", cursor: "pointer", textAlign: "left", color: done ? "var(--bone)" : "var(--bone-70)", fontSize: "0.88em", minHeight: 40 }}>
              <span style={{ width: 20, height: 20, borderRadius: 7, flexShrink: 0, display: "grid", placeItems: "center", background: done ? "oklch(0.72 0.12 155 / 0.18)" : "var(--bone-08)", border: "1px solid " + (done ? "oklch(0.72 0.12 155 / 0.4)" : "var(--bone-12)"), color: done ? "var(--ok)" : "transparent" }}>
                <Icon name="check" size={12} />
              </span>
              <span style={{ flex: 1 }}>{m.num}. {m.title}</span>
              <span style={{ fontSize: "0.85em", color: "var(--bone-30)" }}>{m.time}</span>
            </button>
          );
        })}
      </div>
    </div>
  );

  const quizzes = [
    { id: "okta", quiz: window.OKTA_QUIZ },
    { id: "auth0", quiz: window.AUTH0_QUIZ },
  ];

  return (
    <div className="anim-fade-up">
      <div className="page-head" style={{ display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center", justifyContent: "space-between" }}>
        <div>
          <h1>Progress &amp; Scores</h1>
          <p>Module completion and best quiz scores, saved on this device.</p>
        </div>
        <div style={{ textAlign: "center" }}>
          <ProgressRing value={overall} size={84} stroke={6} />
          <div style={{ fontSize: "0.75em", color: "var(--bone-50)", marginTop: 6 }}>Overall</div>
        </div>
      </div>

      {/* Level & XP */}
      <div className="glass-card" style={{ display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <div style={{ display: "flex", gap: 16, alignItems: "center", flex: "1 1 300px", minWidth: 0 }}>
          <ProgressRing value={lvl.progress * 100} size={72} stroke={6} label={"Lv " + (lvl.idx + 1)} />
          <div style={{ minWidth: 0 }}>
            <h3 style={{ fontSize: "1.1em", color: "var(--ember-bright)" }}>{lvl.name}</h3>
            <p style={{ fontSize: "0.85em", color: "var(--bone-70)" }}>
              {store.xp.total} XP{lvl.next ? ` · ${lvl.next.min - store.xp.total} to ${lvl.next.name}` : " · top level reached"}
            </p>
            <p style={{ fontSize: "0.74em", color: "var(--bone-50)", marginTop: 4 }}>
              Earn XP from checkpoints (+10), diagrams (+15), modules (+50), and new quiz bests (+4 per question).
            </p>
          </div>
        </div>
        <button className="btn btn-primary" onClick={() => setShareOpen(true)}>
          <Icon name="external" size={14} /> Share score card
        </button>
      </div>
      <ShareCardModal open={shareOpen} onClose={() => setShareOpen(false)} />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 16, marginBottom: 16 }}>
        <TrackList track="okta" mods={window.OKTA_MODULES} prog={okta} />
        <TrackList track="auth0" mods={window.AUTH0_MODULES} prog={auth0} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 16 }}>
        {quizzes.map(({ id, quiz }) => {
          const s = store.scores[id];
          const badge = s ? scoreBadge(s.best) : null;
          return (
            <div key={id} className="glass-card">
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 12 }}>
                <ProgressRing value={s ? s.best : 0} size={54} stroke={5} color={s && s.best >= 80 ? "var(--ok)" : "var(--warn)"} label={s ? s.best + "%" : "—"} />
                <div>
                  <h3 style={{ fontSize: "1em" }}>{quiz.title}</h3>
                  <p style={{ fontSize: "0.8em", color: "var(--bone-50)" }}>
                    {s ? `Best ${s.best}% · last ${s.last}% · ${s.attempts} attempt${s.attempts > 1 ? "s" : ""}` : "Not attempted yet"}
                  </p>
                  {badge ? <span className={"badge " + badge.cls} style={{ marginTop: 5 }}>{badge.label}</span> : null}
                </div>
              </div>
              {s && s.lastDetail && s.lastDetail.breakdown ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 12 }}>
                  {Object.entries(s.lastDetail.breakdown).map(([area, b]) => (
                    <div key={area} style={{ display: "grid", gridTemplateColumns: "120px 1fr 50px", gap: 10, alignItems: "center", fontSize: "0.82em" }}>
                      <span style={{ color: "var(--bone-70)" }}>{area}</span>
                      <div style={{ height: 6, borderRadius: 99, background: "var(--bone-12)", overflow: "hidden" }}>
                        <div style={{ height: "100%", width: (b.correct / b.total) * 100 + "%", borderRadius: 99, background: b.correct === b.total ? "var(--ok)" : b.correct / b.total >= 0.5 ? "var(--warn)" : "var(--bad)" }} />
                      </div>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.85em", color: "var(--bone-50)", textAlign: "right" }}>{b.correct}/{b.total}</span>
                    </div>
                  ))}
                </div>
              ) : null}
              <button className="btn btn-sm" onClick={() => navigate("quizzes/" + id)}>
                <Icon name="play" size={13} /> {s ? "Retake" : "Start"} quiz
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ProgressPage = ProgressPage;