/* global React */
const { useState } = React;

// Helper — shape glyphs (matches mastery legend)
const Shape = ({ kind, mastery = "mastered", size = 12 }) => {
  const fill = mastery === "frontier" ? "var(--accent)" :
               mastery === "mastered" ? "var(--ink)" : "none";
  const stroke = mastery === "locked" ? "var(--ink-4)" :
                 mastery === "review" ? "var(--ink-3)" : "var(--ink)";
  const sw = 1.5;
  const dash = mastery === "locked" ? "2,2" : "0";

  if (kind === "def") return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <circle cx="8" cy="8" r="6" fill={fill} stroke={stroke} strokeWidth={sw} strokeDasharray={dash} />
    </svg>
  );
  if (kind === "thm" || kind === "lem") return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <rect x="2" y="2" width="12" height="12" fill={fill} stroke={stroke} strokeWidth={sw} strokeDasharray={dash} />
    </svg>
  );
  if (kind === "ax") return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <polygon points="8,2 14,8 8,14 2,8" fill={fill} stroke={stroke} strokeWidth={sw} strokeDasharray={dash} />
    </svg>
  );
  if (kind === "proc") return (
    <svg width={size} height={size} viewBox="0 0 16 16" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <polygon points="3,4 13,4 14,12 2,12" fill={fill} stroke={stroke} strokeWidth={sw} strokeDasharray={dash} />
    </svg>
  );
  return null;
};

// ─── Peek primitive ─────────────────────────────────────
// pattern: 'drawer' | 'popover' | 'inline'
function Peek({ pattern = "drawer", entity, anchor, onClose, scope }) {
  if (!entity) return null;

  const card = (
    <div className="peek-card" onClick={(e) => e.stopPropagation()}>
      <div className="peek-head">
        <Shape kind={entity.kind} mastery={entity.mastery} size={11} />
        <span style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)" }}>
          {entity.kindLabel}
        </span>
        <span style={{ fontWeight: 500 }}>{entity.name}</span>
        <span className="peek-id t-mono">{entity.id}</span>
        <button className="peek-close" onClick={onClose}>esc</button>
      </div>
      <div className="peek-statement">{entity.statement}</div>
      {entity.uses && (
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", margin: "12px 0" }}>
          {entity.uses.map((u, i) => (
            <span key={i} style={{
              fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)",
              padding: "4px 8px", background: "var(--paper-2)", border: "1px solid var(--rule-3)"
            }}>{u}</span>
          ))}
        </div>
      )}
      <div className="peek-foot">
        <button className="btn">open page</button>
        <button className="btn">peek dependencies</button>
      </div>
    </div>
  );

  if (pattern === "drawer") {
    return <div className={`peek peek--drawer`} onClick={onClose}>{card}</div>;
  }
  if (pattern === "popover") {
    return (
      <div className="peek peek--popover" style={{
        position: "absolute", top: anchor?.top || 0, left: anchor?.left || 0
      }} onClick={onClose}>{card}</div>
    );
  }
  return <div className="peek peek--inline">{card}</div>;
}

// Cite — clickable entity reference
function Cite({ entity, onPeek }) {
  return (
    <a className="cite" onClick={(e) => { e.preventDefault(); onPeek(entity); }} href="#">
      {entity.short || entity.name}
    </a>
  );
}

// Demo entity registry
const ENT = {
  productRule: {
    id: "thm.calc.product_rule", kind: "thm", kindLabel: "Theorem",
    name: "Product rule", short: "product rule", mastery: "mastered",
    statement: "If f and g are differentiable at x, then (fg)′(x) = f′(x)·g(x) + f(x)·g′(x).",
    uses: ["lim.calc.0", "def.calc.derivative"]
  },
  derivative: {
    id: "def.calc.derivative", kind: "def", kindLabel: "Definition",
    name: "Derivative", short: "derivative", mastery: "frontier",
    statement: "f′(x) = lim_{h→0} [f(x+h) − f(x)] / h, when the limit exists.",
    uses: ["def.calc.limit"]
  },
  limit: {
    id: "def.calc.limit", kind: "def", kindLabel: "Definition",
    name: "Limit", short: "limit", mastery: "mastered",
    statement: "lim_{x→a} f(x) = L iff ∀ε>0 ∃δ>0 such that 0 < |x−a| < δ ⟹ |f(x)−L| < ε.",
    uses: []
  },
  composition: {
    id: "def.calc.composition", kind: "def", kindLabel: "Definition",
    name: "Function composition", short: "composition", mastery: "mastered",
    statement: "(f ∘ g)(x) = f(g(x)).",
    uses: []
  },
  diffAtPoint: {
    id: "def.calc.diff_at_point", kind: "def", kindLabel: "Definition",
    name: "Differentiable at a point", short: "differentiable", mastery: "mastered",
    statement: "f is differentiable at a iff f′(a) exists.",
    uses: ["def.calc.derivative"]
  },
};

window.Shape = Shape;
window.Peek = Peek;
window.Cite = Cite;
window.ENT = ENT;