/* global React, Shape, Peek, Cite, ENT */
const { useState: useStateTh } = React;

function TheoremPage({ peekPattern = "drawer" }) {
  const [peeked, setPeeked] = useStateTh(null);
  const open = (e) => setPeeked(e);
  const close = () => setPeeked(null);

  return (
    <div className="th" style={{ position: "relative", minHeight: "100%" }}>
      {/* Top bar */}
      <header className="th__top">
        <div className="th__top-l">
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>← calculus / theorems</span>
        </div>
        <div className="th__top-r">
          <span className="type-chip type-chip--thm">
            <Shape kind="thm" mastery="mastered" size={9} />
            <span>theorem</span>
          </span>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>thm.calc.chain_rule</span>
        </div>
      </header>

      {/* HERO */}
      <section className="th__hero">
        <div className="th__title-block">
          <div className="th__kicker">
            <span>theorem</span>
            <span style={{ width: 18, height: 1, background: "var(--ink-4)" }}></span>
            <span>differential calculus</span>
            <span style={{ width: 18, height: 1, background: "var(--ink-4)" }}></span>
            <span className="th__kicker--accent">★★★★★ — load-bearing</span>
          </div>
          <h1 className="th__title">Chain rule</h1>
          <div className="th__statement">
            If <em>g</em> is differentiable at <em>x</em> and <em>f</em> is differentiable at <em>g(x)</em>,
            then the composition <em>f∘g</em> is differentiable at <em>x</em>, and
            <div style={{
              fontFamily: "var(--font-text)", fontSize: 30, marginTop: 14,
              textAlign: "center", color: "var(--ink)"
            }}>
              (f ∘ g)′(x) = f′(g(x)) · g′(x).
            </div>
          </div>

          <div className="th__hyp-row">
            <div className="th__hyp">
              <div className="th__hyp-label">hypothesis · H1</div>
              <div className="th__hyp-body">
                <Cite entity={ENT.composition} onPeek={open} /> <em>g</em> is{" "}
                <Cite entity={ENT.diffAtPoint} onPeek={open} /> at <em>x</em>.
              </div>
            </div>
            <div className="th__hyp">
              <div className="th__hyp-label">hypothesis · H2</div>
              <div className="th__hyp-body">
                <em>f</em> is <Cite entity={ENT.diffAtPoint} onPeek={open} /> at <em>g(x)</em>.
              </div>
            </div>
          </div>
        </div>

        {/* Right rail: quick refs */}
        <aside className="th__rail">
          <div className="th__qref">
            <div style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: "0.1em",
              textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>
              learner state
            </div>
            <div className="th__qref-row"><span>statement</span><span style={{ color: "var(--ink)" }}>recognized</span></div>
            <div className="th__qref-row"><span>proof</span><span style={{ color: "var(--accent)" }}>frontier</span></div>
            <div className="th__qref-row"><span>application</span><span style={{ color: "var(--ink-3)" }}>2 / 5 patterns</span></div>
            <div className="th__qref-row"><span>retention</span><span className="t-mono">0.71 · due in 4d</span></div>
          </div>
          <div className="th__qref">
            <div style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: "0.1em",
              textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>
              prerequisites · 4
            </div>
            {[
              ["def", "Derivative", "def.calc.derivative", "frontier"],
              ["def", "Function composition", "def.calc.composition", "mastered"],
              ["def", "Differentiable at point", "def.calc.diff_at_point", "mastered"],
              ["def", "Limit of a quotient", "def.calc.limit_quot", "mastered"],
            ].map(([k, n, id, m]) => (
              <div key={id} className="th__qref-row" style={{ alignItems: "center", gap: 8 }}>
                <span style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <Shape kind={k} mastery={m} size={9} />
                  <span>{n}</span>
                </span>
                <span className="t-mono" style={{ color: "var(--ink-4)", fontSize: 10 }}>{id.split(".").pop()}</span>
              </div>
            ))}
          </div>
        </aside>
      </section>

      {/* PROOF teaser */}
      <section className="th__sect">
        <div className="th__sect-head">
          <span className="t-meta">§</span>
          <h2 className="t-h2" style={{ margin: 0 }}>Proof — sketch</h2>
          <span className="th__sect-id t-mono">pf.calc.chain_rule.0</span>
        </div>
        <div className="th__proof-teaser">
          <div className="th__proof-teaser-head">
            <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Direct from the definition of the derivative as a limit.</div>
            <div style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>3 of 7 steps shown</div>
          </div>
          <div className="th__proof-step">
            <div className="th__proof-n">01</div>
            <div className="th__proof-stmt">
              Write the difference quotient: <em>[(f∘g)(x+h) − (f∘g)(x)] / h</em>.
            </div>
            <div className="th__proof-just">def.calc.derivative</div>
          </div>
          <div className="th__proof-step">
            <div className="th__proof-n">02</div>
            <div className="th__proof-stmt">
              Multiply and divide by Δg = g(x+h) − g(x), assuming Δg ≠ 0 nearby.
            </div>
            <div className="th__proof-just">algebraic manipulation</div>
          </div>
          <div className="th__proof-step">
            <div className="th__proof-n">03</div>
            <div className="th__proof-stmt">
              The expression factors into [Δf / Δg] · [Δg / h], two difference quotients.
            </div>
            <div className="th__proof-just">factoring</div>
          </div>
          <div className="th__proof-fade">— 4 more steps · including the Δg=0 edge case —</div>
          <button className="th__proof-expand">Open full proof →</button>
        </div>
      </section>

      {/* STATEMENT VARIANTS */}
      <section className="th__sect">
        <div className="th__sect-head">
          <span className="t-meta">§</span>
          <h2 className="t-h2" style={{ margin: 0 }}>Statement variants</h2>
          <span className="th__sect-id t-mono">5 forms</span>
        </div>
        <div style={{ font: "var(--font-text) 14px/1.55", color: "var(--ink-3)", marginBottom: 14, maxWidth: "62ch" }}>
          The same theorem speaks five different languages. Internalize the one that matches your problem;
          recognize the others when authors switch notation.
        </div>
        <div className="th__variants">
          <div className="th__var-grid">
            <div className="th__var-h">notation</div>
            <div className="th__var-h">form</div>
            <div className="th__var-h">when used</div>
            <div className="th__var-h">due</div>

            <div className="th__var-cell">
              <div className="th__var-name">Lagrange</div>
              <div className="th__var-id">primary</div>
            </div>
            <div className="th__var-cell th__var-formula">(f ∘ g)′(x) = f′(g(x)) · g′(x)</div>
            <div className="th__var-cell th__var-domain">single-variable, named functions</div>
            <div className="th__var-cell t-mono" style={{ color: "var(--ink-4)" }}>recognized</div>

            <div className="th__var-cell">
              <div className="th__var-name">Leibniz</div>
              <div className="th__var-id">cancellation</div>
            </div>
            <div className="th__var-cell th__var-formula">dy/dx = (dy/du)(du/dx)</div>
            <div className="th__var-cell th__var-domain">u-substitution, related rates</div>
            <div className="th__var-cell t-mono" style={{ color: "var(--accent)" }}>frontier</div>

            <div className="th__var-cell">
              <div className="th__var-name">Newton</div>
              <div className="th__var-id">time derivative</div>
            </div>
            <div className="th__var-cell th__var-formula">ẏ = (dy/du) · u̇</div>
            <div className="th__var-cell th__var-domain">classical mechanics, kinematics</div>
            <div className="th__var-cell t-mono" style={{ color: "var(--ink-4)" }}>recognized</div>

            <div className="th__var-cell">
              <div className="th__var-name">Euler</div>
              <div className="th__var-id">operator</div>
            </div>
            <div className="th__var-cell th__var-formula">D(f ∘ g) = (Df ∘ g) · Dg</div>
            <div className="th__var-cell th__var-domain">differential operators, ODE theory</div>
            <div className="th__var-cell t-mono" style={{ color: "var(--ink-3)" }}>review · 2d</div>

            <div className="th__var-cell">
              <div className="th__var-name">Multi-variable</div>
              <div className="th__var-id">vector form</div>
            </div>
            <div className="th__var-cell th__var-formula">D(f ∘ g)(x) = Df(g(x)) ∘ Dg(x)</div>
            <div className="th__var-cell th__var-domain">ℝⁿ → ℝᵐ, Jacobians</div>
            <div className="th__var-cell t-mono" style={{ color: "var(--ink-5)" }}>locked</div>
          </div>
        </div>
      </section>

      {/* USES / USED BY */}
      <section className="th__sect">
        <div className="th__uses">
          <div className="th__uses-col">
            <div className="th__uses-h">used in proofs of — 6</div>
            {[
              ["thm", "Quotient rule", "thm.calc.quotient_rule"],
              ["thm", "Substitution rule (integration)", "thm.calc.substitution"],
              ["thm", "Implicit differentiation", "thm.calc.implicit_diff"],
              ["thm", "Inverse function derivative", "thm.calc.inverse_deriv"],
              ["thm", "Logarithmic differentiation", "thm.calc.log_diff"],
              ["lem", "Leibniz rule (n-th derivative)", "lem.calc.leibniz_n"],
            ].map(([k, n, id]) => (
              <div key={id} className="th__use-item">
                <span className="th__use-shape"><Shape kind={k} mastery="mastered" size={11} /></span>
                <span className="th__use-name">{n}</span>
                <span className="th__use-id">{id}</span>
              </div>
            ))}
          </div>
          <div className="th__uses-col">
            <div className="th__uses-h">used in problems — 24</div>
            {[
              ["proc", "u-substitution walkthrough", "proc.calc.u_sub"],
              ["thm", "Related rates · ladder", "prob.calc.0312"],
              ["thm", "Implicit · circle tangent", "prob.calc.0418"],
              ["proc", "Differentiate sin(x²)", "prob.calc.0843"],
              ["thm", "Volume from cross-section", "prob.calc.1102"],
              ["thm", "20 more in queue", "—"],
            ].map(([k, n, id], i) => (
              <div key={i} className="th__use-item">
                <span className="th__use-shape"><Shape kind={k} mastery={i < 3 ? "mastered" : "frontier"} size={11} /></span>
                <span className="th__use-name">{n}</span>
                <span className="th__use-id">{id}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Peek pattern={peekPattern} entity={peeked} onClose={close} />
    </div>
  );
}

window.TheoremPage = TheoremPage;