/**
 * Supera Glia - Tela de Login
 * @module components/LoginScreen
 */

(function() {
    'use strict';
    
    SuperaGlia.initLoginScreen = function() {
        const { useState } = SuperaGlia.hooks;
        const { useAuth } = SuperaGlia;

        /**
         * Componente de Login
         */
        SuperaGlia.LoginScreen = () => {
            const { login } = useAuth();
            const [email, setEmail] = useState('');
            const [password, setPassword] = useState('');
            const [error, setError] = useState('');
            const [loading, setLoading] = useState(false);

            const handleSubmit = async (e) => {
                e.preventDefault();
                setLoading(true);
                setError('');
                const result = await login(email, password);
                if (!result.success) setError(result.error);
                setLoading(false);
            };

            return React.createElement('div', { className: 'min-h-screen login-bg flex items-center justify-center p-4' },
                React.createElement('div', { className: 'w-full max-w-md card-animate' },
                    React.createElement('div', { className: 'bg-white rounded-3xl shadow-2xl p-8' },
                        // Header com Logo
                        React.createElement('div', { className: 'text-center mb-8' },
                            React.createElement('div', { className: 'flex justify-center mb-4' },
                                React.createElement('div', { className: 'w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center shadow-lg' },
                                    React.createElement('span', { className: 'text-3xl font-bold text-white' }, 'S')
                                )
                            ),
                            React.createElement('h1', { className: 'text-2xl font-bold text-gray-900' }, 'Supera Glia'),
                            React.createElement('p', { className: 'text-sm text-gray-500 mt-1' }, 'Sistema de Gestão Pedagógica')
                        ),
                        
                        // Formulário
                        React.createElement('form', { onSubmit: handleSubmit, className: 'space-y-5' },
                            // Campo E-mail
                            React.createElement('div', null,
                                React.createElement('label', { className: 'block text-sm font-semibold text-gray-600 mb-2' }, 'E-mail'),
                                React.createElement('input', { 
                                    type: 'email', 
                                    placeholder: 'seu@email.com', 
                                    value: email, 
                                    onChange: e => setEmail(e.target.value), 
                                    className: 'w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl text-base transition-all', 
                                    required: true,
                                    autoComplete: 'email'
                                })
                            ),
                            
                            // Campo Senha
                            React.createElement('div', null,
                                React.createElement('label', { className: 'block text-sm font-semibold text-gray-600 mb-2' }, 'Senha'),
                                React.createElement('input', { 
                                    type: 'password', 
                                    placeholder: '••••••••', 
                                    value: password, 
                                    onChange: e => setPassword(e.target.value), 
                                    className: 'w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl text-base transition-all', 
                                    required: true,
                                    autoComplete: 'current-password'
                                })
                            ),
                            
                            // Mensagem de erro
                            error && React.createElement('div', { className: 'p-3 bg-red-50 border border-red-200 rounded-xl' },
                                React.createElement('p', { className: 'text-red-600 text-sm text-center font-medium' }, error)
                            ),
                            
                            // Botão Submit
                            React.createElement('button', {
                                type: 'submit',
                                disabled: loading,
                                className: 'w-full mt-6 py-4 bg-orange-500 hover:bg-orange-600 text-white rounded-xl font-bold text-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed'
                            }, loading ? 'Entrando...' : 'Entrar')
                        ),
                        
                        // Footer
                        React.createElement('p', { className: 'text-center text-xs text-gray-400 mt-6' }, '© 2026 Supera São Bento')
                    )
                )
            );
        };
    };
})();