// Mersenne Checkpoint — shared sketch atoms

const Logo = ({ size = "md" }) => (
  <span className={"logo3x3" + (size === "lg" ? " lg" : size === "huge" ? " huge" : "")}>
    <i/><i/><i/><i/><i/><i/><i/><i/><i/>
  </span>
);

const Brand = ({ size = "md" }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
    <Logo size={size}/>
    <span className="serif" style={{ fontSize: size === "lg" ? 28 : 20, letterSpacing: "0.01em" }}>
      mersenne <span className="hand red">checkpoint</span>
    </span>
  </span>
);

// Strand metadata
const STRANDS = [
  { key: "num", name: "Number",              color: "#FFC000", chip: "num", count: 47 },
  { key: "alg", name: "Algebra",             color: "#4472C4", chip: "alg", count: 30 },
  { key: "grp", name: "Graphs",              color: "#70AD47", chip: "grp", count: 9  },
  { key: "rat", name: "Ratio & Proportion",  color: "#ED7D31", chip: "rat", count: 8  },
  { key: "geo", name: "Geometry & Measure",  color: "#C00080", chip: "geo", count: 39 },
  { key: "prb", name: "Probability",         color: "#5B9BD5", chip: "prb", count: 9  },
  { key: "sta", name: "Statistics & Data",   color: "#BF8F00", chip: "sta", count: 18 },
];

const StrandChip = ({ s, mono = false }) => (
  <span className={"chip " + s.chip} style={mono ? { fontFamily: "var(--font-mono)" } : null}>
    <span className="dot"/> {s.name}
  </span>
);

// Sketch box — wrapper that applies wobble + outline
const Box = ({ children, w, h, p = 14, style, className = "", dashed = false, wobble = "soft", color }) => {
  const filter = wobble === "none" ? "none"
    : wobble === "heavy" ? "url(#wobbleHeavy)"
    : wobble === "med" ? "url(#wobble)"
    : "url(#wobbleSoft)";
  return (
    <div className={"sk-box " + (dashed ? "sk-box-dashed " : "") + className}
         style={{
           width: w, height: h, padding: p,
           filter,
           borderColor: color,
           ...style,
         }}>
      {children}
    </div>
  );
};

// Hand-drawn underline used on section titles
const HU = ({ children, style }) => (
  <span className="h-uline" style={style}>{children}</span>
);

// Question image placeholder
const QImage = ({ w = "100%", h = 220, label = "Question PNG · MCK-Y9-0247", style }) => (
  <div className="img-placeholder" style={{ width: w, height: h, ...style }}>
    <div>
      <div className="mono">{label}</div>
      <div className="hand soft" style={{ marginTop: 4 }}>question.png</div>
    </div>
  </div>
);

// Diagram placeholder with axes (varies look)
const DiagramPH = ({ w = 220, h = 160, kind = "axes" }) => (
  <div className="sk-box" style={{ width: w, height: h, position: "relative", background: "rgba(253,251,243,0.5)" }}>
    <svg viewBox="0 0 220 160" width="100%" height="100%" style={{ display: "block" }}>
      {kind === "axes" && (
        <>
          <path d="M30 130 L200 130" stroke="#2a2724" strokeWidth="1.2" fill="none"/>
          <path d="M30 130 L30 20" stroke="#2a2724" strokeWidth="1.2" fill="none"/>
          <path d="M30 110 L70 80 L120 60 L180 30" stroke="#c44a3e" strokeWidth="1.6" fill="none"/>
          <circle cx="70" cy="80" r="2.5" fill="#c44a3e"/>
          <circle cx="120" cy="60" r="2.5" fill="#c44a3e"/>
          <circle cx="180" cy="30" r="2.5" fill="#c44a3e"/>
        </>
      )}
      {kind === "triangle" && (
        <>
          <path d="M50 130 L180 130 L120 40 Z" stroke="#2a2724" strokeWidth="1.4" fill="none"/>
          <text x="58" y="125" fontFamily="var(--font-hand)" fontSize="13" fill="#2a2724">A</text>
          <text x="180" y="125" fontFamily="var(--font-hand)" fontSize="13" fill="#2a2724">B</text>
          <text x="120" y="36" fontFamily="var(--font-hand)" fontSize="13" fill="#2a2724">C</text>
          <text x="115" y="148" fontFamily="var(--font-hand)" fontSize="12" fill="#5a564f">8.4 cm</text>
        </>
      )}
      {kind === "bar" && (
        <>
          <path d="M28 130 L195 130" stroke="#2a2724" strokeWidth="1.2"/>
          {[40, 70, 100, 130, 160].map((x,i) => (
            <rect key={i} x={x} y={130 - (20 + i*14)} width="22" height={20 + i*14} fill="#5B9BD5" opacity="0.5" stroke="#2a2724"/>
          ))}
        </>
      )}
    </svg>
  </div>
);

// Strand mini bar
const StrandBar = ({ s, done, total, w = 220, showPct = true }) => {
  const pct = Math.round((done / total) * 100);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{ width: 96, fontFamily: "var(--font-body)", fontSize: 13 }}>{s.name}</div>
      <div style={{ width: w, height: 10, border: "1px solid var(--ink)", background: "var(--paper-warm)", position: "relative" }}>
        <div style={{ width: `${pct}%`, height: "100%", background: s.color, opacity: 0.85 }}/>
      </div>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-soft)", minWidth: 60 }}>
        {done}/{total} {showPct && <span> · {pct}%</span>}
      </div>
    </div>
  );
};

// Heatmap row — block-style
const HeatRow = ({ s, scores }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
    <div style={{ width: 110, fontSize: 12, fontFamily: "var(--font-body)" }}>{s.name}</div>
    <div className="hm-grid"
         style={{ gridTemplateColumns: `repeat(${scores.length}, 1fr)`, flex: 1, color: s.color }}>
      {scores.map((m, i) => <div key={i} className={"hm-cell m" + m}/>)}
    </div>
  </div>
);

// Circle heatmap row
const HeatRowCirc = ({ s, scores }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
    <div style={{ width: 110, fontSize: 12 }}>{s.name}</div>
    <div style={{ display: "flex", flexWrap: "wrap", gap: 4, color: s.color, flex: 1 }}>
      {scores.map((m, i) => <span key={i} className={"hm-circ m" + m}/>)}
    </div>
  </div>
);

// Top bar shared in many screens
const TopBar = ({ left, right, center, style }) => (
  <div style={{
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "10px 16px",
    borderBottom: "1.2px solid var(--ink)",
    ...style,
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>{left}</div>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{center}</div>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{right}</div>
  </div>
);

// Star favourite control
const Fave = ({ on = false, big = false }) => (
  <span className={"star " + (on ? "" : "empty")} style={{ fontSize: big ? 28 : 18 }}>★</span>
);

// Pen toolbar
const PenToolbar = ({ saved = "2s ago" }) => (
  <div className="toolbar">
    <button className="tool active" title="Pen">✎</button>
    <button className="tool" title="Highlight">▰</button>
    <button className="tool" title="Text">A</button>
    <button className="tool" title="Eraser">▱</button>
    <button className="tool" title="Undo">↶</button>
    <span style={{ width: 1, background: "var(--rule)", margin: "4px 6px" }}/>
    <span className="tool" style={{ width: "auto", padding: "0 8px", color: "var(--ink-soft)", fontFamily: "var(--font-mono)", fontSize: 11 }}>
      saved {saved}
    </span>
  </div>
);

// "Hand-written" tag — like Post-It style
const StickyNote = ({ children, color = "#fff4b8", rot = -2, w = 160, style }) => (
  <div style={{
    background: color,
    padding: "10px 12px",
    boxShadow: "1px 2px 0 rgba(0,0,0,0.12)",
    transform: `rotate(${rot}deg)`,
    fontFamily: "var(--font-hand)",
    fontSize: 16,
    color: "#3a2a14",
    width: w,
    lineHeight: 1.1,
    ...style,
  }}>{children}</div>
);

Object.assign(window, {
  Logo, Brand, STRANDS, StrandChip, Box, HU, QImage, DiagramPH,
  StrandBar, HeatRow, HeatRowCirc, TopBar, Fave, PenToolbar, StickyNote,
});