/* Veridyne Learning Portal — learning track list + module detail */

function ModuleCard({ mod, track, done }) {
  return (
    <button className="glass-card clickable" onClick={() => navigate("module/" + mod.id)}
      style={{ textAlign: "left", display: "flex", flexDirection: "column", gap: 10, border: "1px solid var(--glass-border)" }}>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.75em", color: "var(--bone-50)" }}>
          {String(mod.num).padStart(2, "0")}
        </span>
        <DifficultyBadge level={mod.difficulty} />
        <span className="badge"><Icon name="clock" size={11} /> {mod.time}</span>
        {done ? <span className="badge badge-ok"><Icon name="check" size={11} /> Done</span> : null}
      </div>
      <div>
        <h3 style={{ fontSize: "1.05em", marginBottom: 5 }}>{mod.title}</h3>
        <p style={{ fontSize: "0.86em", color: "var(--bone-70)" }}>{mod.summary}</p>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "auto", paddingTop: 4 }}>
        <span style={{ fontSize: "0.78em", color: "var(--bone-50)" }}>{mod.area}</span>
        <Icon name="chevronRight" size={15} style={{ color: "var(--ember-bright)" }} />
      </div>
    </button>
  );
}

function FitComparison() {
  return (
    <div className="glass-card" style={{ marginTop: 24 }}>
      <h3 style={{ fontSize: "1em", marginBottom: 4 }}>Where each product commonly fits</h3>
      <p style={{ fontSize: "0.84em", color: "var(--bone-50)", marginBottom: 14 }}>
        A starting map, not a rule — actual product choice depends on the customer's use case and Okta/Auth0 licensing.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 12 }}>
        <div className="glass-inset" style={{ padding: 16 }}>
          <div style={{ marginBottom: 8 }}><ProductBadge product="okta" /></div>
          <p style={{ fontSize: "0.88em", color: "var(--bone-70)" }}>
            <strong style={{ color: "var(--bone)" }}>Workforce Identity:</strong> employees, contractors, and partners accessing enterprise apps — SSO, MFA, lifecycle, governance, legacy app access.
          </p>
        </div>
        <div className="glass-inset" style={{ padding: 16 }}>
          <div style={{ marginBottom: 8 }}><ProductBadge product="auth0" /></div>
          <p style={{ fontSize: "0.88em", color: "var(--bone-70)" }}>
            <strong style={{ color: "var(--bone)" }}>Customer Identity:</strong> app builders and consumer/B2B SaaS — Universal Login, APIs, extensibility via Actions, Organizations for B2B.
          </p>
        </div>
      </div>
    </div>
  );
}

function LearningTrack({ track }) {
  const store = useStore();
  const mods = track === "okta" ? window.OKTA_MODULES : window.AUTH0_MODULES;
  const prog = trackProgress(store.completed, track + "-");
  const meta = PRODUCT_META[track];
  return (
    <div className="anim-fade-up">
      <div className="page-head" style={{ display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center", justifyContent: "space-between" }}>
        <div>
          <div style={{ marginBottom: 8 }}><ProductBadge product={track} /></div>
          <h1>{meta.label} Learning Track</h1>
          <p>
            {track === "okta"
              ? "Workforce identity: how employees, contractors, and partners reach enterprise apps — directory, SSO, MFA, policy, lifecycle, governance."
              : "Customer identity for the apps our clients build — Universal Login, connections, Actions, Organizations, tokens, and operations."}
          </p>
        </div>
        <div style={{ textAlign: "center" }}>
          <ProgressRing value={prog.pct} size={84} stroke={6} color={`var(${meta.varName})`} />
          <div style={{ fontSize: "0.75em", color: "var(--bone-50)", marginTop: 6 }}>{prog.done}/{prog.total} complete</div>
        </div>
      </div>
      <div className="card-grid">
        {mods.map((m) => <ModuleCard key={m.id} mod={m} track={track} done={store.completed.includes(m.id)} />)}
      </div>
      <FitComparison />
    </div>
  );
}

/* ---------------- Checkpoint mini-quiz ---------------- */
function Checkpoint({ questions, moduleId }) {
  const store = useStore();
  const [answers, setAnswers] = React.useState({});
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {questions.map((cq, qi) => {
        const picked = answers[qi];
        return (
          <div key={qi}>
            <p style={{ fontWeight: 600, fontSize: "0.95em", marginBottom: 10 }}>{qi + 1}. {cq.q}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {cq.options.map((opt, oi) => {
                let cls = "quiz-option";
                if (picked != null) {
                  if (oi === cq.answer) cls += " correct";
                  else if (oi === picked) cls += " wrong";
                }
                return (
                  <button key={oi} className={cls} disabled={picked != null}
                    onClick={() => {
                      setAnswers({ ...answers, [qi]: oi });
                      if (oi === cq.answer && store) store.awardXp(`cp:${moduleId}:${qi}`, 10, "Checkpoint correct");
                    }}>
                    <span className="option-key">{String.fromCharCode(65 + oi)}</span>
                    <span>{opt}</span>
                  </button>
                );
              })}
            </div>
            {picked != null ? (
              <div className="glass-inset anim-fade-in" style={{ padding: "12px 14px", marginTop: 10, display: "flex", gap: 10, alignItems: "flex-start" }}>
                <Icon name={picked === cq.answer ? "checkCircle" : "info"} size={16}
                  style={{ color: picked === cq.answer ? "var(--ok)" : "var(--warn)", marginTop: 2 }} />
                <p style={{ fontSize: "0.88em", color: "var(--bone-70)" }}>
                  <strong style={{ color: "var(--bone)" }}>{picked === cq.answer ? "Correct. " : "Not quite. "}</strong>
                  {cq.explain}
                </p>
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}

/* ---------------- Module detail ---------------- */
function ModuleDetail({ moduleId }) {
  const store = useStore();
  const mod = findModule(moduleId);
  if (!mod) return <div className="glass-card">Module not found. <button className="btn btn-sm" onClick={() => navigate("dashboard")}>Back</button></div>;
  const track = moduleTrack(mod.id);
  const mods = track === "okta" ? window.OKTA_MODULES : window.AUTH0_MODULES;
  const idx = mods.findIndex((m) => m.id === mod.id);
  const prev = mods[idx - 1], next = mods[idx + 1];
  const done = store.completed.includes(mod.id);
  const diagram = mod.diagramId ? window.DIAGRAMS.find((d) => d.id === mod.diagramId) : null;

  return (
    <div className="anim-fade-up" style={{ maxWidth: 860 }}>
      <button className="btn btn-ghost btn-sm" onClick={() => navigate(track)} style={{ marginBottom: 14, color: "var(--bone-50)" }}>
        <Icon name="arrowLeft" size={14} /> {PRODUCT_META[track].label} track
      </button>

      <div className="page-head">
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
          <ProductBadge product={track} />
          <DifficultyBadge level={mod.difficulty} />
          <span className="badge"><Icon name="clock" size={11} /> {mod.time}</span>
          <span className="badge">{mod.area}</span>
          {done ? <span className="badge badge-ok"><Icon name="check" size={11} /> Completed</span> : null}
        </div>
        <h1>Module {mod.num}: {mod.title}</h1>
      </div>

      <div className="glass-card module-prose" style={{ marginBottom: 16 }}>
        {mod.intro.map((p, i) => <p key={i}>{p}</p>)}
      </div>

      {diagram ? (
        <div style={{ marginBottom: 16 }}>
          <DiagramViewer diagram={diagram} />
        </div>
      ) : null}

      <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 16 }}>
        <Accordion title="Core concepts" icon="layers" defaultOpen={true} count={mod.concepts.length}>
          <dl style={{ margin: 0 }}>
            {mod.concepts.map((c, i) => (
              <div className="concept-row" key={i}>
                <dt>{c.term}</dt>
                <dd>{c.def}</dd>
              </div>
            ))}
          </dl>
        </Accordion>

        <Accordion title={"Real-world scenario: " + mod.scenario.title} icon="users">
          <p style={{ fontSize: "0.92em", color: "var(--bone-70)", lineHeight: 1.65 }}>{mod.scenario.body}</p>
        </Accordion>

        <Accordion title="Gotchas & design notes" icon="alert" count={mod.gotchas.length}>
          <div>
            {mod.gotchas.map((g, i) => (
              <div className="gotcha-item" key={i}>
                <Icon name="alert" size={15} style={{ color: "var(--warn)", marginTop: 3 }} />
                <span>{g}</span>
              </div>
            ))}
          </div>
        </Accordion>

        <Accordion title="Official documentation" icon="fileText" count={mod.docs.length} defaultOpen={true}>
          <DocLinks docs={mod.docs} />
        </Accordion>

        {mod.videos && mod.videos.length ? (
          <Accordion title="Videos & training" icon="video" count={mod.videos.length}>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {mod.videos.map((v, i) => (
                <a key={i} href={v.url} target="_blank" rel="noopener noreferrer"
                  style={{ display: "flex", flexDirection: "column", gap: 4, padding: "12px 14px", borderRadius: 12, background: "rgba(16,23,29,0.4)", border: "1px solid rgba(229,221,208,0.08)", color: "var(--bone)", textDecoration: "none" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                    <Icon name="video" size={15} style={{ color: "var(--ember-bright)" }} />
                    <span style={{ fontWeight: 600, fontSize: "0.92em", flex: 1 }}>{v.title}</span>
                    {v.official ? <OfficialBadge /> : <span className="badge badge-warn">Needs manual verification</span>}
                  </div>
                  <span style={{ fontSize: "0.8em", color: "var(--bone-50)" }}>{v.source} — {v.note}</span>
                </a>
              ))}
            </div>
          </Accordion>
        ) : null}

        <Accordion title="Checkpoint" icon="target" count={mod.checkpoint.length} defaultOpen={true}>
          <Checkpoint questions={mod.checkpoint} moduleId={mod.id} key={mod.id} />
        </Accordion>
      </div>

      <div className="glass-card" style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", justifyContent: "space-between" }}>
        <button className={"btn " + (done ? "" : "btn-primary")} onClick={() => store.toggleComplete(mod.id)}>
          <Icon name={done ? "refresh" : "checkCircle"} size={15} />
          {done ? "Mark as not complete" : "Mark module complete"}
        </button>
        <div style={{ display: "flex", gap: 8 }}>
          {prev ? <button className="btn btn-sm" onClick={() => navigate("module/" + prev.id)}><Icon name="chevronLeft" size={14} /> Module {prev.num}</button> : null}
          {next ? <button className="btn btn-sm" onClick={() => navigate("module/" + next.id)}>Module {next.num} <Icon name="chevronRight" size={14} /></button> : null}
        </div>
      </div>

      <p style={{ fontSize: "0.78em", color: "var(--bone-50)", marginTop: 14, display: "flex", gap: 8, alignItems: "flex-start" }}>
        <Icon name="info" size={13} style={{ marginTop: 2 }} />
        Availability of specific features may depend on Okta/Auth0 plan, tenant configuration, or enabled features. Verify in official docs and the customer contract.
      </p>
    </div>
  );
}

Object.assign(window, { LearningTrack, ModuleDetail, Checkpoint, ModuleCard });