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

function ComparativeView({ peekPattern = "drawer" }) {
  // Three concepts students reliably confuse: derivative / differential / limit
  const cols = [
    { name: "Limit", id: "def.calc.limit", kind: "def", mastery: "mastered",
      cells: {
        formal: "lim_{x→a} f(x) = L iff ∀ε>0 ∃δ>0 with 0 < |x−a| < δ ⟹ |f(x)−L| < ε.",
        kind: "Definition · ε–δ",
        type: "value (number, possibly ∞)",
        depends: "—",
        operates_on: "function value approached by inputs",
        notation: "lim_{x→a} f(x)",
        physical: "approached value; what f \"would equal\" at a, if continuous.",
        ex: "lim_{x→0} sin(x)/x  =  1",
        gotcha: "The limit need not equal f(a). f might not even be defined at a.",
      }},
    { name: "Derivative", id: "def.calc.derivative", kind: "def", mastery: "frontier",
      cells: {
        formal: "f′(x) = lim_{h→0} [f(x+h) − f(x)] / h, when this limit exists.",
        kind: "Definition · built from limit",
        type: "function f′ : ℝ → ℝ (or value at a point)",
        depends: "limit",
        operates_on: "rate of change of f at each x",
        notation: "f′(x), df/dx, ḟ, Df",
        physical: "instantaneous slope; instantaneous velocity if f is position.",
        ex: "f(x) = x²  ⟹  f′(x) = 2x",
        gotcha: "The derivative is itself a function — not a number — unless evaluated at a point.",
      }},
    { name: "Differential", id: "def.calc.differential", kind: "def", mastery: "review-due",
      cells: {
        formal: "df = f′(x) · dx — a linear approximation of Δf for small dx.",
        kind: "Definition · linear form",
        type: "linear functional / 1-form",
        depends: "derivative",
        operates_on: "increments dx, returning approximate Δf",
        notation: "df, df_x(h)",
        physical: "best linear estimate of how f changes when x nudges by dx.",
        ex: "f(x) = x²,  dx = 0.01,  x = 3  ⟹  df = 6 · 0.01 = 0.06",
        gotcha: "df ≠ Δf in general — they agree only in the limit, or for linear f.",
      }},
  ];

  const rows = [
    { id: "formal", label: "Formal definition", tag: "math" },
    { id: "kind", label: "Kind of object", tag: "ontology", diverges: true },
    { id: "type", label: "Returns", tag: "type", diverges: true },
    { id: "depends", label: "Depends on", tag: "graph" },
    { id: "operates_on", label: "Operates on", tag: "semantics" },
    { id: "notation", label: "Notation", tag: "syntax" },
    { id: "physical", label: "Physical reading", tag: "intuition" },
    { id: "ex", label: "Worked example", tag: "concrete" },
    { id: "gotcha", label: "Common confusion", tag: "pitfall", diverges: true },
  ];

  const formulaRows = new Set(["formal", "ex", "notation"]);

  return (
    <div className="cmp" style={{ minHeight: "100%" }}>
      <header className="cmp__top">
        <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>← calculus / comparative</span>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="type-chip" style={{ borderColor: "var(--accent)", color: "var(--accent)" }}>
            <span style={{ display: "inline-block", width: 9, height: 9, background: "var(--accent)" }}></span>
            <span>comparative</span>
          </span>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-4)" }}>cmp.calc.derivative_diff_limit</span>
        </div>
      </header>

      <section className="cmp__hero">
        <div style={{ font: "500 11px/1 var(--font-mono)", letterSpacing: "0.1em",
          textTransform: "uppercase", color: "var(--ink-4)" }}>
          comparative concept view · 3 entities · 9 dimensions
        </div>
        <h1 className="cmp__hero-h">Limit · Derivative · Differential</h1>
        <p className="cmp__hero-sub">
          Three closely related concepts students reliably confuse. Where the rows agree the concepts coincide;
          the <span style={{ color: "var(--accent)" }}>shaded rows</span> are the ontological hinges where they
          come apart.
        </p>
      </section>

      <div className="cmp__legend">
        <span><span className="cmp__legend-swatch"></span>shaded row · concepts diverge here</span>
        <span style={{ color: "var(--ink-4)" }}>·</span>
        <span>peeked column id at row label · taggable for cross-domain re-use</span>
      </div>

      <div className="cmp__table">
        {/* header row */}
        <div className="cmp__row cmp__row--header">
          <div className="cmp__row-label">concept →</div>
          {cols.map((c) => (
            <div key={c.id} className="cmp__cell">
              <div className="cmp__col-head">
                <div className="cmp__col-shape">
                  <Shape kind={c.kind} mastery={c.mastery} size={11} />
                  <span style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: "0.08em",
                    textTransform: "uppercase", color: c.mastery === "frontier" ? "var(--accent)" :
                      c.mastery === "review-due" ? "var(--paper)" : "var(--paper)" }}>
                    {c.mastery === "review-due" ? "review due · 2d" :
                     c.mastery === "frontier" ? "frontier" : "mastered"}
                  </span>
                </div>
                <div className="cmp__col-name">{c.name}</div>
                <div className="cmp__col-id">{c.id}</div>
              </div>
            </div>
          ))}
        </div>

        {/* body rows */}
        {rows.map((r) => (
          <div key={r.id} className={`cmp__row ${r.diverges ? "cmp__row--diverges" : ""}`}>
            <div className="cmp__row-label">
              <span>{r.label}</span>
              <span className="cmp__row-tag">{r.tag}</span>
            </div>
            {cols.map((c) => (
              <div key={c.id + r.id} className="cmp__cell">
                {formulaRows.has(r.id)
                  ? <div className="cmp__cell-formula">{c.cells[r.id]}</div>
                  : r.id === "depends"
                    ? <div className="cmp__cell-mono">{c.cells[r.id]}</div>
                    : <div className="cmp__cell-prose">{c.cells[r.id]}</div>}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

window.ComparativeView = ComparativeView;