/* scope guard: file-scoped IIFE — see index.html */
(function () {
/* Stoic+ — Sign-in / authentication.
   Subscriber-only product: this is a sign-IN, not sign-up. No paywall.
   Only recognised Stoic+ members (active → app, lapsed → Renew wall) and the
   admin email may enter; unknown emails are rejected with an inline error.
   `onEnter` resolves to { ok, error } — App owns the actual entitlement gate. */

const { GlassButton } = window;

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function SignInScreen({ onEnter }) {
  const [email, setEmail] = React.useState("");
  const [error, setError] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const submit = (e) => {
    if (e) e.preventDefault();
    if (busy) return;
    const addr = email.trim().toLowerCase();
    if (!EMAIL_RE.test(addr)) { setError("Enter a valid email to continue."); return; }
    setError(""); setBusy(true);
    Promise.resolve(onEnter(addr)).then(
      (res) => { setBusy(false); if (res && res.ok === false) setError(res.error || "Sign-in failed."); },
      () => { setBusy(false); setError("Sign-in failed. Try again."); }
    );
  };

  return (
    <div className="screen" style={{ display: "flex", flexDirection: "column", minHeight: "100%", padding: "8px 4px 0" }}>
      {/* Brand, centered block */}
      <div style={{ margin: "auto 0", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 3, marginBottom: 30 }}>
          <img src="assets/stoic-wordmark-white.png" alt="STOIC" style={{ height: 22, display: "block" }} />
          <span style={{ fontSize: 22, fontWeight: 800, color: "var(--color-amber)", lineHeight: 1 }}>+</span>
        </div>

        <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1, margin: "0 0 12px", color: "var(--color-text)" }}>
          Welcome back.
        </h1>
        <p style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.5, color: "var(--color-text-muted)", margin: "0 0 28px", maxWidth: "32ch" }}>
          Sign in to pick up your streak. Your membership stays on this account.
        </p>

        <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <label className="glass glass-lit" style={{ display: "flex", alignItems: "center", gap: 12, borderRadius: 16, padding: "15px 16px" }}>
            <input
              type="email"
              value={email}
              onChange={(e) => { setEmail(e.target.value); if (error) setError(""); }}
              placeholder="you@email.com"
              autoComplete="email"
              inputMode="email"
              style={{ flex: 1, minWidth: 0, background: "transparent", border: "none", outline: "none", color: "var(--color-text)", fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 500 }}
            />
          </label>
          {error && <p style={{ margin: "-2px 2px 0", fontSize: 13, fontWeight: 500, color: "#E5736B" }}>{error}</p>}
          <GlassButton onClick={submit} icon={!busy}>{busy ? "Checking…" : "Enter"}</GlassButton>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { SignInScreen });
})();