const { useState, useRef } = React;

function Login({ onLogin, isLoggingIn, loginError }) {
    const [loginUsername, setLoginUsername] = useState('');
    const [loginPassword, setLoginPassword] = useState('');
    const passwordInputRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        onLogin(loginUsername, loginPassword);
    };

    return (
        <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            width: '100vw',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            zIndex: 9999
        }}>
            <div style={{
                background: 'white',
                padding: '40px',
                borderRadius: '15px',
                boxShadow: '0 10px 40px rgba(0,0,0,0.2)',
                width: '400px',
                maxWidth: '90%'
            }}>
                <h1 style={{
                    textAlign: 'center',
                    color: '#2c3e50',
                    marginBottom: '10px',
                    fontSize: '28px'
                }}>
                    🔐 CSPOS Нэвтрэх
                </h1>
                <form onSubmit={handleSubmit} style={{ marginTop: '24px' }}>
                    <div style={{ marginBottom: '20px' }}>
                        <label style={{
                            display: 'block',
                            marginBottom: '8px',
                            color: '#2c3e50',
                            fontWeight: 'bold'
                        }}>
                            Операторын код (opercode):
                        </label>
                        <input
                            type="text"
                            name="username"
                            autoComplete="username"
                            value={loginUsername}
                            onChange={(e) => setLoginUsername(e.target.value)}
                            onKeyPress={(e) => {
                                if (e.key === 'Enter') {
                                    e.preventDefault();
                                    if (passwordInputRef.current) {
                                        passwordInputRef.current.focus();
                                    }
                                }
                            }}
                            required
                            style={{
                                width: '100%',
                                padding: '12px',
                                border: '2px solid #e0e0e0',
                                borderRadius: '8px',
                                fontSize: '16px',
                                boxSizing: 'border-box'
                            }}
                            placeholder="Операторын код (opercode)"
                            autoFocus
                        />
                    </div>
                    <div style={{ marginBottom: '25px' }}>
                        <label style={{
                            display: 'block',
                            marginBottom: '8px',
                            color: '#2c3e50',
                            fontWeight: 'bold'
                        }}>
                            Нууц үг:
                        </label>
                        <input
                            ref={passwordInputRef}
                            type="password"
                            name="password"
                            autoComplete="current-password"
                            value={loginPassword}
                            onChange={(e) => setLoginPassword(e.target.value)}
                            required
                            style={{
                                width: '100%',
                                padding: '12px',
                                border: '2px solid #e0e0e0',
                                borderRadius: '8px',
                                fontSize: '16px',
                                boxSizing: 'border-box'
                            }}
                            placeholder="Нууц үг"
                        />
                    </div>
                    {loginError && (
                        <div style={{
                            padding: '10px',
                            background: '#f8d7da',
                            color: '#721c24',
                            borderRadius: '5px',
                            marginBottom: '20px',
                            fontSize: '14px'
                        }}>
                            {loginError}
                        </div>
                    )}
                    <button
                        type="submit"
                        disabled={isLoggingIn}
                        style={{
                            width: '100%',
                            padding: '15px',
                            background: isLoggingIn ? '#95a5a6' : '#667eea',
                            color: 'white',
                            border: 'none',
                            borderRadius: '8px',
                            fontSize: '16px',
                            fontWeight: 'bold',
                            cursor: isLoggingIn ? 'not-allowed' : 'pointer',
                            transition: 'background 0.3s'
                        }}
                    >
                        {isLoggingIn ? 'Нэвтэрч байна...' : 'Нэвтрэх'}
                    </button>
                </form>
            </div>
        </div>
    );
}

// Make available globally for browser
if (typeof window !== 'undefined') {
    window.Login = Login;
}