export default function LoginFormBlock({ block, isSelected }) {
    const s = block.settings || {};

    const formStyle = {
        background: s.formBackground || '#ffffff',
        borderRadius: `${s.formBorderRadius || 4}px`,
        padding: `${s.formPadding || 26}px`,
        width: `${s.formWidth || 360}px`,
        maxWidth: '100%',
        border: s.formBorderEnabled ? `${s.formBorderWidth || 1}px solid ${s.formBorderColor || '#e0e0e0'}` : 'none',
        boxShadow: s.formBoxShadow === 'soft' ? '0 2px 8px rgba(0,0,0,0.08)' :
            s.formBoxShadow === 'medium' ? '0 4px 16px rgba(0,0,0,0.12)' :
                s.formBoxShadow === 'strong' ? '0 8px 32px rgba(0,0,0,0.18)' : 'none',
        margin: `${s.marginTop ?? 0}px auto ${s.marginBottom ?? 20}px`,
    };

    const fieldStyle = (prefix) => ({
        background: s[`${prefix}BackgroundColor`] || '#f9f9f9',
        border: `1px solid ${s[`${prefix}BorderColor`] || '#e0e0e0'}`,
        borderRadius: `${s[`${prefix}BorderRadius`] || 4}px`,
        color: s[`${prefix}TextColor`] || '#333',
        height: `${s[`${prefix}Height`] || 44}px`,
        fontSize: `${s[`${prefix}FontSize`] || 15}px`,
        width: '100%',
        padding: '0 12px',
        boxSizing: 'border-box',
        display: 'block',
        marginBottom: '4px',
        outline: 'none',
    });

    const btnStyle = {
        background: s.submitBackgroundColor || '#2271b1',
        color: s.submitTextColor || '#fff',
        borderRadius: `${s.submitBorderRadius || 4}px`,
        height: `${s.submitHeight || 44}px`,
        fontSize: `${s.submitFontSize || 16}px`,
        fontWeight: s.submitFontWeight || '600',
        width: s.submitFullWidth !== false ? '100%' : 'auto',
        border: 'none',
        cursor: 'pointer',
        padding: '0 24px',
    };

    // Calculate a good text color based on the form background or input text color
    const labelColor = s.labelColor || s.usernameTextColor || '#1e293b';
    const rememberColor = s.rememberMeColor || s.usernameTextColor || '#50575e';

    return (
        <div id="loginform" className="lpcd-block-loginform" style={formStyle}>
            {s.usernameShowLabel !== false && (
                <label className="lpcd-form-label" style={{ display: 'block', marginBottom: '4px', fontSize: '13px', fontWeight: '600', color: labelColor }}>
                    {s.usernameLabel || 'Username or Email Address'}
                </label>
            )}
            <input
                type="text"
                style={fieldStyle('username')}
                placeholder={s.usernamePlaceholder || ''}
                readOnly
            />

            <div style={{ height: '16px' }} />

            {s.passwordShowLabel !== false && (
                <label className="lpcd-form-label" style={{ display: 'block', marginBottom: '4px', fontSize: '13px', fontWeight: '600', color: labelColor }}>
                    {s.passwordLabel || 'Password'}
                </label>
            )}
            <input
                type="password"
                style={fieldStyle('password')}
                placeholder={s.passwordPlaceholder || ''}
                readOnly
            />

            <div style={{ height: '16px' }} />

            {s.showRememberMe !== false && (
                <p className="forgetmenot" style={{ margin: 0, padding: 0 }}>
                    <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '13px', color: rememberColor, marginBottom: '12px' }}>
                        <input type="checkbox" readOnly />
                        {s.rememberMeText || 'Remember Me'}
                    </label>
                </p>
            )}

            <p className="submit" style={{ margin: 0, padding: 0 }}>
                <input type="submit" style={btnStyle} value={s.submitText || 'Log In'} readOnly />
            </p>

            {s.showLostPassword !== false && (
                <p className="lpcd-lost-password" style={{ textAlign: 'center', marginTop: '12px', margin: 0, padding: 0 }}>
                    <a style={{ color: s.lostPasswordColor || '#2271b1', fontSize: '13px', textDecoration: 'none' }}>
                        {s.lostPasswordText || 'Lost your password?'}
                    </a>
                </p>
            )}
        </div>
    );
}
