const Auth = ({ onNav }) => {
  const [mode, setMode] = React.useState('signin');
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [remember, setRemember] = React.useState(true);

  const submit = (e) => { e.preventDefault(); onNav('dashboard'); };

  return (
    <div className="auth-wrap">
      <div className="hero-bg" />
      <div className="hero-bg-grid" />

      <div style={{position: 'absolute', top: 24, left: 24, zIndex: 2}}>
        <Logo onClick={() => onNav('landing')} />
      </div>

      <div className="auth-card">
        <h2 className="auth-h1">{mode === 'signin' ? 'Welcome back' : 'Create your account'}</h2>
        <p className="auth-sub">{mode === 'signin' ? 'Sign in to your Arcrun workspace.' : 'Start building AI workflows in minutes.'}</p>

        <div className="tabs">
          <button className={mode === 'signin' ? 'active' : ''} onClick={() => setMode('signin')}>Sign in</button>
          <button className={mode === 'signup' ? 'active' : ''} onClick={() => setMode('signup')}>Sign up</button>
        </div>

        <div className="oauth-row">
          <button className="oauth-btn github" onClick={() => onNav('dashboard')}>
            <Icon name="github" size={17} stroke={0} /> Continue with GitHub
          </button>
          <button className="oauth-btn google" onClick={() => onNav('dashboard')}>
            <Icon name="google" size={15} stroke={0} /> Continue with Google
          </button>
        </div>

        <div className="divider">or continue with email</div>

        <form onSubmit={submit}>
          {mode === 'signup' && (
            <div className="field">
              <label>Full name</label>
              <input className="input" type="text" placeholder="Maya Rivera" />
            </div>
          )}
          <div className="field">
            <label>Work email</label>
            <input className="input" type="email" placeholder="you@company.com" value={email} onChange={e => setEmail(e.target.value)} />
          </div>
          <div className="field">
            <div className="field-row">
              <label>Password</label>
              {mode === 'signin' && <span className="link">Forgot password?</span>}
            </div>
            <input className="input" type="password" placeholder="••••••••••" value={pw} onChange={e => setPw(e.target.value)} />
          </div>

          {mode === 'signin' && (
            <div style={{display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--text-dim)', marginBottom: 14}}>
              <div onClick={() => setRemember(!remember)}
                   style={{width: 15, height: 15, borderRadius: 4, border: '1px solid var(--line-2)',
                           background: remember ? 'var(--primary)' : 'transparent',
                           display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'}}>
                {remember && <Icon name="check" size={11} />}
              </div>
              <span onClick={() => setRemember(!remember)} style={{cursor: 'pointer'}}>Keep me signed in for 30 days</span>
            </div>
          )}

          <button className="btn btn-primary auth-submit btn-lg" type="submit">
            {mode === 'signin' ? 'Sign in' : 'Create account'} <Icon name="arrow_right" size={14} />
          </button>
        </form>

        {mode === 'signup' && (
          <p style={{fontSize: 11.5, color: 'var(--text-mute)', textAlign: 'center', marginTop: 14, lineHeight: 1.5}}>
            By signing up, you agree to our <span className="link" style={{fontSize: 11.5}}>Terms</span> and <span className="link" style={{fontSize: 11.5}}>Privacy Policy</span>.
          </p>
        )}

        <div className="auth-foot">
          {mode === 'signin'
            ? <>New to Arcrun? <span className="link" onClick={() => setMode('signup')}>Create an account</span></>
            : <>Already have an account? <span className="link" onClick={() => setMode('signin')}>Sign in</span></>}
        </div>
      </div>
    </div>
  );
};

window.Auth = Auth;