/* === Sign-in screen === */
function AuthScreen({ onDemo }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email || !password) return;
    setError(''); setBusy(true);
    const { error } = await supabaseClient.auth.signInWithPassword({ email, password });
    setBusy(false);
    if (error) setError(error.message);
  };

  return (
    <div className="auth-shell">
      <form className="auth-card" onSubmit={submit}>
        <div className="auth-brand">homebook</div>
        <div className="auth-sub">Sign in to your household</div>
        <div className="field">
          <span className="field-label">Email</span>
          <input className="input" type="email" autoComplete="email" autoFocus required
            value={email} onChange={e => setEmail(e.target.value)} />
        </div>
        <div className="field">
          <span className="field-label">Password</span>
          <input className="input" type="password" autoComplete="current-password" required
            value={password} onChange={e => setPassword(e.target.value)} />
        </div>
        {error && <div className="auth-error">{error}</div>}
        <button type="submit" className="btn primary" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }} disabled={busy}>
          {busy ? 'Signing in…' : 'Sign in'}
        </button>
        {onDemo && (
          <button type="button" className="auth-demo-link" onClick={onDemo}>
            View demo →
          </button>
        )}
      </form>
    </div>
  );
}

Object.assign(window, { AuthScreen });