// pages/auth.jsx — login + signup

const { useState: useS_A } = React;

function LoginPage({ go, setTweak }) {
  const [email, setEmail] = useS_A("");
  const [pwd,   setPwd]   = useS_A("");
  const [err,   setErr]   = useS_A("");

  const submit = (e) => {
    e.preventDefault();
    if (!email || !pwd) return setErr("Please fill both fields.");
    setErr("");
    setTweak("authState", "logged_in");
    go("/dashboard");
  };

  return (
    <div className="auth-shell">
      <AuthArt
        title="Welcome back."
        sub="Pick up where you left off — your next live class is waiting in the dashboard."
        stat={{ top: "1,400+", bottom: "Recordings hosted" }}
      />
      <div className="auth-form-side">
        <div className="auth-form">
          <Brand onClick={() => go("/")} />
          <h2 style={{ marginTop: 40, fontSize: 36 }}>Log in</h2>
          <p className="muted" style={{ marginTop: 8 }}>Continue to your dashboard.</p>

          <form className="col gap-16" style={{ marginTop: 32 }} onSubmit={submit}>
            <div className="field">
              <label className="field-label">Email</label>
              <input className="input" type="email" autoFocus placeholder="you@email.com" value={email} onChange={e => setEmail(e.target.value)} />
            </div>
            <div className="field">
              <div className="row between center">
                <label className="field-label">Password</label>
                <a href="#" style={{ fontSize: 12, color: "var(--blue)", textDecoration: "none" }}>Forgot?</a>
              </div>
              <input className="input" type="password" placeholder="••••••••" value={pwd} onChange={e => setPwd(e.target.value)} />
            </div>
            {err && <div style={{ color: "var(--red)", fontSize: 13 }}>{err}</div>}
            <button type="submit" className="btn btn-primary btn-lg btn-block" style={{ marginTop: 8 }}>Log in</button>
          </form>

          <div style={{ marginTop: 24, fontSize: 14, color: "var(--ink-2)", textAlign: "center" }}>
            New here? <button onClick={() => go("/signup")} style={{ background: "transparent", border: 0, color: "var(--blue)", fontWeight: 600, cursor: "pointer", fontFamily: "inherit", fontSize: 14, padding: 0 }}>Create an account</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function SignupPage({ go, setTweak }) {
  const [step, setStep] = useS_A(1); // 1 = details, 2 = razorpay popup
  // Course is the only choice now — ICSE Class 10 or ISC Class 12. Board is implied.
  const [form, setForm] = useS_A({ name: "", email: "", phone: "", course: "isc12", pwd: "" });
  const upd = (k, v) => setForm(p => ({ ...p, [k]: v }));

  const submitDetails = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.phone || !form.pwd) return;
    setStep(2);
  };

  return (
    <div className="auth-shell">
      <AuthArt
        title="Join the Aug 2025 batch."
        sub="Live classes every Mon & Thu (or Tue & Fri). Recordings the next day. Doubts answered weekly."
        stat={{ top: "8", bottom: "Seats remaining" }}
      />
      <div className="auth-form-side">
        <div className="auth-form">
          <Brand onClick={() => go("/")} />
          {step === 1 && <>
            <h2 style={{ marginTop: 40, fontSize: 36 }}>Create account</h2>
            <p className="muted" style={{ marginTop: 8 }}>Step 1 of 2 — your details.</p>

            <form className="col gap-12" style={{ marginTop: 28 }} onSubmit={submitDetails}>
              <div className="field">
                <label className="field-label">Full name</label>
                <input className="input" placeholder="Ananya Krishnan" value={form.name} onChange={e => upd("name", e.target.value)} />
              </div>
              <div className="field">
                <label className="field-label">Email</label>
                <input className="input" type="email" placeholder="you@email.com" value={form.email} onChange={e => upd("email", e.target.value)} />
              </div>
              <div className="field">
                <label className="field-label">Phone</label>
                <input className="input" placeholder="+91 98765 43210" value={form.phone} onChange={e => upd("phone", e.target.value)} />
              </div>
              <div className="field">
                <label className="field-label">Course</label>
                <select className="select" value={form.course} onChange={e => upd("course", e.target.value)}>
                  <option value="icse10">Class 10 (ICSE) — Computer Applications</option>
                  <option value="isc12">Class 12 (ISC) — Computer Science</option>
                </select>
              </div>
              <div className="field">
                <label className="field-label">Password</label>
                <input className="input" type="password" placeholder="8+ characters" value={form.pwd} onChange={e => upd("pwd", e.target.value)} />
              </div>

              <button type="submit" className="btn btn-primary btn-lg btn-block" style={{ marginTop: 16 }}>
                Continue to payment — ₹1800 <Icon name="arrow-right" size={16}/>
              </button>
              <div style={{ fontSize: 12, color: "var(--ink-3)", textAlign: "center", marginTop: 8 }}>
                Secure payment via Razorpay. We never store your card details.
              </div>
            </form>

            <div style={{ marginTop: 24, fontSize: 14, color: "var(--ink-2)", textAlign: "center" }}>
              Already enrolled? <button onClick={() => go("/login")} style={{ background: "transparent", border: 0, color: "var(--blue)", fontWeight: 600, cursor: "pointer", fontFamily: "inherit", fontSize: 14, padding: 0 }}>Log in</button>
            </div>
          </>}

          {step === 2 && <RazorpayMock go={go} setTweak={setTweak} form={form} onBack={() => setStep(1)} />}
        </div>
      </div>
    </div>
  );
}

function RazorpayMock({ go, setTweak, form, onBack }) {
  const [paying, setPaying] = useS_A(false);

  const finish = (success) => {
    setPaying(true);
    setTimeout(() => {
      if (success) {
        setTweak({ authState: "logged_in", enrollment: "enrolled" });
        go("/payment/success");
      } else {
        go("/payment/failed");
      }
    }, 1100);
  };

  return (
    <div style={{ marginTop: 32 }}>
      <button onClick={onBack} className="btn btn-ghost btn-sm" style={{ marginBottom: 16, padding: "0 8px", height: 28 }}>
        <Icon name="arrow-left" size={14}/> Back
      </button>
      <h2 style={{ fontSize: 32 }}>Razorpay checkout</h2>
      <p className="muted" style={{ marginTop: 8 }}>Step 2 of 2 — confirm payment.</p>

      <div className="card" style={{ marginTop: 24, padding: 0, overflow: "hidden" }}>
        <div style={{ background: "var(--paper)", padding: 16, borderBottom: "1px solid var(--line)" }}>
          <div className="row between center">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600 }}>Razorpay</div>
            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Order #rzp_QF{Math.random().toString(36).slice(2,8).toUpperCase()}</div>
          </div>
        </div>
        <div style={{ padding: 24 }}>
          <div className="row between center" style={{ paddingBottom: 16, borderBottom: "1px solid var(--line-2)" }}>
            <div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Pay to</div>
              <div style={{ fontWeight: 600 }}>Computer-tution</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Amount</div>
              <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 24 }}>₹1,800</div>
            </div>
          </div>
          <div style={{ marginTop: 16 }}>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 12 }}>Payment method</div>
            {[
              { id: "upi",  label: "UPI", sub: "Google Pay, PhonePe, Paytm, BHIM" },
              { id: "card", label: "Card", sub: "Credit / Debit / Prepaid" },
              { id: "nb",   label: "Net Banking", sub: "All major banks" },
            ].map((m, i) => (
              <div key={m.id} className="row center between" style={{ padding: "14px 0", borderBottom: i < 2 ? "1px solid var(--line-2)" : "none" }}>
                <div className="row center gap-12">
                  <span style={{ width: 18, height: 18, borderRadius: 9, border: "2px solid " + (i === 0 ? "var(--blue)" : "var(--line)"), display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    {i === 0 && <span style={{ width: 8, height: 8, borderRadius: 4, background: "var(--blue)" }}/>}
                  </span>
                  <div>
                    <div style={{ fontWeight: 500 }}>{m.label}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{m.sub}</div>
                  </div>
                </div>
                <Icon name="chevron-right" size={14}/>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: 16, background: "var(--paper)", borderTop: "1px solid var(--line)" }}>
          <button className="btn btn-primary btn-block btn-lg" disabled={paying} onClick={() => finish(true)}>
            {paying ? "Processing…" : "Pay ₹1,800"}
          </button>
          <div className="row between" style={{ marginTop: 12 }}>
            <button onClick={() => finish(false)} style={{ background: "transparent", border: 0, color: "var(--ink-3)", fontFamily: "inherit", fontSize: 12, cursor: "pointer", padding: 0 }}>Simulate failure</button>
            <span style={{ fontSize: 11, color: "var(--ink-3)" }}>🔒 Secured by Razorpay</span>
          </div>
        </div>
      </div>
    </div>
  );
}

const AuthArt = ({ title, sub, stat }) => (
  <div className="auth-art">
    <Brand onClick={() => (window.location.hash = "/")} />
    <div style={{ position: "relative", zIndex: 1 }}>
      <h2 style={{ color: "#fff", fontSize: 48, lineHeight: 1.1 }}>{title}</h2>
      <p style={{ color: "rgba(255,255,255,.75)", fontSize: 18, marginTop: 16, maxWidth: 380 }}>{sub}</p>
      <div style={{ marginTop: 48, padding: 24, background: "rgba(255,255,255,.1)", borderRadius: 16, backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,.15)", maxWidth: 320 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 48, color: "#fff", fontWeight: 600 }}>{stat.top}</div>
        <div style={{ fontSize: 13, color: "rgba(255,255,255,.7)", marginTop: 4 }}>{stat.bottom}</div>
      </div>
    </div>
    <div style={{ fontSize: 13, color: "rgba(255,255,255,.5)" }}>© 2025 Computer-tution · Taught by M L Revathi</div>
    {/* decorative */}
    <div aria-hidden style={{ position: "absolute", inset: 0, opacity: 0.12, backgroundImage: "linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)", backgroundSize: "48px 48px" }}/>
    <div aria-hidden style={{ position: "absolute", right: -100, bottom: -100, width: 400, height: 400, borderRadius: "50%", background: "radial-gradient(circle, rgba(255,255,255,.15), transparent 70%)" }}/>
  </div>
);

Object.assign(window, { LoginPage, SignupPage });