/* Veridyne Learning Portal — Dashboard */
function Dashboard() {
  const store = useStore();
  const okta = trackProgress(store.completed, "okta-");
  const auth0 = trackProgress(store.completed, "auth0-");
  const overall = ((okta.done + auth0.done) / (okta.total + auth0.total)) * 100;

  const nextModule =
    window.OKTA_MODULES.find((m) => !store.completed.includes(m.id)) ||
    window.AUTH0_MODULES.find((m) => !store.completed.includes(m.id));

  const quickCards = [
    { label: "SAML", sub: "Protocols Lab", to: "protocols/saml" },
    { label: "OAuth 2.0", sub: "Protocols Lab", to: "protocols/oauth" },
    { label: "OIDC", sub: "Protocols Lab", to: "protocols/oidc" },
    { label: "MFA", sub: "Okta · Module 4", to: "module/okta-4" },
    { label: "SSO", sub: "Okta · Module 3", to: "module/okta-3" },
    { label: "Lifecycle", sub: "Okta · Module 6", to: "module/okta-6" },
    { label: "Organizations", sub: "Auth0 · Module 6", to: "module/auth0-6" },
    { label: "Actions", sub: "Auth0 · Module 5", to: "module/auth0-5" },
    { label: "RBAC / FGA", sub: "Auth0 · Module 9", to: "module/auth0-9" },
  ];

  const scoreEntries = [
    { id: "okta", label: "Okta Knowledge Check", data: store.scores.okta },
    { id: "auth0", label: "Auth0 Knowledge Check", data: store.scores.auth0 },
  ];

  return (
    <div className="anim-fade-up">
      {/* Welcome */}
      <div className="glass-card" style={{ display: "flex", flexWrap: "wrap", gap: 24, alignItems: "center", justifyContent: "space-between", marginBottom: 16, padding: "26px 24px" }}>
        <div style={{ flex: "1 1 320px", minWidth: 0 }}>
          <p style={{ fontSize: "0.78em", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ember-bright)", fontWeight: 600, marginBottom: 8 }}>Welcome to Veridyne</p>
          <h1 style={{ fontSize: "clamp(1.4em, 3vw, 1.8em)", marginBottom: 8 }}>Learn the identity platforms we deliver</h1>
          <p style={{ color: "var(--bone-70)", maxWidth: 520, marginBottom: 18 }}>
            Two product tracks, a protocols lab, and 50 scenario questions — everything sourced from official Okta and Auth0 documentation.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {nextModule ? (
              <button className="btn btn-primary" onClick={() => navigate("module/" + nextModule.id)}>
                <Icon name="play" size={15} /> Continue learning
              </button>
            ) : (
              <button className="btn btn-primary" onClick={() => navigate("progress")}>
                <Icon name="award" size={15} /> All modules complete
              </button>
            )}
            <button className="btn" onClick={() => navigate("okta")}>Start Okta track</button>
            <button className="btn" onClick={() => navigate("auth0")}>Start Auth0 track</button>
            <button className="btn" onClick={() => navigate("protocols")}>Open Protocols Lab</button>
          </div>
        </div>
        <div style={{ display: "flex", gap: 26, alignItems: "center", flexWrap: "wrap" }}>
          <div style={{ textAlign: "center" }}>
            <ProgressRing value={overall} size={96} stroke={7} />
            <div style={{ fontSize: "0.75em", color: "var(--bone-50)", marginTop: 6 }}>Overall</div>
          </div>
        </div>
      </div>

      {/* Track progress + scores */}
      <div className="stat-grid" style={{ marginBottom: 16 }}>
        <button className="glass-card clickable" onClick={() => navigate("okta")} style={{ display: "flex", gap: 16, alignItems: "center", textAlign: "left", border: "1px solid var(--glass-border)" }}>
          <ProgressRing value={okta.pct} size={62} stroke={5} color="var(--okta)" />
          <div style={{ minWidth: 0 }}>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 3 }}><ProductBadge product="okta" /></div>
            <div style={{ fontWeight: 600 }}>Okta track</div>
            <div style={{ fontSize: "0.8em", color: "var(--bone-50)" }}>{okta.done} of {okta.total} modules</div>
          </div>
        </button>
        <button className="glass-card clickable" onClick={() => navigate("auth0")} style={{ display: "flex", gap: 16, alignItems: "center", textAlign: "left", border: "1px solid var(--glass-border)" }}>
          <ProgressRing value={auth0.pct} size={62} stroke={5} color="var(--auth0)" />
          <div style={{ minWidth: 0 }}>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 3 }}><ProductBadge product="auth0" /></div>
            <div style={{ fontWeight: 600 }}>Auth0 track</div>
            <div style={{ fontSize: "0.8em", color: "var(--bone-50)" }}>{auth0.done} of {auth0.total} modules</div>
          </div>
        </button>
        {scoreEntries.map((s) => {
          const badge = s.data ? scoreBadge(s.data.best) : null;
          return (
            <button key={s.id} className="glass-card clickable" onClick={() => navigate("quizzes/" + s.id)} style={{ display: "flex", gap: 16, alignItems: "center", textAlign: "left", border: "1px solid var(--glass-border)" }}>
              <ProgressRing value={s.data ? s.data.best : 0} size={62} stroke={5} color={s.data && s.data.best >= 80 ? "var(--ok)" : "var(--warn)"} label={s.data ? s.data.best + "%" : "—"} />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: "0.95em" }}>{s.label}</div>
                <div style={{ fontSize: "0.8em", color: "var(--bone-50)", marginBottom: 4 }}>
                  {s.data ? `Best score · ${s.data.attempts} attempt${s.data.attempts > 1 ? "s" : ""}` : "Not attempted yet"}
                </div>
                {badge ? <span className={"badge " + badge.cls}>{badge.label}</span> : <span className="badge">25 questions</span>}
              </div>
            </button>
          );
        })}
      </div>

      {/* Quick topics */}
      <h2 style={{ fontSize: "1.05em", marginBottom: 12, color: "var(--bone-70)" }}>Jump to a topic</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 10 }}>
        {quickCards.map((c) => (
          <button key={c.label} className="quick-card" onClick={() => navigate(c.to)}>
            <span className="qc-title">{c.label}</span>
            <span className="qc-sub">{c.sub}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;