/* Veridyne Learning Portal — Protocols Lab */
function ProtocolsLab({ sub }) {
  const active = window.PROTOCOLS.find((p) => p.id === sub) || window.PROTOCOLS[0];

  return (
    <div className="anim-fade-up">
      <div className="page-head">
        <h1>Protocols Lab</h1>
        <p>The foundational flows under both Okta and Auth0. Master these three and every product feature becomes 'just configuration on top'.</p>
      </div>

      <div className="filter-bar" style={{ marginBottom: 20 }}>
        {window.PROTOCOLS.map((p) => (
          <button key={p.id} className={"pill" + (active.id === p.id ? " active" : "")}
            onClick={() => navigate("protocols/" + p.id)}>
            {p.name}
          </button>
        ))}
      </div>

      <div className="glass-card" style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 10, flexWrap: "wrap" }}>
          <ProductBadge product="protocols" />
          <h2 style={{ fontSize: "1.25em" }}>{active.name}</h2>
        </div>
        <p style={{ color: "var(--ember-bright)", fontSize: "0.92em", fontWeight: 500, marginBottom: 10 }}>{active.tagline}</p>
        <p style={{ color: "var(--bone-70)", fontSize: "0.95em", lineHeight: 1.65 }}>{active.intro}</p>
      </div>

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

      <h3 style={{ fontSize: "1em", marginBottom: 12, color: "var(--bone-70)" }}>Interactive flows</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 16 }}>
        {active.diagrams.map((id) => {
          const d = window.DIAGRAMS.find((x) => x.id === id);
          return d ? <DiagramViewer key={id + active.id} diagram={d} /> : null;
        })}
      </div>

      {active.comparison ? (
        <div className="glass-card" style={{ marginBottom: 16 }}>
          <h3 style={{ fontSize: "1em", marginBottom: 12 }}>SAML vs OAuth 2.0 vs OIDC</h3>
          <div className="table-scroll">
            <table className="compare-table">
              <thead>
                <tr>{active.comparison.headers.map((h, i) => <th key={i}>{h}</th>)}</tr>
              </thead>
              <tbody>
                {active.comparison.rows.map((row, i) => (
                  <tr key={i}>{row.map((cell, j) => <td key={j}>{cell}</td>)}</tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ) : null}

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <Accordion title="Common troubleshooting" icon="alert" count={active.troubleshooting.length} defaultOpen={true}>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {active.troubleshooting.map((t, i) => (
              <div key={i} className="glass-inset" style={{ padding: "12px 14px" }}>
                <p style={{ fontWeight: 600, fontSize: "0.9em", marginBottom: 4, fontFamily: "var(--font-mono)", color: "var(--warn)" }}>{t.symptom}</p>
                <p style={{ fontSize: "0.88em", color: "var(--bone-70)" }}>{t.check}</p>
              </div>
            ))}
          </div>
        </Accordion>
        <Accordion title="Official documentation" icon="fileText" count={active.docs.length} defaultOpen={true}>
          <DocLinks docs={active.docs} />
        </Accordion>
      </div>
    </div>
  );
}

window.ProtocolsLab = ProtocolsLab;