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

function ProcedurePage({ peekPattern = "drawer" }) {
  const [expanded, setExpanded] = useStatePr(2);
  const [peeked, setPeeked] = useStatePr(null);
  const open = (e) => setPeeked(e);
  const close = () => setPeeked(null);

  const steps = [
    { n: "01", title: "Identify a composite structure",
      content: { recognize: "An expression of the form ∫ f(g(x)) · g′(x) dx, where g(x) appears inside another function and its derivative appears as a factor.",
        ex: "u = x² appears inside sin(x²); its derivative 2x appears (up to constant) outside." } },
    { n: "02", title: "Choose u = g(x) — the inner function",
      content: { math: "u = x²", prose: "Pick u so that du absorbs as much of the integrand as possible. Hint: pick u to be whatever's inside another function, or whose derivative appears multiplied." } },
    { n: "03", title: "Compute du = g′(x) dx", expand: true,
      content: { math: "du = 2x dx, so x dx = ½ du",
        prose: "This is the place where du and the original dx must reconcile. If du has a constant you don't have in the integrand, divide both sides by it. If you can't get the integrand to express in u and du alone, the substitution doesn't work — pick a different u.",
        author: "Authored by Aiyana Two-Crows · 2024-11" } },
    { n: "04", title: "Rewrite the integral entirely in u",
      content: { math: "∫ sin(u) · ½ du = ½ ∫ sin(u) du", prose: "If any x remains, the substitution is incomplete. Go back and rethink u." } },
    { n: "05", title: "Integrate with respect to u",
      content: { math: "= −½ cos(u) + C", prose: "A standard antiderivative table lookup." } },
    { n: "06", title: "Substitute back: u → g(x)",
      content: { math: "= −½ cos(x²) + C", prose: "Always undo the substitution. The answer should be in the original variable." } },
    { n: "07", title: "Verify by differentiation",
      content: { math: "d/dx [−½ cos(x²)] = −½ · (−sin(x²)) · 2x = x sin(x²) ✓",
        prose: "Differentiate your answer and check it matches the integrand. The chain rule reappears here, which is why this verification works." } },
  ];

  return (
    <div className="pr" style={{ position: "relative", minHeight: "100%" }}>
      <header className="pr__top">
        <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>← calculus / procedures</span>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="type-chip" style={{ background: "var(--paper-2)", borderColor: "var(--ink-3)" }}>
            <Shape kind="proc" mastery="mastered" size={10} />
            <span>procedure</span>
          </span>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>proc.calc.u_substitution</span>
        </div>
      </header>

      <section className="pr__hero">
        <div>
          <div style={{ font: "500 11px/1 var(--font-mono)", letterSpacing: "0.1em",
            textTransform: "uppercase", color: "var(--ink-4)" }}>
            procedure · differential calculus · 7 steps
          </div>
          <h1 className="pr__title">u-Substitution</h1>
          <p className="pr__when">
            Use when an integral has the form <strong>∫ f(g(x)) · g′(x) dx</strong> — composition with the inner
            function's derivative present as a multiplicative factor. This is the integral form of the
            <Cite entity={{ ...ENT.productRule, name: "chain rule", short: "chain rule", id: "thm.calc.chain_rule" }} onPeek={open} />.
          </p>
        </div>
        <aside style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ border: "1px solid var(--rule)", padding: 16, background: "var(--paper-2)" }}>
            <div style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: "0.1em",
              textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>your fluency</div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", fontSize: 12, borderBottom: "1px solid var(--rule-3)" }}><span>recognize trigger</span><span style={{ color: "var(--ink)" }}>solid</span></div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", fontSize: 12, borderBottom: "1px solid var(--rule-3)" }}><span>execute steps</span><span style={{ color: "var(--accent)" }}>frontier</span></div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", fontSize: 12 }}><span>recover from mis-pick</span><span style={{ color: "var(--ink-4)" }}>not yet</span></div>
          </div>
          <div style={{ border: "1px solid var(--rule)", padding: 16 }}>
            <div style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: "0.1em",
              textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>related</div>
            <div style={{ fontSize: 12, lineHeight: 1.7, color: "var(--ink-2)" }}>
              <div>↳ proc.calc.integration_by_parts</div>
              <div>↳ proc.calc.trig_substitution</div>
              <div>↳ proc.calc.partial_fractions</div>
            </div>
          </div>
        </aside>
      </section>

      {/* WORKED EXAMPLE */}
      <section className="pr__sect">
        <div className="pr__sect-head">
          <span className="t-meta">§</span>
          <h2 className="t-h2" style={{ margin: 0 }}>Worked example</h2>
          <span className="pr__sect-id t-mono">ex.calc.u_sub.0</span>
        </div>
        <div>
          <span className="pr__example-source-label">source integral</span>
          <div className="pr__example-source">∫ x · sin(x²) dx</div>
        </div>

        <div className="pr__steps">
          {steps.map((s, i) => {
            const isExpanded = i === expanded;
            return (
              <div key={i}
                className={`pr__step ${isExpanded ? "pr__step--expanded" : ""}`}
                onClick={() => !isExpanded && setExpanded(i)}>
                {!isExpanded ? (
                  <>
                    <div className="pr__step-n">{s.n}</div>
                    <div className="pr__step-summary">{s.title}</div>
                    <div className="pr__step-chev">›</div>
                  </>
                ) : (
                  <>
                    <div style={{ display: "grid", gridTemplateColumns: "32px 1fr auto", gap: 14, padding: "14px 18px", borderBottom: "1px solid var(--rule-3)", alignItems: "center" }}>
                      <div className="pr__step-n">{s.n}</div>
                      <div style={{ fontWeight: 500, fontSize: 15 }}>{s.title}</div>
                      <button onClick={(e) => { e.stopPropagation(); setExpanded(-1); }}
                        style={{ background: "none", border: "1px solid var(--rule-2)", padding: "3px 8px", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", cursor: "pointer" }}>collapse</button>
                    </div>
                    <div className="pr__step-content">
                      {s.content.recognize && (
                        <div className="pr__step-row">
                          <span className="pr__step-row-h">recognize</span>
                          <span className="pr__step-prose">{s.content.recognize}</span>
                        </div>
                      )}
                      {s.content.ex && (
                        <div className="pr__step-row">
                          <span className="pr__step-row-h">in this case</span>
                          <span className="pr__step-prose" style={{ fontStyle: "italic", color: "var(--ink)" }}>{s.content.ex}</span>
                        </div>
                      )}
                      {s.content.math && (
                        <div className="pr__step-row">
                          <span className="pr__step-row-h">execute</span>
                          <div className="pr__step-math">{s.content.math}</div>
                        </div>
                      )}
                      {s.content.prose && (
                        <div className="pr__step-row">
                          <span className="pr__step-row-h">why</span>
                          <span className="pr__step-prose">{s.content.prose}</span>
                        </div>
                      )}
                      {s.content.author && (
                        <div className="pr__step-row">
                          <span className="pr__step-row-h">authored</span>
                          <span className="pr__step-author">
                            <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}></span>
                            {s.content.author}
                          </span>
                        </div>
                      )}
                    </div>
                  </>
                )}
              </div>
            );
          })}
        </div>
      </section>

      {/* TRY-IT slot */}
      <section className="pr__sect">
        <div className="pr__sect-head">
          <span className="t-meta">§</span>
          <h2 className="t-h2" style={{ margin: 0 }}>Try it on your own integral</h2>
          <span className="pr__sect-id t-mono">live</span>
        </div>
        <div className="pr__tryit">
          <div className="pr__tryit-head">
            <div style={{ font: "500 11px/1 var(--font-mono)", letterSpacing: "0.1em",
              textTransform: "uppercase", color: "var(--ink-4)" }}>your integral</div>
            <div style={{ fontSize: 11, color: "var(--ink-4)" }}>the platform walks you through, no answer reveal</div>
          </div>
          <div className="pr__tryit-input-row">
            <span className="t-mono" style={{ color: "var(--ink-4)", fontSize: 18 }}>∫</span>
            <input className="pr__tryit-input" defaultValue="cos(3x) · 3 dx" />
            <button className="pr__tryit-go">begin →</button>
          </div>

          <div className="pr__tryit-flow">
            <div className="pr__tryit-line">
              <span className="pr__tryit-prompt">prompt 01</span>
              <span className="pr__tryit-content">What's the inner function g(x) here?</span>
            </div>
            <div className="pr__tryit-line pr__tryit-line--user">
              <span className="pr__tryit-prompt">you</span>
              <span className="pr__tryit-content t-mono" style={{ fontFamily: "var(--font-mono)", fontStyle: "normal" }}>3x</span>
            </div>
            <div className="pr__tryit-line">
              <span className="pr__tryit-prompt">platform</span>
              <span className="pr__tryit-content--prose">Good. Compute du.</span>
            </div>
            <div className="pr__tryit-line pr__tryit-line--user">
              <span className="pr__tryit-prompt">you</span>
              <span className="pr__tryit-content t-mono" style={{ fontFamily: "var(--font-mono)", fontStyle: "normal" }}>
                du = 3 dx<span className="pr__tryit-cursor"></span>
              </span>
            </div>
          </div>
        </div>
      </section>

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

window.ProcedurePage = ProcedurePage;