// Quizrs — shared primitives & icon set.
// Simple stroke icons (geometric, UI-chrome only).

const ICONS = {
  home:     "M3 11l9-7 9 7M5 10v9a1 1 0 001 1h3v-6h6v6h3a1 1 0 001-1v-9",
  library:  "M4 5h5v14H4zM10.5 5h4v14h-4zM16 6l4 1-3 13-4-1z",
  create:   "M12 5v14M5 12h14",
  play:     "M8 5l11 7-11 7z",
  stats:    "M4 20V10M10 20V4M16 20v-7M22 20H2",
  search:   "M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.3-4.3",
  bell:     "M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0",
  chevR:    "M9 6l6 6-6 6",
  chevL:    "M15 6l-6 6 6 6",
  chevD:    "M6 9l6 6 6-6",
  check:    "M5 12.5l4.5 4.5L20 6.5",
  x:        "M6 6l12 12M18 6L6 18",
  clock:    "M12 21a9 9 0 100-18 9 9 0 000 18zM12 7v5l3 2",
  users:    "M16 19v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 9a3 3 0 100-6 3 3 0 000 6M22 19v-2a4 4 0 00-3-3.9M16 3.1a4 4 0 010 7.8",
  trophy:   "M8 21h8M12 17v4M7 4h10v4a5 5 0 01-10 0zM7 6H4v1a3 3 0 003 3M17 6h3v1a3 3 0 01-3 3",
  filter:   "M3 5h18l-7 8v5l-4 2v-7z",
  grid:     "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
  list:     "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
  plus:     "M12 5v14M5 12h14",
  dots:     "M5 12h.01M12 12h.01M19 12h.01",
  trash:    "M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13",
  copy:     "M9 9h11v11H9zM5 15H4V4h11v1",
  eye:      "M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7zM12 15a3 3 0 100-6 3 3 0 000 6",
  sparkle:  "M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z",
  drag:     "M9 6h.01M9 12h.01M9 18h.01M15 6h.01M15 12h.01M15 18h.01",
  arrowUp:  "M12 19V5M6 11l6-6 6 6",
  arrowDn:  "M12 5v14M18 13l-6 6-6-6",
  arrowR:   "M5 12h14M13 6l6 6-6 6",
  flag:     "M5 21V4M5 4l7 1 7-1v9l-7 1-7-1",
  settings: "M12 15a3 3 0 100-6 3 3 0 000 6M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 11-4 0v-.1a1.6 1.6 0 00-2.7-1.1l-.1.1a2 2 0 11-2.8-2.8l.1-.1A1.6 1.6 0 004.6 15H4.5a2 2 0 110-4h.1a1.6 1.6 0 001.1-2.7l-.1-.1a2 2 0 112.8-2.8l.1.1A1.6 1.6 0 0011 4.5h0V4.5a2 2 0 014 0v.1a1.6 1.6 0 002.7 1.1l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-1.1 2.7v0H21a2 2 0 010 4h-.1a1.6 1.6 0 00-1.5 1z",
  zap:      "M13 2L4 14h7l-1 8 9-12h-7z",
  star:     "M12 3l2.9 6 6.6.9-4.8 4.6 1.1 6.5L12 18l-5.8 3 1.1-6.5L2.5 9.9 9 9z",
  calendar: "M7 3v3M17 3v3M3.5 9h17M4 6h16v15H4z",
  globe:    "M12 21a9 9 0 100-18 9 9 0 000 18zM3 12h18M12 3c2.5 2.5 3.8 5.7 3.8 9S14.5 18.5 12 21M12 3C9.5 5.5 8.2 8.7 8.2 12S9.5 18.5 12 21",
  edit:     "M4 20h4L18 10l-4-4L4 16zM14 6l4 4",
  shuffle:  "M16 3h5v5M21 3l-7 7M4 20l5-5M3 16v5h5M3 3l18 18",
};

function Icon({ name, size = 18, sw = 1.7, className = "", style }) {
  const d = ICONS[name];
  return (
    <svg className={"ic " + className} width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={sw}
      strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {d.split("M").filter(Boolean).map((seg, i) => <path key={i} d={"M" + seg} />)}
    </svg>
  );
}

function Btn({ kind = "ghost", sm, icon, iconR, children, className = "", ...rest }) {
  return (
    <button className={`btn btn-${kind} ${sm ? "btn-sm" : ""} ${children ? "" : "btn-icon"} ${className}`} {...rest}>
      {icon && <Icon name={icon} size={sm ? 15 : 16} />}
      {children}
      {iconR && <Icon name={iconR} size={sm ? 15 : 16} />}
    </button>
  );
}

function Badge({ tone = "", dot, children, className = "", ...rest }) {
  return <span className={`badge ${tone ? "badge-" + tone : ""} ${dot ? "dot" : ""} ${className}`} {...rest}>{children}</span>;
}

const AV_COLORS = ["#4f46e5", "#0e9f6e", "#d97757", "#2f74d0", "#b4458f", "#c8881b", "#6d5ae0", "#0d9488"];
function avColor(seed) {
  let h = 0; for (const c of String(seed)) h = (h * 31 + c.charCodeAt(0)) >>> 0;
  return AV_COLORS[h % AV_COLORS.length];
}
function Avatar({ name = "?", size = 28, src }) {
  const initials = String(name).split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
  return (
    <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.4, background: avColor(name) }}>
      {initials}
    </div>
  );
}

function Progress({ pct = 0, h = 6, color }) {
  return <div className="progress" style={{ height: h }}><i style={{ width: pct + "%", background: color }} /></div>;
}

function Stat({ k, icon, v, delta, up }) {
  return (
    <div className="stat">
      <div className="k">{icon && <Icon name={icon} size={15} />}{k}</div>
      <div className="v">{v}</div>
      {delta != null && (
        <div className={`d ${up ? "up" : "down"}`}>
          <Icon name={up ? "arrowUp" : "arrowDn"} size={13} sw={2.2} />{delta}
        </div>
      )}
    </div>
  );
}

// Quiz cover — flat tinted block with a glyph, NOT a hand-drawn illustration.
const COVER_TINTS = {
  indigo: ["#eef0ff", "#4f46e5"], green: ["#e7f6ee", "#0e9f6e"], coral: ["#fbeae3", "#d97757"],
  blue: ["#e7f0fb", "#2f74d0"], plum: ["#f3e8f3", "#b4458f"], amber: ["#fbf0db", "#c8881b"],
  teal: ["#e1f3f1", "#0d9488"], slate: ["#eceef2", "#5b6472"],
};
function Cover({ tint = "indigo", glyph = "zap", h = 96, r }) {
  const [bg, fg] = COVER_TINTS[tint] || COVER_TINTS.indigo;
  return (
    <div style={{
      height: h, borderRadius: r ?? "var(--r-sm)", background: bg,
      display: "grid", placeItems: "center", position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", inset: 0, opacity: .5,
        background: `radial-gradient(120% 120% at 80% 0%, ${bg} 40%, color-mix(in srgb, ${fg} 14%, ${bg}) 100%)` }} />
      <Icon name={glyph} size={h * 0.34} sw={1.5} style={{ color: fg, opacity: .9, position: "relative" }} />
    </div>
  );
}

function SegBar({ value, onChange, options }) {
  return (
    <div style={{ display: "inline-flex", padding: 3, gap: 2, background: "var(--surface-2)", borderRadius: "var(--r-sm)" }}>
      {options.map(([val, label, icon]) => (
        <button key={val} onClick={() => onChange(val)}
          style={{
            display: "inline-flex", alignItems: "center", gap: 6, border: 0, cursor: "pointer",
            font: "inherit", fontSize: 13, fontWeight: 600, padding: icon && !label ? "5px 8px" : "5px 11px",
            borderRadius: "calc(var(--r-sm) - 2px)",
            background: value === val ? "var(--surface)" : "transparent",
            color: value === val ? "var(--ink)" : "var(--ink-3)",
            boxShadow: value === val ? "var(--shadow-sm)" : "none",
          }}>
          {icon && <Icon name={icon} size={15} />}{label}
        </button>
      ))}
    </div>
  );
}

// Small spinner + empty/error states reused across screens.
function Spinner({ size = 22 }) {
  return (
    <span className="qz-spin" style={{ width: size, height: size }} aria-label="Loading" />
  );
}

function Loading({ label = "Loading…" }) {
  return (
    <div className="col" style={{ alignItems: "center", justifyContent: "center", gap: 12, padding: 56, color: "var(--ink-3)" }}>
      <Spinner /> <span style={{ fontSize: 13.5, fontWeight: 600 }}>{label}</span>
    </div>
  );
}

function EmptyState({ icon = "library", title, hint, action }) {
  return (
    <div className="card card-pad" style={{ textAlign: "center", padding: 48, color: "var(--ink-3)" }}>
      <Icon name={icon} size={28} style={{ opacity: .5 }} />
      {title && <div style={{ marginTop: 10, fontWeight: 600, color: "var(--ink-2)" }}>{title}</div>}
      {hint && <div style={{ fontSize: 13, marginTop: 3 }}>{hint}</div>}
      {action && <div style={{ marginTop: 16 }}>{action}</div>}
    </div>
  );
}

function ErrorNote({ children }) {
  if (!children) return null;
  return (
    <div className="card card-pad" style={{ borderColor: "var(--red)", background: "var(--red-tint)", color: "var(--red-ink, #9b1c1c)", fontSize: 13.5, fontWeight: 500, marginBottom: 14 }}>
      {children}
    </div>
  );
}

Object.assign(window, { Icon, ICONS, Btn, Badge, Avatar, avColor, Progress, Stat, Cover, COVER_TINTS, SegBar, Spinner, Loading, EmptyState, ErrorNote });