/* Veridyne Learning Portal — DiagramViewer: step-through animated sequence diagrams */

function DiagramViewer({ diagram, embedded }) {
  const [step, setStep] = React.useState(0);
  const [playing, setPlaying] = React.useState(false);
  const store = useStore();
  const n = diagram.steps.length;
  const cur = diagram.steps[step];

  React.useEffect(() => {
    if (step === n - 1 && store) store.awardXp("diag:" + diagram.id, 15, "Flow mastered: " + diagram.title);
  }, [step, n, diagram.id]);

  React.useEffect(() => {
    if (!playing) return;
    if (step >= n - 1) { setPlaying(false); return; }
    const t = setTimeout(() => setStep((s) => Math.min(s + 1, n - 1)), 1700);
    return () => clearTimeout(t);
  }, [playing, step, n]);

  const replay = () => { setStep(0); setPlaying(true); };
  const go = (s) => { setPlaying(false); setStep(Math.max(0, Math.min(n - 1, s))); };

  /* geometry */
  const W = 720;
  const actors = diagram.actors;
  const nA = actors.length;
  const margin = 100;
  const xs = actors.map((_, i) => (nA === 1 ? W / 2 : margin + (i * (W - margin * 2)) / (nA - 1)));
  const topY = 26, lifeTop = 56;
  const stepH = 56;
  const H = lifeTop + 30 + n * stepH + 16;
  const color = `var(${(PRODUCT_META[diagram.product] || PRODUCT_META.protocols).varName})`;
  const mid = diagram.id + "-arrow";
  const midHi = diagram.id + "-arrow-hi";

  return (
    <div className="glass-card" style={{ padding: embedded ? 16 : 20 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", marginBottom: 4 }}>
        <div>
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }}>
            <ProductBadge product={diagram.product} />
            <span className="badge">{n} steps</span>
          </div>
          <h3 style={{ fontSize: "1.05em" }}>{diagram.title}</h3>
          <p style={{ fontSize: "0.84em", color: "var(--bone-50)" }}>{diagram.tagline}</p>
        </div>
        <div className="diagram-controls">
          <button className="btn btn-sm" onClick={() => go(step - 1)} disabled={step === 0} style={{ opacity: step === 0 ? 0.4 : 1 }} aria-label="Previous step">
            <Icon name="chevronLeft" size={15} />
          </button>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.8em", color: "var(--bone-70)", minWidth: 52, textAlign: "center" }}>
            {step + 1} / {n}
          </span>
          <button className="btn btn-sm" onClick={() => go(step + 1)} disabled={step === n - 1} style={{ opacity: step === n - 1 ? 0.4 : 1 }} aria-label="Next step">
            <Icon name="chevronRight" size={15} />
          </button>
          <button className="btn btn-sm" onClick={replay} aria-label="Replay animation">
            <Icon name={playing ? "zap" : "replay"} size={14} /> {playing ? "Playing" : "Replay"}
          </button>
        </div>
      </div>

      <div className="diagram-scroll">
        <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={diagram.title + " diagram"}>
          <defs>
            <marker id={mid} markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto">
              <path d="M1 1 L8 4.5 L1 8" fill="none" stroke="rgba(229,221,208,0.55)" strokeWidth="1.4" />
            </marker>
            <marker id={midHi} markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto">
              <path d="M1 1 L8 4.5 L1 8" fill="none" stroke="var(--ember-bright)" strokeWidth="1.6" />
            </marker>
          </defs>

          {/* lifelines */}
          {xs.map((x, i) => (
            <line key={"l" + i} x1={x} y1={lifeTop} x2={x} y2={H - 8} stroke="rgba(229,221,208,0.13)" strokeWidth="1" strokeDasharray="3 5" />
          ))}

          {/* actor boxes */}
          {actors.map((a, i) => (
            <g key={"a" + i}>
              <rect x={xs[i] - 80} y={topY - 16} width={160} height={34} rx={10}
                fill="rgba(16,23,29,0.75)" stroke={color} strokeOpacity="0.55" strokeWidth="1.2" />
              <text x={xs[i]} y={topY + 6} textAnchor="middle" fill="var(--bone)" fontSize="13.5" fontWeight="600" fontFamily="var(--font-display)">
                {a}
              </text>
            </g>
          ))}

          {/* steps */}
          {diagram.steps.map((s, i) => {
            const y = lifeTop + 36 + i * stepH;
            const isCur = i === step, isPast = i < step;
            const op = isCur ? 1 : isPast ? 0.42 : 0.1;
            const stroke = isCur ? "var(--ember-bright)" : "rgba(229,221,208,0.55)";
            const label = (
              <text x={(xs[s.from] + xs[s.to]) / 2} y={y - 9} textAnchor="middle"
                fill={isCur ? "var(--ember-bright)" : "var(--bone)"} fontSize="12.5"
                fontWeight={isCur ? "600" : "400"} fontFamily="var(--font-body)">
                {i + 1}. {s.label}
              </text>
            );
            if (s.from === s.to) {
              /* self step */
              return (
                <g key={i} opacity={op} style={{ transition: "opacity 0.4s" }}>
                  <rect x={xs[s.from] - 92} y={y - 2} width={184} height={26} rx={13}
                    fill={isCur ? "rgba(180,99,42,0.16)" : "rgba(16,23,29,0.55)"}
                    stroke={stroke} strokeWidth={isCur ? 1.4 : 1} strokeDasharray={isCur ? "none" : "4 3"} />
                  <text x={xs[s.from]} y={y + 15} textAnchor="middle"
                    fill={isCur ? "var(--ember-bright)" : "var(--bone)"} fontSize="12.5"
                    fontWeight={isCur ? "600" : "400"} fontFamily="var(--font-body)">
                    {i + 1}. {s.label}
                  </text>
                </g>
              );
            }
            const x1 = xs[s.from] + (s.from < s.to ? 6 : -6);
            const x2 = xs[s.to] + (s.from < s.to ? -10 : 10);
            return (
              <g key={i} opacity={op} style={{ transition: "opacity 0.4s" }}>
                {label}
                <line x1={x1} y1={y} x2={x2} y2={y} stroke={stroke} strokeWidth={isCur ? 2 : 1.3}
                  markerEnd={`url(#${isCur ? midHi : mid})`} />
              </g>
            );
          })}
        </svg>
      </div>

      {/* step dots */}
      <div style={{ display: "flex", gap: 6, justifyContent: "center", padding: "10px 0 14px" }}>
        {diagram.steps.map((_, i) => (
          <button key={i} className={"step-dot" + (i === step ? " current" : i < step ? " done" : "")}
            onClick={() => go(i)} aria-label={"Go to step " + (i + 1)} />
        ))}
      </div>

      {/* current step explainer */}
      <div className="glass-inset" style={{ padding: "14px 16px" }}>
        <p style={{ fontWeight: 600, fontSize: "0.95em", marginBottom: 5, color: "var(--ember-bright)" }}>
          Step {step + 1} — {cur.label}
        </p>
        <p style={{ fontSize: "0.9em", color: "var(--bone-70)", lineHeight: 1.6 }}>{cur.desc}</p>
        {cur.gotcha ? (
          <div style={{ display: "flex", gap: 9, alignItems: "flex-start", marginTop: 10, padding: "10px 12px", borderRadius: 10, background: "oklch(0.75 0.12 85 / 0.08)", border: "1px solid oklch(0.75 0.12 85 / 0.25)" }}>
            <Icon name="alert" size={14} style={{ color: "var(--warn)", marginTop: 2 }} />
            <p style={{ fontSize: "0.84em", color: "var(--bone-70)" }}>
              <strong style={{ color: "var(--warn)" }}>What can go wrong here: </strong>{cur.gotcha}
            </p>
          </div>
        ) : null}
      </div>

      {!embedded ? (
        <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="glass-inset" style={{ padding: "12px 14px", display: "flex", gap: 10, alignItems: "flex-start" }}>
            <Icon name="info" size={15} style={{ color: "var(--ember-bright)", marginTop: 2 }} />
            <p style={{ fontSize: "0.86em", color: "var(--bone-70)" }}>
              <strong style={{ color: "var(--bone)" }}>Architect notes: </strong>{diagram.notes}
            </p>
          </div>
          <DocLinks docs={diagram.docs} compact />
        </div>
      ) : null}
    </div>
  );
}

/* ---------------- Diagrams page ---------------- */
function DiagramsPage() {
  const [filter, setFilter] = React.useState("all");
  const [openId, setOpenId] = React.useState(null);
  const filters = [
    { id: "all", label: "All" },
    { id: "okta", label: "Okta" },
    { id: "auth0", label: "Auth0" },
    { id: "protocols", label: "Protocols" },
  ];
  const list = window.DIAGRAMS.filter((d) => filter === "all" || d.product === filter);

  return (
    <div className="anim-fade-up">
      <div className="page-head">
        <h1>Interactive Diagrams</h1>
        <p>Fifteen step-through flows covering the architectures and protocols you'll whiteboard with customers. Tap a diagram to explore it step by step.</p>
      </div>
      <div className="filter-bar" style={{ marginBottom: 18 }}>
        {filters.map((f) => (
          <button key={f.id} className={"pill" + (filter === f.id ? " active" : "")} onClick={() => { setFilter(f.id); }}>
            {f.label}
          </button>
        ))}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {list.map((d) =>
          openId === d.id ? (
            <div key={d.id}>
              <DiagramViewer diagram={d} />
              <button className="btn btn-ghost btn-sm" onClick={() => setOpenId(null)} style={{ marginTop: 6, color: "var(--bone-50)" }}>
                <Icon name="chevronDown" size={14} style={{ transform: "rotate(180deg)" }} /> Collapse
              </button>
            </div>
          ) : (
            <button key={d.id} className="glass-card clickable" onClick={() => setOpenId(d.id)}
              style={{ textAlign: "left", display: "flex", gap: 14, alignItems: "center", border: "1px solid var(--glass-border)" }}>
              <Icon name="diagram" size={22} style={{ color: `var(${(PRODUCT_META[d.product] || PRODUCT_META.protocols).varName})` }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", marginBottom: 3 }}>
                  <span style={{ fontWeight: 600 }}>{d.title}</span>
                  <ProductBadge product={d.product} />
                </div>
                <p style={{ fontSize: "0.84em", color: "var(--bone-50)" }}>{d.tagline}</p>
              </div>
              <span className="badge">{d.steps.length} steps</span>
              <Icon name="chevronRight" size={16} style={{ color: "var(--ember-bright)" }} />
            </button>
          )
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DiagramViewer, DiagramsPage });