// login.jsx — Login / sign-up screen

function LoginPage() {
  const [mode, setMode]       = React.useState("login"); // "login" | "signup"
  const [email, setEmail]     = React.useState("");
  const [password, setPass]   = React.useState("");
  const [error, setError]     = React.useState("");
  const [info, setInfo]       = React.useState("");
  const [busy, setBusy]       = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError(""); setInfo(""); setBusy(true);
    try {
      if (mode === "login") {
        const { error } = await sb.auth.signInWithPassword({ email, password });
        if (error) setError(error.message);
      } else {
        const { error } = await sb.auth.signUp({ email, password });
        if (error) setError(error.message);
        else setInfo("Account created! Check your email to confirm, then sign in.");
      }
    } finally {
      setBusy(false);
    }
  };

  const toggle = () => { setMode(m => m === "login" ? "signup" : "login"); setError(""); setInfo(""); };

  return (
    <div className="login-shell">
      <div className="login-card">
        <div className="sb-mark" style={{margin:"0 auto 18px"}}>N</div>
        <h1 style={{textAlign:"center", fontSize:22, margin:"0 0 6px"}}>Nexus Booking</h1>
        <p className="login-sub">{mode === "login" ? "Sign in to your dashboard" : "Create your account"}</p>

        <form className="login-form" onSubmit={submit}>
          <div className="bk-field">
            <label>Email</label>
            <input className="bk-input" type="email" value={email}
              onChange={e => setEmail(e.target.value)} required placeholder="you@example.com"/>
          </div>
          <div className="bk-field">
            <label>Password</label>
            <input className="bk-input" type="password" value={password}
              onChange={e => setPass(e.target.value)} required placeholder="••••••••" minLength={6}/>
          </div>

          {error && <div className="login-msg is-error">{error}</div>}
          {info  && <div className="login-msg is-info">{info}</div>}

          <button className="btn primary" style={{width:"100%",marginTop:4}} type="submit" disabled={busy}>
            {busy ? "Please wait…" : mode === "login" ? "Sign in" : "Create account"}
          </button>
        </form>

        <button className="login-toggle" onClick={toggle}>
          {mode === "login" ? "No account yet? Sign up" : "Already have an account? Sign in"}
        </button>
      </div>
    </div>
  );
}