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

function RegisterPage({ onLogin }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    if (password !== confirm) {
      setError("Passwords do not match");
      return;
    }
    if (password.length < 8) {
      setError("Password must be at least 8 characters");
      return;
    }
    setLoading(true);
    try {
      const res = await window.api.register(name, email, password);
      if (res && res.access_token) {
        window.Auth.setToken(res.access_token);
        const user = await window.api.me();
        if (user) window.Auth.setUser(user);
        onLogin();
      }
    } catch (err) {
      setError(err.message || "Registration failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <div style={{ position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--font-mono)", fontWeight: 700, letterSpacing: ".18em", fontSize: 16, marginBottom: 8 }}>
            <img className="brand-mark" src="/logo.png" alt="AURA" />
            AURA
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-3)", letterSpacing: ".2em", textTransform: "uppercase" }}>XAUUSD Scalping Platform</div>
        </div>
        <div className="auth-card">
          <h2>Create your account</h2>
          <p className="sub">Free forever — no credit card required</p>

          <button className="google-btn" onClick={() => { window.location.href = window.Auth.googleLoginUrl(); }}>
            <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.36-8.16 2.36-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
            Sign up with Google
          </button>

          <div className="auth-divider">or</div>

          <form onSubmit={submit}>
            {error && <div className="auth-error">{error}</div>}
            <div className="field">
              <label>Full Name</label>
              <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" required autoFocus />
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required />
            </div>
            <div className="field-row">
              <div className="field" style={{ marginBottom: 0 }}>
                <label>Password</label>
                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Min. 8 chars" required />
              </div>
              <div className="field" style={{ marginBottom: 0 }}>
                <label>Confirm</label>
                <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Repeat password" required />
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <button type="submit" className="btn primary" style={{ width: "100%", justifyContent: "center", padding: 10 }} disabled={loading}>
                {loading ? "Creating account…" : "Get Started Free"}
              </button>
            </div>
          </form>

          <div className="auth-footer">
            Already have an account? <a href="#" onClick={(e) => { e.preventDefault(); window._setAuthPage("login"); }}>Sign in</a>
          </div>
        </div>
        <div style={{ textAlign: "center", marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-3)" }}>
          By signing up you agree to our Terms of Service and Risk Disclosure.
        </div>
      </div>
    </div>
  );
}

window.RegisterPage = RegisterPage;