// login.jsx — customer login for the booking portal: email + one-time code (demo).
const { useState: useStateLg } = React;

function LoginScreen({ onLogin }) {
  const [step, setStep] = useStateLg("email");
  const [email, setEmail] = useStateLg("");
  const [sent, setSent] = useStateLg("");
  const [code, setCode] = useStateLg("");
  const [err, setErr] = useStateLg("");
  const validEmail = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim());

  function sendCode() {
    if (!validEmail) return;
    setSent(String(Math.floor(100000 + Math.random() * 900000)));
    setStep("code"); setCode(""); setErr("");
  }
  function verify() {
    if (code.trim() === sent) onLogin(email.trim().toLowerCase());
    else setErr("That code doesn't match — check the 6 digits and try again.");
  }

  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-page)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ width: "100%", maxWidth: 420 }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 26 }}><Wordmark size={30} /></div>
        <Card pad={28}>
          {step === "email" ? (
            <div className="fade-up">
              <h1 style={{ margin: 0, fontSize: 21, fontWeight: 700, letterSpacing: "-0.5px", color: "var(--fg-strong)" }}>Sign in</h1>
              <p style={{ margin: "8px 0 20px", fontSize: 13.5, color: "var(--fg-mute)", lineHeight: 1.5 }}>Enter your email address and we'll send you a one-time code — no password needed.</p>
              <Field label="Email address">
                <TextInput value={email} onChange={setEmail} placeholder="you@example.com" type="email" onKeyDown={e => { if (e.key === "Enter") sendCode(); }} />
              </Field>
              <Button variant="primary" full size="lg" iconRight="arrow-right" disabled={!validEmail} onClick={sendCode} style={{ marginTop: 18 }}>Email me a code</Button>
            </div>
          ) : (
            <div className="fade-up">
              <h1 style={{ margin: 0, fontSize: 21, fontWeight: 700, letterSpacing: "-0.5px", color: "var(--fg-strong)" }}>Enter your code</h1>
              <p style={{ margin: "8px 0 16px", fontSize: 13.5, color: "var(--fg-mute)", lineHeight: 1.5 }}>We've sent a 6-digit code to <strong style={{ color: "var(--fg-strong)" }}>{email.trim()}</strong>.</p>
              <div style={{ display: "flex", gap: 9, alignItems: "flex-start", padding: "10px 13px", background: "var(--accent-soft)", borderRadius: "var(--r-sm)", marginBottom: 16 }}>
                <Icon name="mail" size={15} color="var(--accent-700)" style={{ flex: "none", marginTop: 1 }} />
                <span style={{ fontSize: 12.5, color: "var(--fg-body)", lineHeight: 1.45 }}>Demo — the emailed code is <strong style={{ fontFamily: "var(--font-mono)", letterSpacing: "1px" }}>{sent}</strong></span>
              </div>
              <Field label="6-digit code">
                <TextInput value={code} onChange={v => { setCode(v.replace(/\D/g, "").slice(0, 6)); setErr(""); }} placeholder="000000" mono
                  onKeyDown={e => { if (e.key === "Enter") verify(); }}
                  style={{ fontSize: 20, letterSpacing: "8px", textAlign: "center", fontWeight: 700 }} />
              </Field>
              {err && <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 10, fontSize: 12.5, color: "var(--danger)" }}><Icon name="alert-triangle" size={14} /> {err}</div>}
              <Button variant="primary" full size="lg" icon="check-circle" disabled={code.length !== 6} onClick={verify} style={{ marginTop: 16 }}>Sign in</Button>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14 }}>
                <button onClick={() => { setStep("email"); setErr(""); }} style={{ background: "none", border: "none", padding: 0, fontSize: 12.5, color: "var(--fg-mute)", cursor: "pointer" }}>Use a different email</button>
                <button onClick={sendCode} style={{ background: "none", border: "none", padding: 0, fontSize: 12.5, fontWeight: 600, color: "var(--brand)", cursor: "pointer" }}>Resend code</button>
              </div>
            </div>
          )}
        </Card>
        <div style={{ textAlign: "center", fontSize: 11.5, color: "var(--fg-faint)", marginTop: 16 }}>Need help signing in? Call 1300 131 150</div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });