/* MathMentor LMS — shared auth-screen shell.
   Composes the design system's Card / Button / Input / Badge.
   Exports to window at the end (Babel scripts do not share scope). */
const { Button, Card, Input, Badge } = window.MathMentorDesignSystem_e84fdd;

const mmShellCss = {
  page: { minHeight: "100vh", background: "var(--canvas-soft)", fontFamily: "var(--font-sans)", display: "flex", flexDirection: "column" },
  main: { flex: 1, display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "48px 20px 64px" },
  col: { width: "100%", maxWidth: 520, display: "flex", flexDirection: "column", gap: 20 }
};

function MMBrand() {
  return React.createElement("a", { href: "login.html", style: { display: "inline-flex", alignItems: "center", textDecoration: "none" } },
    React.createElement("img", { src: "assets/mathmentor-logo.png", alt: "MathMentor \u2014 learn, solve, succeed", style: { height: 62, width: "auto", display: "block" } })
  );
}

function MMShell({ title, intro, children, footer }) {
  return React.createElement("div", { style: mmShellCss.page },
    React.createElement("header", { style: { padding: "22px 24px", display: "flex", justifyContent: "center" } }, React.createElement(MMBrand)),
    React.createElement("main", { style: mmShellCss.main },
      React.createElement("div", { style: mmShellCss.col },
        React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } },
          React.createElement("h1", { style: { margin: 0, fontSize: 30, fontWeight: 700, letterSpacing: "-0.9px", color: "var(--ink-95)" } }, title),
          intro ? React.createElement("p", { style: { margin: 0, fontSize: 15, lineHeight: 1.5, color: "var(--ink-secondary)", textWrap: "pretty" } }, intro) : null
        ),
        React.createElement(Card, { variant: "elevated", style: { padding: 24 } }, children),
        footer ? React.createElement("div", { style: { fontSize: 14, color: "var(--ink-secondary)", textAlign: "center" } }, footer) : null
      )
    )
  );
}

/* A labelled field row. Wraps the design system Input at full width. */
function MMField({ label, hint, required, ...rest }) {
  return React.createElement("div", null,
    React.createElement(Input, Object.assign({ label: required ? label : label + " (optional)", hint, style: { width: "100%", boxSizing: "border-box", padding: "10px", fontSize: 15, height: 44 } }, rest))
  );
}

/* Native select, styled to match the Input exactly (tight 4px corners). */
function MMSelect({ label, value, onChange, options, placeholder, required, name }) {
  const id = "mm-" + (name || label).replace(/\s+/g, "-").toLowerCase();
  return React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 6, justifyContent: "flex-end" } },
    React.createElement("label", { htmlFor: id, style: { fontSize: "var(--body-sm-size)", fontWeight: 500, color: "var(--ink-secondary)" } }, required ? label : label + " (optional)"),
    React.createElement("select", {
      id, name, value, onChange,
      style: { fontFamily: "var(--font-sans)", fontSize: 15, color: value ? "var(--ink-95)" : "var(--ink-faint)", background: "var(--surface)", border: "1px solid var(--field-border)", borderRadius: "var(--rounded-xs)", padding: "10px 8px", outline: "none", width: "100%", boxSizing: "border-box", height: 44 },
      onFocus: e => { e.currentTarget.style.boxShadow = "var(--shadow-1)"; e.currentTarget.style.borderColor = "var(--primary)"; },
      onBlur: e => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--field-border)"; }
    },
      React.createElement("option", { value: "" }, placeholder || "Select\u2026"),
      options.map(o => React.createElement("option", { key: o.value, value: o.value }, o.label))
    )
  );
}

function MMCheckbox({ label, checked, onChange }) {
  return React.createElement("label", { style: { display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5, color: "var(--ink-secondary)", cursor: "pointer" } },
    React.createElement("input", { type: "checkbox", checked, onChange, style: { marginTop: 3, width: 16, height: 16, accentColor: "var(--primary)", flex: "0 0 auto" } }),
    React.createElement("span", { style: { textWrap: "pretty" } }, label)
  );
}

/* Inline message. tone: 'error' | 'ok' | 'info' */
function MMNotice({ tone = "info", children }) {
  if (!children) return null;
  const tones = {
    error: { border: "var(--accent-pink, #d4326f)", ink: "var(--ink-95)" },
    ok: { border: "var(--accent-green, #2f9e44)", ink: "var(--ink-95)" },
    info: { border: "var(--hairline)", ink: "var(--ink-secondary)" }
  };
  const t = tones[tone] || tones.info;
  return React.createElement("div", { role: tone === "error" ? "alert" : "status", style: { background: "var(--canvas-soft)", border: "1px solid " + t.border, borderRadius: "var(--rounded-md)", padding: "10px 12px", fontSize: 14, lineHeight: 1.5, color: t.ink, textWrap: "pretty" } }, children);
}

/* Small "Step 1 of 2" marker built from the design system Badge. */
function MMSteps({ step, total, labels }) {
  return React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 20 } },
    React.createElement(Badge, null, "Step " + step + " of " + total),
    React.createElement("span", { style: { fontSize: 14, color: "var(--ink-secondary)" } }, labels[step - 1])
  );
}

function MMTextLink({ href, children, onClick }) {
  return React.createElement("a", { href: href || "#", onClick, style: { color: "var(--primary)", textDecoration: "none", fontWeight: 500 } }, children);
}

/* Shown instead of a form when config.js still holds the placeholder key. */
function MMNotConfigured() {
  return React.createElement(MMShell, { title: "Almost there", intro: "The screens are built, but they are not yet connected to your Supabase project." },
    React.createElement(MMNotice, { tone: "info" },
      React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } },
        React.createElement("strong", { style: { color: "var(--ink-95)" } }, "Add your publishable key"),
        React.createElement("span", null,
          "In Supabase: Project Settings \u2192 API Keys \u2192 copy the ",
          React.createElement("code", null, "Publishable key"),
          " (it starts sb_publishable_), then paste it into lms/config.js in place of PASTE_YOUR_PUBLISHABLE_KEY_HERE."),
        React.createElement("span", { style: { color: "var(--ink-faint)" } }, "Never paste a secret key here. It bypasses every security rule.")
      )
    )
  );
}

Object.assign(window, { MMShell, MMBrand, MMField, MMSelect, MMCheckbox, MMNotice, MMSteps, MMTextLink, MMNotConfigured, mmShellCss });