const { useState } = React;

function Login({ onLogin }) {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        setError("");
        
        if (username === "machadoadmin" && password === "Machadocarservice123") {
            onLogin();
        } else {
            setError("Usuário ou senha incorretos.");
        }
    };

    return (
        <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            minHeight: '100vh', background: 'var(--bg-color)', color: 'var(--text-primary)',
            fontFamily: 'var(--font-sans)'
        }}>
            <div style={{
                background: 'var(--surface)', padding: '40px', borderRadius: 'var(--radius)',
                border: '1px solid var(--border)', boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
                width: '100%', maxWidth: '400px'
            }}>
                <div style={{ textAlign: 'center', marginBottom: '32px' }}>
                    <div style={{ 
                        width: '60px', height: '60px', background: 'var(--accent)', 
                        borderRadius: '12px', margin: '0 auto 16px', display: 'flex',
                        alignItems: 'center', justifyContent: 'center', fontSize: '24px'
                    }}>
                        🔧
                    </div>
                    <h1 style={{ fontSize: '1.5rem', margin: '0 0 8px 0' }}>Machado Car Service</h1>
                    <p style={{ color: 'var(--text-secondary)', margin: 0, fontSize: '0.9rem' }}>
                        Acesso Restrito ao Sistema
                    </p>
                </div>

                {error && (
                    <div style={{
                        background: 'var(--red-glow)', color: 'var(--red)', border: '1px solid var(--red)',
                        padding: '12px', borderRadius: '4px', marginBottom: '20px', fontSize: '0.875rem',
                        textAlign: 'center'
                    }}>
                        {error}
                    </div>
                )}

                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <div className="input-group">
                        <label className="input-label">Usuário</label>
                        <input 
                            type="text" 
                            className="input" 
                            placeholder="Digite o usuário"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                        />
                    </div>
                    
                    <div className="input-group">
                        <label className="input-label">Senha</label>
                        <input 
                            type="password" 
                            className="input" 
                            placeholder="••••••••"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                        />
                    </div>

                    <button type="submit" className="btn btn-primary" style={{ marginTop: '8px', padding: '12px' }}>
                        Entrar no Sistema
                    </button>
                </form>
            </div>
        </div>
    );
}

window.Login = Login;